@kanaries/graphic-walker 0.2.15 → 0.2.17

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.17",
   "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",
@@ -46,15 +47,13 @@
     "postinstall-postinstall": "^2.1.0",
     "re-resizable": "^6.9.8",
     "react-i18next": "^11.18.6",
-    "react-json-view": "^1.21.3",
     "react-shadow": "^20.0.0",
     "rxjs": "^7.3.0",
     "tailwindcss": "^3.2.4",
     "uuid": "^8.3.2",
     "vega": "^5.22.1",
     "vega-embed": "^6.21.0",
-    "vega-lite": "^5.6.0",
-    "visual-insights": "0.7.15"
+    "vega-lite": "^5.6.0"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.2.5",

package/src/App.tsx

@@ -1,28 +1,23 @@
-import React, { useState, useEffect, useRef, useMemo } from "react";
-import { Specification } from "visual-insights";
-import { observer } from "mobx-react-lite";
-import { LightBulbIcon } from "@heroicons/react/24/outline";
-import { toJS } from "mobx";
-import { useTranslation } from "react-i18next";
-import { IDarkMode, IMutField, IRow, ISegmentKey, IThemeKey } from "./interfaces";
-import type { IReactVegaHandler } from "./vis/react-vega";
-import VisualSettings from "./visualSettings";
-import ClickMenu from "./components/clickMenu";
-import InsightBoard from "./insightBoard/index";
-import PosFields from "./fields/posFields";
-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 { preAnalysis, destroyWorker } from "./services";
-import VisNav from "./segments/visNav";
-import { mergeLocaleRes, setLocaleLanguage } from "./locales/i18n";
-import FilterField from "./fields/filterField";
-import { guardDataKeys } from "./utils/dataPrep";
-import SegmentNav from "./segments/segmentNav";
-import DatasetConfig from "./dataSource/datasetConfig";
-import { useCurrentMediaTheme } from "./utils/media";
+import React, { useEffect, useRef, useMemo } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
+import { IDarkMode, IMutField, IRow, ISegmentKey, IThemeKey, Specification } from './interfaces';
+import type { IReactVegaHandler } from './vis/react-vega';
+import VisualSettings from './visualSettings';
+import PosFields from './fields/posFields';
+import AestheticFields from './fields/aestheticFields';
+import DatasetFields from './fields/datasetFields/index';
+import ReactiveRenderer from './renderer/index';
+import DataSourceSegment from './dataSource/index';
+import { IGlobalStore, useGlobalStore } from './store';
+import VisNav from './segments/visNav';
+import { mergeLocaleRes, setLocaleLanguage } from './locales/i18n';
+import FilterField from './fields/filterField';
+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,14 +34,15 @@ export interface IGWProps {
     /** @default "vega" */
     themeKey?: IThemeKey;
     dark?: IDarkMode;
+    storeRef?: React.MutableRefObject<IGlobalStore | null>;
 }
 
