@kanaries/graphic-walker 0.2.14 → 0.2.15

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/csvData.tsx

@@ -107,7 +107,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/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/fields/components.tsx

@@ -3,38 +3,13 @@ import styled from "styled-components";
 import { useTranslation } from 'react-i18next';
 import { COLORS } from "../config";
 
-export const AestheticSegment = styled.div`
-  border: 1px solid #e5e7eb;
-  // dark mode
-  @media (prefers-color-scheme: dark) {
-    border: 1px solid #2d3748;
-  }
-  font-size: 12px;
-  margin: 0.2em;
-
-  .aes-header{
-    border-bottom: 1px solid #e5e7eb;
-    @media (prefers-color-scheme: dark) {
-      border-bottom: 1px solid #2d3748;
-    }
-    padding: 0.6em;
-    h4 {
-      font-weight: 400;
-    }
-  }
-  .aes-container{
-    /* overflow-x: auto; */
-  }
-
-`
-
 export const FieldListContainer: React.FC<{ name: string }> = (props) => {
   const { t } = useTranslation('translation', { keyPrefix: 'constant.draggable_key' });
 
   return (
-    <FieldListSegment>
-      <div className="fl-header">
-        <h4>{t(props.name)}</h4>
+    <FieldListSegment className="m-0.5 border border-gray-200 dark:border-gray-700">
+      <div className="fl-header border-r border-gray-200 dark:border-gray-800 cursor-default select-none">
+        <h4 className="font-normal">{t(props.name)}</h4>
       </div>
       <div className="fl-container">{props.children}</div>
     </FieldListSegment>
@@ -45,12 +20,12 @@ export const AestheticFieldContainer: React.FC<{ name: string }> = props => {
   const { t } = useTranslation('translation', { keyPrefix: 'constant.draggable_key' });
 
   return (
-    <AestheticSegment>
-      <div className="aes-header cursor-default select-none">
-        <h4>{t(props.name)}</h4>
+    <div className="m-0.5 text-xs border border-gray-200 dark:border-gray-700">
+      <div className="border-b border-gray-200 dark:border-gray-800 p-2 cursor-default select-none">
+        <h4 className="font-normal">{t(props.name)}</h4>
       </div>
-      <div className="aes-container">{props.children}</div>
-    </AestheticSegment>
+      <div>{props.children}</div>
+    </div>
   );
 }
 
@@ -58,12 +33,12 @@ export const FilterFieldContainer: React.FC = props => {
   const { t } = useTranslation('translation', { keyPrefix: 'constant.draggable_key' });
 
   return (
-    <FilterFieldSegment>
-      <div className="flt-header cursor-default select-none">
-        <h4>{t('filters')}</h4>
+    <div className="m-0.5 text-xs border border-gray-200 dark:border-gray-700">
+      <div className="border-b border-gray-200 dark:border-gray-800 p-2 cursor-default select-none">
+        <h4 className="font-normal">{t('filters')}</h4>
       </div>
-      <div className="flt-container">{props.children}</div>
-    </FilterFieldSegment>
+      <div>{props.children}</div>
+    </div>
   );
 }
 
@@ -91,19 +66,11 @@ export const FilterFieldsContainer = styled.div({
 
 export const FieldListSegment = styled.div`
   display: flex;
-  border: 1px solid #e5e7eb;
-  @media (prefers-color-scheme: dark) {
-    border: 1px solid #2d3748;
-  }
   margin: 0.2em;
   font-size: 12px;
   div.fl-header {
     /* flex-basis: 100px; */
     width: 100px;
-    border-right: 1px solid #e5e7eb;
-    @media (prefers-color-scheme: dark) {
-      border-right: 1px solid #2d3748;
-    }
     flex-shrink: 0;
     h4 {
       margin: 0.6em;
@@ -112,10 +79,6 @@ export const FieldListSegment = styled.div`
   }
   div.fl-container {
     flex-grow: 10;
-    /* display: flex;
-    flex-wrap: wrap; */
-    /* overflow-x: auto;
-    overflow-y: hidden; */
   }
 `;
 

package/src/fields/datasetFields/index.tsx

@@ -2,11 +2,10 @@ import React from "react";
 import { Droppable } from "@kanaries/react-beautiful-dnd";
 import { useTranslation } from "react-i18next";
 import styled from 'styled-components';
-import { NestContainer } from "../../components/container";
 import DimFields from "./dimFields";
 import MeaFields from "./meaFields";
 
-const DSContainer = styled(NestContainer)`
+const DSContainer = styled.div`
     @media (min-width: 768px) {
         height: 680px;
     }
@@ -16,14 +15,14 @@ const DatasetFields: React.FC = (props) => {
     const { t } = useTranslation("translation", { keyPrefix: "main.tabpanel.DatasetFields" });
 
     return (
-        <DSContainer className="border-gray-200 dark:border-gray-700 flex md:flex-col" style={{ paddingBlock: 0, paddingInline: '0.6em' }}>
+        <DSContainer className="p-1 m-0.5 border border-gray-200 dark:border-gray-700 flex md:flex-col" style={{ paddingBlock: 0, paddingInline: '0.6em' }}>
             <h4 className="text-xs mb-2 flex-grow-0 cursor-default select-none mt-2">{t("field_list")}</h4>
             <div className="pd-1 overflow-y-auto" style={{ maxHeight: "380px", minHeight: '100px' }}>
                 <Droppable droppableId="dimensions" direction="vertical">
                     {(provided, snapshot) => <DimFields provided={provided} />}
                 </Droppable>
             </div>
-            <div className="border-t dark:border-gray-800 flex-grow pd-1 overflow-y-auto">
+            <div className="border-t dark:border-gray-700 flex-grow pd-1 overflow-y-auto">
                 <Droppable droppableId="measures" direction="vertical">
                     {(provided, snapshot) => <MeaFields provided={provided} />}
                 </Droppable>

package/src/fields/encodeFields/singleEncodeEditor.tsx

@@ -48,7 +48,7 @@ const SingleEncodeEditor: React.FC<SingleEncodeEditorProps> = (props) => {
                                 >
                                     <TrashIcon className="w-4" />
                                 </div>
-                                <div className="flex-1 flex items-center border border-gray-200 dark:border-gray-700 border-l-0 px-2 space-x-2">
+                                <div className="flex-1 flex items-center border border-gray-200 dark:border-gray-700 border-l-0 px-2 space-x-2 truncate">
                                     <span className="flex-1 truncate">
                                         {channelItem.name}
                                     </span>

package/src/fields/filterField/filterEditDialog.tsx

@@ -1,64 +1,29 @@
-import { CheckCircleIcon } from '@heroicons/react/24/outline';
-import { observer } from 'mobx-react-lite';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import Modal from '../../components/modal';
-import type { IFilterField, IFilterRule } from '../../interfaces';
-import { useGlobalStore } from '../../store';
-import Tabs, { RuleFormProps } from './tabs';
-
-
-const QuantitativeRuleForm: React.FC<RuleFormProps> = ({
-    field,
-    onChange,
-}) => {
-    return (
-        <Tabs
-            field={field}
-            onChange={onChange}
-            tabs={['range', 'one of']}
-        />
-    );
+import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { observer } from "mobx-react-lite";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import Modal from "../../components/modal";
+import type { IFilterField, IFilterRule } from "../../interfaces";
+import { useGlobalStore } from "../../store";
+import Tabs, { RuleFormProps } from "./tabs";
+import DefaultButton from "../../components/button/default";
+import PrimaryButton from "../../components/button/primary";
+
+const QuantitativeRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["range", "one of"]} />;
 };
 
-const NominalRuleForm: React.FC<RuleFormProps> = ({
-    field,
-    onChange,
-}) => {
-    return (
-        <Tabs
-            field={field}
-            onChange={onChange}
-            tabs={['one of']}
-        />
-    );
+const NominalRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["one of"]} />;
 };
 
-const OrdinalRuleForm: React.FC<RuleFormProps> = ({
-    field,
-    onChange,
-}) => {
-    return (
-        <Tabs
-            field={field}
-            onChange={onChange}
-            tabs={['range', 'one of']}
-        />
-    );
+const OrdinalRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["range", "one of"]} />;
 };
 
-const TemporalRuleForm: React.FC<RuleFormProps> = ({
-    field,
-    onChange,
-}) => {
-    return (
-        <Tabs
-            field={field}
-            onChange={onChange}
-            tabs={['one of', 'temporal range']}
-        />
-    );
+const TemporalRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["one of", "temporal range"]} />;
 };
 
 const EmptyForm: React.FC<RuleFormProps> = () => <React.Fragment />;
@@ -67,7 +32,7 @@ const FilterEditDialog: React.FC = observer(() => {
     const { vizStore } = useGlobalStore();
     const { editingFilterIdx, draggableFieldState } = vizStore;
 
-    const { t } = useTranslation('translation', { keyPrefix: 'filters' });
+    const { t } = useTranslation("translation", { keyPrefix: "filters" });
 
     const field = React.useMemo(() => {
         return editingFilterIdx !== null ? draggableFieldState.filters[editingFilterIdx] : null;
@@ -83,14 +48,20 @@ const FilterEditDialog: React.FC = observer(() => {
         }
     }, [field]);
 
-    const handleChange = React.useCallback((r: IFilterRule) => {
-        if (editingFilterIdx !== null) {
-            setUncontrolledField(uf => ({
-                ...uf,
-                rule: r,
-            }) as IFilterField);
-        }
-    }, [editingFilterIdx]);
+    const handleChange = React.useCallback(
+        (r: IFilterRule) => {
+            if (editingFilterIdx !== null) {
+                setUncontrolledField(
+                    (uf) =>
+                        ({
+                            ...uf,
+                            rule: r,
+                        } as IFilterField)
+                );
+            }
+        },
+        [editingFilterIdx]
+    );
 
     const handleSubmit = React.useCallback(() => {
         if (editingFilterIdx !== null) {
@@ -100,45 +71,38 @@ const FilterEditDialog: React.FC = observer(() => {
         vizStore.closeFilterEditing();
     }, [editingFilterIdx, uncontrolledField]);
 
-    const Form = field ? ({
-        quantitative: QuantitativeRuleForm,
-        nominal: NominalRuleForm,
-        ordinal: OrdinalRuleForm,
-        temporal: TemporalRuleForm,
-    }[field.semanticType] as React.FC<RuleFormProps>) : EmptyForm;
-    
+    const Form = field
+        ? ({
+              quantitative: QuantitativeRuleForm,
+              nominal: NominalRuleForm,
+              ordinal: OrdinalRuleForm,
+              temporal: TemporalRuleForm,
+          }[field.semanticType] as React.FC<RuleFormProps>)
+        : EmptyForm;
+
     return uncontrolledField ? (
-        <Modal
-            show={Boolean(uncontrolledField)}
-            title={t('editing')}
-            onClose={() => vizStore.closeFilterEditing()}
-        >
-            <header className="text-lg font-semibold py-2 outline-none">
-                {t('form.name')}
-            </header>
-            <input className="border py-1 px-4 bg-white text-gray-800" readOnly value={uncontrolledField.name}/>
-            <header className="text-lg font-semibold py-2 outline-none">
-                {t('form.rule')}
-            </header>
-            <Form
-                field={uncontrolledField}
-                onChange={handleChange}
-            />
-            <div className="flex justify-center text-green-500 mt-4">
-                <CheckCircleIcon
-                    width="3em"
-                    height="3em"
-                    role="button"
-                    tabIndex={0}
-                    aria-label="ok"
-                    className="cursor-pointer hover:bg-green-50 p-1"
-                    onClick={handleSubmit}
-                    strokeWidth="1.5"
-                />
+        <Modal show={Boolean(uncontrolledField)} title={t("editing")} onClose={() => vizStore.closeFilterEditing()}>
+            <div className="p-4">
+                <h2 className="text-base font-semibold py-2 outline-none">{t("form.name")}</h2>
+                <span className="inline-flex items-center rounded-full bg-indigo-100 px-3 py-0.5 text-sm font-medium text-indigo-800">
+                    {uncontrolledField.name}
+                </span>
+                <h3 className="text-base font-semibold py-2 outline-none">{t("form.rule")}</h3>
+                <Form field={uncontrolledField} onChange={handleChange} />
+                <div className="mt-4">
+                    <PrimaryButton
+                        onClick={handleSubmit}
+                        text={t("btn.confirm")}
+                    />
+                    <DefaultButton
+                        className="ml-2"
+                        onClick={() => vizStore.closeFilterEditing()}
+                        text={t("btn.cancel")}
+                    />
+                </div>
             </div>
         </Modal>
     ) : null;
 });
 
-
 export default FilterEditDialog;

package/src/fields/filterField/slider.tsx

@@ -118,7 +118,6 @@ const Slider: React.FC<SliderProps> = React.memo(function Slider ({
             };
 
             const dragHandler = fromEvent(document.body, 'mousemove').pipe(
-                throttleTime(100),
                 map(ev => {
                     if (!trackRef.current || !dragging) {
                         return null;
@@ -142,6 +141,7 @@ const Slider: React.FC<SliderProps> = React.memo(function Slider ({
 
                     return pos;
                 }),
+                throttleTime(100),
                 filter(pos => {
                     return pos !== null && pos !== range[dragging === 'left' ? 0 : 1];
                 }),

package/src/insightBoard/mainBoard.tsx

@@ -9,6 +9,8 @@ import { baseVis, IReasonType } from "./std2vegaSpec";
 import RadioGroupButtons from "./radioGroupButtons";
 import { formatFieldName, mergeMeasures } from "./utils";
 import { useTranslation } from "react-i18next";
+import { useCurrentMediaTheme } from "../utils/media";
+import { builtInThemes } from "../vis/theme";
 
 const collection = Insight.IntentionWorkerCollection.init();
 
@@ -41,6 +43,8 @@ const InsightMainBoard: React.FC<InsightMainBoardProps> = (props) => {
     const [valueExp, setValueExp] = useState<IMeasureWithStat[]>([]);
     const { t } = useTranslation();
     const container = useRef<HTMLDivElement>(null);
+    const mediaTheme = useCurrentMediaTheme();
+    const themeConfig = builtInThemes['g2'][mediaTheme];
 
     const dimsWithTypes = useMemo(() => {
         const dimensions = fields
@@ -111,10 +115,13 @@ const InsightMainBoard: React.FC<InsightMainBoardProps> = (props) => {
                 true
             );
             if (container.current) {
-                embed(container.current, _vegaSpec);
+                embed(container.current, _vegaSpec, {
+                    actions: false,
+                    config: themeConfig
+                });
             }
         }
-    }, [visIndex, recSpaces, visSpaces, fields, dataSource]);
+    }, [visIndex, recSpaces, visSpaces, fields, dataSource, themeConfig]);
 
     const FilterDesc = useMemo<React.ReactElement[]>(() => {
         if (filters) {

package/src/interfaces.ts

@@ -184,4 +184,7 @@ export interface IVisSpec {
 export enum ISegmentKey {
     vis = 'vis',
     data = 'data'
-}
+}
+
+export type IThemeKey = 'vega' | 'g2';
+export type IDarkMode = 'media' | 'light' | 'dark';

package/src/locales/en-US.json

@@ -167,7 +167,9 @@
         "btn": {
             "select_all": "Select All",
             "unselect_all": "Unselect All",
-            "reverse": "Reverse Selection"
+            "reverse": "Reverse Selection",
+            "confirm": "Confirm",
+            "cancel": "Cancel"
         }
     },
     "explain": {
@@ -187,6 +189,7 @@
     "actions": {
         "prev": "Previous",
         "next": "Next",
-        "drop_field": "Drop Field Here"
+        "drop_field": "Drop Field Here",
+        "confirm": "Confirm"
     }
 }

package/src/locales/i18n.ts

@@ -3,6 +3,7 @@ import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
 import localeEnUs from './en-US.json';
+import localeJaJp from './ja-JP.json';
 import localeZhCn from './zh-CN.json';
 
 
@@ -19,6 +20,12 @@ const locales: Resource & { 'en-US': any } = {
     'zh-CN': {
         translation: localeZhCn,
     },
+    'ja': {
+        translation: localeJaJp,
+    },
+    'ja-JP': {
+        translation: localeJaJp,
+    }
 } as const;
 
 i18n.use(initReactI18next).use(LanguageDetector).init({