refactor: adjust main view design

Kanaries · Jun 27, 2023 · 2bf7607 · 2bf7607
1 parent f8a16b9
commit 2bf7607
Show file tree

Hide file tree

Showing 12 changed files with 243 additions and 180 deletions.
diff --git a/packages/rath-client/src/interfaces.ts b/packages/rath-client/src/interfaces.ts
@@ -1,7 +1,7 @@
 // define new interfaces here, global.ts is no longer maintained.
 import { AnyMark } from "vega-lite/build/src/mark";
 import { IAnalyticType, IFieldSummary, IInsightSpace, ISemanticType } from "visual-insights";
-import { IFilter } from '@kanaries/loa'
+import { IFilter, IPattern } from '@kanaries/loa'
 import { Aggregator } from "./global";
 import type { DateTimeInfoType } from "./dev/workers/engine/dateTimeExpand";
 
@@ -392,6 +392,11 @@ export type IDatasetData = {
  meta: IBackUpDataMeta;
 };
 
+export interface IVisView {
+ spec: IVegaSubset | null;
+ dataViewQuery: IPattern | null;
+}
+
 export interface ICreateDashboardPayload {
  datasourceId: string;
  workspaceName: string;

diff --git a/packages/rath-client/src/pages/megaAutomation/mainCanvas/index.tsx b/packages/rath-client/src/pages/megaAutomation/mainCanvas/index.tsx
@@ -10,20 +10,20 @@ import ResizeContainer from './resizeContainer';
 
 const MainCanvas: FC<{ handler?: Ref<IReactVegaHandler> }> = ({ handler }) => {
  const { megaAutoStore, ltsPipeLineStore, commonStore, editorStore } = useGlobalStore();
- const { mainViewSpec, dataSource, visualConfig, mainViewSpecSource } = megaAutoStore;
+ const { mainView, dataSource, visualConfig, mainViewSpecSource } = megaAutoStore;
  const { muteSpec } = editorStore;
  const { rendering } = ltsPipeLineStore;
- const spec = mainViewSpecSource === 'custom' ? muteSpec : mainViewSpec;
+ const spec = mainViewSpecSource === 'custom' ? muteSpec : mainView.spec;
  return (
  <div className="insight-viz">
  {rendering && (
  <LoadingLayer>
  <Spinner label="Rendering..." />
  </LoadingLayer>
  )}
- {mainViewSpec && (
+ {mainView.spec && (
  <ResizeContainer
- enableResize={visualConfig.resize === IResizeMode.control && !(mainViewSpec.encoding.column || mainViewSpec.encoding.row)}
+ enableResize={visualConfig.resize === IResizeMode.control && !(mainView.spec.encoding.column || mainView.spec.encoding.row)}
  >
  <VisErrorBoundary>
  <ReactVega ref={handler} dataSource={dataSource} spec={spec} actions={visualConfig.debug} config={commonStore.themeConfig} />

diff --git a/packages/rath-client/src/pages/megaAutomation/vizOperation/fieldContainer.tsx b/packages/rath-client/src/pages/megaAutomation/vizOperation/fieldContainer.tsx
@@ -13,7 +13,7 @@ const PillsContainer = styled.div`
 
 const FieldContainer: React.FC = (props) => {
  const { megaAutoStore } = useGlobalStore();
- const { mainViewPattern, fieldMetas } = megaAutoStore;
+ const { mainView, fieldMetas } = megaAutoStore;
 
  const appendFieldHandler = useCallback(
  (fid: string) => {
@@ -22,13 +22,13 @@ const FieldContainer: React.FC = (props) => {
  [megaAutoStore]
  );
 
- if (mainViewPattern === null) {
+ if (mainView.dataViewQuery === null) {
  return <div></div>;
  }
  return (
  <div>
  <PillsContainer>
- {mainViewPattern.fields
+ {mainView.dataViewQuery.fields
  .filter((f) => f.analyticType === 'dimension')
  .map((f) => {
  return (
@@ -44,7 +44,7 @@ const FieldContainer: React.FC = (props) => {
  })}
  </PillsContainer>
  <PillsContainer>
- {mainViewPattern.fields
+ {mainView.dataViewQuery.fields
  .filter((f) => f.analyticType === 'measure')
  .map((f, fIndex) => {
  return (

diff --git a/packages/rath-client/src/pages/megaAutomation/vizOperation/operationBar.tsx b/packages/rath-client/src/pages/megaAutomation/vizOperation/operationBar.tsx
@@ -13,25 +13,24 @@ interface OperationBarProps {
 }
 const OperationBar: React.FC<OperationBarProps> = ({ handler }) => {
  const { megaAutoStore, commonStore, collectionStore, painterStore, editorStore, semiAutoStore } = useGlobalStore();
- const { mainViewSpec, mainViewPattern } = megaAutoStore;
+ const { mainView } = megaAutoStore;
 
  const customizeAnalysis = useCallback(() => {
- if (mainViewSpec) {
- commonStore.visualAnalysisInGraphicWalker(mainViewSpec)
+ if (mainView.spec) {
+ commonStore.visualAnalysisInGraphicWalker(mainView.spec)
  }
- }, [mainViewSpec, commonStore])
+ }, [mainView.spec, commonStore])
 
  const analysisInPainter = useCallback(() => {
- if (mainViewSpec && mainViewPattern) {
- painterStore.analysisInPainter(mainViewSpec, mainViewPattern)
+ if (mainView.spec && mainView.dataViewQuery) {
+ painterStore.analysisInPainter(mainView.spec, mainView.dataViewQuery)
  }
- }, [mainViewSpec, mainViewPattern, painterStore])
+ }, [mainView.spec, mainView.dataViewQuery, painterStore])
 
- const viewExists = !(mainViewPattern === null || mainViewSpec === null);
  let starIconName = 'FavoriteStar';
- if (viewExists) {
- const viewFields = toJS(mainViewPattern.fields);
- const viewSpec = toJS(mainViewSpec);
+ if (mainView.dataViewQuery && mainView.spec) {
+ const viewFields = toJS(mainView.dataViewQuery.fields);
+ const viewSpec = toJS(mainView.spec);
  if (collectionStore.collectionContains(viewFields, viewSpec, IVisSpecType.vegaSubset)) {
  starIconName = 'FavoriteStarFill'
  }
@@ -55,8 +54,8 @@ const OperationBar: React.FC<OperationBarProps> = ({ handler }) => {
  text: intl.get('megaAuto.commandBar.editInEditor'),
  iconProps: { iconName: 'Edit' },
  onClick: () => {
- if (mainViewPattern && mainViewSpec) {
- editorStore.syncSpec(IVisSpecType.vegaSubset, mainViewSpec)
+ if (mainView.dataViewQuery && mainView.spec) {
+ editorStore.syncSpec(IVisSpecType.vegaSubset, mainView.spec)
  megaAutoStore.changeMainViewSpecSource()
  }
  }
@@ -84,8 +83,8 @@ const OperationBar: React.FC<OperationBarProps> = ({ handler }) => {
  text: intl.get('megaAuto.commandBar.associate'),
  iconProps: { iconName: 'Lightbulb' },
  onClick: () => {
- if (mainViewPattern !== null) {
- semiAutoStore.analysisInCopilot(toJS(mainViewPattern))
+ if (mainView.dataViewQuery !== null) {
+ semiAutoStore.analysisInCopilot(toJS(mainView.dataViewQuery))
  commonStore.setAppKey(PIVOT_KEYS.semiAuto);
  }
  }
@@ -95,8 +94,8 @@ const OperationBar: React.FC<OperationBarProps> = ({ handler }) => {
  text: intl.get('common.star'),
  iconProps: { iconName: starIconName },
  onClick: () => {
- if (mainViewPattern && mainViewSpec) {
- collectionStore.toggleCollectState(toJS(mainViewPattern.fields), toJS(mainViewSpec), IVisSpecType.vegaSubset)
+ if (mainView.dataViewQuery && mainView.spec) {
+ collectionStore.toggleCollectState(toJS(mainView.dataViewQuery.fields), toJS(mainView.spec), IVisSpecType.vegaSubset)
  }
  }
  },

diff --git a/packages/rath-client/src/pages/semiAutomation/focusZone/index.tsx b/packages/rath-client/src/pages/semiAutomation/focusZone/index.tsx
@@ -8,7 +8,6 @@ import ViewField from '../../megaAutomation/vizOperation/viewField';
 import FieldPlaceholder from '../../../components/fieldPill/fieldPlaceholder';
 import { MainViewContainer } from '../components';
 import FilterCreationPill from '../../../components/fieldPill/filterCreationPill';
-import Narrative from '../narrative';
 import EncodeCreationPill from '../../../components/fieldPill/encodeCreationPill';
 import EditorCore from '../../editor/core/index';
 import type { IReactVegaHandler } from '../../../components/react-vega';
@@ -19,34 +18,34 @@ const BUTTON_STYLE = { marginRight: '1em', marginTop: '1em' };
 
 const FocusZone: React.FC = () => {
  const { semiAutoStore, commonStore, collectionStore, painterStore, editorStore } = useGlobalStore();
- const { mainVizSetting, mainView, showMiniFloatView, mainViewSpec, fieldMetas, neighborKeys, mainViewSpecSource } = semiAutoStore;
+ const { mainView, showMiniFloatView, fieldMetas, neighborKeys, mainViewSpecSource } = semiAutoStore;
  const { muteSpec } = editorStore;
  const appendFieldHandler = useCallback(
  (fid: string) => {
- if (mainView === null) {
+ if (mainView.dataViewQuery === null) {
  semiAutoStore.initMainViewWithSingleField(fid);
  } else {
  semiAutoStore.addMainViewField(fid);
  }
  },
- [semiAutoStore, mainView]
+ [semiAutoStore, mainView.dataViewQuery]
  );
 
  const editChart = useCallback(() => {
- if (mainViewSpec) {
- commonStore.visualAnalysisInGraphicWalker(mainViewSpec);
+ if (mainView.spec) {
+ commonStore.visualAnalysisInGraphicWalker(mainView.spec);
  }
- }, [mainViewSpec, commonStore]);
+ }, [mainView.spec, commonStore]);
 
  const paintChart = useCallback(() => {
- if (mainViewSpec && mainView) {
- painterStore.analysisInPainter(mainViewSpec, mainView);
+ if (mainView.spec && mainView.dataViewQuery) {
+ painterStore.analysisInPainter(mainView.spec, mainView.dataViewQuery);
  }
- }, [mainViewSpec, painterStore, mainView]);
+ }, [mainView.spec, mainView.dataViewQuery, painterStore]);
 
  const viewSpec = useMemo(() => {
- return mainViewSpecSource === 'custom' ? muteSpec : mainViewSpec;
- }, [mainViewSpec, muteSpec, mainViewSpecSource]);
+ return mainViewSpecSource === 'custom' ? muteSpec : mainView.spec;
+ }, [mainView.spec, muteSpec, mainViewSpecSource]);
 
  const ChartEditButtonProps = useMemo<IContextualMenuProps>(() => {
  return {
@@ -62,21 +61,21 @@ const FocusZone: React.FC = () => {
  text: intl.get('megaAuto.commandBar.editInEditor'),
  iconProps: { iconName: 'Edit' },
  onClick: () => {
- if (mainViewSpec) {
- editorStore.syncSpec(IVisSpecType.vegaSubset, mainViewSpec);
+ if (mainView.spec) {
+ editorStore.syncSpec(IVisSpecType.vegaSubset, mainView.spec);
  semiAutoStore.changeMainViewSpecSource();
  }
  },
  },
  ],
  };
- }, [editChart, editorStore, mainViewSpec, semiAutoStore]);
+ }, [editChart, editorStore, mainView.spec, semiAutoStore]);
 
  const handler = useRef<IReactVegaHandler>(null);
 
  return (
  <MainViewContainer>
- {mainView && showMiniFloatView && <MiniFloatCanvas pined={mainView} />}
+ {mainView.dataViewQuery && showMiniFloatView && <MiniFloatCanvas pined={mainView.dataViewQuery} />}
  <div className="vis-container">
  <div className="spec">
  {mainViewSpecSource === 'custom' && (
@@ -93,17 +92,12 @@ const FocusZone: React.FC = () => {
  />
  )}
  </div>
- <div className="vis">{mainView && mainViewSpec && <MainCanvas handler={handler} view={mainView} spec={viewSpec} />}</div>
- {mainVizSetting.nlg && (
- <div style={{ overflow: 'auto' }}>
- <Narrative />
- </div>
- )}
+ <div className="vis">{mainView.dataViewQuery && mainView.spec && <MainCanvas handler={handler} view={mainView.dataViewQuery} spec={viewSpec} />}</div>
  </div>
  <hr style={{ marginTop: '1em' }} />
  <div className="fields-container">
- {mainView &&
- mainView.fields.map((f: IFieldMeta) => (
+ {mainView.dataViewQuery &&
+ mainView.dataViewQuery.fields.map((f: IFieldMeta) => (
  <ViewField
  onDoubleClick={() => {
  semiAutoStore.setNeighborKeys(neighborKeys.includes(f.fid) ? [] : [f.fid]);
@@ -120,9 +114,9 @@ const FocusZone: React.FC = () => {
  <FieldPlaceholder fields={fieldMetas} onAdd={appendFieldHandler} />
  </div>
  <div className="fields-container">
- {mainView &&
- mainView.filters &&
- mainView.filters.map((f) => {
+ {mainView.dataViewQuery &&
+ mainView.dataViewQuery.filters &&
+ mainView.dataViewQuery.filters.map((f) => {
  const targetField = fieldMetas.find((m) => m.fid === f.fid);
  if (!targetField) return null;
  let filterDesc = `${targetField.name || targetField.fid} ∈ `;
@@ -146,9 +140,9 @@ const FocusZone: React.FC = () => {
  />
  </div>
  <div className="fields-container">
- {mainView &&
- mainView.encodes &&
- mainView.encodes.map((f) => {
+ {mainView.dataViewQuery &&
+ mainView.dataViewQuery.encodes &&
+ mainView.dataViewQuery.encodes.map((f) => {
  if (f.field === undefined)
  return (
  <ViewField
@@ -174,9 +168,9 @@ const FocusZone: React.FC = () => {
  />
  );
  })}
- {mainView && (
+ {mainView.dataViewQuery && (
  <EncodeCreationPill
- fields={mainView.fields}
+ fields={mainView.dataViewQuery.fields}
  onSubmit={(encode) => {
  semiAutoStore.addFieldEncode2MainViewPattern(encode);
  }}
@@ -188,27 +182,29 @@ const FocusZone: React.FC = () => {
  style={BUTTON_STYLE}
  text={intl.get('megaAuto.commandBar.editing')}
  iconProps={{ iconName: 'BarChartVerticalEdit' }}
- disabled={mainView === null}
+ disabled={mainView.dataViewQuery === null}
  menuProps={ChartEditButtonProps}
  />
  <ActionButton
  style={BUTTON_STYLE}
  text={intl.get('megaAuto.commandBar.painting')}
  iconProps={{ iconName: 'EditCreate' }}
- disabled={mainView === null}
+ disabled={mainView.dataViewQuery === null}
  onClick={paintChart}
  />
- {mainView && mainViewSpec && (
+ {mainView.dataViewQuery && mainView.spec && (
  <ActionButton
  style={BUTTON_STYLE}
  iconProps={{
- iconName: collectionStore.collectionContains(fieldMetas, mainViewSpec, IVisSpecType.vegaSubset, mainView.filters)
+ iconName: collectionStore.collectionContains(fieldMetas, mainView.spec, IVisSpecType.vegaSubset, mainView.dataViewQuery.filters)
  ? 'FavoriteStarFill'
  : 'FavoriteStar',
  }}
  text={intl.get('common.star')}
  onClick={() => {
- collectionStore.toggleCollectState(fieldMetas, mainViewSpec, IVisSpecType.vegaSubset, mainView.filters);
+ if (mainView.spec && mainView.dataViewQuery) {
+ collectionStore.toggleCollectState(fieldMetas, mainView.spec, IVisSpecType.vegaSubset, mainView.dataViewQuery.filters);
+ }
  }}
  />
  )}
@@ -228,7 +224,7 @@ const FocusZone: React.FC = () => {
  ariaLabel={intl.get('megaAuto.commandBar.download')}
  title={intl.get('megaAuto.commandBar.download')}
  text={intl.get('megaAuto.commandBar.download')}
- disabled={mainView === null}
+ disabled={mainView.dataViewQuery === null}
  onClick={() => {
  handler.current?.exportImage();
  }}

diff --git a/packages/rath-client/src/pages/semiAutomation/narrative/index.tsx b/packages/rath-client/src/pages/semiAutomation/narrative/index.tsx
@@ -12,13 +12,13 @@ const Narrative: React.FC = () => {
  const [explainLoading, setExplainLoading] = useState(false);
  const requestId = useRef<number>(0);
  const fieldsInViz = useMemo(() => {
- return mainView?.fields || [];
- }, [mainView]);
+ return mainView.dataViewQuery?.fields || [];
+ }, [mainView.dataViewQuery]);
  const [viewInfo, setViewInfo] = useState<any[]>([])
  useEffect(() => {
  setViewInfo([])
  setExplainLoading(false);
- }, [mainView])
+ }, [mainView.dataViewQuery])
  useEffect(() => {
  (() => getInsightExpl({
  requestId,

diff --git a/packages/rath-client/src/pages/semiAutomation/predictZone/featSegment.tsx b/packages/rath-client/src/pages/semiAutomation/predictZone/featSegment.tsx
@@ -61,6 +61,7 @@ const FeatSegment: React.FC = () => {
  }}
  />
  </Stack>
+ <h2>{featViews.views[i].imp}</h2>
  <div className="chart-container">
  <ReactVega
  actions={mainVizSetting.debug}

diff --git a/packages/rath-client/src/pages/semiAutomation/predictZone/pattSegment.tsx b/packages/rath-client/src/pages/semiAutomation/predictZone/pattSegment.tsx
@@ -60,6 +60,7 @@ const PattSegment: React.FC = () => {
  }}
  />
  </Stack>
+ <h2>{pattViews.views[i].imp}</h2>
  <div className="chart-container">
  <ReactVega
  actions={mainVizSetting.debug}