@kanaries/graphic-walker 0.2.15 → 0.2.16

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { IGWProps } from './App';
-import './empty_sheet.css';
+import React from "react";
+import { IGWProps } from "./App";
+import "./empty_sheet.css";
 export declare const ShadowDomContext: React.Context<{
     root: ShadowRoot | null;
 }>;

package/dist/interfaces.d.ts

@@ -30,6 +30,24 @@ export interface IUncertainMutField {
     semanticType: ISemanticType | '?';
     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
@@ -46,6 +64,8 @@ export interface IField {
     semanticType: ISemanticType;
     analyticType: IAnalyticType;
     cmp?: (a: any, b: any) => number;
+    computed?: boolean;
+    expressoion?: IExpression;
 }
 export interface IViewField extends IField {
     dragId: string;
@@ -146,7 +166,7 @@ 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>;
 }

package/dist/lib/execExp.d.ts

@@ -0,0 +1,8 @@
+import { IExpression, IField, IRow } from "../interfaces";
+interface IDataFrame {
+    [key: string]: any[];
+}
+export declare function execExpression(exp: IExpression, dataFrame: IDataFrame, columns: IField[]): IDataFrame;
+export declare function dataset2DataFrame(dataset: IRow[], columns: IField[]): IDataFrame;
+export declare function dataframe2Dataset(dataFrame: IDataFrame, columns: IField[]): IRow[];
+export {};

package/dist/lib/interfaces.d.ts

@@ -0,0 +1,22 @@
+export interface IAggQuery {
+    op: 'aggregate';
+    groupBy: string[];
+    agg: {
+        [field: string]: 'sum' | 'count' | 'max' | 'min' | 'mean' | 'median' | 'variance' | 'stdev';
+    };
+}
+export interface IFoldQuery {
+    op: 'fold';
+    foldBy: string[];
+    newFoldKeyCol: string;
+    newFoldValueCol: string;
+}
+export interface IBinQuery {
+    op: 'bin';
+    binBy: string;
+    newBinCol: string;
+    binSize: number;
+}
+export interface IRawQuery {
+    op: 'raw';
+}

package/dist/lib/op/aggregate.d.ts

@@ -0,0 +1,3 @@
+import { IRow } from "visual-insights";
+import { IAggQuery } from "../interfaces";
+export declare function aggregate(data: IRow[], query: IAggQuery): IRow[];

package/dist/lib/op/bin.d.ts

@@ -0,0 +1,3 @@
+import { IRow } from "visual-insights";
+import { IBinQuery } from "../interfaces";
+export declare function bin(dataSource: IRow[], query: IBinQuery): IRow[];

package/dist/lib/op/fold.d.ts

@@ -0,0 +1,3 @@
+import { IRow } from "visual-insights";
+import { IFoldQuery } from "../interfaces";
+export declare function fold(data: IRow[], query: IFoldQuery): IRow[];

package/dist/lib/op/stat.d.ts

@@ -0,0 +1,8 @@
+export declare function mean(nums: number[]): number;
+export declare function sum(nums: number[]): number;
+export declare function median(nums: number[]): number;
+export declare function variance(nums: number[]): number;
+export declare function stdev(nums: number[]): number;
+export declare function max(nums: number[]): number;
+export declare function min(nums: number[]): number;
+export declare function count(nums: number[]): number;

package/dist/lib/viewQuery.d.ts

@@ -0,0 +1,5 @@
+import { IRow } from "visual-insights";
+import { IMutField } from "../interfaces";
+import { IAggQuery, IBinQuery, IFoldQuery, IRawQuery } from "./interfaces";
+export type IViewQuery = IAggQuery | IFoldQuery | IBinQuery | IRawQuery;
+export declare function queryView(rawData: IRow[], metas: IMutField[], query: IViewQuery): IRow[];

package/dist/models/visSpecHistory.d.ts

@@ -6,6 +6,7 @@ export declare class VisSpecWithHistory {
     constructor(data: IVisSpec);
     private get frame();
     private batchFlag;
+    updateLatest(snapshot: Partial<Readonly<VisSpecWithHistory['snapshots'][0]>>): void;
     private commit;
     get canUndo(): boolean;
     undo(): boolean;
@@ -18,5 +19,6 @@ export declare class VisSpecWithHistory {
     set encodings(encodings: IVisSpec['encodings']);
     get config(): DeepReadonly<IVisualConfig>;
     set config(config: IVisSpec['config']);
+    clone(): VisSpecWithHistory;
     exportGW(): IVisSpec;
 }

package/dist/renderer/index.d.ts

@@ -1,8 +1,9 @@
-import React from "react";
-import { IReactVegaHandler } from "../vis/react-vega";
-import { IDarkMode, IThemeKey } from "../interfaces";
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<{
-    themeKey?: IThemeKey | undefined;
-    dark?: IDarkMode | undefined;
-} & React.RefAttributes<IReactVegaHandler>, "dark" | "key" | "themeKey"> & React.RefAttributes<IReactVegaHandler>>>;
+import React from 'react';
+import { IDarkMode, IThemeKey } from '../interfaces';
+import { IReactVegaHandler } from '../vis/react-vega';
+interface RendererProps {
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<RendererProps & React.RefAttributes<IReactVegaHandler>, "key" | keyof RendererProps> & React.RefAttributes<IReactVegaHandler>>>;
 export default _default;

package/dist/renderer/specRenderer.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IReactVegaHandler } from '../vis/react-vega';
+import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig } from '../interfaces';
+interface SpecRendererProps {
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
+    data: IRow[];
+    loading: boolean;
+    draggableFieldState: DeepReadonly<DraggableFieldState>;
+    visualConfig: IVisualConfig;
+}
+declare const SpecRenderer: React.ForwardRefExoticComponent<SpecRendererProps & React.RefAttributes<IReactVegaHandler>>;
+export default SpecRenderer;

package/dist/services.d.ts

@@ -1,6 +1,7 @@
 import { Specification } from 'visual-insights';
 import { IRow, Filters, SemanticType, IMeasure, IMutField, IFilterField } from './interfaces';
 import { IExplaination, IMeasureWithStat } from './insights';
+import { IViewQuery } from './lib/viewQuery';
 interface ExplainParams {
     dimensions: string[];
     measures: string[];
@@ -31,5 +32,7 @@ interface PreAnalysisParams {
 }
 export declare function preAnalysis(props: PreAnalysisParams): Promise<void>;
 export declare function destroyWorker(): void;
-export declare const applyFilter: (data: readonly IRow[], filters: readonly IFilterField[]) => Promise<IRow[]>;
+export declare const applyFilter: (data: IRow[], filters: readonly IFilterField[]) => Promise<IRow[]>;
+export declare const transformDataService: (data: IRow[], columns: IMutField[]) => Promise<IRow[]>;
+export declare const applyViewQuery: (data: IRow[], metas: IMutField[], query: IViewQuery) => Promise<IRow[]>;
 export {};

package/dist/store/commonStore.d.ts

@@ -13,6 +13,7 @@ export declare class CommonStore {
         position: [number, number];
     };
     showDataConfig: boolean;
+    showCodeExportPanel: boolean;
     filters: Filters;
     segmentKey: ISegmentKey;
     constructor();
@@ -22,6 +23,7 @@ export declare class CommonStore {
     setShowDataConfig(show: boolean): void;
     setShowInsightBoard(show: boolean): void;
     showEmbededMenu(position: [number, number]): void;
+    setShowCodeExportPanel(show: boolean): void;
     closeEmbededMenu(): void;
     initTempDS(): void;
     updateTempFields(fields: IMutField[]): void;
@@ -31,6 +33,10 @@ export declare class CommonStore {
     updateTempFieldSemanticType(fieldKey: string, semanticType: IMutField['semanticType']): void;
     updateTempName(name: string): void;
     updateTempDS(rawData: IRow[]): void;
+    /**
+     * update temp dataset (standard) with dataset info
+     * @param dataset
+     */
     updateTempSTDDS(dataset: IDataSetInfo): void;
     commitTempDS(): void;
     startDSBuildingTask(): void;

package/dist/store/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CommonStore } from './commonStore';
 import { VizSpecStore } from './visualSpecStore';
-interface GlobalStore {
+export interface IGlobalStore {
     commonStore: CommonStore;
     vizStore: VizSpecStore;
 }
@@ -9,11 +9,12 @@ export declare function destroyGWStore(): void;
 export declare function rebootGWStore(): void;
 interface StoreWrapperProps {
     keepAlive?: boolean;
+    storeRef?: React.MutableRefObject<IGlobalStore | null>;
 }
 export declare class StoreWrapper extends React.Component<StoreWrapperProps> {
     constructor(props: StoreWrapperProps);
     componentWillUnmount(): void;
     render(): JSX.Element;
 }
-export declare function useGlobalStore(): GlobalStore;
+export declare function useGlobalStore(): IGlobalStore;
 export {};

package/dist/store/visualSpecStore.d.ts

@@ -1,7 +1,10 @@
 import { Specification } from "visual-insights";
-import { DataSet, DraggableFieldState, IFilterRule, IViewField, IVisualConfig } from "../interfaces";
+import { DataSet, DraggableFieldState, IFilterRule, IViewField, IVisSpec, IVisualConfig } from "../interfaces";
 import { VisSpecWithHistory } from "../models/visSpecHistory";
+import { IStoInfo } from "../utils/save";
 import { CommonStore } from "./commonStore";
+export declare function initEncoding(): DraggableFieldState;
+export declare function initVisualConfig(): IVisualConfig;
 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];
 };
@@ -76,7 +79,9 @@ export declare class VizSpecStore {
      * dimension fields in visualization
      */
     get viewMeasures(): IViewField[];
-    addVisualization(): void;
+    get allFields(): IViewField[];
+    get viewFilters(): readonly DeepReadonly<import("../interfaces").IFilterField>[];
+    addVisualization(defaultName?: string): void;
     selectVisualization(visIndex: number): void;
     setVisName(visIndex: number, name: string): void;
     initState(): void;
@@ -99,8 +104,8 @@ export declare class VizSpecStore {
     setFilterEditing(index: number): void;
     closeFilterEditing(): void;
     transpose(): void;
-    createBinField(stateKey: keyof DraggableFieldState, index: number): void;
-    createLogField(stateKey: keyof DraggableFieldState, index: number): void;
+    createBinField(stateKey: keyof DraggableFieldState, index: number, binType: 'bin' | 'binCount'): void;
+    createLogField(stateKey: keyof DraggableFieldState, index: number, scaleType: 'log10' | 'log2'): void;
     setFieldAggregator(stateKey: keyof DraggableFieldState, index: number, aggName: string): void;
     get sortCondition(): boolean;
     setFieldSort(stateKey: keyof DraggableFieldState, index: number, sortType: "none" | "ascending" | "descending"): void;
@@ -109,6 +114,8 @@ export declare class VizSpecStore {
     renderSpec(spec: Specification): void;
     destroy(): void;
     exportAsRaw(): string;
+    exportViewSpec(): IVisSpec[];
+    importStoInfo(stoInfo: IStoInfo): void;
     importRaw(raw: string): void;
 }
 export {};

package/dist/utils/dataPrep.d.ts

@@ -4,3 +4,5 @@ export declare function guardDataKeys(data: IRow[], metas: IMutField[]): {
     safeData: IRow[];
     safeMetas: IMutField[];
 };
+export declare function flatNestKeys(object: any): string[];
+export declare function getValueByKeyPath(object: any, keyPath: string): any;

package/dist/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { IRow, Filters, IMutField } from "../interfaces";
+import { IRow, Filters, IViewField } from "../interfaces";
 export declare function checkMajorFactor(data: IRow[], childrenData: Map<any, IRow[]>, dimensions: string[], measures: string[]): {
     majorKey: string;
     majorSum: number;
@@ -16,9 +16,7 @@ export declare function getPredicates(selection: IRow[], dimensions: string[], m
 export declare function getPredicatesFromVegaSignals(signals: Filters, dimensions: string[], measures: string[]): IPredicate[];
 export declare function filterByPredicates(data: IRow[], predicates: IPredicate[]): IRow[];
 export declare function applyFilters(dataSource: IRow[], filters: Filters): IRow[];
-export declare function extendCountField(dataSource: IRow[], fields: IMutField[]): {
-    dataSource: IRow[];
-    fields: IMutField[];
-};
+export declare function createCountField(): IViewField;
 export declare function getRange(nums: number[]): [number, number];
 export declare function makeNumbersBeautiful(nums: number[]): number[];
+export declare function classNames(...classes: string[]): string;

package/dist/utils/save.d.ts

@@ -2,7 +2,7 @@ import { IDataSet, IDataSource, IVisSpec } from "../interfaces";
 import { VisSpecWithHistory } from "../models/visSpecHistory";
 export declare function dumpsGWPureSpec(list: VisSpecWithHistory[]): IVisSpec[];
 export declare function parseGWPureSpec(list: IVisSpec[]): VisSpecWithHistory[];
-interface IStoInfo {
+export interface IStoInfo {
     datasets: IDataSet[];
     specList: {
         [K in keyof IVisSpec]: K extends "config" ? Partial<IVisSpec[K]> : IVisSpec[K];
@@ -12,4 +12,3 @@ interface IStoInfo {
 export declare function stringifyGWContent(info: IStoInfo): string;
 export declare function parseGWContent(raw: string): IStoInfo;
 export declare function download(data: string, filename: string, type: string): void;
-export {};

package/dist/vis/react-vega.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IViewField, IRow, IStackMode, IDarkMode, IThemeKey } from '../interfaces';
+import { SingleViewProps } from './spec/view';
 export interface IReactVegaHandler {
     getSVGData: () => Promise<string[]>;
     getCanvasData: () => Promise<string[]>;
@@ -31,27 +32,5 @@ interface ReactVegaProps {
     themeKey?: IThemeKey;
     dark?: IDarkMode;
 }
-interface SingleViewProps {
-    x: IViewField;
-    y: IViewField;
-    color: IViewField;
-    opacity: IViewField;
-    size: IViewField;
-    shape: IViewField;
-    xOffset: IViewField;
-    yOffset: IViewField;
-    row: IViewField;
-    column: IViewField;
-    theta: IViewField;
-    radius: IViewField;
-    defaultAggregated: boolean;
-    stack: IStackMode;
-    geomType: string;
-    enableCrossFilter: boolean;
-    asCrossFilterTrigger: boolean;
-    selectEncoding: 'default' | 'none';
-    brushEncoding: 'x' | 'y' | 'default' | 'none';
-    hideLegend?: boolean;
-}
 declare const ReactVega: React.ForwardRefExoticComponent<ReactVegaProps & React.RefAttributes<IReactVegaHandler>>;
 export default ReactVega;

package/dist/vis/spec/aggregate.d.ts

@@ -0,0 +1,4 @@
+import { IViewField } from '../../interfaces';
+export declare function channelAggregate(encoding: {
+    [key: string]: any;
+}, fields: IViewField[]): void;

package/dist/vis/spec/encode.d.ts

@@ -0,0 +1,19 @@
+import { IViewField } from '../../interfaces';
+export interface IEncodeProps {
+    geomType: string;
+    x: IViewField;
+    y: IViewField;
+    color: IViewField;
+    opacity: IViewField;
+    size: IViewField;
+    shape: IViewField;
+    xOffset: IViewField;
+    yOffset: IViewField;
+    row: IViewField;
+    column: IViewField;
+    theta: IViewField;
+    radius: IViewField;
+}
+export declare function channelEncode(props: IEncodeProps): {
+    [key: string]: any;
+};

package/dist/vis/spec/field.d.ts

@@ -0,0 +1,2 @@
+import { IViewField } from "../../interfaces";
+export declare const NULL_FIELD: IViewField;

package/dist/vis/spec/mark.d.ts

@@ -0,0 +1,7 @@
+import { ISemanticType } from "visual-insights";
+/**
+ *
+ * @param semanticTypeList semanticTypeList.length <= 2，调用时，手动将columns 和 rows的最后一个元素组合传进来
+ * @returns geom(mark) type
+ */
+export declare function autoMark(semanticTypeList: ISemanticType[]): string;

package/dist/vis/spec/stack.d.ts

@@ -0,0 +1,4 @@
+import { IStackMode } from "../../interfaces";
+export declare function channelStack(encoding: {
+    [key: string]: any;
+}, stackMode: IStackMode): void;

package/dist/vis/spec/view.d.ts

@@ -0,0 +1,67 @@
+import { IStackMode } from '../../interfaces';
+import { IEncodeProps } from './encode';
+export interface SingleViewProps extends IEncodeProps {
+    defaultAggregated: boolean;
+    stack: IStackMode;
+    enableCrossFilter: boolean;
+    asCrossFilterTrigger: boolean;
+    selectEncoding: 'default' | 'none';
+    brushEncoding: 'x' | 'y' | 'default' | 'none';
+    hideLegend?: boolean;
+}
+export declare function getSingleView(props: SingleViewProps): {
+    config: any;
+    mark: {
+        type: string;
+        opacity: number;
+        tooltip: boolean;
+    };
+    encoding: {
+        [key: string]: any;
+    };
+    transform?: undefined;
+    params?: undefined;
+} | {
+    config: any;
+    transform: {
+        filter: {
+            param: string;
+        };
+    }[];
+    params: {
+        name: string;
+        select: {
+            type: string;
+            encodings: ("x" | "y")[] | undefined;
+        };
+    }[];
+    mark: {
+        type: string;
+        opacity: number;
+        tooltip: boolean;
+    };
+    encoding: {
+        [key: string]: any;
+    };
+} | {
+    config: any;
+    transform: {
+        filter: {
+            param: string;
+        };
+    }[];
+    params: {
+        name: string;
+        select: {
+            type: string;
+        };
+    }[];
+    mark: {
+        type: string;
+        opacity: number;
+        tooltip: boolean;
+    };
+    encoding: {
+        [key: string]: any;
+    };
+};

package/dist/workers/transform.d.ts

@@ -0,0 +1,2 @@
+import { IField, IRow } from "../interfaces";
+export declare function transformData(data: IRow[], columns: IField[]): IRow[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",
@@ -28,14 +28,15 @@
   },
   "prettier": {
     "tabWidth": 4,
-    "printWidth": 120
+    "printWidth": 120,
+    "singleQuote": true
   },
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@headlessui/react": "^1.7.12",
     "@heroicons/react": "^2.0.8",
     "@kanaries/react-beautiful-dnd": "0.0.1",
-    "@kanaries/web-data-loader": "0.1.5",
+    "@kanaries/web-data-loader": "^0.1.7",
     "autoprefixer": "^10.3.5",
     "i18next": "^21.9.1",
     "i18next-browser-languagedetector": "^6.1.5",

package/src/App.tsx

@@ -14,7 +14,7 @@ import AestheticFields from "./fields/aestheticFields";
 import DatasetFields from "./fields/datasetFields/index";
 import ReactiveRenderer from "./renderer/index";
 import DataSourceSegment from "./dataSource/index";
-import { useGlobalStore } from "./store";
+import { IGlobalStore, useGlobalStore } from "./store";
 import { preAnalysis, destroyWorker } from "./services";
 import VisNav from "./segments/visNav";
 import { mergeLocaleRes, setLocaleLanguage } from "./locales/i18n";
@@ -23,6 +23,7 @@ import { guardDataKeys } from "./utils/dataPrep";
 import SegmentNav from "./segments/segmentNav";
 import DatasetConfig from "./dataSource/datasetConfig";
 import { useCurrentMediaTheme } from "./utils/media";
+import CodeExport from "./components/codeExport";
 
 export interface IGWProps {
     dataSource?: IRow[];
@@ -39,6 +40,7 @@ export interface IGWProps {
     /** @default "vega" */
     themeKey?: IThemeKey;
     dark?: IDarkMode;
+    storeRef?: React.MutableRefObject<IGlobalStore | null>;
 }
 
 const App = observer<IGWProps>(function App (props) {
@@ -51,7 +53,7 @@ const App = observer<IGWProps>(function App (props) {
         hideDataSourceConfig,
         fieldKeyGuard = true,
         themeKey = 'vega',
-        dark = 'media',
+        dark = 'media'
     } = props;
     const { commonStore, vizStore } = useGlobalStore();
     const [insightReady, setInsightReady] = useState<boolean>(true);
@@ -139,6 +141,7 @@ const App = observer<IGWProps>(function App (props) {
                 {segmentKey === ISegmentKey.vis && (
                     <div style={{ marginTop: "0em", borderTop: "none" }} className="m-4 p-4 border border-gray-200 dark:border-gray-700">
                         <VisualSettings rendererHandler={rendererRef} darkModePreference={dark} />
+                        <CodeExport />
                         <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
                             <div className="md:col-span-3 xl:col-span-1">
                                 <DatasetFields />

package/src/components/codeExport/index.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from "react";
+import Modal from "../modal";
+import { observer } from "mobx-react-lite";
+import { useGlobalStore } from "../../store";
+import DefaultButton from "../button/default";
+import PrimaryButton from "../button/primary";
+import { useTranslation } from "react-i18next";
+import DefaultTab, { ITabOption } from "../tabs/defaultTab";
+
+const syntaxHighlight = (json: any) => {
+    if (typeof json != "string") {
+        json = JSON.stringify(json, undefined, 4);
+    }
+    json = json
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/\n/g, "<br>")
+        .replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;")
+        .replace(/\s/g, "&nbsp;&nbsp;");
+    return json.replace(
+        /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
+        function (match) {
+            var cls = "text-sky-500"; // number
+            if (/^"/.test(match)) {
+                if (/:$/.test(match)) {
+                    cls = "text-purple-500"; // key
+                } else {
+                    cls = "text-emerald-500"; // string
+                }
+            } else if (/true|false/.test(match)) {
+                cls = "text-blue-500";
+            } else if (/null/.test(match)) {
+                cls = "text-sky-500";
+            }
+            return '<span class="' + cls + '">' + match + "</span>";
+        }
+    );
+};
+
+const CodeExport: React.FC = observer((props) => {
+    const { commonStore, vizStore } = useGlobalStore();
+    const { showCodeExportPanel } = commonStore;
+    const { t } = useTranslation();
+    const [tabKey, setTabKey] = useState<string>("graphic-walker");
+    const [code, setCode] = useState<any>("");
+
+    const specTabs: ITabOption[] = [
+        {
+            key: "graphic-walker",
+            label: "Graphic-Walker",
+        },
+        {
+            key: "vega-lite",
+            label: "Vega-Lite",
+            disabled: true
+        },
+    ];
+
+    useEffect(() => {
+        if (showCodeExportPanel) {
+            if (tabKey === "graphic-walker") {
+                const res = vizStore.exportViewSpec();
+                setCode(res);
+            } else {
+                setCode("vega code");
+            }
+        }
+    }, [tabKey, showCodeExportPanel]);
+    return (
+        <Modal
+            show={showCodeExportPanel}
+            onClose={() => {
+                commonStore.setShowCodeExportPanel(false);
+            }}
+        >
+            <div>
+                <h1>Code Export</h1>
+                <DefaultTab
+                    tabs={specTabs}
+                    selectedKey={tabKey}
+                    onSelected={(k) => {
+                        setTabKey(k as string);
+                    }}
+                />
+                {tabKey === "graphic-walker" && (
+                    <div className="text-sm px-6 max-h-56 overflow-auto">
+                        <div dangerouslySetInnerHTML={{ __html: syntaxHighlight(code) }} />
+                    </div>
+                )}
+                <div className="mt-4 flex justify-start">
+                    <PrimaryButton
+                        // text={t("actions.confirm")}
+                        className="mr-2 px-6"
+                        text="Copy to Clipboard"
+                        onClick={() => {
+                            navigator.clipboard.writeText(JSON.stringify(code));
+                            commonStore.setShowCodeExportPanel(false);
+                        }}
+                    />
+                    <DefaultButton
+                        text={t("actions.cancel")}
+                        className="mr-2 px-6"
+                        onClick={() => {
+                            commonStore.setShowCodeExportPanel(false);
+                        }}
+                    />
+                </div>
+            </div>
+        </Modal>
+    );
+});
+
+export default CodeExport;