@kanaries/graphic-walker 0.2.13 → 0.2.15

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

@@ -8,17 +8,23 @@ 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);
 
+    const mergedIconStyles = {
+        ...styles?.icon,
+        ...item.styles?.icon,
+    };
+
     return (
         <>
             <ToolbarItemContainer
                 props={props}
                 handlers={onClick ? handlers : null}
+                darkModePreference={darkModePreference}
             >
-                <Icon style={styles?.icon} />
+                <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,7 +35,7 @@ const ToolbarSplit = styled.div<{ open: boolean }>`
 const FormContainer = styled(ToolbarContainer)`
     width: max-content;
     height: max-content;
-    background-color: #fff;
+    background-color: ${({ dark }) => dark ? '#000' : '#fff'};
 `;
 
 export interface IToolbarItem {
@@ -48,6 +49,7 @@ export interface IToolbarItem {
     disabled?: boolean;
     menu?: ToolbarProps;
     form?: JSX.Element;
+    styles?: Partial<Pick<NonNullable<ToolbarProps['styles']>, 'item' | 'icon' | 'splitIcon'>>;
 }
 
 export const ToolbarItemSplitter = '-';
@@ -61,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;
@@ -70,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;
@@ -80,6 +84,7 @@ export const ToolbarItemContainer = memo<{
             styles, openedKey, setOpenedKey, renderSlot,
         },
         handlers,
+        darkModePreference,
         children,
         ...props
     }
@@ -126,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}
@@ -186,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>
@@ -198,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)`
@@ -16,7 +17,12 @@ const OptionGroup = styled(ToolbarContainer)`
     --color: #777;
     --color-hover: #555;
     --blue: #282958;
-    background-color: var(--background-color);
+    --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: ${({ dark }) => dark ? 'var(--dark-mode-background-color)' : 'var(--background-color)'};
 `;
 
 const Option = styled(ToolbarItemContainerElement)`
@@ -71,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`;
     
@@ -115,9 +121,17 @@ 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,
+    };
+
+    const dark = useCurrentMediaTheme(darkModePreference) === 'dark';
+
     return (
         <>
             <ToolbarItemContainer
+                darkModePreference={darkModePreference}
                 props={produce(props, draft => {
                     if (currentOption) {
                         draft.item.label = `${draft.item.label}: ${currentOption.label}`;
@@ -126,28 +140,26 @@ 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,
                         }}
                     />
                 )}
                 <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;
@@ -156,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,10 +46,15 @@ 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);
 
+    const mergedIconStyles = {
+        ...styles?.icon,
+        ...item.styles?.icon,
+    };
+
     return (
         <>
             <ToolbarItemContainer
@@ -57,9 +62,10 @@ const ToolbarToggleButton = memo<IToolbarProps<ToolbarToggleButtonItem>>(functio
                 handlers={handlers}
                 role="checkbox"
                 aria-checked={checked}
+                darkModePreference={darkModePreference}
             >
                 <ToggleContainer checked={checked}>
-                    <Icon style={styles?.icon} />
+                    <Icon style={mergedIconStyles} />
                 </ToggleContainer>
             </ToolbarItemContainer>
         </>

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,7 +34,7 @@ const Bubble = styled.div`
         width: 8px;
         height: 8px;
         transform: translate(-50%, 50%) rotate(45deg);
-        background-color: #fff;
+        background-color: ${({ dark }) => dark ? '#000' : '#fff'};
         border-radius: 1px;
     }
 `;
@@ -42,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]);
@@ -118,6 +122,8 @@ const Tooltip = memo<TooltipProps>(function Tooltip({
         }
     }, [root, hostId]);
 
+    const darkMode = useCurrentMediaTheme(darkModePreference);
+    
     return (
         <>
             {element}
@@ -125,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 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

@@ -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-700 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/editableTab";
+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>
 }