@kanaries/graphic-walker 0.2.13 → 0.2.14

package/src/components/dropdownContext/index.tsx

@@ -0,0 +1,64 @@
+import React, { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(" ");
+}
+
+export interface IDropdownContextOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface IDropdownContextProps {
+    options?: IDropdownContextOption[];
+    disable?: boolean;
+    onSelect?: (value: string, index: number) => void;
+}
+const DropdownContext: React.FC<IDropdownContextProps> = (props) => {
+    const { options = [], disable } = props;
+
+    if (disable) {
+        return <Fragment>{props.children}</Fragment>;
+    }
+
+    return (
+        <Menu as="span" className="relative block text-left">
+            <Menu.Button className="block w-full text-left">{props.children}</Menu.Button>
+
+            <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+            >
+                <Menu.Items className="absolute left-0 z-50 mt-2 w-56 origin-top-right rounded-md bg-white dark:bg-zinc-900  shadow-lg border border-gray-50 dark:border-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    <div className="py-1">
+                        {options.map((option, index) => (
+                            <Menu.Item key={option.value}>
+                                {(p) => (
+                                    <span
+                                        className={classNames(
+                                            p.active ? "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50" : "text-gray-700 dark:text-gray-200",
+                                            "block px-4 py-2 text-sm"
+                                        )}
+                                        onClick={() => {
+                                            props.onSelect && !props.disable && props.onSelect(option.value, index);
+                                        }}
+                                    >
+                                    {option.label}
+                                    </span>
+                                )}
+                            </Menu.Item>
+                        ))}
+                    </div>
+                </Menu.Items>
+            </Transition>
+        </Menu>
+    );
+};
+
+export default DropdownContext;

package/src/components/dropdownSelect/index.tsx

@@ -0,0 +1,92 @@
+import React, { Fragment } from "react";
+import { Listbox, Menu, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronDownIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(" ");
+}
+
+export interface IDropdownSelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface IDropdownSelectProps {
+    options?: IDropdownSelectOption[];
+    disable?: boolean;
+    selectedKey: string;
+    onSelect?: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    buttonClassName?: string;
+}
+const DropdownSelect: React.FC<IDropdownSelectProps> = (props) => {
+    const { options = [], disable, selectedKey, onSelect, placeholder = "Select an option", className, buttonClassName } = props;
+
+    const selectedItem = options.find((op) => op.value === selectedKey);
+
+    if (disable) {
+        return <Fragment>{props.children}</Fragment>;
+    }
+    let rootClassName = "relative";
+    let btnComputedClassName = "relative cursor-default text-xs rounded-lg bg-white dark:bg-zinc-900 px-2.5 py-1.5 pr-10 text-left border border-gray-200 dark:border-gray-700 focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 truncate"
+    if (buttonClassName) {
+        btnComputedClassName = btnComputedClassName + " " + buttonClassName;
+    }
+    if (className) {
+        rootClassName = rootClassName + " " + className;
+    }
+    return (
+        <Listbox
+            value={selectedKey}
+            onChange={(newKey) => {
+                onSelect && onSelect(newKey);
+            }}
+        >
+            <div className={rootClassName}>
+                <Listbox.Button className={btnComputedClassName}>
+                    <span className="block truncate dark:text-white">{selectedItem?.label || ""}</span>
+                    { selectedItem === undefined && <span className="block truncate text-gray-400">{placeholder}</span>}
+                    <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                        <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                    </span>
+                </Listbox.Button>
+                <Transition
+                    as={Fragment}
+                    leave="transition ease-in duration-100"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <Listbox.Options className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-zinc-900  py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                        {options.map((op, opIndex) => (
+                            <Listbox.Option
+                                key={op.value}
+                                className={({ active }) =>
+                                    `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                                        active ? "bg-amber-100 text-amber-900 dark:bg-amber-800 dark:text-amber-50" : "text-gray-900 dark:text-gray-50"
+                                    }`
+                                }
+                                value={op.value}
+                            >
+                                {({ selected }) => (
+                                    <>
+                                        <span className={`block truncate ${selected ? "font-medium" : "font-normal"}`}>
+                                            {op.label}
+                                        </span>
+                                        {selected && (
+                                            <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600 dark:text-amber-400">
+                                                <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                            </span>
+                                        )}
+                                    </>
+                                )}
+                            </Listbox.Option>
+                        ))}
+                    </Listbox.Options>
+                </Transition>
+            </div>
+        </Listbox>
+    );
+};
+
+export default DropdownSelect;

