Merge pull request #378 from Kanaries/oss-dev-2023

refactor: adjust main view design
Kanaries · Jun 27, 2023 · aa81814 · aa81814 · vercel · Jun 27, 2023
2 parents f8a16b9 + 4c17a6b
commit aa81814
Show file tree

Hide file tree

Showing 27 changed files with 242 additions and 237 deletions.
diff --git a/packages/rath-client/src/components/latiaoConsole/editor.tsx b/packages/rath-client/src/components/latiaoConsole/editor.tsx
@@ -166,8 +166,6 @@ const LaTiaoEditor = observer(forwardRef<HTMLDivElement, LaTiaoEditorProps>(({
                         );
                     }                    
                 });
-
-                // console.log('扩展数据', {fields, f, data, rows});
             },
         );
 

diff --git a/packages/rath-client/src/hooks/index.ts b/packages/rath-client/src/hooks/index.ts
@@ -96,7 +96,6 @@ export function useCertMail(email: string) {
             setClock((c) => {
                 const nextC = c - 1;
                 if (nextC === 0) {
-                    // console.log('[kanaries log] clock interval is cleared.');
                     clearInterval(int);
                     timerRef.current = undefined;
                 }
@@ -143,7 +142,6 @@ export function useCertPhone(phone: string) {
             setClock((c) => {
                 const nextC = c - 1;
                 if (nextC === 0) {
-                    // console.log('[kanaries log] clock interval is cleared.');
                     clearInterval(int);
                 }
                 return nextC;

diff --git a/packages/rath-client/src/index.tsx b/packages/rath-client/src/index.tsx
@@ -21,9 +21,6 @@ import { customLightTheme, mainTheme } from './theme';
 
 inject();
 
-// @ts-ignore
-// window.Buffer = Buffer.Buffer;
-// console.log('buffer', Buffer)
 initializeIcons();
 
 ReactDOM.render(

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/latiao/program/parse.ts b/packages/rath-client/src/latiao/program/parse.ts
@@ -136,7 +136,6 @@ const resolveNode = (exp: CallExpression['arguments'][0], context: LaTiaoProgram
       return resolveBinOp(exp, context, out);
     }
     default: {
-      // console.log('->', exp);
       throw new LaTiaoSyntaxError(
         'Unexpected token.',
         exp,

diff --git a/packages/rath-client/src/lib/textPattern/index.ts b/packages/rath-client/src/lib/textPattern/index.ts
@@ -228,7 +228,6 @@ function LCALabeling(tree: IPatternNode, depth: number): number {
 }
 
 function collectingCANodes(tree: IPatternNode, label: number, nodes: IPatternNode[]) {
-    // console.log(tree, tree.spe,  label, nodes)
     if (tree.specLabel === label) {
         nodes.push(tree);
     } else {

diff --git a/packages/rath-client/src/pages/causal/exploration/explainer/RExplainer.tsx b/packages/rath-client/src/pages/causal/exploration/explainer/RExplainer.tsx
@@ -104,8 +104,6 @@ const RExplainer: FC = () => {
         const indexName = '__this_is_the_index_of_the_row__';
         const data = visSample.map((row, i) => ({ ...row, [indexName]: i }));
         const indicesA = applyFilters(data, subspaces[0].predicates).map(row => row[indexName]) as number[];
-        // console.log('indices');
-        // console.log(indicesA.join(','));
         const indicesB = diffMode === 'two-group'
             ? applyFilters(data, subspaces[1].predicates).map(row => row[indexName]) as number[]
             : diffMode === 'full' ? data.map(row => row[indexName]) as number[] : data.map(row => row[indexName] as number).filter(
@@ -179,8 +177,6 @@ const RExplainer: FC = () => {
         }
     }, [diffMode, editingGroupIdx]);
 
-    // console.log({ irResult });
-
     return (
         <Container>
             {mainField && (

diff --git a/packages/rath-client/src/pages/causal/exploration/explainer/diffChart.tsx b/packages/rath-client/src/pages/causal/exploration/explainer/diffChart.tsx
@@ -214,14 +214,6 @@ const DiffChart: React.FC<DiffChartProps> = ({ title, data, subspaces, mainField
     }, [mainField, title, mainFieldAggregation, mode, dimension]);
 
     useEffect(() => {
-        // console.log(data.reduce<[number, number][]>((ctx, {[SelectedFlag]:num}) => {
-        //     if (ctx.at(-1)?.[0] !== num) {
-        //         ctx.push([num, 1]);
-        //     } else {
-        //         ctx.at(-1)![1] += 1;
-        //     }
-        //     return ctx;
-        // }, []).map(([k, v]) => `${k}{${v}}`).join(''));
         viewRef.current?.change(
             'dataSource',
             viewRef.current.changeset().remove(() => true).insert(source),

diff --git a/packages/rath-client/src/pages/causal/predict.ts b/packages/rath-client/src/pages/causal/predict.ts
@@ -58,11 +58,6 @@ function getPredictAPIPath (path = "/api/train_test") {
 
 export const execPredict = async (props: IPredictProps): Promise<IPredictResult | null> => {
     try {
-        // console.log(props.trainTestSplitIndices.map(flag => ({
-        //     [-1]: 'x',
-        //     0: 'T',
-        //     1: '_',
-        // }[flag])).join(''), props.trainTestSplitIndices.length)
         const res = await fetch(getPredictAPIPath(), {
             method: 'POST',
             headers: {

diff --git a/packages/rath-client/src/pages/causal/utils.ts b/packages/rath-client/src/pages/causal/utils.ts
@@ -18,7 +18,6 @@ export function conditionalMic (condField: IFieldMeta, xField: IFieldMeta, yFiel
         let score = 0;
         const X = filteredDataSource.map(row => row[xField.fid]);
         const Y = filteredDataSource.map(row => row[yField.fid]);
-        // console.log(X, Y)
         if (xField.semanticType === 'quantitative' && yField.semanticType === 'quantitative') {
             score = mic(X, Y);
         }
@@ -35,7 +34,6 @@ export function conditionalMic (condField: IFieldMeta, xField: IFieldMeta, yFiel
             // 这里如果要用hack的temporal解法的话，需要用purennmic来做T-T类型。但是我们目前并不想提升T-T类型。不如等到之后时间系统改造完用正规的方法搞。
             else score = nnMic(X, Y)
         }
-        // console.log(score)
         totalScore += score * filteredDataSource.length / dataSource.length;
     }
     // eslint-disable-next-line no-constant-condition
@@ -46,7 +44,6 @@ export function conditionalMic (condField: IFieldMeta, xField: IFieldMeta, yFiel
             let score = 0;
             const X = filteredDataSource.map(row => row[xField.fid]);
             const Y = filteredDataSource.map(row => row[yField.fid]);
-            // console.log(X, Y)
             if (xField.semanticType === 'quantitative' && yField.semanticType === 'quantitative') {
                 score = mic(X, Y);
             }
@@ -85,7 +82,6 @@ function conditionaExtremelMic (condField: IFieldMeta, xField: IFieldMeta, yFiel
         let score = 0;
         const X = filteredDataSource.map(row => row[xField.fid]);
         const Y = filteredDataSource.map(row => row[yField.fid]);
-        // console.log(X, Y)
         if (xField.semanticType === 'quantitative' && yField.semanticType === 'quantitative') {
             score = mic(X, Y);
         }
@@ -102,7 +98,6 @@ function conditionaExtremelMic (condField: IFieldMeta, xField: IFieldMeta, yFiel
             // 这里如果要用hack的temporal解法的话，需要用purennmic来做T-T类型。但是我们目前并不想提升T-T类型。不如等到之后时间系统改造完用正规的方法搞。
             else score = nnMic(X, Y)
         }
-        // console.log(score)
         // totalScore += score * filteredDataSource.length / dataSource.length;
         totalScore = Math.min(score, totalScore)
     }
@@ -114,7 +109,6 @@ function conditionaExtremelMic (condField: IFieldMeta, xField: IFieldMeta, yFiel
             let score = 0;
             const X = filteredDataSource.map(row => row[xField.fid]);
             const Y = filteredDataSource.map(row => row[yField.fid]);
-            // console.log(X, Y)
             if (xField.semanticType === 'quantitative' && yField.semanticType === 'quantitative') {
                 score = mic(X, Y);
             }
@@ -140,7 +134,6 @@ function conditionaExtremelMic (condField: IFieldMeta, xField: IFieldMeta, yFiel
 }
 
 export function getFieldRelationCheckedMatrix (mat: number[][], fields: IFieldMeta[], dataSource: IRow[]) {
-    // console.log('start')
     let ans: number[][] = new Array(mat.length).fill(0).map(() => new Array(mat.length).fill(0));
     for (let i = 0; i < mat.length; i++) {
         for (let j = 0; j < mat[i].length; j++) {
@@ -179,7 +172,6 @@ export function getFieldRelationCheckedMatrix (mat: number[][], fields: IFieldMe
             }
         }
     }
-    // console.log(JSON.stringify(ans, null, 2))
     return ans;
 }
 

diff --git a/packages/rath-client/src/pages/collection/index.tsx b/packages/rath-client/src/pages/collection/index.tsx
@@ -68,8 +68,6 @@ const Collection: React.FC = (props) => {
                     <SearchBox
                         placeholder="Search"
                         onSearch={(newValue) => {
-                            // const res = searchFilterView(newValue, collectionList)
-                            // console.log(res)
                             setSearchContent(newValue);
                         }}
                     />

diff --git a/packages/rath-client/src/pages/dashboard/renderer/card-editor.tsx b/packages/rath-client/src/pages/dashboard/renderer/card-editor.tsx
@@ -443,10 +443,6 @@ const CardEditor: FC<CardProviderProps> = ({
                     ))}
             </>
         ),
-        // onDoubleClick: handleDoubleClick,
-        // onRootMouseDown(x, y) {
-        //     // console.log({x,y})
-        // },
         onClick: handleClick,
         onFilter: handleFilter,
         style: focused

diff --git a/packages/rath-client/src/pages/dashboard/source-panel.tsx b/packages/rath-client/src/pages/dashboard/source-panel.tsx
@@ -58,7 +58,6 @@ const SourcePanel: FC<DashboardPanelProps> = ({ page, card, sampleSize }) => {
         [card, dashboardStore]
     );
 
-    // console.log(JSON.parse(JSON.stringify(card)));
     const [width, setWidth] = useState(0);
     const ref = useRef<HTMLDivElement>(null);
 

diff --git a/packages/rath-client/src/pages/dataConnection/olap.tsx b/packages/rath-client/src/pages/dataConnection/olap.tsx
@@ -110,10 +110,6 @@ const OLAPData: React.FC<OLAPDataProps> = (props) => {
             });
     }, [clickHouseStore]);
 
-    // useEffect(() => {
-    //     fetch('https://localhost:2333/api/config/connection').then(res => res.json()).then(console.log)
-    // }, [])
-
     return (
         <div>
             <Stack horizontal tokens={StackTokens}>

diff --git a/packages/rath-client/src/pages/dataSource/selection/olap.tsx b/packages/rath-client/src/pages/dataSource/selection/olap.tsx
@@ -90,9 +90,6 @@ const OLAPData: React.FC<OLAPDataProps> = props => {
         })
     }, [clickHouseStore])
 
-    // useEffect(() => {
-    //     fetch('https://localhost:2333/api/config/connection').then(res => res.json()).then(console.log)
-    // }, [])
 
     return <div>
         <Stack horizontal tokens={StackTokens}>

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/painter/index.tsx b/packages/rath-client/src/pages/painter/index.tsx
@@ -177,12 +177,7 @@ const Painter: React.FC = (props) => {
 
                 setRealPainterSize((res.view as unknown as { _width: number })._width * painterSize);
                 if (!(painterSpec.encoding.x && painterSpec.encoding.y)) return;
-                // if(testConfig.printLog) {
-                //     res.view.addDataListener('dataSource', (name, value) => {
-                //         window.console.log("dataListener", name, value);
-                //         window.console.log(testConfig);
-                //     })
-                // }
+
                 const xField = painterSpec.encoding.x.field;
                 const yField = painterSpec.encoding.y.field;
                 const xFieldType = painterSpec.encoding.x.type as ISemanticType;

diff --git a/packages/rath-client/src/pages/progressiveDashboard/index.tsx b/packages/rath-client/src/pages/progressiveDashboard/index.tsx
@@ -170,10 +170,8 @@ const ProgressiveDashboard: React.FC = (props) => {
         },
         [originSpecList, fieldMetas]
     );
-    // recommendVisList里是确定性的推荐，不含wildcard
     const recommendVisList = useMemo(() => {
         if (cleanedData.length > 0 && fieldMetas.length > 0) {
-            // console.log(cleanedData, toJS(fieldMetas));
             return autoSet(cleanedData, toJS(fieldMetas), originSpecList);
         }
         return [];
-Original file line number
+Diff line change
@@ Expand Up @@
                             );
                         }
                     });
-                    // console.log('扩展数据', {fields, f, data, rows});
                 },
             );
@@ Expand Down @@