@kanaries/graphic-walker 0.2.9 → 0.2.10

package/src/visualSettings/index.tsx

@@ -1,15 +1,39 @@
-import { BarsArrowDownIcon, BarsArrowUpIcon, ChevronDownIcon, PhotoIcon } from '@heroicons/react/24/outline';
+import {
+    ArrowUturnLeftIcon,
+    BarsArrowDownIcon,
+    BarsArrowUpIcon,
+    PhotoIcon,
+    ArrowPathIcon,
+    ArrowsPointingOutIcon,
+    CubeIcon,
+    Square3Stack3DIcon,
+    StopIcon,
+    ArrowUturnRightIcon,
+    LockClosedIcon,
+    LockOpenIcon,
+    ViewfinderCircleIcon,
+    ChatBubbleBottomCenterTextIcon,
+    PaintBrushIcon,
+    CursorArrowRaysIcon,
+    WrenchIcon,
+    ChevronUpDownIcon,
+    XMarkIcon,
+    ChevronDoubleUpIcon,
+    ArrowsUpDownIcon,
+    LightBulbIcon,
+} from '@heroicons/react/24/outline';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { SVGProps, useCallback, useMemo } from 'react';
 import styled from 'styled-components'
-import { ArrowPathIcon } from '@heroicons/react/24/solid';
 import { useTranslation } from 'react-i18next';
-import { LiteForm } from '../components/liteForm';
-import SizeSetting from '../components/sizeSetting';
+import { ResizeDialog } from '../components/sizeSetting';
 import { GEMO_TYPES, STACK_MODE, CHART_LAYOUT_TYPE } from '../config';
 import { useGlobalStore } from '../store';
 import { IStackMode, EXPLORATION_TYPES, IBrushDirection, BRUSH_DIRECTIONS } from '../interfaces';
 import { IReactVegaHandler } from '../vis/react-vega';
