@kanaries/graphic-walker 0.2.12 → 0.2.14

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

@@ -16,7 +16,21 @@ const OptionGroup = styled(ToolbarContainer)`
     --color: #777;
     --color-hover: #555;
     --blue: #282958;
+    --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(--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);
+    }
 `;
 
 const Option = styled(ToolbarItemContainerElement)`
@@ -115,6 +129,11 @@ const ToolbarSelectButton = memo<IToolbarProps<ToolbarSelectButtonItem>>(functio
     const currentOption = options.find(opt => opt.key === value);
     const CurrentIcon = currentOption?.icon;
 
+    const mergedIconStyles = {
+        ...styles?.icon,
+        ...item.styles?.icon,
+    };
+
     return (
         <>
             <ToolbarItemContainer
@@ -126,20 +145,18 @@ const ToolbarSelectButton = memo<IToolbarProps<ToolbarSelectButtonItem>>(functio
                 handlers={handlers}
                 aria-haspopup="listbox"
             >
-                <Icon style={styles?.icon} />
+                <Icon style={mergedIconStyles} />
                 {CurrentIcon && (
                     <CurrentIcon
                         style={{
-                            ...styles?.icon,
                             position: 'absolute',
                             left: 'calc(var(--height) - var(--icon-size) * 1.2)',
                             bottom: 'calc((var(--height) - var(--icon-size)) * 0.1)',
                             width: 'calc(var(--icon-size) * 0.6)',
                             height: 'calc(var(--icon-size) * 0.6)',
                             margin: 'calc((var(--height) - var(--icon-size)) * 0.2)',
-                            filter: 'drop-shadow(0 0 0.5px var(--background-color)) '.repeat(4),
                             pointerEvents: 'none',
-                            color: '#1d1e38',
+                            ...mergedIconStyles,
                         }}
                     />
                 )}

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

@@ -50,6 +50,11 @@ const ToolbarToggleButton = memo<IToolbarProps<ToolbarToggleButtonItem>>(functio
     const { icon: Icon, label, disabled, checked, onChange } = item;
     const handlers = useHandlers(() => onChange(!checked), disabled ?? false);
 
+    const mergedIconStyles = {
+        ...styles?.icon,
+        ...item.styles?.icon,
+    };
+
     return (
         <>
             <ToolbarItemContainer
@@ -59,7 +64,7 @@ const ToolbarToggleButton = memo<IToolbarProps<ToolbarToggleButtonItem>>(functio
                 aria-checked={checked}
             >
                 <ToggleContainer checked={checked}>
-                    <Icon style={styles?.icon} />
+                    <Icon style={mergedIconStyles} />
                 </ToggleContainer>
             </ToolbarItemContainer>
         </>

package/src/components/tooltip.tsx

@@ -32,6 +32,9 @@ const Bubble = styled.div`
         height: 8px;
         transform: translate(-50%, 50%) rotate(45deg);
         background-color: #fff;
+        @media (prefers-color-scheme: dark) {
+            background-color: #000;
+        }
         border-radius: 1px;
     }
 `;
@@ -125,7 +128,7 @@ const Tooltip = memo<TooltipProps>(function Tooltip({
                 root &&
                 createPortal(
                     <Bubble
-                        className="fixed text-xs p-1 px-3 text-gray-500 bg-white z-50"
+                        className="fixed text-xs p-1 px-3 text-gray-500 bg-white dark:bg-zinc-900  z-50"
                         onMouseOver={() => setHover(true)}
                         onMouseOut={() => setHover(false)}
                         style={{ left: pos[0], top: pos[1] - 4 }}

package/src/dataSource/dataSelection/config.ts

@@ -0,0 +1,28 @@
+import { IDropdownSelectOption } from "../../components/dropdownSelect";
+
+export const charsetOptions: IDropdownSelectOption[] = [
+    {
+        label: 'UTF-8',
+        value: 'utf-8',
+    },
+    {
+        label: 'GB2312',
+        value: 'gb2312',
+    },
+    {
+        label: 'US-ASCII',
+        value: 'us-ascii',
+    },
+    {
+        label: 'Big5',
+        value: 'big5',
+    },
+    {
+        label: 'Big5-HKSCS',
+        value: 'Big5-HKSCS',
+    },
+    {
+        label: 'GB18030',
+        value: 'GB18030',
+    },
+]

package/src/dataSource/dataSelection/csvData.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback } from "react";
+import React, { useRef, useCallback, useState } from "react";
 import { FileReader } from "@kanaries/web-data-loader";
 import { IRow } from "../../interfaces";
 import Table from "../table";
@@ -8,25 +8,51 @@ import { observer } from "mobx-react-lite";
 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";
 
 const Container = styled.div`
     overflow-x: auto;
