@kanaries/graphic-walker 0.2.14 → 0.2.16

package/src/components/toolbar/components.tsx

@@ -39,21 +39,15 @@ export const useHandlers = (action: () => void, disabled: boolean, triggerKeys:
     }), [allowPropagation]);
 };
 
-export const ToolbarContainer = styled.div`
+export const ToolbarContainer = styled.div<{ dark: boolean }>`
     --height: 36px;
     --icon-size: 18px;
     width: 100%;
     height: var(--height);
-    background-color: var(--background-color);
-    color: var(--color);
+    background-color: ${({ dark }) => dark ? 'var(--background-color-dark)' : 'var(--background-color)'};
+    color: ${({ dark }) => dark ? 'var(--color-dark)' : 'var(--color)'};
     border: 1px solid;
-    border-color: #e5e7eb;
-    // dark mode
-    @media (prefers-color-scheme: dark) {
-        background-color: var(--background-color-dark);
-        color: var(--color-dark);
-        border-color: #4b5563;
-    }
+    border-color: ${({ dark }) => dark ? '#4b5563' : '#e5e7eb'};
     /* box-shadow: 0px 1px 3px 1px rgba(136, 136, 136, 0.1); */
     border-radius: 2px;
     overflow: hidden;
@@ -73,7 +67,7 @@ export const ToolbarSplitter = styled.div`
     background: #bbbbbb50;
 `;
 
-export const ToolbarItemContainerElement = styled.div<{ split: boolean }>`
+export const ToolbarItemContainerElement = styled.div<{ split: boolean; dark: boolean }>`
     display: inline-flex;
     flex-direction: row;
     user-select: none;