+import Toolbar, { ToolbarItemProps } from '../components/toolbar';
+import { ButtonWithShortcut } from './menubar';
+import throttle from '../utils/throttle';
 
 
 export const LiteContainer = styled.div`
@@ -33,343 +57,314 @@ export const LiteContainer = styled.div`
     }
 `;
 
+const Invisible = styled.div`
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+`;
+
+const FormContainer = styled.div`
+    margin: 2px;
+    border-radius: 1.2px;
+    padding: 0.5em;
+    display: flex;
+    flex-direction: column;
+`;
+
 interface IVisualSettings {
     rendererHandler?: React.RefObject<IReactVegaHandler>;
 }
 
 const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
     const { vizStore } = useGlobalStore();
-    const { visualConfig, sortCondition } = vizStore;
+    const { visualConfig, canUndo, canRedo } = vizStore;
     const { t: tGlobal } = useTranslation();
     const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings' });
 
-    return <LiteContainer>
-        <LiteForm style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}>
-            <div className="item">
-                <input
-                    className="cursor-pointer"
-                    type="checkbox"
-                    id="toggle:aggregation"
-                    aria-describedby="toggle:aggregation:label"
-                    checked={visualConfig.defaultAggregated}
-                    onChange={(e) => {
-                        vizStore.setVisualConfig('defaultAggregated', e.target.checked);
-                    }}
-                />
-                <label
-                    className="text-xs text-color-gray-700 ml-2 cursor-pointer"
-                    id="toggle:aggregation:label"
-                    htmlFor="toggle:aggregation"
-                >
-                    {t('toggle.aggregation')}
-                </label>
-            </div>
-            <div className="item">
-                <label
-                    className="px-2"
-                    id="dropdown:mark_type:label"
-                    htmlFor="dropdown:mark_type"
-                >
-                    {tGlobal('constant.mark_type.__enum__')}
-                </label>
-                <select
-                    className="border border-gray-500 rounded-sm text-xs pt-0.5 pb-0.5 pl-2 pr-2 cursor-pointer"
-                    id="dropdown:mark_type"
-                    aria-describedby="dropdown:mark_type:label"
-                    value={visualConfig.geoms[0]}
-                    onChange={(e) => {
-                        vizStore.setVisualConfig('geoms', [e.target.value]);
-                    }}
-                >
-                    {GEMO_TYPES.map(g => (
-                        <option
-                            key={g}
-                            value={g}
-                            aria-selected={visualConfig.geoms[0] === g}
-                            className="cursor-pointer"
-                        >
-                            {tGlobal(`constant.mark_type.${g}`)}
-                        </option>
-                    ))}
-                </select>
-            </div>
-            <div className="item">
-                <label
-                    className="px-2"
-                    id="dropdown:stack:label"
-                    htmlFor="dropdown:stack"
-                >
-                    {tGlobal('constant.stack_mode.__enum__')}
-                </label>
-                <select
-                    className="border border-gray-500 rounded-sm text-xs pt-0.5 pb-0.5 pl-2 pr-2 cursor-pointer"
-                    id="dropdown:stack"
-                    aria-describedby="dropdown:stack:label"
-                    value={visualConfig.stack}
-                    onChange={(e) => {
-                        vizStore.setVisualConfig('stack', e.target.value as IStackMode);
-                    }}
-                >
-                    {STACK_MODE.map(g => (
-                        <option
-                            key={g}
-                            value={g}
-                            aria-selected={visualConfig.stack === g}
-                            className="cursor-pointer"
-                        >
-                            {tGlobal(`constant.stack_mode.${g}`)}
-                        </option>
-                    ))}
-                </select>
-            </div>
-            <div className="item">
-                <input
-                    type="checkbox"
-                    className="cursor-pointer"
-                    id="toggle:axes_resize"
-                    aria-describedby="toggle:axes_resize:label"
-                    checked={visualConfig.interactiveScale}
-                    onChange={(e) => {
-                        vizStore.setVisualConfig('interactiveScale', e.target.checked);
-                    }}
-                />
-                <label
-                    className="text-xs text-color-gray-700 ml-2 cursor-pointer"
-                    id="toggle:axes_resize:label"
-                    htmlFor="toggle:axes_resize"
-                >
-                    {t('toggle.axes_resize')}
-                </label>
-            </div>
-            <div className="item">
-                <label className="text-xs text-color-gray-700 mx-2">
-                    {t('sort')}
-                </label>
-                <BarsArrowUpIcon
-                    className={`w-4 inline-block mr-1 ${!sortCondition ? 'text-gray-300 cursor-not-allowed' : 'cursor-pointer'}`}
-                    onClick={() => {
-                        vizStore.applyDefaultSort('ascending')
-                    }}
-                    role="button"
-                    tabIndex={!sortCondition ? undefined : 0}
-                    aria-disabled={!sortCondition}
-                    xlinkTitle={t('button.ascending')}
-                    aria-label={t('button.ascending')}
-                />
-                <BarsArrowDownIcon
-                    className={`w-4 inline-block mr-1 ${!sortCondition ? 'text-gray-300 cursor-not-allowed' : 'cursor-pointer'}`}
-                    onClick={() => {
-                        vizStore.applyDefaultSort('descending');
-                    }}
-                    role="button"
-                    tabIndex={!sortCondition ? undefined : 0}
-                    aria-disabled={!sortCondition}
-                    xlinkTitle={t('button.descending')}
-                    aria-label={t('button.descending')}
-                />
-            </div>
-            <div className='item'>
-                <label
-                    className="text-xs text-color-gray-700 mr-2"
-                    htmlFor="button:transpose"
-                    id="button:transpose:label"
-                >
-                    {t('button.transpose')}
-                </label>
-                <ArrowPathIcon
-                    className="w-4 inline-block mr-1 cursor-pointer"
-                    role="button"
-                    tabIndex={0}
-                    id="button:transpose"
-                    aria-describedby="button:transpose:label"
-                    xlinkTitle={t('button.transpose')}
-                    aria-label={t('button.transpose')}
-                    onClick={() => {
-                        vizStore.transpose();
-                    }}
-                />
-            </div>
-            <div className="item">
-                <label
-                    id="dropdown:layout_type:label"
-                    htmlFor="dropdown:layout_type"
-                >
-                    {tGlobal(`constant.layout_type.__enum__`)}
-                </label>
-                <select
-                    className="border border-gray-500 rounded-sm text-xs pt-0.5 pb-0.5 pl-2 pr-2 cursor-pointer"
-                    id="dropdown:layout_type"
-                    aria-describedby="dropdown:layout_type:label"
-                    value={visualConfig.size.mode}
-                    onChange={(e) => {
-                        // vizStore.setVisualConfig('geoms', [e.target.value]);
-                        vizStore.setChartLayout({
-                            mode: e.target.value as any
-                        })
-                    }}
-                >
-                    {CHART_LAYOUT_TYPE.map(g => (
-                        <option
-                            key={g}
-                            value={g}
-                            className="cursor-pointer"
-                            aria-selected={visualConfig.size.mode === g}
-                        >
-                            {tGlobal(`constant.layout_type.${g}`)}
-                        </option>
-                    ))}
-                </select>
-            </div>
-            <div className="item hover:bg-yellow-100">
-                <SizeSetting
-                    width={visualConfig.size.width}
-                    height={visualConfig.size.height}
-                    onHeightChange={(v) => {
-                        vizStore.setChartLayout({
-                            mode: "fixed",
-                            height: v
-                        })
-                    }}
-                    onWidthChange={(v) => {
-                        vizStore.setChartLayout({
-                            mode: "fixed",
-                            width: v
-                        })
-                    }}
-                />
-                <label
-                    className="text-xs text-color-gray-700 ml-2"
-                    htmlFor="button:size_setting"
-                    id="button:size_setting:label"
-                >
-                    {t('size')}
-                </label>
-            </div>
-            <div className="item">
-                <label
-                    id="dropdown:exploration_mode:label"
-                    htmlFor="dropdown:exploration_mode"
-                >
-                    {tGlobal(`constant.exploration_mode.__enum__`)}
-                </label>
-                <select
-                    className="border border-gray-500 rounded-sm text-xs pt-0.5 pb-0.5 pl-2 pr-2 cursor-pointer"
-                    id="dropdown:exploration_mode"
-                    aria-describedby="dropdown:exploration_mode:label"
-                    value={visualConfig.exploration.mode}
-                    onChange={e => {
-                        vizStore.setExploration({
-                            mode: e.target.value as (typeof EXPLORATION_TYPES)[number]
-                        });
-                    }}
-                >
-                    {EXPLORATION_TYPES.map(g => (
-                        <option
-                            key={g}
-                            value={g}
-                            className="cursor-pointer"
-                            aria-selected={visualConfig.exploration.mode === g}
+    const {
+        defaultAggregated, geoms: [markType], stack, interactiveScale, size: { mode: sizeMode, width, height },
+        exploration: { mode: explorationMode, brushDirection }, showActions,
+    } = visualConfig;
+
+    const downloadPNG = useCallback(throttle(() => {
+        rendererHandler?.current?.downloadPNG();
+    }, 200), [rendererHandler]);
+
+    const downloadSVG = useCallback(throttle(() => {
+        rendererHandler?.current?.downloadSVG();
+    }, 200), [rendererHandler]);
+
+    const items = useMemo<ToolbarItemProps[]>(() => {
+        return [
+            {
+                key: 'undo',
+                label: 'undo (Ctrl + Z)',
+                icon: () => (
+                    <>
+                        <ArrowUturnLeftIcon />
+                        <Invisible aria-hidden>
+                            <ButtonWithShortcut
+                                label="undo"
+                                disabled={!canUndo}
+                                handler={vizStore.undo.bind(vizStore)}
+                                shortcut="Ctrl+Z"
+                            />
+                        </Invisible>
+                    </>
+                ),
+                onClick: () => vizStore.undo(),
+                disabled: !canUndo,
+            },
+            {
+                key: 'redo',
+                label: 'redo (Ctrl+Shift+Z)',
+                icon: () => (
+                    <>
+                        <ArrowUturnRightIcon />
+                        <Invisible aria-hidden>
+                            <ButtonWithShortcut
+                                label="redo"
+                                disabled={!canRedo}
+                                handler={vizStore.redo.bind(vizStore)}
+                                shortcut="Ctrl+Shift+Z"
+                            />
+                        </Invisible>
+                    </>
+                ),
+                onClick: () => vizStore.redo(),
+                disabled: !canRedo,
+            },
+            '-',
+            {
+                key: 'aggregation',
+                label: t('toggle.aggregation'),
+                icon: CubeIcon,
+                checked: defaultAggregated,
+                onChange: checked => {
+                    vizStore.setVisualConfig('defaultAggregated', checked);
+                },
+            },
+            {
+                key: 'mark_type',
+                label: tGlobal('constant.mark_type.__enum__'),
+                icon: StopIcon,
+                options: GEMO_TYPES.map(g => ({
+                    key: g,
+                    label: tGlobal(`constant.mark_type.${g}`),
+                    icon: {
+                        auto: LightBulbIcon,
+                        bar: (props: SVGProps<SVGSVGElement>) => <svg stroke="currentColor" fill="none" strokeWidth="1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden {...props}><path strokeLinecap="round" strokeLinejoin="round" d="M9,4v16h6v-16Z" /></svg>,
+                        line: (props: SVGProps<SVGSVGElement>) => <svg stroke="currentColor" fill="none" strokeWidth="1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden {...props}><path strokeLinecap="round" strokeLinejoin="round" d="M5,6L19,18" /></svg>,
+                        area: (props: SVGProps<SVGSVGElement>) => <svg stroke="none" fill="currentColor" strokeWidth="1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden {...props}><path strokeLinecap="round" strokeLinejoin="round" d="M5,20v-17l14,4V20Z" /></svg>,
+                        trail: (props: SVGProps<SVGSVGElement>) => <svg stroke="none" fill="currentColor" strokeWidth="1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden {...props}><path strokeLinecap="round" strokeLinejoin="round" d="M5,6l7,4l7-2v2l-7,4l-7,-4z" /></svg>,
+                        point: (props: SVGProps<SVGSVGElement>) => <svg stroke="currentColor" fill="none" strokeWidth="1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden {...props}><path strokeLinecap="round" strokeLinejoin="round" d="M9,12 A3,3,0,0,1,16,12 A3,3,0,0,1,9,12" /></svg>,
+                        circle: (props: SVGProps<SVGSVGElement>) => <svg stroke="none" fill="currentColor" strokeWidth="1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden {...props}><path strokeLinecap="round" strokeLinejoin="round" d="M6,12 A6,6,0,0,1,18,12 A6,6,0,0,1,6,12" /></svg>,
+                        tick: (props: SVGProps<SVGSVGElement>) => <svg stroke="currentColor" fill="none" strokeWidth="1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden {...props}><path strokeLinecap="round" strokeLinejoin="round" d="M5,12h14" /></svg>,
+                        rect: (props: SVGProps<SVGSVGElement>) => <svg stroke="none" fill="currentColor" strokeWidth="1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden {...props}><path strokeLinecap="round" strokeLinejoin="round" d="M5,5v14h14v-14z" /></svg>,
+                        arc: (props: SVGProps<SVGSVGElement>) => <svg stroke="none" fill="currentColor" strokeWidth="1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden {...props}><path strokeLinecap="round" strokeLinejoin="round" d="M12,21l-9,-15a12,12,0,0,1,18,0Z" /></svg>,
+                        boxplot: (props: SVGProps<SVGSVGElement>) => <svg stroke="currentColor" fill="none" strokeWidth="1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden {...props}><path strokeLinecap="round" strokeLinejoin="round" d="M7,7v9h10v-9Zm0,4h8M12,7v-6m-3,0h6M12,16v7m-3,0h6" /></svg>,
+                    }[g],
+                })),
+                value: markType,
+                onSelect: value => {
+                    vizStore.setVisualConfig('geoms', [value]);
+                },
+            },
+            {
+                key: 'stack_mode',
+                label: tGlobal('constant.stack_mode.__enum__'),
+                icon: Square3Stack3DIcon,
+                options: STACK_MODE.map(g => ({
+                    key: g,
+                    label: tGlobal(`constant.stack_mode.${g}`),
+                    icon: {
+                        none: XMarkIcon,
+                        stack: ChevronDoubleUpIcon,
+                        normalize: ArrowsUpDownIcon,
+                    }[g],
+                })),
+                value: stack,
+                onSelect: value => {
+                    vizStore.setVisualConfig('stack', value as IStackMode);
+                },
+            },
+            '-',
+            {
+                key: 'transpose',
+                label: t('button.transpose'),
+                icon: ArrowPathIcon,
+                onClick: () => vizStore.transpose(),
+            },
+            {
+                key: 'sort:asc',
+                label: t('button.ascending'),
+                icon: BarsArrowUpIcon,
+                onClick: () => vizStore.applyDefaultSort('ascending'),
+            },
+            {
+                key: 'sort:dec',
+                label: t('button.descending'),
+                icon: BarsArrowDownIcon,
+                onClick: () => vizStore.applyDefaultSort('descending'),
+            },
+            '-',
+            {
+                key: 'axes_resize',
+                label: t('toggle.axes_resize'),
+                icon: ChevronUpDownIcon,
+                checked: interactiveScale,
+                onChange: checked => {
+                    vizStore.setVisualConfig('interactiveScale', checked);
+                },
+            },
+            {
+                key: 'scale',
+                icon: ArrowsPointingOutIcon,
+                label: tGlobal(`constant.layout_type.__enum__`),
+                options: CHART_LAYOUT_TYPE.map(g => ({
+                    key: g,
+                    label: tGlobal(`constant.layout_type.${g}`),
+                    icon: g === 'auto' ? LockClosedIcon : LockOpenIcon,
+                })),
+                value: sizeMode,
+                onSelect: key => {
+                    vizStore.setChartLayout({ mode: key as 'fixed' | 'auto' });
+                },
+                form: (
+                    <FormContainer>
+                        <ResizeDialog
+                            width={width}
+                            height={height}
+                            onHeightChange={(v) => {
+                                vizStore.setChartLayout({
+                                    mode: "fixed",
+                                    height: v
+                                });
+                            }}
+                            onWidthChange={(v) => {
+                                vizStore.setChartLayout({
+                                    mode: "fixed",
+                                    width: v
+                                });
+                            }}
+                        />
+                    </FormContainer>
+                ),
+            },
+            '-',
+            {
+                key: 'exploration_mode',
+                icon: ViewfinderCircleIcon,
+                label: tGlobal(`constant.exploration_mode.__enum__`),
+                options: EXPLORATION_TYPES.map(g => ({
+                    key: g,
+                    label: tGlobal(`constant.exploration_mode.${g}`),
+                    icon: {
+                        none: ChatBubbleBottomCenterTextIcon,
+                        brush: PaintBrushIcon,
+                        point: CursorArrowRaysIcon,
+                    }[g],
+                })),
+                value: explorationMode,
+                onSelect: key => {
+                    vizStore.setExploration({
+                        mode: key as (typeof EXPLORATION_TYPES)[number]
+                    });
+                },
+                form: explorationMode === 'brush' ? (
+                    <FormContainer>
+                        <label
+                            id="dropdown:brush_mode:label"
+                            htmlFor="dropdown:brush_mode"
                         >
-                            {tGlobal(`constant.exploration_mode.${g}`)}
-                        </option>
-                    ))}
-                </select>
-            </div>
-            <div className="item" style={{ opacity: visualConfig.exploration.mode !== 'brush' ? 0.3 : undefined }}>
-                <label
-                    id="dropdown:brush_mode:label"
-                    htmlFor="dropdown:brush_mode"
-                >
-                    {tGlobal(`constant.brush_mode.__enum__`)}
-                </label>
-                <select
-                    className="border border-gray-500 rounded-sm text-xs pt-0.5 pb-0.5 pl-2 pr-2 cursor-pointer"
-                    id="dropdown:brush_mode"
-                    aria-describedby="dropdown:brush_mode:label"
-                    disabled={visualConfig.exploration.mode !== 'brush'}
-                    aria-disabled={visualConfig.exploration.mode !== 'brush'}
-                    value={visualConfig.exploration.brushDirection}
-                    onChange={e => {
-                        vizStore.setExploration({
-                            brushDirection: e.target.value as IBrushDirection
-                        });
-                    }}
-                >
-                    {BRUSH_DIRECTIONS.map(g => (
-                        <option
-                            key={g}
-                            value={g}
-                            className="cursor-pointer"
-                            aria-selected={visualConfig.exploration.brushDirection === g}
+                            {tGlobal(`constant.brush_mode.__enum__`)}
+                        </label>
+                        <select
+                            className="border border-gray-500 rounded-sm text-xs pt-0.5 pb-0.5 pl-2 pr-2 cursor-pointer"
+                            id="dropdown:brush_mode"
+                            aria-describedby="dropdown:brush_mode:label"
+                            disabled={explorationMode !== 'brush'}
+                            aria-disabled={explorationMode !== 'brush'}
+                            value={brushDirection}
+                            onChange={e => {
+                                vizStore.setExploration({
+                                    brushDirection: e.target.value as IBrushDirection
+                                });
+                            }}
                         >
-                            {tGlobal(`constant.brush_mode.${g}`)}
-                        </option>
-                    ))}
-                </select>
-            </div>
-            <div className="item">
-                <input
-                    type="checkbox"
-                    checked={visualConfig.showActions}
-                    id="toggle:debug"
-                    aria-describedby="toggle:debug:label"
-                    className="cursor-pointer"
-                    onChange={(e) => {
-                        vizStore.setVisualConfig('showActions', e.target.checked);
-                    }}
-                />
-                <label
-                    className="text-xs text-color-gray-700 ml-2 cursor-pointer"
-                    id="toggle:debug:label"
-                    htmlFor="toggle:debug"
-                >
-                    {t('toggle.debug')}
-                </label>
-            </div>
-            <div className='item'>
-                <label
-                    className="text-xs text-color-gray-700 mr-2"
-                    htmlFor="button:transpose"
-                    id="button:transpose:label"
-                >
-                    {t('button.export_chart')}
-                </label>
-                <PhotoIcon
-                    className="w-4 inline-block cursor-pointer"
-                    role="button"
-                    tabIndex={0}
-                    id="button:export_chart"
-                    aria-describedby="button:export_chart:label"
-                    xlinkTitle={t('button.export_chart')}
-                    aria-label={t('button.export_chart')}
-                    onClick={() => rendererHandler?.current?.downloadPNG()}
-                />
-                <div className="menu-root flex flex-col items-center justify-center">
-                    <ChevronDownIcon
-                        className="w-4 h-3 inline-block mr-1 cursor-pointer trigger"
-                        role="button"
-                        tabIndex={0}
-                    />
-                    <div>
+                            {BRUSH_DIRECTIONS.map(g => (
+                                <option
+                                    key={g}
+                                    value={g}
+                                    className="cursor-pointer"
+                                    aria-selected={brushDirection === g}
+                                >
+                                    {tGlobal(`constant.brush_mode.${g}`)}
+                                </option>
+                            ))}
+                        </select>
+                    </FormContainer>
+                ) : undefined,
+            },
+            {
+                key: 'debug',
+                label: t('toggle.debug'),
+                icon: WrenchIcon,
+                checked: showActions,
+                onChange: checked => {
+                    vizStore.setVisualConfig('showActions', checked);
+                },
+            },
+            {
+                key: 'export_chart',
+                label: t('button.export_chart'),
+                icon: PhotoIcon,
+                form: (
+                    <FormContainer>
                         <button
-                            className="text-xs min-w-96 w-full pt-1 pb-1 pl-6 pr-6 bg-white hover:bg-gray-200"
+                            className="text-xs pt-1 pb-1 pl-6 pr-6 bg-white hover:bg-gray-200"
                             aria-label={t('button.export_chart_as', { type: 'png' })}
-                            onClick={() => rendererHandler?.current?.downloadPNG()}
+                            onClick={() => downloadPNG()}
                         >
                             {t('button.export_chart_as', { type: 'png' })}
                         </button>
                         <button
-                            className="text-xs min-w-96 w-full pt-1 pb-1 pl-6 pr-6 bg-white hover:bg-gray-200"
+                            className="text-xs pt-1 pb-1 pl-6 pr-6 bg-white hover:bg-gray-200"
                             aria-label={t('button.export_chart_as', { type: 'svg' })}
-                            onClick={() => rendererHandler?.current?.downloadSVG()}
+                            onClick={() => downloadSVG()}
                         >
                             {t('button.export_chart_as', { type: 'svg' })}
                         </button>
-                    </div>
-                </div>
-            </div>
-        </LiteForm>
-    </LiteContainer>
+                    </FormContainer>
+                ),
+            },
+        ];
+    }, [vizStore, canUndo, canRedo, defaultAggregated, markType, stack, interactiveScale, sizeMode, width, height, explorationMode, brushDirection, showActions, downloadPNG, downloadSVG]);
+
+    return <div style={{ margin: '0.38em 0.28em 0.2em 0.18em' }}>
+        <Toolbar
+            items={items}
+            styles={{
+                root: {
+                    '--background-color': '#fff',
+                    '--color': '#777',
+                    '--color-hover': '#555',
+                    '--blue': '#282958',
+                    '--blue-dark': '#1d1e38',
+                },
+                container: {
+                    border: '1px solid #d9d9d9',
+                    boxSizing: 'content-box',
+                    borderRadius: '1px',
+                },
+            }}
+        />
+    </div>
 }
 
 export default observer(VisualSettings);