package/src/components/modal.tsx

@@ -1,6 +1,9 @@
 import React, { useRef } from "react";
 import styled from "styled-components";
 import { XCircleIcon } from "@heroicons/react/24/outline";
+import { Fragment, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import { ExclamationTriangleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
 const Background = styled.div({
     position: "fixed",
@@ -28,27 +31,33 @@ const Container = styled.div`
         padding: 12px;
         font-size: 14px;
         align-items: center;
+        @media (prefers-color-scheme: dark) {
+            background-color: #000;
+        }
     }
     > div.container {
-        padding: 1em;
+        padding: 0.5em 1em 1em 1em;
     }
     position: fixed;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     background-color: #fff;
+    @media (prefers-color-scheme: dark) {
+        background-color: #000;
+    }
     /* box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.19); */
     border-radius: 4px;
     z-index: 999;
 `;
 interface ModalProps {
     onClose?: () => void;
+    show?: boolean;
     title?: string;
 }
 const Modal: React.FC<ModalProps> = (props) => {
-    const { onClose, title } = props;
+    const { onClose, title, show } = props;
     const prevMouseDownTimeRef = useRef(0);
-
     return (
         <Background
             // This is a safer replacement of onClick handler.
@@ -56,7 +65,7 @@ const Modal: React.FC<ModalProps> = (props) => {
             // at a different element and then released when the mouse is moved on the target element.
             // This case is required to be prevented, especially disturbing when interacting
             // with a Slider component.
-            className="border border-gray-300"
+            className={"border border-gray-300 dark:border-gray-600 " + (show ? "block" : "hidden")}
             onMouseDown={() => (prevMouseDownTimeRef.current = Date.now())}
             onMouseOut={() => (prevMouseDownTimeRef.current = 0)}
             onMouseUp={() => {
@@ -65,17 +74,20 @@ const Modal: React.FC<ModalProps> = (props) => {
                 }
             }}
         >
-            <Container role="dialog" className="shadow-lg" onMouseDown={(e) => e.stopPropagation()}>
-                <div className="header relative h-9">
-                    <header className="font-bold">{title}</header>
-                    <XCircleIcon
-                        className="text-red-600 absolute right-2 w-6 cursor-pointer"
-                        role="button"
-                        tabIndex={0}
-                        aria-label="close dialog"
-                        onClick={onClose}
-                    />
+            <Container role="dialog" className="shadow-lg rounded-md border border-gray-100 dark:border-gray-800" onMouseDown={(e) => e.stopPropagation()}>
+            <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+                  <button
+                    type="button"
+                    className="rounded-md bg-white dark:bg-zinc-900 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    onClick={() => {
+                        onClose?.();
+                    }}
+                  >
+                    <span className="sr-only">Close</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </button>
                 </div>
+                <div className="px-6 pt-4 text-base font-semibold leading-6 text-gray-900 dark:text-gray-50">{title}</div>
                 <div className="container">{props.children}</div>
             </Container>
         </Background>

package/src/components/tabs/defaultTab.tsx

@@ -19,7 +19,7 @@ export default function Default(props: DefaultProps) {
     const { tabs, selectedKey, onSelected } = props;
 
     return (
-        <div className="border-b border-gray-200 mb-2" >
+        <div className="border-b border-gray-200 dark:border-gray-700 mb-2" >
             <nav className="-mb-px flex space-x-8" role="tablist" aria-label="Tabs">
                 {tabs.map((tab, tabIndex) => (
                     <span
@@ -31,9 +31,9 @@ export default function Default(props: DefaultProps) {
                         key={tab.key}
                         className={classNames(
                             tab.key === selectedKey
-                            ? 'border-indigo-500 text-indigo-600'
-                            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
-                          'whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm'
+                            ? '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'
                         )}
                     >{tab.label}</span>
                 ))}

package/src/components/tabs/editableTab.tsx

@@ -32,8 +32,8 @@ export default function EditableTabs(props: EditableTabsProps) {
     }, [clearEditStatus]);
 
     return (
-        <div className="border-b border-gray-200 overflow-x-auto overflow-y-hidden" onMouseLeave={clearEditStatus}>
-            <nav className="-mb-px flex h-8 border-gray-200 border-l" role="tablist" aria-label="Tabs">
+        <div className="border-b border-gray-200 dark:border-gray-800 overflow-x-auto overflow-y-hidden" onMouseLeave={clearEditStatus}>
+            <nav className="-mb-px flex h-8 border-gray-200 dark:border-gray-800" role="tablist" aria-label="Tabs">
                 {tabs.map((tab, tabIndex) => (
                     <span
                         role="tab"
@@ -64,9 +64,9 @@ export default function EditableTabs(props: EditableTabsProps) {
                         key={tab.key}
                         className={classNames(
                             tab.key === selectedKey
-                                ? "text-black bg-gray-100"
-                                : "text-gray-500 hover:text-gray-700",
-                            "whitespace-nowrap border-gray-200 py-1 px-2 border-r border-t border-b pr-6 text-sm cursor-pointer"
+                                ? "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"
                         )}
                     />
                 ))}

package/src/components/toolbar/components.tsx

@@ -46,6 +46,14 @@ export const ToolbarContainer = styled.div`
     height: var(--height);
     background-color: var(--background-color);
     color: 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;
+    }
     /* box-shadow: 0px 1px 3px 1px rgba(136, 136, 136, 0.1); */
     border-radius: 2px;
     overflow: hidden;
@@ -94,7 +102,6 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean }>`
     &[aria-disabled=false] {
         cursor: pointer;
         :hover, :focus, &.open {
-            background-image: linear-gradient(#FFFFFFCC, #FEFEFECC);
             --background-color: #FEFEFE;
             color: var(--color-hover);
             &.split * svg {
@@ -104,6 +111,16 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean }>`
             & svg {
                 text-shadow: 0 0 1.5px var(--shadow-color);
             }
+            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

@@ -11,6 +11,11 @@ const Root = styled.div`
     --color-hover: #555;
     --blue: #282958;
     --blue-dark: #1d1e38;
+    --dark-mode-background-color: #1f1f1f;
+    --dark-mode-color: #aaa;
+    --dark-mode-color-hover: #ccc;
+    --dark-mode-blue: #282958;
+    --dark-mode-blue-dark: #1d1e38;
 `;
 
 export interface ToolbarProps {

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

@@ -12,13 +12,18 @@ const ToolbarButton = memo<IToolbarProps<ToolbarButtonItem>>(function ToolbarBut
     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}
             >
-                <Icon style={styles?.icon} />
+                <Icon style={mergedIconStyles} />
             </ToolbarItemContainer>
         </>
     );

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

@@ -35,6 +35,9 @@ const FormContainer = styled(ToolbarContainer)`
     width: max-content;
     height: max-content;
     background-color: #fff;
+    @media (prefers-color-scheme: dark) {
+        background-color: #000;
+    }
 `;
 
 export interface IToolbarItem {
@@ -48,6 +51,7 @@ export interface IToolbarItem {
     disabled?: boolean;
     menu?: ToolbarProps;
     form?: JSX.Element;
+    styles?: Partial<Pick<NonNullable<ToolbarProps['styles']>, 'item' | 'icon' | 'splitIcon'>>;
 }
 
 export const ToolbarItemSplitter = '-';

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>
     );
 };