@@ -81,7 +75,7 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean }>`
     width: ${({ split }) => split ? 'calc(var(--height) + 10px)' : 'var(--height)'};
     height: var(--height);
     overflow: hidden;
-    color: var(--color);
+    color: ${({ dark }) => dark ? 'var(--dark-mode-color)' : 'var(--color)'};
     position: relative;
     > svg {
         flex-grow: 0;
@@ -102,8 +96,8 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean }>`
     &[aria-disabled=false] {
         cursor: pointer;
         :hover, :focus, &.open {
-            --background-color: #FEFEFE;
-            color: var(--color-hover);
+            --background-color: ${({ dark }) => dark ? '#202020' : '#FEFEFE'};
+            color: ${({ dark }) => dark ? 'var(--dark-mode-color-hover)' : 'var(--color-hover)'};
             &.split * svg {
                 pointer-events: none;
                 transform: translate(-50%, -20%);
@@ -114,14 +108,5 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean }>`
             background-color: var(--background-color);
         }
     }
-    @media (prefers-color-scheme: dark) {
-        color: var(--dark-mode-color);
-        &[aria-disabled=false] {
-            :hover, :focus, &.open {
-                --background-color: #202020;
-                color: var(--dark-mode-color-hover);
-            }
-        }
-    }
     transition: color 100ms, background-image 100ms;
 `;

package/src/components/toolbar/index.tsx

@@ -1,10 +1,12 @@
 import React, { CSSProperties, memo, ReactNode, useState } from "react";
 import styled from "styled-components";
+import type { IDarkMode } from "../../interfaces";
+import { useCurrentMediaTheme } from "../../utils/media";
 import { ToolbarContainer, ToolbarSplitter } from "./components";
 import ToolbarItem, { ToolbarItemProps, ToolbarItemSplitter } from "./toolbar-item";
 
 
-const Root = styled.div`
+const Root = styled.div<{ darkModePreference: IDarkMode }>`
     width: 100%;
     --background-color: #f7f7f7;
     --color: #777;
@@ -16,9 +18,11 @@ const Root = styled.div`
     --dark-mode-color-hover: #ccc;
     --dark-mode-blue: #282958;
     --dark-mode-blue-dark: #1d1e38;
+    --dark-mode-preference: ${({ darkModePreference }) => darkModePreference};
 `;
 
 export interface ToolbarProps {
+    darkModePreference?: IDarkMode;
     items: ToolbarItemProps[];
     styles?: Partial<{
         root: CSSProperties & Record<string, string>;
@@ -29,13 +33,15 @@ export interface ToolbarProps {
     }>;
 }
 
-const Toolbar = memo<ToolbarProps>(function Toolbar ({ items, styles }) {
+const Toolbar = memo<ToolbarProps>(function Toolbar ({ darkModePreference = 'media', items, styles }) {
     const [openedKey, setOpenedKey] = useState<string | null>(null);
     const [slot, setSlot] = useState<ReactNode>(null);
 
+    const dark = useCurrentMediaTheme(darkModePreference) === 'dark';
+
     return (
-        <Root style={styles?.root}>
-            <ToolbarContainer style={styles?.container}>
+        <Root darkModePreference={darkModePreference} style={styles?.root}>
+            <ToolbarContainer dark={dark} style={styles?.container}>
                 {items.map((item, i) => {
                     if (item === ToolbarItemSplitter) {
                         return <ToolbarSplitter key={i} />;
@@ -48,6 +54,7 @@ const Toolbar = memo<ToolbarProps>(function Toolbar ({ items, styles }) {
                             openedKey={openedKey}
                             setOpenedKey={setOpenedKey}
                             renderSlot={node => setSlot(node)}
+                            darkModePreference={darkModePreference}
                         />
                     );
                 })}

package/src/components/toolbar/toolbar-button.tsx

@@ -8,7 +8,7 @@ export interface ToolbarButtonItem extends IToolbarItem {
 }
 
 const ToolbarButton = memo<IToolbarProps<ToolbarButtonItem>>(function ToolbarButton(props) {
-    const { item, styles } = props;
+    const { item, styles, darkModePreference } = props;
     const { icon: Icon, label, disabled, onClick } = item;
     const handlers = useHandlers(() => onClick?.(), disabled ?? false);
 
@@ -22,6 +22,7 @@ const ToolbarButton = memo<IToolbarProps<ToolbarButtonItem>>(function ToolbarBut
             <ToolbarItemContainer
                 props={props}
                 handlers={onClick ? handlers : null}
+                darkModePreference={darkModePreference}
             >
                 <Icon style={mergedIconStyles} />
             </ToolbarItemContainer>

package/src/components/toolbar/toolbar-item.tsx

@@ -8,6 +8,7 @@ import { ToolbarContainer, ToolbarItemContainerElement, ToolbarSplitter, useHand
 import Toolbar, { ToolbarProps } from ".";
 import Tooltip from "../tooltip";
 import Callout from "../callout";
+import { useCurrentMediaTheme } from "../../utils/media";
 
 
 const ToolbarSplit = styled.div<{ open: boolean }>`
@@ -34,10 +35,7 @@ const ToolbarSplit = styled.div<{ open: boolean }>`
 const FormContainer = styled(ToolbarContainer)`
     width: max-content;
     height: max-content;
-    background-color: #fff;
-    @media (prefers-color-scheme: dark) {
-        background-color: #000;
-    }
+    background-color: ${({ dark }) => dark ? '#000' : '#fff'};
 `;
 
 export interface IToolbarItem {
@@ -65,6 +63,7 @@ export type ToolbarItemProps = (
 
 export interface IToolbarProps<P extends Exclude<ToolbarItemProps, typeof ToolbarItemSplitter> = Exclude<ToolbarItemProps, typeof ToolbarItemSplitter>> {
     item: P;
+    darkModePreference: NonNullable<ToolbarProps['darkModePreference']>;
     styles?: ToolbarProps['styles'];
     openedKey: string | null;
     setOpenedKey: (key: string | null) => void;
@@ -74,6 +73,7 @@ export interface IToolbarProps<P extends Exclude<ToolbarItemProps, typeof Toolba
 let idFlag = 0;
 
 export const ToolbarItemContainer = memo<{
+    darkModePreference: NonNullable<ToolbarProps['darkModePreference']>;
     props: IToolbarProps;
     handlers: ReturnType<typeof useHandlers> | null;
     children: unknown;
@@ -84,6 +84,7 @@ export const ToolbarItemContainer = memo<{
             styles, openedKey, setOpenedKey, renderSlot,
         },
         handlers,
+        darkModePreference,
         children,
         ...props
     }
@@ -130,15 +131,18 @@ export const ToolbarItemContainer = memo<{
 
     useEffect(() => {
         if (opened && menu) {
-            renderSlot(<Toolbar {...menu} />);
+            renderSlot(<Toolbar {...menu} darkModePreference={darkModePreference} />);
             return () => renderSlot(null);
         }
     }, [opened, menu, renderSlot]);
 
+    const dark = useCurrentMediaTheme(darkModePreference) === 'dark';
+
     return (
         <>
-            <Tooltip content={label}>
+            <Tooltip content={label} darkModePreference={darkModePreference}>
                 <ToolbarItemContainerElement
+                    dark={dark}
                     role="button" tabIndex={disabled ? undefined : 0} aria-label={label} aria-disabled={disabled ?? false}
                     split={Boolean(form || menu)}
                     style={styles?.item}
@@ -190,8 +194,8 @@ export const ToolbarItemContainer = memo<{
                 </ToolbarItemContainerElement>
             </Tooltip>
             {opened && form && (
-                <Callout target={`#${id}`}>
-                    <FormContainer onMouseDown={e => e.stopPropagation()}>
+                <Callout target={`#${id}`} darkModePreference={darkModePreference}>
+                    <FormContainer dark={dark} onMouseDown={e => e.stopPropagation()}>
                         {form}
                     </FormContainer>
                 </Callout>
@@ -202,20 +206,21 @@ export const ToolbarItemContainer = memo<{
 
 const ToolbarItem = memo<{
     item: ToolbarItemProps;
+    darkModePreference: NonNullable<ToolbarProps['darkModePreference']>;
     styles?: ToolbarProps['styles'];
     openedKey: string | null;
     setOpenedKey: (key: string | null) => void;
     renderSlot: (node: ReactNode) => void;
-}>(function ToolbarItem ({ item, styles, openedKey, setOpenedKey, renderSlot }) {
+}>(function ToolbarItem ({ item, styles, openedKey, setOpenedKey, renderSlot, darkModePreference }) {
     if (item === ToolbarItemSplitter) {
         return  <ToolbarSplitter />;
     }
     if ('checked' in item) {
-        return <ToolbarToggleButton item={item} styles={styles} openedKey={openedKey} setOpenedKey={setOpenedKey} renderSlot={renderSlot} />;
+        return <ToolbarToggleButton item={item} styles={styles} openedKey={openedKey} setOpenedKey={setOpenedKey} renderSlot={renderSlot} darkModePreference={darkModePreference} />;
     } else if ('options' in item) {
-        return <ToolbarSelectButton item={item} styles={styles} openedKey={openedKey} setOpenedKey={setOpenedKey} renderSlot={renderSlot} />;
+        return <ToolbarSelectButton item={item} styles={styles} openedKey={openedKey} setOpenedKey={setOpenedKey} renderSlot={renderSlot} darkModePreference={darkModePreference} />;
     }
-    return <ToolbarButton item={item} styles={styles} openedKey={openedKey} setOpenedKey={setOpenedKey} renderSlot={renderSlot} />;
+    return <ToolbarButton item={item} styles={styles} openedKey={openedKey} setOpenedKey={setOpenedKey} renderSlot={renderSlot} darkModePreference={darkModePreference} />;
 });
 
 

package/src/components/toolbar/toolbar-select-button.tsx

@@ -4,6 +4,7 @@ import produce from "immer";
 import { IToolbarItem, IToolbarProps, ToolbarItemContainer } from "./toolbar-item";
 import { ToolbarContainer, useHandlers, ToolbarItemContainerElement } from "./components";
 import Callout from "../callout";
+import { useCurrentMediaTheme } from "../../utils/media";
 
 
 const OptionGroup = styled(ToolbarContainer)`
@@ -21,16 +22,7 @@ const OptionGroup = styled(ToolbarContainer)`
         --dark-mode-color: #aaa;
         --dark-mode-color-hover: #ccc;
         --dark-mode-blue: #282958;
-    background-color: var(--background-color);
-    // dark mode
-    @media (prefers-color-scheme: dark) {
-        /* --dark-mode-background-color: #1f1f1f;
-        --dark-mode-background-color-hover: #2f2f2f;
-        --dark-mode-color: #aaa;
-        --dark-mode-color-hover: #ccc;
-        --dark-mode-blue: #282958; */
-        background-color: var(--dark-mode-background-color);
-    }
+    background-color: ${({ dark }) => dark ? 'var(--dark-mode-background-color)' : 'var(--background-color)'};
 `;
 
 const Option = styled(ToolbarItemContainerElement)`
@@ -85,7 +77,7 @@ export interface ToolbarSelectButtonItem<T extends string = string> extends IToo
 }
 
 const ToolbarSelectButton = memo<IToolbarProps<ToolbarSelectButtonItem>>(function ToolbarSelectButton(props) {
-    const { item, styles, openedKey, setOpenedKey } = props;
+    const { darkModePreference, item, styles, openedKey, setOpenedKey } = props;
     const { key, icon: Icon, disabled, options, value, onSelect } = item;
     const id = `${key}::button`;
     
@@ -134,9 +126,12 @@ const ToolbarSelectButton = memo<IToolbarProps<ToolbarSelectButtonItem>>(functio
         ...item.styles?.icon,
     };
 
+    const dark = useCurrentMediaTheme(darkModePreference) === 'dark';
+
     return (
         <>
             <ToolbarItemContainer
+                darkModePreference={darkModePreference}
                 props={produce(props, draft => {
                     if (currentOption) {
                         draft.item.label = `${draft.item.label}: ${currentOption.label}`;
@@ -163,8 +158,8 @@ const ToolbarSelectButton = memo<IToolbarProps<ToolbarSelectButtonItem>>(functio
                 <TriggerFlag aria-hidden id={id} />
             </ToolbarItemContainer>
             {opened && (
-                <Callout target={`#${id}`}>
-                    <OptionGroup role="listbox" aria-activedescendant={`${id}::${value}`} aria-describedby={id} aria-disabled={disabled} onMouseDown={e => e.stopPropagation()}>
+                <Callout target={`#${id}`} darkModePreference={darkModePreference}>
+                    <OptionGroup dark={dark} role="listbox" aria-activedescendant={`${id}::${value}`} aria-describedby={id} aria-disabled={disabled} onMouseDown={e => e.stopPropagation()}>
                         {options.map((option, idx, arr) => {
                             const selected = option.key === value;
                             const OptionIcon = option.icon;
@@ -173,6 +168,7 @@ const ToolbarSelectButton = memo<IToolbarProps<ToolbarSelectButtonItem>>(functio
                             const next = arr[(idx + 1) % arr.length];
                             return (
                                 <Option
+                                    dark={dark}
                                     key={option.key}
                                     id={optionId}
                                     role="option"

package/src/components/toolbar/toolbar-toggle-button.tsx

@@ -46,7 +46,7 @@ export interface ToolbarToggleButtonItem extends IToolbarItem {
 }
 
 const ToolbarToggleButton = memo<IToolbarProps<ToolbarToggleButtonItem>>(function ToolbarToggleButton(props) {
-    const { item, styles } = props;
+    const { item, styles, darkModePreference } = props;
     const { icon: Icon, label, disabled, checked, onChange } = item;
     const handlers = useHandlers(() => onChange(!checked), disabled ?? false);
 
@@ -62,6 +62,7 @@ const ToolbarToggleButton = memo<IToolbarProps<ToolbarToggleButtonItem>>(functio
                 handlers={handlers}
                 role="checkbox"
                 aria-checked={checked}
+                darkModePreference={darkModePreference}
             >
                 <ToggleContainer checked={checked}>
                     <Icon style={mergedIconStyles} />

package/src/components/tooltip.tsx

@@ -1,7 +1,9 @@
 import React, { memo, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import styled from "styled-components";
+import type { IDarkMode } from "../interfaces";
 import { ShadowDomContext } from "..";
+import { useCurrentMediaTheme } from "../utils/media";
 
 export interface TooltipProps {
     children: JSX.Element;
@@ -12,12 +14,13 @@ export interface TooltipProps {
     hideDelay?: number;
     /** @default 3_000 */
     autoHide?: number;
+    darkModePreference: IDarkMode;
 }
 
 const attrName = "data-tooltip-host-id";
 let flag = 0;
 
-const Bubble = styled.div`
+const Bubble = styled.div<{ dark: boolean }>`
     border-radius: 1px;
     transform: translate(-50%, -100%);
     filter: drop-shadow(0 1.6px 1.2px rgba(0, 0, 0, 0.15)) drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.12));
@@ -31,10 +34,7 @@ const Bubble = styled.div`
         width: 8px;
         height: 8px;
         transform: translate(-50%, 50%) rotate(45deg);
-        background-color: #fff;
-        @media (prefers-color-scheme: dark) {
-            background-color: #000;
-        }
+        background-color: ${({ dark }) => dark ? '#000' : '#fff'};
         border-radius: 1px;
     }
 `;
@@ -45,6 +45,7 @@ const Tooltip = memo<TooltipProps>(function Tooltip({
     autoHide = 3_000,
     showDelay = 250,
     hideDelay = 250,
+    darkModePreference = 'media',
 }) {
     const hostId = useMemo(() => flag++, []);
     const [pos, setPos] = useState<[number, number]>([0, 0]);
@@ -121,6 +122,8 @@ const Tooltip = memo<TooltipProps>(function Tooltip({
         }
     }, [root, hostId]);
 
+    const darkMode = useCurrentMediaTheme(darkModePreference);
+    
     return (
         <>
             {element}
@@ -128,7 +131,8 @@ const Tooltip = memo<TooltipProps>(function Tooltip({
                 root &&
                 createPortal(
                     <Bubble
-                        className="fixed text-xs p-1 px-3 text-gray-500 bg-white dark:bg-zinc-900  z-50"
+                        className={`${darkMode === 'dark' ? 'dark bg-zinc-900' : 'bg-white'} fixed text-xs p-1 px-3 text-gray-500 z-50`}
+                        dark={darkMode === 'dark'}
                         onMouseOver={() => setHover(true)}
                         onMouseOut={() => setHover(false)}
                         style={{ left: pos[0], top: pos[1] - 4 }}

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',
+    }
 ]

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>
             )}
@@ -107,7 +139,7 @@ const CSVData: React.FC<ICSVData> = (props) => {
                         onChange={(e) => {
                             commonStore.updateTempName(e.target.value);
                         }}
-                        className="text-xs mr-2 p-2 rounded border border-gray-200 dark:border-gray-800 outline-none focus:outline-none focus:border-blue-500 placeholder:italic placeholder:text-slate-400 dark:bg-stone-900"
+                        className="text-xs mr-2 p-2 rounded border border-gray-200 dark:border-gray-700 outline-none focus:outline-none focus:border-blue-500 placeholder:italic placeholder:text-slate-400 dark:bg-stone-900"
                     />
                     <PrimaryButton
                         className="mr-2"

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

@@ -2,7 +2,6 @@ import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
 import { CheckCircleIcon, ArrowPathIcon } from "@heroicons/react/24/outline";
 import { useTranslation } from "react-i18next";
-import { Container } from "../components/container";
 import Modal from "../components/modal";
 import { useGlobalStore } from "../store";
 import { download } from "../utils/save";
@@ -25,7 +24,7 @@ const DataSourceSegment: React.FC<DSSegmentProps> = (props) => {
     const { currentDataset, datasets, showDSPanel } = commonStore;
 
     return (
-        <Container className="flex items-center">
+        <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>
@@ -89,7 +88,7 @@ const DataSourceSegment: React.FC<DSSegmentProps> = (props) => {
             )} */}
             {preWorkDone && <CheckCircleIcon className="text-green-500 w-5 inline-block ml-2" />}
             {!preWorkDone && <ArrowPathIcon className="text-yellow-500 w-5 inline-block ml-2" />}
-        </Container>
+        </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);