@kanaries/graphic-walker 0.2.15 → 0.2.17

package/src/dataSource/dataSelection/csvData.tsx

@@ -9,7 +9,10 @@ import { useTranslation } from "react-i18next";
 import DefaultButton from "../../components/button/default";
 import PrimaryButton from "../../components/button/primary";
 import DropdownSelect from "../../components/dropdownSelect";
-import { charsetOptions } from "./config";
+import { SUPPORTED_FILE_TYPES, charsetOptions } from "./config";
+import { classNames } from "../../utils";
+import { RadioGroup } from "@headlessui/react";
+import { jsonReader } from "./utils";
 
 const Container = styled.div`
     overflow-x: auto;
@@ -22,6 +25,7 @@ const CSVData: React.FC<ICSVData> = (props) => {
     const { commonStore } = useGlobalStore();
     const { tmpDSName, tmpDataSource, tmpDSRawFields } = commonStore;
     const [encoding, setEncoding] = useState<string>("utf-8");
+    const [fileType, setFileType] = useState<string>("csv");
 
     const onSubmitData = useCallback(() => {
         commonStore.commitTempDS();
@@ -30,6 +34,27 @@ const CSVData: React.FC<ICSVData> = (props) => {
     const { t } = useTranslation("translation", { keyPrefix: "DataSource.dialog.file" });
     const fileLoaded = tmpDataSource.length > 0 && tmpDSRawFields.length > 0;
 
+    const fileUpload = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const files = e.target.files;
+        if (files !== null) {
+            const file = files[0];
+            if (fileType === 'csv') {
+                FileReader.csvReader({
+                    file,
+                    config: { type: "reservoirSampling", size: Infinity },
+                    onLoading: () => {},
+                    encoding,
+                }).then((data) => {
+                    commonStore.updateTempDS(data as IRow[]);
+                });
+            } else {
+                jsonReader(file).then((data) => {
+                    commonStore.updateTempDS(data as IRow[]);
+                });
+            }
+        }
+    }, [fileType, encoding]);
+
     return (
         <Container>
             {!fileLoaded && (
@@ -49,49 +74,56 @@ const CSVData: React.FC<ICSVData> = (props) => {
                             d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
                         />
                     </svg>
-                    <h3 className="mt-2 text-sm font-semibold text-gray-900">{t('choose_file')}</h3>
-                    <p className="mt-1 text-sm text-gray-500">{t('get_start_desc')}</p>
+                    <h3 className="mt-2 text-sm font-semibold text-gray-900 dark:text-gray-50">{t("choose_file")}</h3>
+                    <p className="mt-1 text-sm text-gray-500">{t("get_start_desc")}</p>
                 </div>
             )}
-            <input
-                style={{ display: "none" }}
-                type="file"
-                ref={fileRef}
-                onChange={(e) => {
-                    const files = e.target.files;
-                    if (files !== null) {
-                        const file = files[0];
-                        FileReader.csvReader({
-                            file,
-                            config: { type: "reservoirSampling", size: Infinity },
-                            onLoading: () => {},
-                            encoding,
-                        }).then((data) => {
-                            commonStore.updateTempDS(data as IRow[]);
-                        });
-                    }
-                }}
-            />
+            <input style={{ display: "none" }} type="file" ref={fileRef} onChange={fileUpload} />
             {!fileLoaded && (
-                <div className="my-1 flex justify-center">
-                    <DefaultButton
-                        className="mr-2"
-                        onClick={() => {
-                            if (fileRef.current) {
-                                fileRef.current.click();
-                            }
-                        }}
-                        text={t("open")}
-                    />
-                    <div className="inline-block relative">
-                        <DropdownSelect
-                            buttonClassName="w-36"
-                            options={charsetOptions}
-                            selectedKey={encoding}
-                            onSelect={(k) => {
-                                setEncoding(k);
+                <div className="my-1">
+                    <div className="flex justify-center">
+                        <RadioGroup value={fileType} onChange={setFileType} className="mt-2">
+                            <RadioGroup.Label className="sr-only"> Choose a memory option </RadioGroup.Label>
+                            <div className="grid grid-cols-2 gap-3">
+                                {SUPPORTED_FILE_TYPES.map((option) => (
+                                    <RadioGroup.Option
+                                        key={option.value}
+                                        value={option.value}
+                                        className={({ active, checked }) =>
+                                            classNames(
+                                                checked
+                                                    ? "bg-indigo-600 text-white hover:bg-indigo-500"
+                                                    : "ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800",
+                                                "flex cursor-pointer items-center justify-center rounded py-1 px-8 text-sm font-semibold uppercase sm:flex-1"
+                                            )
+                                        }
+                                    >
+                                        <RadioGroup.Label as="span">{option.label}</RadioGroup.Label>
+                                    </RadioGroup.Option>
+                                ))}
+                            </div>
+                        </RadioGroup>
+                    </div>
+                    <div className="my-1 flex justify-center">
+                        <DefaultButton
+                            className="mr-2"
+                            onClick={() => {
+                                if (fileRef.current) {
+                                    fileRef.current.click();
+                                }
                             }}
+                            text={t("open")}
                         />
+                        <div className="inline-block relative">
+                            <DropdownSelect
+                                buttonClassName="w-36"
+                                options={charsetOptions}
+                                selectedKey={encoding}
+                                onSelect={(k) => {
+                                    setEncoding(k);
+                                }}
+                            />
+                        </div>
                     </div>
                 </div>
             )}

package/src/dataSource/dataSelection/gwFile.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback } from "react";
+import React from "react";
 import { useGlobalStore } from "../../store";
 import { observer } from "mobx-react-lite";
 
@@ -7,7 +7,7 @@ interface GWFileProps {
     fileRef: React.RefObject<HTMLInputElement>;
 }
 const GWFile: React.FC<GWFileProps> = (props) => {
-    const { commonStore, vizStore } = useGlobalStore();
+    const { vizStore } = useGlobalStore();
 
     return (
         <input

package/src/dataSource/dataSelection/utils.ts

@@ -0,0 +1,28 @@
+import { IDataSetInfo, IRow } from "../../interfaces";
+
+export function jsonReader (file: File): Promise<IRow[]> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            try {
+                const data = JSON.parse(reader.result as string);
+                if (!Array.isArray(data)) {
+                    throw new Error('Invalid JSON file');
+                }
+                resolve(data);
+            } catch (e) {
+                reject(e);
+            }
+        };
+        reader.readAsText(file);
+    });
+}
+
+// export function jsonArray2DatasetInfo (data: IRow[]): IDataSetInfo {
+//     const fields = Object.keys(data[0]);
+//     return {
+//         name: 'New Dataset',
+//         rawFields: fields.map(f => ({ name: f, type: 'number' })),
+//         dataSource: data
+//     }
+// }

package/src/dataSource/index.tsx

@@ -12,11 +12,9 @@ import DropdownSelect from "../components/dropdownSelect";
 import PrimaryButton from "../components/button/primary";
 
 interface DSSegmentProps {
-    preWorkDone: boolean;
 }
 
 const DataSourceSegment: React.FC<DSSegmentProps> = (props) => {
-    const { preWorkDone } = props;
     const { commonStore, vizStore } = useGlobalStore();
     const gwFileRef = useRef<HTMLInputElement>(null);
     const { t } = useTranslation();
@@ -26,9 +24,6 @@ const DataSourceSegment: React.FC<DSSegmentProps> = (props) => {
     return (
         <div className="flex items-center m-4 p-4 border border-gray-200 dark:border-gray-700">
             <GwFile fileRef={gwFileRef} />
-            {!preWorkDone && (
-                <div className="animate-spin inline-block mr-2 ml-2 w-4 h-4 rounded-full border-t-2 border-l-2 border-blue-500"></div>
-            )}
             {/* <label className="text-xs mr-1 whitespace-nowrap self-center h-4">
                 {t("DataSource.labels.cur_dataset")}
             </label> */}
@@ -76,18 +71,6 @@ const DataSourceSegment: React.FC<DSSegmentProps> = (props) => {
                 >
                     <DataSelection />
                 </Modal>
-            {/* {showDSPanel && (
-                <Modal
-                    title={t("DataSource.dialog.create_data_source")}
-                    onClose={() => {
-                        commonStore.setShowDSPanel(false);
-                    }}
-                >
-                    <DataSelection />
-                </Modal>
-            )} */}
-            {preWorkDone && <CheckCircleIcon className="text-green-500 w-5 inline-block ml-2" />}
-            {!preWorkDone && <ArrowPathIcon className="text-yellow-500 w-5 inline-block ml-2" />}
         </div>
     );
 };

package/src/dataSource/utils.ts

@@ -2,6 +2,7 @@ import { IRow, IMutField } from "../interfaces";
 import { inferMeta } from "../lib/inferMeta";
 import { guardDataKeys } from "../utils/dataPrep";
 
+
 export function transData(dataSource: IRow[]): {
     dataSource: IRow[];
     fields: IMutField[];
@@ -12,7 +13,11 @@ export function transData(dataSource: IRow[]): {
             fields: [],
         };
     }
-    const keys = Object.keys(dataSource[0]);
+    const sampleRecord = dataSource[0];
+    // const rawKeys = Object.keys(sampleRecord);
+    // let flatColKeys: string[] = flatNestKeys(sampleRecord);
+
+    const keys = Object.keys(sampleRecord);
     const metas = inferMeta({
         dataSource,
         fields: keys.map((k) => ({
@@ -21,7 +26,7 @@ export function transData(dataSource: IRow[]): {
             analyticType: "?",
             semanticType: "?",
         })),
-    });
+    })
     const { safeData, safeMetas } = guardDataKeys(dataSource, metas);
     const finalData: IRow[] = [];
     for (let record of safeData) {
@@ -30,7 +35,7 @@ export function transData(dataSource: IRow[]): {
             if (field.semanticType === "quantitative") {
                 newRecord[field.fid] = Number(record[field.fid]);
             } else {
-                newRecord[field.fid] = record[field.fid];
+                newRecord[field.fid] = record[field.fid];//getValueByKeyPath(record, field.fid);// record[field.fid];
             }
         }
         finalData.push(newRecord);

package/src/fields/aestheticFields.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 import { Droppable } from "@kanaries/react-beautiful-dnd";
 import { DRAGGABLE_STATE_KEYS } from './fieldsContext';
 import { AestheticFieldContainer } from './components'
-import OBFieldContainer from './obComponents/obFContainer';
 import SingleEncodeEditor from './encodeFields/singleEncodeEditor';
 
-const aestheticFields = DRAGGABLE_STATE_KEYS.filter(f => ['color', 'opacity', 'size', 'shape'].includes(f.id));
+const aestheticFields = DRAGGABLE_STATE_KEYS.filter(f => ['color', 'opacity', 'size', 'shape', 'details'].includes(f.id));
 
 const AestheticFields: React.FC = props => {
     return <div>

package/src/fields/datasetFields/meaFields.tsx

@@ -20,18 +20,26 @@ const MeaFields: React.FC<Props> = (props) => {
                 value: "bin",
                 label: "Bin",
             },
+            {
+                value: 'binCount',
+                label: 'Bin Count'
+            },
             {
                 value: "log10",
                 label: "Log10",
             },
+            {
+                value: "log2",
+                label: "Log2",
+            },
         ];
     }, []);
 
     const fieldActionHandler = useCallback((selectedValue: any, opIndex: number, meaIndex: number) => {
-        if (selectedValue === "bin") {
-            vizStore.createBinField("measures", meaIndex);
-        } else if (selectedValue === "log10") {
-            vizStore.createLogField("measures", meaIndex);
+        if (selectedValue === "bin" || selectedValue === 'binCount') {
+            vizStore.createBinField("measures", meaIndex, selectedValue);
+        } else if (selectedValue === "log10" || selectedValue === "log2") {
+            vizStore.createLogField("measures", meaIndex, selectedValue);
         }
     }, []);
     return (

package/src/fields/encodeFields/singleEncodeEditor.tsx

@@ -1,15 +1,14 @@
-import React, { useMemo } from "react";
-import { IDraggableStateKey } from "../../interfaces";
-import { observer } from "mobx-react-lite";
-import { useGlobalStore } from "../../store";
-import DropdownSelect from "./singleEncodeDropDown";
-import { DroppableProvided } from "react-beautiful-dnd";
-import { ChevronUpDownIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { useTranslation } from "react-i18next";
-import { COUNT_FIELD_ID } from "../../constants";
-import DropdownContext from "../../components/dropdownContext";
-import { AGGREGATOR_LIST } from "../fieldsContext";
-import { Draggable, DroppableStateSnapshot } from "@kanaries/react-beautiful-dnd";
+import React, { useMemo } from 'react';
+import { IDraggableStateKey } from '../../interfaces';
+import { observer } from 'mobx-react-lite';
+import { useGlobalStore } from '../../store';
+import { DroppableProvided } from 'react-beautiful-dnd';
+import { ChevronUpDownIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { useTranslation } from 'react-i18next';
+import { COUNT_FIELD_ID } from '../../constants';
+import DropdownContext from '../../components/dropdownContext';
+import { AGGREGATOR_LIST } from '../fieldsContext';
+import { Draggable, DroppableStateSnapshot } from '@kanaries/react-beautiful-dnd';
 
 interface SingleEncodeEditorProps {
     dkey: IDraggableStateKey;

package/src/fields/fieldsContext.tsx

@@ -50,6 +50,7 @@ export const DRAGGABLE_STATE_KEYS: Readonly<IDraggableStateKey[]> = [
     { id: 'theta', mode: 1 },
     { id: 'radius', mode: 1 },
     { id: 'filters', mode: 1 },
+    { id: 'details', mode: 1 }
 ] as const;
 
 export const AGGREGATOR_LIST: Readonly<string[]> = [

package/src/index.css

@@ -10,11 +10,11 @@ html{
   }
 }
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    sans-serif; */
+  /* -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; */
   margin: 0px;
   padding: 0px;
 }

package/src/index.tsx

@@ -1,22 +1,22 @@
-import React, { createContext, useEffect, useRef, useState } from 'react';
-import { StyleSheetManager } from 'styled-components';
-import root from 'react-shadow';
-import { DOM } from '@kanaries/react-beautiful-dnd';
-import { observer } from 'mobx-react-lite';
-import App, { IGWProps } from './App';
-import { StoreWrapper } from './store/index';
-import { FieldsContextWrapper } from './fields/fieldsContext';
+import React, { createContext, useEffect, useRef, useState } from "react";
+import { StyleSheetManager } from "styled-components";
+import root from "react-shadow";
+import { DOM } from "@kanaries/react-beautiful-dnd";
+import { observer } from "mobx-react-lite";
+import App, { IGWProps } from "./App";
+import { StoreWrapper } from "./store/index";
+import { FieldsContextWrapper } from "./fields/fieldsContext";
 
-import './empty_sheet.css';
+import "./empty_sheet.css";
 import tailwindStyle from "tailwindcss/tailwind.css?inline";
-import style from './index.css?inline';
-
+import style from "./index.css?inline";
 
 export const ShadowDomContext = createContext<{ root: ShadowRoot | null }>({ root: null });
 
-export const GraphicWalker: React.FC<IGWProps> = observer(props => {
+export const GraphicWalker: React.FC<IGWProps> = observer((props) => {
     const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
     const rootRef = useRef<HTMLDivElement>(null);
+    const { storeRef } = props;
 
     useEffect(() => {
         if (rootRef.current) {
@@ -32,20 +32,20 @@ export const GraphicWalker: React.FC<IGWProps> = observer(props => {
     }, []);
 
     return (
-        <root.div mode="open" ref={rootRef}>
-            <style>{tailwindStyle}</style>
-            <style>{style}</style>
-            {shadowRoot && (
-                <StyleSheetManager target={shadowRoot}>
-                    <StoreWrapper keepAlive={props.keepAlive}>
+        <StoreWrapper keepAlive={props.keepAlive} storeRef={storeRef}>
+            <root.div mode="open" ref={rootRef}>
+                <style>{tailwindStyle}</style>
+                <style>{style}</style>
+                {shadowRoot && (
+                    <StyleSheetManager target={shadowRoot}>
                         <FieldsContextWrapper>
                             <ShadowDomContext.Provider value={{ root: shadowRoot }}>
                                 <App {...props} />
                             </ShadowDomContext.Provider>
                         </FieldsContextWrapper>
-                    </StoreWrapper>
-                </StyleSheetManager>
-            )}
-        </root.div>
+                    </StyleSheetManager>
+                )}
+            </root.div>
+        </StoreWrapper>
     );
 });

package/src/interfaces.ts

@@ -1,19 +1,28 @@
-import { StatFuncName } from "visual-insights/build/esm/statistics";
-import { AggFC } from 'cube-core/built/types';
-import { IAnalyticType, IMutField as VIMutField, ISemanticType } from 'visual-insights';
-
 export type DeepReadonly<T extends Record<keyof any, any>> = {
     readonly [K in keyof T]: T[K] extends Record<keyof any, any> ? DeepReadonly<T[K]> : T[K];
 };
+export type ISemanticType = 'quantitative' | 'nominal' | 'ordinal' | 'temporal';
+export type IDataType = 'number' | 'integer' | 'boolean' | 'date' | 'string';
+export type IAnalyticType = 'dimension' | 'measure';
 
 export interface IRow {
     [key: string]: any;
 }
-/**
- * @deprecated
- */
-export type SemanticType = 'quantitative' | 'nominal' | 'ordinal' | 'temporal';
 
+export type IAggregator = 'sum' | 'count' | 'max' | 'min' | 'mean' | 'median' | 'variance' | 'stdev';
+export interface Specification {
+    position?: string[];
+    color?: string[];
+    size?: string[];
+    shape?: string[];
+    opacity?: string[];
+    facets?: string[];
+    page?: string[];
+    filter?: string[];
+    highFacets?: string[];
+    geomType?: string[];
+    aggregate?: boolean;
+}
 export interface Filters {
     [key: string]: any[];
 }
@@ -25,7 +34,7 @@ export interface IMutField {
     disable?: boolean;
     semanticType: ISemanticType;
     analyticType: IAnalyticType;
-};
+}
 
 export interface IUncertainMutField {
     fid: string;
@@ -36,6 +45,30 @@ export interface IUncertainMutField {
     analyticType: IAnalyticType | '?';
 }
 
+export type IExpParamter =
+    | {
+          type: 'field';
+          value: string;
+      }
+    | {
+          type: 'value';
+          value: any;
+      }
+    | {
+          type: 'expression';
+          value: IExpression;
+      }
+    | {
+          type: 'constant';
+          value: any;
+      };
+
+export interface IExpression {
+    op: 'bin' | 'log2' | 'log10' | 'one' | 'binCount';
+    params: IExpParamter[];
+    as: string;
+}
+
 export interface IField {
     /**
      * fid: key in data record
@@ -52,6 +85,8 @@ export interface IField {
     semanticType: ISemanticType;
     analyticType: IAnalyticType;
     cmp?: (a: any, b: any) => number;
+    computed?: boolean;
+    expressoion?: IExpression;
 }
 
 export interface IViewField extends IField {
@@ -59,13 +94,6 @@ export interface IViewField extends IField {
     sort?: 'none' | 'ascending' | 'descending';
 }
 
-export interface Measure extends IField {
-    aggregator?: AggFC;
-    minWidth?: number;
-    formatter?: (value: number | undefined) => number | string;
-    [key: string]: any;
-}
-
 export interface DataSet {
     id: string;
     name: string;
@@ -80,7 +108,20 @@ export interface IFieldNeighbor {
 
 export interface IMeasure {
     key: string;
-    op: StatFuncName
+    op: IAggregator;
+}
+
+export interface IPredicate {
+    key: string;
+    type: "discrete" | "continuous";
+    range: Set<any> | [number, number];
+}
+
+export interface IExplainProps {
+    dataSource: IRow[];
+    predicates: IPredicate[];
+    viewFields: IField[];
+    metas: IField[];
 }
 
 export interface IDataSet {
@@ -95,12 +136,12 @@ export interface IDataSet {
 export interface IDataSetInfo {
     name: string;
     rawFields: IMutField[];
-    dataSource: IRow[]
+    dataSource: IRow[];
 }
 
 export interface IDataSource {
     id: string;
-    data: IRow[]
+    data: IRow[];
 }
 
 export interface IFilterField extends IViewField {
@@ -125,39 +166,34 @@ export interface DraggableFieldState {
 
 export interface IDraggableStateKey {
     id: keyof DraggableFieldState;
-    mode: number
-}
-
-export type IFilterRule = {
-    type: 'range';
-    value: readonly [number, number];
-} | {
-    type: 'temporal range';
-    value: readonly [number, number];
-} | {
-    type: 'one of';
-    value: Set<string | number>;
-};
+    mode: number;
+}
 
-export const EXPLORATION_TYPES = [
-    'none',
-    'brush',
-    'point',
-] as const;
+export type IFilterRule =
+    | {
+          type: 'range';
+          value: readonly [number, number];
+      }
+    | {
+          type: 'temporal range';
+          value: readonly [number, number];
+      }
+    | {
+          type: 'one of';
+          value: Set<string | number>;
+      };
 
-export const BRUSH_DIRECTIONS = [
-    'default',
-    'x',
-    'y',
-] as const;
+export const EXPLORATION_TYPES = ['none', 'brush', 'point'] as const;
+
+export const BRUSH_DIRECTIONS = ['default', 'x', 'y'] as const;
 
 export type IStackMode = 'none' | 'stack' | 'normalize';
-export type IExplorationType = (typeof EXPLORATION_TYPES)[number];
-export type IBrushDirection = (typeof BRUSH_DIRECTIONS)[number];
+export type IExplorationType = typeof EXPLORATION_TYPES[number];
+export type IBrushDirection = typeof BRUSH_DIRECTIONS[number];
 
 export interface IVisualConfig {
     defaultAggregated: boolean;
-    geoms:  string[];        
+    geoms: string[];
     stack: IStackMode;
     showActions: boolean;
     interactiveScale: boolean;
@@ -166,7 +202,7 @@ export interface IVisualConfig {
         mode: 'auto' | 'fixed';
         width: number;
         height: number;
-    }
+    };
     exploration: {
         mode: IExplorationType;
         /** works when mode is 'brush' */
@@ -176,15 +212,15 @@ export interface IVisualConfig {
 
 export interface IVisSpec {
     readonly visId: string;
-    readonly name?: [string, Record<string, any>?];
+    readonly name?: string;
     readonly encodings: DeepReadonly<DraggableFieldState>;
     readonly config: DeepReadonly<IVisualConfig>;
 }
 
 export enum ISegmentKey {
     vis = 'vis',
-    data = 'data'
+    data = 'data',
 }
 
 export type IThemeKey = 'vega' | 'g2';
-export type IDarkMode = 'media' | 'light' | 'dark';
+export type IDarkMode = 'media' | 'light' | 'dark';