Skip to content

Commit

Permalink
refactor: adjust main view design
Browse files Browse the repository at this point in the history
  • Loading branch information
@ObservedObserver
ObservedObserver committed Jun 27, 2023
1 parent f8a16b9 commit 2bf7607
Show file tree
Hide file tree
Showing 12 changed files with 243 additions and 180 deletions.
7 changes: 6 additions & 1 deletion packages/rath-client/src/interfaces.ts
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions packages/rath-client/src/pages/megaAutomation/mainCanvas/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
8 changes: 4 additions & 4 deletions packages/rath-client/src/pages/megaAutomation/vizOperation/fieldContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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 (
Expand All @@ -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 (
Expand Down
33 changes: 16 additions & 17 deletions packages/rath-client/src/pages/megaAutomation/vizOperation/operationBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
Expand All @@ -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()
}
}
Expand Down Expand Up @@ -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);
}
}
Expand All @@ -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)
}
}
},
Expand Down
72 changes: 34 additions & 38 deletions packages/rath-client/src/pages/semiAutomation/focusZone/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 {
Expand All @@ -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' && (
Expand All @@ -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]);
Expand All @@ -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} ∈ `;
Expand All @@ -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
Expand All @@ -174,9 +168,9 @@ const FocusZone: React.FC = () => {
/>
);
})}
{mainView && (
{mainView.dataViewQuery && (
<EncodeCreationPill
fields={mainView.fields}
fields={mainView.dataViewQuery.fields}
onSubmit={(encode) => {
semiAutoStore.addFieldEncode2MainViewPattern(encode);
}}
Expand All @@ -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);
}
}}
/>
)}
Expand All @@ -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();
}}
Expand Down
6 changes: 3 additions & 3 deletions packages/rath-client/src/pages/semiAutomation/narrative/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions packages/rath-client/src/pages/semiAutomation/predictZone/featSegment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ const FeatSegment: React.FC = () => {
}}
/>
</Stack>
<h2>{featViews.views[i].imp}</h2>
<div className="chart-container">
<ReactVega
actions={mainVizSetting.debug}
Expand Down
1 change: 1 addition & 0 deletions packages/rath-client/src/pages/semiAutomation/predictZone/pattSegment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ const PattSegment: React.FC = () => {
}}
/>
</Stack>
<h2>{pattViews.views[i].imp}</h2>
<div className="chart-container">
<ReactVega
actions={mainVizSetting.debug}
Expand Down
Loading

0 comments on commit 2bf7607

Please sign in to comment.