@kanaries/graphic-walker 0.3.16 → 0.4.1

package/src/utils/save.ts

@@ -1,5 +1,7 @@
-import { IDataSet, IDataSource, IVisSpec, IVisSpecForExport } from "../interfaces";
+import { DraggableFieldState, IDataSet, IDataSource, IVisSpec, IVisSpecForExport, IVisualConfig } from "../interfaces";
 import { VisSpecWithHistory } from "../models/visSpecHistory";
+import { toJS } from 'mobx';
+import { GEMO_TYPES } from '../config';
 
 export function dumpsGWPureSpec(list: VisSpecWithHistory[]): IVisSpec[] {
     return list.map((l) => l.exportGW());
@@ -9,10 +11,86 @@ export function parseGWPureSpec(list: IVisSpec[]): VisSpecWithHistory[] {
     return list.map((l) => new VisSpecWithHistory(l));
 }
 
+export function initVisualConfig(): IVisualConfig {
+    return {
+        defaultAggregated: true,
+        geoms: [GEMO_TYPES[0]!],
+        stack: 'stack',
+        showActions: false,
+        interactiveScale: false,
+        sorted: 'none',
+        zeroScale: true,
+        background: undefined,
+        size: {
+            mode: "auto",
+            width: 320,
+            height: 200,
+        },
+        format: {
+            numberFormat: undefined,
+            timeFormat: undefined,
+            normalizedNumberFormat: undefined,
+        },
+        resolve: {
+            x: false,
+            y: false,
+            color: false,
+            opacity: false,
+            shape: false,
+            size: false,
+        },
+        limit: -1,
+    };
+}
+
+export function visSpecDecoder(visList: IVisSpecForExport[]): IVisSpec[] {
+    const updatedVisList = visList.map((visSpec) => {
+        const updatedFilters = visSpec.encodings.filters.map((filter) => {
+            if (filter.rule?.type === 'one of' && Array.isArray(filter.rule.value)) {
+                return {
+                    ...filter,
+                    rule: {
+                        ...filter.rule,
+                        value: new Set(filter.rule.value),
+                    },
+                };
+            }
+            return filter;
+        });
+        return {
+            ...visSpec,
+            encodings: {
+                ...visSpec.encodings,
+                filters: updatedFilters,
+            },
+        } as IVisSpec;
+    });
+    return updatedVisList;
+}
+
+export const forwardVisualConfigs = (backwards: ReturnType<typeof parseGWContent>['specList']): IVisSpecForExport[] => {
+    return backwards.map((content) => ({
+        ...content,
+        config: {
+            ...initVisualConfig(),
+            ...content.config,
+        },
+    }));
+};
+
+export function resolveSpecFromStoInfo(info: IStoInfo) {
+    const spec = parseGWPureSpec(visSpecDecoder(forwardVisualConfigs(info.specList)))[0];
+    return {
+        config: toJS(spec.config) as IVisualConfig,
+        encodings: toJS(spec.encodings) as DraggableFieldState,
+        name: spec.name,
+    };
+}
+
 export interface IStoInfo {
     datasets: IDataSet[];
     specList: {
-        [K in keyof IVisSpecForExport]: K extends "config" ? Partial<IVisSpecForExport[K]> : IVisSpecForExport[K];
+        [K in keyof IVisSpecForExport]: K extends 'config' ? Partial<IVisSpecForExport[K]> : IVisSpecForExport[K];
     }[];
     dataSources: IDataSource[];
 }
@@ -34,7 +112,7 @@ export function download(data: string, filename: string, type: string) {
         window.navigator.msSaveOrOpenBlob(file, filename);
     else {
         // Others
-        var a = document.createElement("a"),
+        var a = document.createElement('a'),
             url = URL.createObjectURL(file);
         a.href = url;
         a.download = filename;

package/src/utils/workflow.ts

@@ -0,0 +1,148 @@
+import type { IDataQueryWorkflowStep, IExpression, IFilterWorkflowStep, ITransformWorkflowStep, IViewField, IViewWorkflowStep, IVisFilter, ISortWorkflowStep } from "../interfaces";
+import type { VizSpecStore } from "../store/visualSpecStore";
+import { getMeaAggKey } from ".";
+
+
+const walkExpression = (expression: IExpression, each: (field: string) => void): void => {
+    for (const param of expression.params) {
+        if (param.type === 'field') {
+            each(param.value);
+        } else if (param.type === 'expression') {
+            walkExpression(param.value, each);
+        }
+    }
+};
+
+const treeShake = (computedFields: readonly { key: string; expression: IExpression }[], viewKeys: readonly string[]): { key: string; expression: IExpression }[] => {
+    const usedFields = new Set(viewKeys);
+    const result = computedFields.filter(f => usedFields.has(f.key));
+    let currentFields = result.slice();
+    let rest = computedFields.filter(f => !usedFields.has(f.key));
+    while (currentFields.length && rest.length) {
+        const dependencies = new Set<string>();
+        for (const f of currentFields) {
+            walkExpression(f.expression, field => dependencies.add(field));
+        }
+        const nextFields = rest.filter(f => dependencies.has(f.key));
+        currentFields = nextFields;
+        rest = rest.filter(f => !dependencies.has(f.key));
+    }
+    return result;
+};
+
+export const toWorkflow = (
+    viewFilters: VizSpecStore['viewFilters'],
+    allFields: Omit<IViewField, 'dragId'>[],
+    viewDimensions: Omit<IViewField, 'dragId'>[],
+    viewMeasures: Omit<IViewField, 'dragId'>[],
+    defaultAggregated: VizSpecStore['visualConfig']['defaultAggregated'],
+    sort: 'none' | 'ascending' | 'descending',
+    limit?: number,
+): IDataQueryWorkflowStep[] => {
+    const viewKeys = new Set<string>([...viewDimensions, ...viewMeasures].map(f => f.fid));
+
+    let filterWorkflow: IFilterWorkflowStep | null = null;
+    let transformWorkflow: ITransformWorkflowStep | null = null;
+    let viewQueryWorkflow: IViewWorkflowStep | null = null;
+    let sortWorkflow: ISortWorkflowStep | null = null;
+
+    // TODO: apply **fold** before filter
+    
+    // First, to apply filters on the detailed data
+    const filters = viewFilters.filter(f => f.rule).map<IVisFilter>(f => {
+        viewKeys.add(f.fid);
+        const rule = f.rule!;
+        if (rule.type === 'one of') {
+            return {
+                fid: f.fid,
+                rule: {
+                    type: 'one of',
+                    value: [...rule.value],
+                },
+            };
+        } else if (rule.type === 'temporal range') {
+            const range = [new Date(rule.value[0]).getTime(), new Date(rule.value[1]).getTime()] as const;
+            return {
+                fid: f.fid,
+                rule: {
+                    type: 'temporal range',
+                    value: range,
+                },
+            };
+        } else {
+            const range = [Number(rule.value[0]), Number(rule.value[1])] as const;
+            return {
+                fid: f.fid,
+                rule: {
+                    type: 'range',
+                    value: range,
+                },
+            };
+        }
+    });
+    if (filters.length) {
+        filterWorkflow = {
+            type: 'filter',
+            filters,
+        };
+    }
+
+    // Second, to transform the data by rows 1 by 1
+    const computedFields = treeShake(allFields.filter(f => f.computed && f.expression).map(f => ({
+        key: f.fid,
+        expression: f.expression!,
+    })), [...viewKeys]);
+    if (computedFields.length) {
+        transformWorkflow = {
+            type: 'transform',
+            transform: computedFields,
+        };
+    }
+
+    // Finally, to apply the aggregation
+    // When aggregation is enabled, there're 2 cases:
+    // 1. If any of the measures is aggregated, then we apply the aggregation
+    // 2. If there's no measure in the view, then we apply the aggregation
+    const aggregateOn = viewMeasures.filter(f => f.aggName).map(f => [f.fid, f.aggName as string]);
+    const aggergated = defaultAggregated && (aggregateOn.length || (viewMeasures.length === 0 && viewDimensions.length > 0));
+    if (aggergated) {
+        viewQueryWorkflow = {
+            type: 'view',
+            query: [{
+                op: 'aggregate',
+                groupBy: viewDimensions.map(f => f.fid),
+                measures: viewMeasures.map((f) => ({
+                    field: f.fid,
+                    agg: f.aggName as any,
+                    asFieldKey: getMeaAggKey(f.fid, f.aggName!),
+                })),
+            }],
+        };
+    } else {
+        viewQueryWorkflow = {
+            type: 'view',
+            query: [{
+                op: 'raw',
+                fields: [...new Set([...viewDimensions, ...viewMeasures])].map(f => f.fid),
+            }],
+        };
+    }
+
+    if (sort !== "none" && limit) {
+        sortWorkflow = {
+            type: 'sort',
+            by: viewMeasures.map(f => aggergated ? getMeaAggKey(f.fid, f.aggName) : f.fid),
+            sort,
+        };
+    }
+
+
+    const steps: IDataQueryWorkflowStep[] = [
+        filterWorkflow!,
+        transformWorkflow!,
+        viewQueryWorkflow!,
+        sortWorkflow!,
+    ].filter(Boolean);
+
+    return steps;
+};

package/src/vis/react-vega.tsx

@@ -4,10 +4,9 @@ import { Subject, Subscription } from 'rxjs'
 import * as op from 'rxjs/operators';
 import type { ScenegraphEvent } from 'vega';
 import styled from 'styled-components';
-
+import { NonPositionChannelConfigList, PositionChannelConfigList } from '../config'; 
 import { useVegaExportApi } from '../utils/vegaApiExport';
 import { IViewField, IRow, IStackMode, VegaGlobalConfig, IVegaChartRef } from '../interfaces';
-import { useTranslation } from 'react-i18next';
 import { getVegaTimeFormatRules } from './temporalFormat';
 import { getSingleView } from './spec/view';
 import { NULL_FIELD } from './spec/field';
@@ -29,7 +28,7 @@ interface ReactVegaProps {
   name?: string;
   rows: Readonly<IViewField[]>;
   columns: Readonly<IViewField[]>;
-  dataSource: IRow[];
+  dataSource: readonly IRow[];
   defaultAggregate?: boolean;
   stack: IStackMode;
   interactiveScale: boolean;
@@ -48,6 +47,8 @@ interface ReactVegaProps {
   height: number;
   onGeomClick?: (values: any, e: any) => void
   vegaConfig: VegaGlobalConfig;
+  /** @default "en-US" */
+  locale?: string;
 }
 
 const click$ = new Subject<ScenegraphEvent>();
@@ -100,9 +101,9 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
     // dark = 'media',
     vegaConfig,
     // format
+    locale = 'en-US',
   } = props;
   const [viewPlaceholders, setViewPlaceholders] = useState<React.MutableRefObject<HTMLDivElement>[]>([]);
-  const { i18n } = useTranslation();
   // const mediaTheme = useCurrentMediaTheme(dark);
   // const themeConfig = builtInThemes[themeKey]?.[mediaTheme];
 
@@ -221,8 +222,22 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
         spec.encoding = singleView.encoding;
       }
 
+      spec.resolve ||= {};
+      // @ts-ignore
+      let resolve = vegaConfig.resolve;
+      for (let v in resolve) {
+          let value = resolve[v] ? 'independent' : 'shared';
+          // @ts-ignore
+          spec.resolve.scale = { ...spec.resolve.scale, [v]: value };
+          if((PositionChannelConfigList as string[]).includes(v)) {
+              spec.resolve.axis = { ...spec.resolve.axis, [v]: value };
+          }else if((NonPositionChannelConfigList as string[]).includes(v)){
+              spec.resolve.legend = { ...spec.resolve.legend, [v]: value };
+          }
+      }
+      
       if (viewPlaceholders.length > 0 && viewPlaceholders[0].current) {
-        const task = embed(viewPlaceholders[0].current, spec, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(i18n.language), config: vegaConfig }).then(res => {
+        const task = embed(viewPlaceholders[0].current, spec, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(locale), config: vegaConfig }).then(res => {
           const container = res.view.container();
           const canvas = container?.querySelector('canvas') ?? null;
           vegaRefs.current = [{
@@ -301,7 +316,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
           }
           if (node) {
             const id = index;
-            const task = embed(node, ans, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(i18n.language), config: vegaConfig }).then(res => {
+            const task = embed(node, ans, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(locale), config: vegaConfig }).then(res => {
               const container = res.view.container();
               const canvas = container?.querySelector('canvas') ?? null;
               vegaRefs.current[id] = {

package/src/vis/spec/aggregate.ts

@@ -4,11 +4,12 @@ import { getMeaAggKey } from '../../utils';
 
 export function channelAggregate(encoding: { [key: string]: any }, fields: IViewField[]) {
     Object.values(encoding).forEach((c) => {
-        const targetField = fields.find((f) => f.fid === c.field && !('aggregate' in c));
+        if (c.aggregate === null) return;
+        const targetField = fields.find((f) => f.fid === c.field && (f.analyticType === 'measure' || f.fid === COUNT_FIELD_ID));
         if (targetField && targetField.fid === COUNT_FIELD_ID) {
             c.title = 'Count';
             c.field = getMeaAggKey(targetField.fid, targetField.aggName)
-        } else if (targetField && targetField.analyticType === 'measure') {
+        } else if (targetField) {
             c.title = `${targetField.aggName}(${targetField.name})`;
             c.field = getMeaAggKey(targetField.fid, targetField.aggName)
         }

package/src/vis/spec/stack.ts

@@ -1,11 +1,12 @@
 import { IStackMode } from "../../interfaces";
 
 export function channelStack(encoding: { [key: string]: any }, stackMode: IStackMode) {
-    if (stackMode === 'stack') return;
-    if (encoding.x && encoding.x.type === 'quantitative') {
-        encoding.x.stack = stackMode === 'none' ? null : 'normalize';
-    }
-    if (encoding.y && encoding.y.type === 'quantitative') {
-        encoding.y.stack = stackMode === 'none' ? null : 'normalize';
+    if (stackMode === 'stack' || stackMode === 'zero') return;
+    let stackValue = stackMode === 'none' ? null : stackMode;
+    const stackableChannels = ['x', 'y', 'theta', 'radius'];
+    for (let ch of stackableChannels) {
+        if (encoding[ch] && encoding[ch].type === 'quantitative') {
+            encoding[ch].stack = stackValue
+        }
     }
 }

package/src/visualSettings/index.tsx

@@ -37,7 +37,6 @@ import throttle from '../utils/throttle';
 import KanariesLogo from '../assets/kanaries.png';
 import { ImageWithFallback } from '../components/timeoutImg';
 import LimitSetting from '../components/limitSetting';
-import { runInAction } from 'mobx';
 
 const Invisible = styled.div`
     clip: rect(1px, 1px, 1px, 1px);
@@ -367,6 +366,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                         none: XMarkIcon,
                         stack: ChevronDoubleUpIcon,
                         normalize: ArrowsUpDownIcon,
+                        center: ChevronUpDownIcon, // TODO: fix unsafe extends
                     }[g],
                 })),
                 value: stack,
@@ -505,9 +505,7 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                         <LimitSetting
                             value={limit}
                             setValue={(v) => {
-                                runInAction(() => {
-                                    vizStore.limit = v;
-                                });
+                                vizStore.setLimit(v);
                             }}
                         />
                     </FormContainer>

package/src/workers/filter.worker.js

@@ -3,7 +3,7 @@
 
 /**
  * @param {import('../interfaces').IRow[]} dataSource
- * @param {import('../interfaces').IFilterField[]} filters
+ * @param {import('../interfaces').IFilterFiledSimple[]} filters
  * @return {import('../interfaces').IRow[]}
  */
 const filter = (dataSource, filters) => {

package/src/workers/sort.ts

@@ -1,5 +1,4 @@
-import { IViewField, IRow } from '../interfaces';
-import { getMeaAggKey } from '../utils';
+import { IRow } from '../interfaces';
 
 function compareMulti(a: number[], b: number[]): number {
     if (a.length < b.length) return -compareMulti(b, a);
@@ -11,12 +10,12 @@ function compareMulti(a: number[], b: number[]): number {
     return 0;
 }
 
-export function sortBy(data: IRow[], viewMeasures: IViewField[], sort: 'ascending' | 'descending') {
+export function sortBy(data: IRow[], viewMeasures: string[], sort: 'ascending' | 'descending') {
     const sortM = sort === 'ascending' ? 1 : -1;
     return data
         .map((x) => ({
             data: x,
-            value: viewMeasures.map((f) => x[getMeaAggKey(f.fid, f.aggName)]),
+            value: viewMeasures.map((f) => x[f]),
         }))
         .sort((a, b) => sortM * compareMulti(a.value, b.value))
         .map((x) => x.data);

package/src/workers/sort.worker.ts

@@ -1,10 +1,10 @@
-import { IRow, IViewField } from '../interfaces';
+import { IRow } from '../interfaces';
 import { sortBy } from './sort';
 
 const main = (e: {
     data: {
         data: IRow[];
-        viewMeasures: IViewField[];
+        viewMeasures: string[];
         sort: 'ascending' | 'descending';
     };
 }) => {

package/src/workers/transform.ts

@@ -1,12 +1,11 @@
-import { IField, IRow } from "../interfaces";
+import { ITransformWorkflowStep, IRow, IExpression } from "../interfaces";
 import { dataframe2Dataset, dataset2DataFrame, execExpression } from "../lib/execExp";
 
-export function transformData(data: IRow[], columns: IField[]) {
-    const computedFields = columns.filter((f) => f.computed);
-    let df = dataset2DataFrame(data, columns);
-    for (let i = 0; i < computedFields.length; i++) {
-        const field = computedFields[i];
-        df = execExpression(field.expression!, df, columns);
+export function transformData(data: IRow[], trans: { key: string, expression: IExpression }[]) {
+    let df = dataset2DataFrame(data);
+    for (let i = 0; i < trans.length; i++) {
+        const field = trans[i];
+        df = execExpression(field.expression, df);
     }
-    return dataframe2Dataset(df, columns);
+    return dataframe2Dataset(df);
 }

package/src/workers/transform.worker.js

@@ -1,9 +1,9 @@
 import { transformData } from './transform'
 const main = e => {
-    const { dataSource, columns } = e.data;
+    const { dataSource, trans } = e.data;
 
     try {
-        const ans = transformData(dataSource, columns);
+        const ans = transformData(dataSource, trans);
         self.postMessage(ans);
     } catch (error) {
         self.postMessage({ error: error.message });

package/src/workers/viewQuery.worker.js

@@ -1,8 +1,8 @@
 import { queryView } from '../lib/viewQuery'
 const main = e => {
     try {
-        const { dataSource, metas, query } = e.data;
-        const ans = queryView(dataSource, metas, query);
+        const { dataSource, query } = e.data;
+        const ans = queryView(dataSource, query);
         self.postMessage(ans);
 
     } catch (err) {