-const App = observer<IGWProps>(function App (props) {
+const App = observer<IGWProps>(function App(props) {
     const {
         dataSource = [],
         rawFields = [],
         spec,
-        i18nLang = "en-US",
+        i18nLang = 'en-US',
         i18nResources,
         hideDataSourceConfig,
         fieldKeyGuard = true,
@@ -54,9 +50,8 @@ const App = observer<IGWProps>(function App (props) {
         dark = 'media',
     } = props;
     const { commonStore, vizStore } = useGlobalStore();
-    const [insightReady, setInsightReady] = useState<boolean>(true);
 
-    const { currentDataset, datasets, vizEmbededMenu, segmentKey } = commonStore;
+    const { datasets, segmentKey } = commonStore;
 
     const { t, i18n } = useTranslation();
     const curLang = i18n.language;
@@ -91,54 +86,45 @@ const App = observer<IGWProps>(function App (props) {
     useEffect(() => {
         if (safeDataset.safeData.length > 0 && safeDataset.safeMetas.length > 0) {
             commonStore.addAndUseDS({
-                name: "context dataset",
+                name: 'context dataset',
                 dataSource: safeDataset.safeData,
                 rawFields: safeDataset.safeMetas,
             });
         }
     }, [safeDataset]);
 
-    // do preparation analysis work when using a new dataset
     useEffect(() => {
-        const ds = currentDataset;
-        if (ds && ds.dataSource.length > 0 && ds.rawFields.length > 0) {
-            setInsightReady(false);
-            preAnalysis({
-                dataSource: ds.dataSource,
-                fields: toJS(ds.rawFields),
-            }).then(() => {
-                setInsightReady(true);
-
-                if (spec) {
-                    vizStore.renderSpec(spec);
-                }
-            });
+        if (safeDataset.safeData.length > 0 && safeDataset.safeMetas.length > 0 && spec) {
+            vizStore.renderSpec(spec);
         }
-        return () => {
-            destroyWorker();
-        };
-    }, [currentDataset, spec]);
+    }, [spec, safeDataset]);
 
     const darkMode = useCurrentMediaTheme(dark);
 
     const rendererRef = useRef<IReactVegaHandler>(null);
 
     return (
-        <div className={`${darkMode === 'dark' ? 'dark' : ''} App font-sans bg-white dark:bg-zinc-900 dark:text-white m-0 p-0`}>
+        <div
+            className={`${
+                darkMode === 'dark' ? 'dark' : ''
+            } App font-sans bg-white dark:bg-zinc-900 dark:text-white m-0 p-0`}
+        >
             {/* <div className="grow-0">
                 <PageNav />
             </div> */}
             <div className="bg-white dark:bg-zinc-900 dark:text-white">
-                {!hideDataSourceConfig && <DataSourceSegment preWorkDone={insightReady} />}
+                {!hideDataSourceConfig && <DataSourceSegment />}
                 <div className="px-2 mx-2">
                     <SegmentNav />
-                    {
-                        segmentKey === ISegmentKey.vis && <VisNav />
-                    }
+                    {segmentKey === ISegmentKey.vis && <VisNav />}
                 </div>
                 {segmentKey === ISegmentKey.vis && (
-                    <div style={{ marginTop: "0em", borderTop: "none" }} className="m-4 p-4 border border-gray-200 dark:border-gray-700">
+                    <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 />
@@ -153,17 +139,18 @@ const App = observer<IGWProps>(function App (props) {
                                 </div>
                                 <div
                                     className="m-0.5 p-1 border border-gray-200 dark:border-gray-700"
-                                    style={{ minHeight: "600px", overflow: "auto" }}
-                                    onMouseLeave={() => {
-                                        vizEmbededMenu.show && commonStore.closeEmbededMenu();
-                                    }}
-                                    onClick={() => {
-                                        vizEmbededMenu.show && commonStore.closeEmbededMenu();
-                                    }}
+                                    style={{ minHeight: '600px', overflow: 'auto' }}
+                                    // onMouseLeave={() => {
+                                    //     vizEmbededMenu.show && commonStore.closeEmbededMenu();
+                                    // }}
+                                    // onClick={() => {
+                                    //     vizEmbededMenu.show && commonStore.closeEmbededMenu();
+                                    // }}
                                 >
-                                    {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} themeKey={themeKey} dark={dark} />}
-                                    <InsightBoard />
-                                    {vizEmbededMenu.show && (
+                                    {datasets.length > 0 && (
+                                        <ReactiveRenderer ref={rendererRef} themeKey={themeKey} dark={dark} />
+                                    )}
+                                    {/* {vizEmbededMenu.show && (
                                         <ClickMenu x={vizEmbededMenu.position[0]} y={vizEmbededMenu.position[1]}>
                                             <div
                                                 className="flex items-center whitespace-nowrap py-1 px-4 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
@@ -178,14 +165,17 @@ const App = observer<IGWProps>(function App (props) {
                                                 <LightBulbIcon className="ml-1 w-3 flex-grow-0 flex-shrink-0" />
                                             </div>
                                         </ClickMenu>
-                                    )}
+                                    )} */}
                                 </div>
                             </div>
                         </div>
                     </div>
                 )}
                 {segmentKey === ISegmentKey.data && (
-                    <div className="m-4 p-4 border border-gray-200 dark:border-gray-700" style={{ marginTop: "0em", borderTop: "none" }}>
+                    <div
+                        className="m-4 p-4 border border-gray-200 dark:border-gray-700"
+                        style={{ marginTop: '0em', borderTop: 'none' }}
+                    >
                         <DatasetConfig />
                     </div>
                 )}

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;

package/src/components/dataTable/index.tsx

@@ -48,15 +48,15 @@ function getHeaderClassNames(field: IMutField) {
 function getSemanticColors(field: IMutField): string {
     switch (field.semanticType) {
         case "nominal":
-            return "bg-sky-100 text-sky-800";
+            return "border border-transparent bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-100 dark:border-sky-600";
         case "ordinal":
-            return "bg-indigo-100 text-indigo-800";
+            return "border border-transparent bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-100 dark:border-indigo-600";
         case "quantitative":
-            return "bg-purple-100 text-purple-800";
+            return "border border-transparent bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-100 dark:border-purple-600";
         case "temporal":
-            return "bg-yellow-100 text-yellow-800";
+            return "border border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100 dark:border-yellow-600";
         default:
-            return "bg-gray-400";
+            return "border border-transparent bg-gray-400";
     }
 }
 
@@ -97,7 +97,7 @@ const DataTable: React.FC<DataTableProps> = (props) => {
             />
             <table className="min-w-full divide-y">
                 <thead className="bg-gray-50 dark:bg-gray-900">
-                    <tr className="divide-x divide-gray-200 dark:divide-gray-600">
+                    <tr className="divide-x divide-gray-200 dark:divide-gray-700">
                         {metas.map((field, fIndex) => (
                             <th key={field.fid} className={""}>
                                 <div
@@ -152,9 +152,9 @@ const DataTable: React.FC<DataTableProps> = (props) => {
                         ))}
                     </tr>
                 </thead>
-                <tbody className="divide-y divide-gray-100 dark:divide-gray-600 bg-white dark:bg-zinc-900">
-                    {data.slice(from, to).map((row, index) => (
-                        <tr className={"divide-x divide-gray-200 dark:divide-gray-600 " + (index % 2 ? "bg-gray-50 dark:bg-gray-800" : "")} key={index}>
+                <tbody className="divide-y divide-gray-100 dark:divide-gray-700 bg-white dark:bg-zinc-900">
+                    {data.slice(from, to + 1).map((row, index) => (
+                        <tr className={"divide-x divide-gray-200 dark:divide-gray-700 " + (index % 2 ? "bg-gray-50 dark:bg-gray-900" : "")} key={index}>
                             {metas.map((field) => (
                                 <td
                                     key={field.fid + index}
@@ -163,7 +163,7 @@ const DataTable: React.FC<DataTableProps> = (props) => {
                                         " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 dark:text-gray-300 sm:pl-6"
                                     }
                                 >
-                                    {row[field.fid]}
+                                    {`${row[field.fid]}`}
                                 </td>
                             ))}
                         </tr>

package/src/components/loadingLayer.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function LoadingLayer () {
+    return <div className="bg-gray-100/50 dark:bg-gray-700/50 absolute top-0 left-0 right-0 bottom-0 z-50 flex items-center justify-center">
+        Loading...
+    </div>
+}

package/src/components/tabs/defaultTab.tsx

@@ -7,6 +7,7 @@ function classNames(...classes: string[]) {
 export interface ITabOption {
     label: string | ReactElement;
     key: string;
+    disabled?: boolean;
 }
 interface DefaultProps {
     tabs: ITabOption[];
@@ -26,14 +27,15 @@ export default function Default(props: DefaultProps) {
                         role="tab"
                         tabIndex={0}
                         onClick={() => {
-                            onSelected(tab.key, tabIndex)
+                            !tab.disabled && onSelected(tab.key, tabIndex)
                         }}
                         key={tab.key}
                         className={classNames(
                             tab.key === selectedKey
                             ? 'border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-300'
                             : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:text-gray-400',
-                          'whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm cursor-pointer'
+                          'whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm cursor-pointer',
+                            tab.disabled ? 'opacity-50 cursor-not-allowed' : ''
                         )}
                     >{tab.label}</span>
                 ))}

package/src/components/tabs/editableTab.tsx

@@ -1,74 +1,109 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-
+import { PencilSquareIcon } from "@heroicons/react/24/outline";
+import Modal from "../modal";
+import { unstable_batchedUpdates } from "react-dom";
+import DefaultButton from "../button/default";
+import PrimaryButton from "../button/primary";
 
 function classNames(...classes: string[]) {
-    return classes.filter(Boolean).join(' ')
+    return classes.filter(Boolean).join(" ");
 }
 
 export interface ITabOption {
     label: string;
     key: string;
-    options?: Record<string, any>;
+    editable?: boolean;
 }
 interface EditableTabsProps {
     tabs: ITabOption[];
     selectedKey: string;
     onSelected: (selectedKey: string, index: number) => void;
-    allowEdit?: boolean;
     onEditLabel?: (label: string, index: number) => void;
 }
 export default function EditableTabs(props: EditableTabsProps) {
-    const { tabs, selectedKey, onSelected, allowEdit, onEditLabel } = props;
-    const [editList, setEditList] = useState<boolean[]>([]);
+    const { tabs, selectedKey, onSelected, onEditLabel } = props;
+    const [editingIndex, setEditingIndex] = useState<number>(-1);
+    const [name, setName] = useState<string>("");
     const { t } = useTranslation();
 
-    const clearEditStatus = useCallback(() => {
-        setEditList(new Array(tabs.length).fill(false))
-    }, [tabs.length]);
-    
-    useEffect(() => {
-        clearEditStatus();
-    }, [clearEditStatus]);
-
     return (
-        <div className="border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden" onMouseLeave={clearEditStatus}>
+        <div className="border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden">
+            <Modal
+                show={editingIndex > -1}
+                onClose={() => {
+                    setEditingIndex(-1);
+                }}
+            >
+                <div>
+                    <span className="block text-sm font-medium leading-6">{t('main.tablist.chart_name')}</span>
+                    <div className="mt-2">
+                        <input
+                            value={name}
+                            onChange={(e) => {
+                                setName(e.target.value);
+                            }}
+                            type="text"
+                            name="text"
+                            className="block w-full rounded-md border-0 px-2 py-1.5 bg-transparent shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                        />
+                    </div>
+                    <div className="mt-4 flex justify-end">
+                        <DefaultButton
+                            className="mr-2"
+                            text={t("actions.cancel")}
+                            onClick={() => {
+                                unstable_batchedUpdates(() => {
+                                    setEditingIndex(-1);
+                                    setName("");
+                                });
+                            }}
+                        />
+                        <PrimaryButton
+                            text={t("actions.confirm")}
+                            onClick={() => {
+                                unstable_batchedUpdates(() => {
+                                    onEditLabel && onEditLabel(name, editingIndex);
+                                    setEditingIndex(-1);
+                                    setName("");
+                                });
+                            }}
+                        />
+                    </div>
+                </div>
+            </Modal>
             <nav className="-mb-px flex h-8 border-gray-200 dark:border-gray-700" role="tablist" aria-label="Tabs">
                 {tabs.map((tab, tabIndex) => (
                     <span
                         role="tab"
                         tabIndex={0}
-                        dangerouslySetInnerHTML={{
-                            __html: t(tab.label, tab.options)
-                        }}
+                        // dangerouslySetInnerHTML={{
+                        //     __html: tab.label
+                        // }}
                         onClick={() => {
-                            onSelected(tab.key, tabIndex)
-                        }}
-                        onDoubleClick={() => {
-                            setEditList(v => {
-                                const nv = [...v];
-                                nv[tabIndex] = true;
-                                return nv
-                            })
-                        }}
-                        contentEditable={editList[tabIndex]}
-                        onInput={(e) => {
-                            onEditLabel && onEditLabel(`${e.currentTarget.textContent}`, tabIndex)
-                        }}
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter') {
-                                clearEditStatus();
-                                e.preventDefault();
-                            }
+                            onSelected(tab.key, tabIndex);
                         }}
                         key={tab.key}
                         className={classNames(
                             tab.key === selectedKey
                                 ? "border rounded-t"
                                 : "text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:bg-gray-50 dark:hover:text-gray-200 dark:hover:bg-gray-800",
-                            "whitespace-nowrap border-gray-200 dark:border-gray-700 py-1 px-2 pr-6 text-sm cursor-pointer dark:text-white"
+                            "whitespace-nowrap border-gray-200 dark:border-gray-700 py-1 px-2 pr-6 text-sm cursor-default dark:text-white"
+                        )}
+                    >
+                        {tab.label}{" "}
+                        {tab.key === selectedKey && tab.editable && (
+                            <PencilSquareIcon
+                                className="w-3 inline cursor-pointer"
+                                onClick={() => {
+                                    unstable_batchedUpdates(() => {
+                                        setEditingIndex(tabIndex);
+                                        setName(tab.label);
+                                    });
+                                }}
+                            />
                         )}
-                    />
+                    </span>
                 ))}
             </nav>
         </div>

package/src/dataSource/dataSelection/config.ts

@@ -25,4 +25,15 @@ export const charsetOptions: IDropdownSelectOption[] = [
         label: 'GB18030',
         value: 'GB18030',
     },
+]
+
+export const SUPPORTED_FILE_TYPES: IDropdownSelectOption[] = [
+    {
+        label: 'CSV',
+        value: 'csv',
+    },
+    {
+        label: 'JSON',
+        value: 'json',
+    }
 ]