Merge branch 'master' of github.com:Kanaries/Rath into chore-remove_m…

…aterialui-ks-0525

packages/rath-client/package.json

@@ -17,7 +17,7 @@
     "@fluentui/react-file-type-icons": "^8.8.3",
     "@fluentui/react-hooks": "^8.6.11",
     "@fluentui/react-icons": "^2.0.200",
-    "@kanaries/graphic-walker": "^0.2.18",
+    "@kanaries/graphic-walker": "0.3.7",
     "@kanaries/loa": "^0.0.16",
     "@kanaries/web-data-loader": "0.1.7",
     "@vercel/analytics": "^1.0.0",

packages/rath-client/public/locales/en-US.json

@@ -628,6 +628,7 @@
         "months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
         "shortMonths": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
     },
+    "date_format": "{Y}-{m}-{d}({w}) {H}:{M}:{S}",
     "login": {
         "configKeys": {
             "basic": "Basic",

packages/rath-client/public/locales/zh-CN.json

@@ -604,6 +604,7 @@
         "months": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
         "shortMonths": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
     },
+    "date_format": "{Y}年{m}{d}日 {w} {H}:{M}:{S}",
     "login": {
         "configKeys": {
             "basic": "基础信息",

packages/rath-client/src/components/fieldFilter/index.tsx

@@ -9,7 +9,7 @@ import { IFilter } from '../../interfaces';
 import { useGlobalStore } from '../../store';
 import RangeSelection from './rangeSelection';
 import SetSelection from './setSelection';
-import { getOriginalRange } from './originalRange';
+import { getOriginalDateTimeRange, getOriginalRange } from './originalRange';
 
 interface FieldFilterProps {
     fid: string;
@@ -22,6 +22,7 @@ const FieldFilter: React.FC<FieldFilterProps> = props => {
     const { dataSourceStore } = useGlobalStore();
 
     const meta = dataSourceStore.fieldMetas.find(fm => fm.fid === fid);
+    const filterInUse = dataSourceStore.filters.find(f => f.fid === fid);
 
     const { rawDataStorage, rawDataMetaInfo } = dataSourceStore;
 
@@ -48,17 +49,22 @@ const FieldFilter: React.FC<FieldFilterProps> = props => {
 
     const [fieldRange, setFieldRange] = useState<[number, number]>([0, 0])
     const filterType = filter.type;
-    useEffect(() => {
+    const resetRange = useCallback(() => {
         if (rawDataMetaInfo.versionCode === -1) {
             setFieldRange([0, 0]);
         } else if (filterType !== 'range') {
             setFieldRange([0, 0]);
+        } else if (meta?.semanticType === 'temporal') {
+            getOriginalDateTimeRange(rawDataStorage, fid).then(r => {
+                setFieldRange(r)
+            });
         } else {
             getOriginalRange(rawDataStorage, fid).then(r => {
                 setFieldRange(r)
             })
         }
-    }, [fid, filterType, rawDataStorage, rawDataMetaInfo.versionCode])
+    }, [fid, meta?.semanticType, filterType, rawDataStorage, rawDataMetaInfo.versionCode])
+    useEffect(resetRange, [resetRange])
 
 
     const selection = useMemo(() => {
@@ -85,6 +91,11 @@ const FieldFilter: React.FC<FieldFilterProps> = props => {
         setShowFilterConfig(false);
     }, [filter, meta?.distribution, dataSourceStore, selection])
 
+    const resetFilter = useCallback(() => {
+        resetRange();
+        dataSourceStore.removeFilter(fid);
+    }, [fid, dataSourceStore, resetRange])
+
     const toggleShowFilter = useCallback(() => {
         setShowFilterConfig(v => !v);
     }, [])
@@ -158,7 +169,7 @@ const FieldFilter: React.FC<FieldFilterProps> = props => {
                     />
                 </div>
                 {
-                    filter.type === 'set' && meta && <SetSelection
+                    filter.type === 'set' && meta && !filterInUse && <SetSelection
                         dist={toJS(meta.distribution)}
                         selection={selection}
                     />
@@ -169,15 +180,22 @@ const FieldFilter: React.FC<FieldFilterProps> = props => {
                         left={filter.range[0]}
                         right={filter.range[1]}
                         onValueChange={onRangeValueChange}
+                        type={meta.semanticType === 'temporal' ? 'time' : 'number'}
                     />
                 }
-                <Stack horizontal>
+                <Stack horizontal tokens={{ childrenGap: '1em' }}>
+                    {
+                        filterInUse && <DefaultButton
+                            onClick={resetFilter}
+                            text={intl.get('dataSource.filter.reset') || 'Reset'}
+                        />
+                    }
                     <PrimaryButton
                         text={intl.get('dataSource.filter.submit')}
+                        disabled={filter.type === 'set' && Boolean(filterInUse)}
                         onClick={submitFilter}
                     />
                     <DefaultButton
-                        style={{ marginLeft: '1em' }}
                         text={intl.get('dataSource.filter.cancel')}
                         onClick={toggleShowFilter}
                     />

packages/rath-client/src/components/fieldFilter/originalRange.ts

@@ -29,3 +29,23 @@ export async function getOriginalRange(dataStorage: IteratorStorage, colKey: str
     }
     return [_min, _max].every(Number.isFinite) ? [_min, _max] : [0, 0];
 }
+
+export async function getOriginalDateTimeRange(dataStorage: IteratorStorage, colKey: string): Promise<[number, number]> {
+    const rows = await dataStorage.getAll();
+    const values: number[] = [];
+    for (let row of rows) {
+        const val = new Date(row[colKey]).getTime();
+        if (Number.isFinite(val)) { // we only process valid date time
+            values.push(val);
+        }
+    }
+    if (values.length === 0) return [0, 0];
+    let _min = Infinity;
+    let _max = -Infinity;
+    for (const v of values) {
+        if (Number.isNaN(v)) continue;
+        if (v > _max) _max = v;
+        if (v < _min) _min = v;
+    }
+    return [_min, _max].every(Number.isFinite) ? [_min, _max] : [0, 0];
+}

packages/rath-client/src/components/fieldFilter/rangeSelection.tsx

@@ -1,14 +1,41 @@
+import intl from 'react-intl-universal';
 import { Slider } from '@fluentui/react';
-import React from 'react';
+import React, { useCallback } from 'react';
 
 interface RangeSelectionProps {
     range: [number, number];
     left: number;
     right: number;
     onValueChange: (range: [number, number]) => void;
+    type: 'number' | 'time';
 }
+
+const DateTimeValueLabelStyle = {
+    // monospace
+    fontFamily: 'Courier New',
+    // narrowed
+    letterSpacing: '-0.05em',
+    transform: 'scaleX(0.95)',
+    marginInline: '-1%',
+} as const;
+
 const RangeSelection: React.FC<RangeSelectionProps> = (props) => {
-    const { range, left, right, onValueChange } = props;
+    const { range, left, right, onValueChange, type } = props;
+
+    const formatter = useCallback((v: number) => {
+        if (type === 'time') {
+            return intl.get('date_format', {
+                Y: `${new Date(v).getFullYear()}`.padStart(4, ' '),
+                m: intl.get(`time_format.shortMonths.${new Date(v).getDay()}`),
+                d: `${new Date(v).getDate()}`.padStart(2, '0'),
+                w: intl.get(`time_format.shortDays.${new Date(v).getDay()}`),
+                H: `${new Date(v).getHours()}`.padStart(2, '0'),
+                M: `${new Date(v).getMinutes()}`.padStart(2, '0'),
+                S: `${new Date(v).getSeconds()}`.padStart(2, '0'),
+            });
+        }
+        return `${v}`;
+    }, [type]);
 
     return (
         <Slider
@@ -17,6 +44,7 @@ const RangeSelection: React.FC<RangeSelectionProps> = (props) => {
             max={range[1]}
             value={right}
             lowerValue={left}
+            valueFormat={formatter}
             ranged
             onChange={(_v, r) => {
                 r && onValueChange(r);
@@ -33,10 +61,12 @@ const RangeSelection: React.FC<RangeSelectionProps> = (props) => {
                 },
                 slideBox: {
                     flex: 1,
+                    minWidth: '120px',
                 },
                 valueLabel: {
                     minWidth: '40px',
                     width: 'unset',
+                    ...(type === 'time' ? DateTimeValueLabelStyle : {}),
                 },
             }}
         />

packages/rath-client/src/components/fieldPill/filterCreationPill.tsx

@@ -175,6 +175,7 @@ const FilterCreationPill: React.FC<FilterCreationPillProps> = (props) => {
                                     left={filter.range[0]}
                                     right={filter.range[1]}
                                     onValueChange={onRangeValueChange}
+                                    type={curField.semanticType === 'temporal' ? 'time' : 'number'}
                                 />
                             )}
                             <Stack.Item>

packages/rath-client/src/components/react-vega.tsx

@@ -3,7 +3,7 @@ import { View } from 'vega';
 import intl from 'react-intl-universal';
 import embed, { vega } from 'vega-embed';
 import { getVegaTimeFormatRules } from '../utils';
-import { VegaThemeConfig } from '../queries/themes/config';
+import { VegaGlobalConfig } from '../queries/themes/config';
 import ImageExportDialog, { ImageExportDialogHandler } from './image-export-dialog';
 import type { ImageExportInfo } from './image-export-dialog/export-image';
 
@@ -14,7 +14,7 @@ interface ReactVegaProps {
     signalHandler?: {
         [key: string]: (name: any, value: any, view: View) => void;
     };
-    config?: VegaThemeConfig;
+    config?: VegaGlobalConfig;
 }
 
 export interface IReactVegaHandler {

packages/rath-client/src/pages/collection/collectionView/cardView.tsx

@@ -6,7 +6,7 @@ import ViewInfo from '../../../components/viewInfo/textInfo';
 import { IFieldMeta, IInsightVizView, IRow } from '../../../interfaces';
 import VisErrorBoundary from '../../../components/visErrorBoundary';
 import { changeVisSize, VIEW_NUM_IN_PAGE } from '../utils';
-import { VegaThemeConfig } from '../../../queries/themes/config';
+import { VegaGlobalConfig } from '../../../queries/themes/config';
 import Pagination from '../../../components/pagination';
 import Divider from '../../../components/divider';
 
@@ -48,7 +48,7 @@ interface CardViewProps {
     metas: IFieldMeta[];
     views: IInsightVizView[];
     onConfig: (data: IInsightVizView) => void;
-    themeConfig?: VegaThemeConfig;
+    themeConfig?: VegaGlobalConfig;
 }
 const CardView: React.FC<CardViewProps> = (props) => {
     const { data, views, metas, onConfig, themeConfig } = props;

packages/rath-client/src/pages/collection/collectionView/listView.tsx

@@ -6,7 +6,7 @@ import VisErrorBoundary from '../../../components/visErrorBoundary';
 import { IFieldMeta, IInsightVizView, IRow } from '../../../interfaces';
 import { changeVisSize, VIEW_NUM_IN_PAGE } from '../utils';
 import ViewInfo from '../../../components/viewInfo/pillInfo';
-import { VegaThemeConfig } from '../../../queries/themes/config';
+import { VegaGlobalConfig } from '../../../queries/themes/config';
 import Pagination from '../../../components/pagination';
 import Divider from '../../../components/divider';
 
@@ -41,7 +41,7 @@ interface ListViewProps {
     metas: IFieldMeta[];
     views: IInsightVizView[];
     onConfig: (data: IInsightVizView) => void;
-    themeConfig?: VegaThemeConfig;
+    themeConfig?: VegaGlobalConfig;
 }
 const ListView: React.FC<ListViewProps> = (props) => {
     const { data, views, metas, onConfig, themeConfig } = props;

packages/rath-client/src/pages/collection/utils.ts

@@ -1,21 +1,27 @@
 import produce from "immer";
+import { ISemanticType } from "@kanaries/loa";
 import { IFieldMeta, IResizeMode, IVegaSubset } from "../../interfaces";
 import { applySizeConfig } from "../../queries/base/utils";
 
+function uncompressAxisSemanticType (semanticType: ISemanticType) {
+    return semanticType === 'nominal' || semanticType === 'ordinal';
+}
+
+// interface Advice
 export function adviceVisSize(spec: IVegaSubset, fields: IFieldMeta[], width: number | undefined = 260, height: number | undefined = 260): IVegaSubset {
     let fixed = false;
     if (spec.encoding.x) {
         const targetField = fields.find(f => f.fid === spec.encoding.x?.field);
         if (targetField) {
-            if (targetField.semanticType === 'nominal' && targetField.features.unique > 20) {
+            if (uncompressAxisSemanticType(targetField.semanticType) && targetField.features.unique > 20) {
                 fixed = true
             }
         }
     }
     if (spec.encoding.y) {
         const targetField = fields.find(f => f.fid === spec.encoding.y?.field);
         if (targetField) {
-            if (targetField.semanticType === 'nominal' && targetField.features.unique > 20) {
+            if (uncompressAxisSemanticType(targetField.semanticType) && targetField.features.unique > 20) {
                 fixed = true
             }
         }

packages/rath-client/src/pages/dataSource/metaView/distChart.tsx

@@ -5,7 +5,7 @@ import intl from 'react-intl-universal';
 import { IRow } from '../../../interfaces';
 import { getRange, getVegaTimeFormatRules } from '../../../utils';
 import { shallowCopyArray } from '../../../utils/deepcopy';
-import { VegaThemeConfig } from '../../../queries/themes/config';
+import { VegaGlobalConfig } from '../../../queries/themes/config';
 
 const DATA_NAME = 'dataSource';
 const DEFAULT_BIN_SIZE = 10;
@@ -38,7 +38,7 @@ export interface DistributionChartProps {
     label?: boolean;
 }
 const markColor = '#3371D7';
-const theme: VegaThemeConfig = {
+const theme: VegaGlobalConfig = {
     arc: { fill: markColor },
     area: { fill: markColor },
     path: { stroke: markColor },

packages/rath-client/src/pages/dataSource/profilingView/fullDistViz.tsx

@@ -5,11 +5,11 @@ import intl from 'react-intl-universal';
 import { IRow } from '../../../interfaces';
 import { shallowCopyArray } from '../../../utils/deepcopy';
 import { getVegaTimeFormatRules } from '../../../utils';
-import { VegaThemeConfig } from '../../../queries/themes/config';
+import { VegaGlobalConfig } from '../../../queries/themes/config';
 const DATA_NAME = 'dataSource';
 const DEFAULT_BIN_SIZE = 10;
 const markColor = '#3371D7';
-const theme: VegaThemeConfig = {
+const theme: VegaGlobalConfig = {
     arc: { fill: markColor },
     area: { fill: markColor },
     path: { stroke: markColor },

packages/rath-client/src/pages/megaAutomation/association/assCharts.tsx

@@ -7,7 +7,7 @@ import VisErrorBoundary from '../../../components/visErrorBoundary';
 import { IFieldMeta, IRow, PreferencePanelConfig } from '../../../interfaces';
 import ReactVega from '../../../components/react-vega';
 import { distVis } from '../../../queries/distVis';
-import { VegaThemeConfig } from '../../../queries/themes/config';
+import { VegaGlobalConfig } from '../../../queries/themes/config';
 import { useGlobalStore } from '../../../store';
 import { labDistVisService } from '../../../services';
 import { useAsyncViews } from '../../semiAutomation/predictZone/utils';
@@ -19,7 +19,7 @@ interface AssociationProps {
     fieldMetas: IFieldMeta[];
     dataSource: IRow[];
     onSelectView: (viz: IInsightSpace) => void;
-    themeConfig?: VegaThemeConfig;
+    themeConfig?: VegaGlobalConfig;
 }
 const AssociationCharts: React.FC<AssociationProps> = (props) => {
     const { vizList, onSelectView, dataSource, fieldMetas, themeConfig } = props;

packages/rath-client/src/pages/megaAutomation/vizOperation/operationBar.tsx

@@ -6,13 +6,13 @@ import { toJS } from 'mobx';
 import { useGlobalStore } from '../../../store';
 import { IVisSpecType } from '../../../interfaces';
 import type { IReactVegaHandler } from '../../../components/react-vega';
+import { PIVOT_KEYS } from '../../../constants';
 
 interface OperationBarProps {
     handler: React.RefObject<IReactVegaHandler>;
 }
 const OperationBar: React.FC<OperationBarProps> = ({ handler }) => {
-    const { megaAutoStore, commonStore, collectionStore, painterStore, editorStore } = useGlobalStore();
-    const { taskMode } = commonStore;
+    const { megaAutoStore, commonStore, collectionStore, painterStore, editorStore, semiAutoStore } = useGlobalStore();
     const { mainViewSpec, mainViewPattern } = megaAutoStore;
 
     const customizeAnalysis = useCallback(() => {
@@ -71,12 +71,23 @@ const OperationBar: React.FC<OperationBarProps> = ({ handler }) => {
             iconProps: { iconName: 'EditCreate' },
             onClick: analysisInPainter
         },
+        // {
+        //     key: 'associate',
+        //     text: intl.get('megaAuto.commandBar.associate'),
+        //     iconProps: { iconName: 'Lightbulb' },
+        //     onClick: () => {
+        //         megaAutoStore.getAssociatedViews(taskMode);
+        //     }
+        // },
         {
-            key: 'associate',
+            key: 'analysisInSemi',
             text: intl.get('megaAuto.commandBar.associate'),
             iconProps: { iconName: 'Lightbulb' },
             onClick: () => {
-                megaAutoStore.getAssociatedViews(taskMode);
+                if (mainViewPattern !== null) {
+                    semiAutoStore.analysisInCopilot(toJS(mainViewPattern))
+                    commonStore.setAppKey(PIVOT_KEYS.semiAuto);
+                }
             }
         },
         {

packages/rath-client/src/pages/semiAutomation/focusZone/miniFloatCanvas.tsx

@@ -42,7 +42,7 @@ const MiniFloatCanvas: React.FC<MiniFloatCanvasProps> = (props) => {
     const simpleSpec = useVisSpec(specOptions, dataSource);
 
     const spec = useMemo(() => {
-        return simpleSpec && adviceVisSize(simpleSpec, fieldMetas)
+        return simpleSpec === null ? null : adviceVisSize(simpleSpec, fieldMetas);
     }, [simpleSpec, fieldMetas]);
 
     return spec && (