+    min-height: 300px;
 `;
 
 interface ICSVData {}
 const CSVData: React.FC<ICSVData> = (props) => {
     const fileRef = useRef<HTMLInputElement>(null);
     const { commonStore } = useGlobalStore();
-    const { tmpDSName, tmpDataSource } = commonStore;
+    const { tmpDSName, tmpDataSource, tmpDSRawFields } = commonStore;
+    const [encoding, setEncoding] = useState<string>("utf-8");
 
     const onSubmitData = useCallback(() => {
         commonStore.commitTempDS();
     }, []);
 
     const { t } = useTranslation("translation", { keyPrefix: "DataSource.dialog.file" });
+    const fileLoaded = tmpDataSource.length > 0 && tmpDSRawFields.length > 0;
 
     return (
         <Container>
+            {!fileLoaded && (
+                <div className="text-center">
+                    <svg
+                        className="mx-auto h-12 w-12 text-gray-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        aria-hidden="true"
+                    >
+                        <path
+                            vectorEffect="non-scaling-stroke"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            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>
+                </div>
+            )}
             <input
                 style={{ display: "none" }}
                 type="file"
@@ -39,42 +65,61 @@ const CSVData: React.FC<ICSVData> = (props) => {
                             file,
                             config: { type: "reservoirSampling", size: Infinity },
                             onLoading: () => {},
+                            encoding,
                         }).then((data) => {
                             commonStore.updateTempDS(data as IRow[]);
                         });
                     }
                 }}
             />
-            <div className="mt-1 mb-1">
-                <DefaultButton
-                    onClick={() => {
-                        if (fileRef.current) {
-                            fileRef.current.click();
-                        }
-                    }}
-                    text={t("open")}
-                />
-                <PrimaryButton
-                    text={t("submit")}
-                    disabled={tmpDataSource.length === 0}
-                    onClick={() => {
-                        onSubmitData();
-                    }}
-                />
-            </div>
-            <div className="my-2">
-                <label className="block text-xs text-gray-800 mb-1 font-bold">{t("dataset_name")}</label>
-                <input
-                    type="text"
-                    placeholder={t("dataset_name")}
-                    value={tmpDSName}
-                    onChange={(e) => {
-                        commonStore.updateTempName(e.target.value);
-                    }}
-                    className="text-xs p-2 rounded border border-gray-200 outline-none focus:outline-none focus:border-blue-500 placeholder:italic placeholder:text-slate-400"
-                />
-            </div>
-            <Table />
+            {!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>
+                </div>
+            )}
+            {fileLoaded && (
+                <div className="mb-2 mt-6">
+                    <label className="block text-xs text-gray-800 dark:text-gray-200 mb-1 font-bold">
+                        {t("dataset_name")}
+                    </label>
+                    <input
+                        type="text"
+                        placeholder={t("dataset_name")}
+                        value={tmpDSName}
+                        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"
+                    />
+                    <PrimaryButton
+                        className="mr-2"
+                        text={t("submit")}
+                        disabled={tmpDataSource.length === 0}
+                        onClick={() => {
+                            onSubmitData();
+                        }}
+                    />
+                </div>
+            )}
+            {fileLoaded && <Table />}
         </Container>
     );
 };

package/src/dataSource/dataSelection/gwFile.tsx

@@ -1,15 +1,7 @@
 import React, { useRef, useCallback } from "react";
-import { FileReader } from "@kanaries/web-data-loader";
-import { IRow } from "../../interfaces";
-import Table from "../table";
-import styled from "styled-components";
 import { useGlobalStore } from "../../store";
 import { observer } from "mobx-react-lite";
-import { useTranslation } from "react-i18next";
 
-const Container = styled.div`
-    overflow-x: auto;
-`;
 
 interface GWFileProps {
     fileRef: React.RefObject<HTMLInputElement>;

package/src/dataSource/dataSelection/index.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import CSVData from "./csvData";
 import PublicData from "./publicData";
 import { useTranslation } from "react-i18next";
-import PureTabs from "../../components/tabs/pureTab";
+import PureTabs from "../../components/tabs/defaultTab";
 
 const DataSelection: React.FC = (props) => {
     const [sourceType, setSourceType] = useState<"file" | "public">("file");
@@ -26,7 +26,6 @@ const DataSelection: React.FC = (props) => {
                         setSourceType(sk as "public" | "file");
                     }}
                 />
-                <hr className="mt-1 mb-1" />
                 {sourceType === "file" && <CSVData />}
                 {sourceType === "public" && <PublicData />}
             </div>

package/src/dataSource/dataSelection/publicData.tsx

@@ -36,20 +36,19 @@ const PublicData: React.FC<IPublicDataProps> = props => {
                             })
                         })
                     }}
-                    className="border rounded border-gray-300 p-2 m-2 cursor-pointer hover:bg-gray-50"
+                    className="border rounded border-gray-300 dark:border-gray-600 p-2 m-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 dark:text-gray-200"
                     >
                 <div>{data.title}</div>
                 {/* <p>{data.title}</p> */}
             </div>)
             }
         </div>
-        <hr className="m-1" />
         <PrimaryButton
+            className='my-1'
             disabled={tmpDataSource.length === 0}
             onClick={() => { commonStore.commitTempDS() }}
             text={t('submit')}
         />
-        <hr className="m-1" />
         <Table />
     </div>
 }

package/src/dataSource/datasetConfig/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import DatasetTable from "../../components/dataTable";
+import { observer } from "mobx-react-lite";
+import { useGlobalStore } from "../../store";
+
+const DatasetConfig: React.FC = (props) => {
+    const { commonStore, vizStore } = useGlobalStore();
+    const { currentDataset } = commonStore;
+    const { dataSource, rawFields } = currentDataset;
+    return (
+        <div>
+            <DatasetTable size={100} data={dataSource} metas={rawFields}
+                onMetaChange={(fid, fIndex, diffMeta) => {
+                    commonStore.updateCurrentDatasetMetas(fid, diffMeta)
+                }}
+            />
+        </div>
+    );
+};
+
+export default observer(DatasetConfig);

package/src/dataSource/index.tsx

@@ -1,20 +1,22 @@
-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';
-import GwFile from './dataSelection/gwFile';
-import DataSelection from './dataSelection';
-import DefaultButton from '../components/button/default';
+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";
+import GwFile from "./dataSelection/gwFile";
+import DataSelection from "./dataSelection";
+import DefaultButton from "../components/button/default";
+import DropdownSelect from "../components/dropdownSelect";
+import PrimaryButton from "../components/button/primary";
 
 interface DSSegmentProps {
     preWorkDone: boolean;
 }
 
-const DataSourceSegment: React.FC<DSSegmentProps> = props => {
+const DataSourceSegment: React.FC<DSSegmentProps> = (props) => {
     const { preWorkDone } = props;
     const { commonStore, vizStore } = useGlobalStore();
     const gwFileRef = useRef<HTMLInputElement>(null);
@@ -22,55 +24,73 @@ const DataSourceSegment: React.FC<DSSegmentProps> = props => {
 
     const { currentDataset, datasets, showDSPanel } = commonStore;
 
-    return <Container className="flex flex-row items-stretch">
-        <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>
-        <select
-            className="border border-gray-500 rounded-sm text-xs pt-0.5 pb-0.5 pl-2 pr-2"
-            value={currentDataset.id}
-            onChange={(e) => { commonStore.useDS(e.target.value); }}
-        >
-            {datasets.map((ds) => (
-                <option value={ds.id} key={ds.id}>
-                    {ds.name}
-                </option>
-            ))}
-        </select>
+    return (
+        <Container className="flex items-center">
+            <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> */}
+            <div className="mr-2">
+                <DropdownSelect
+                    options={datasets.map((d) => ({ label: d.name, value: d.id }))}
+                    selectedKey={currentDataset.id}
+                    onSelect={(dsKey) => {
+                        commonStore.useDS(dsKey);
+                    }}
+                    placeholder={t("DataSource.labels.cur_dataset")}
+                />
+            </div>
 
-        <DefaultButton
-            text={t('DataSource.buttons.create_dataset')}
-            onClick={() => { commonStore.startDSBuildingTask() }}
-        />
-        <DefaultButton
-            text={t('DataSource.buttons.export_as_file')}
-            onClick={() => {
-                const res = vizStore.exportAsRaw();
-                download(res, 'graphic-walker-notebook.json', 'text/plain')
-            }}
-        />
-        <DefaultButton
-            text={t('DataSource.buttons.import_file')}
-            onClick={() => {
-                if (gwFileRef.current) {
-                    gwFileRef.current.click();
-                }
-            }}
-        />
-        {showDSPanel && (
+            <PrimaryButton
+                className="mr-2"
+                text={t("DataSource.buttons.create_dataset")}
+                onClick={() => {
+                    commonStore.startDSBuildingTask();
+                }}
+            />
+            <DefaultButton
+                className="mr-2"
+                text={t("DataSource.buttons.export_as_file")}
+                onClick={() => {
+                    const res = vizStore.exportAsRaw();
+                    download(res, "graphic-walker-notebook.json", "text/plain");
+                }}
+            />
+            <DefaultButton
+                className="mr-2"
+                text={t("DataSource.buttons.import_file")}
+                onClick={() => {
+                    if (gwFileRef.current) {
+                        gwFileRef.current.click();
+                    }
+                }}
+            />
             <Modal
-                title={t('DataSource.dialog.create_data_source')}
-                onClose={() => { commonStore.setShowDSPanel(false) }}
-            >
-                <DataSelection />
-                {/* <DataSourcePanel /> */}
-            </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" />}
-    </Container>
-}
+                    title={t("DataSource.dialog.create_data_source")}
+                    onClose={() => {
+                        commonStore.setShowDSPanel(false);
+                    }}
+                    show={showDSPanel}
+                >
+                    <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" />}
+        </Container>
+    );
+};
 
-export default observer(DataSourceSegment);
+export default observer(DataSourceSegment);