@kanaries/graphic-walker 0.2.14 → 0.2.16

package/src/App.tsx

@@ -4,10 +4,9 @@ import { observer } from "mobx-react-lite";
 import { LightBulbIcon } from "@heroicons/react/24/outline";
 import { toJS } from "mobx";
 import { useTranslation } from "react-i18next";
-import { IMutField, IRow, ISegmentKey } from "./interfaces";
+import { IDarkMode, IMutField, IRow, ISegmentKey, IThemeKey } from "./interfaces";
 import type { IReactVegaHandler } from "./vis/react-vega";
 import VisualSettings from "./visualSettings";
-import { Container, NestContainer } from "./components/container";
 import ClickMenu from "./components/clickMenu";
 import InsightBoard from "./insightBoard/index";
 import PosFields from "./fields/posFields";
@@ -15,7 +14,7 @@ import AestheticFields from "./fields/aestheticFields";
 import DatasetFields from "./fields/datasetFields/index";
 import ReactiveRenderer from "./renderer/index";
 import DataSourceSegment from "./dataSource/index";
-import { useGlobalStore } from "./store";
+import { IGlobalStore, useGlobalStore } from "./store";
 import { preAnalysis, destroyWorker } from "./services";
 import VisNav from "./segments/visNav";
 import { mergeLocaleRes, setLocaleLanguage } from "./locales/i18n";
@@ -23,6 +22,8 @@ import FilterField from "./fields/filterField";
 import { guardDataKeys } from "./utils/dataPrep";
 import SegmentNav from "./segments/segmentNav";
 import DatasetConfig from "./dataSource/datasetConfig";
+import { useCurrentMediaTheme } from "./utils/media";
+import CodeExport from "./components/codeExport";
 
 export interface IGWProps {
     dataSource?: IRow[];
@@ -37,7 +38,9 @@ export interface IGWProps {
      */
     fieldKeyGuard?: boolean;
     /** @default "vega" */
-    themeKey?: 'vega' | 'g2';
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
+    storeRef?: React.MutableRefObject<IGlobalStore | null>;
 }
 
 const App = observer<IGWProps>(function App (props) {
@@ -50,6 +53,7 @@ const App = observer<IGWProps>(function App (props) {
         hideDataSourceConfig,
         fieldKeyGuard = true,
         themeKey = 'vega',
+        dark = 'media'
     } = props;
     const { commonStore, vizStore } = useGlobalStore();
     const [insightReady, setInsightReady] = useState<boolean>(true);
@@ -117,14 +121,16 @@ const App = observer<IGWProps>(function App (props) {
         };
     }, [currentDataset, spec]);
 
+    const darkMode = useCurrentMediaTheme(dark);
+
     const rendererRef = useRef<IReactVegaHandler>(null);
 
     return (
-        <div className="App font-sans dark:bg-zinc-900 dark:text-white m-0 p-0">
+        <div className={`${darkMode === 'dark' ? 'dark' : ''} App font-sans bg-white dark:bg-zinc-900 dark:text-white m-0 p-0`}>
             {/* <div className="grow-0">
                 <PageNav />
             </div> */}
-            <div className="">
+            <div className="bg-white dark:bg-zinc-900 dark:text-white">
                 {!hideDataSourceConfig && <DataSourceSegment preWorkDone={insightReady} />}
                 <div className="px-2 mx-2">
                     <SegmentNav />
@@ -133,8 +139,9 @@ const App = observer<IGWProps>(function App (props) {
                     }
                 </div>
                 {segmentKey === ISegmentKey.vis && (
-                    <Container style={{ marginTop: "0em", borderTop: "none" }}>
-                        <VisualSettings rendererHandler={rendererRef} />
+                    <div style={{ marginTop: "0em", borderTop: "none" }} className="m-4 p-4 border border-gray-200 dark:border-gray-700">
+                        <VisualSettings rendererHandler={rendererRef} darkModePreference={dark} />
+                        <CodeExport />
                         <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
                             <div className="md:col-span-3 xl:col-span-1">
                                 <DatasetFields />
@@ -147,7 +154,8 @@ const App = observer<IGWProps>(function App (props) {
                                 <div>
                                     <PosFields />
                                 </div>
-                                <NestContainer
+                                <div
+                                    className="m-0.5 p-1 border border-gray-200 dark:border-gray-700"
                                     style={{ minHeight: "600px", overflow: "auto" }}
                                     onMouseLeave={() => {
                                         vizEmbededMenu.show && commonStore.closeEmbededMenu();
@@ -156,12 +164,12 @@ const App = observer<IGWProps>(function App (props) {
                                         vizEmbededMenu.show && commonStore.closeEmbededMenu();
                                     }}
                                 >
-                                    {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} themeKey={themeKey} />}
+                                    {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} themeKey={themeKey} dark={dark} />}
                                     <InsightBoard />
                                     {vizEmbededMenu.show && (
                                         <ClickMenu x={vizEmbededMenu.position[0]} y={vizEmbededMenu.position[1]}>
                                             <div
-                                                className="flex items-center whitespace-nowrap py-1 px-4 hover:bg-gray-100"
+                                                className="flex items-center whitespace-nowrap py-1 px-4 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
                                                 onClick={() => {
                                                     commonStore.closeEmbededMenu();
                                                     commonStore.setShowInsightBoard(true);
@@ -174,15 +182,15 @@ const App = observer<IGWProps>(function App (props) {
                                             </div>
                                         </ClickMenu>
                                     )}
-                                </NestContainer>
+                                </div>
                             </div>
                         </div>
-                    </Container>
+                    </div>
                 )}
                 {segmentKey === ISegmentKey.data && (
-                    <Container style={{ marginTop: "0em", borderTop: "none" }}>
+                    <div className="m-4 p-4 border border-gray-200 dark:border-gray-700" style={{ marginTop: "0em", borderTop: "none" }}>
                         <DatasetConfig />
-                    </Container>
+                    </div>
                 )}
             </div>
         </div>

package/src/components/callout.tsx

@@ -1,14 +1,17 @@
 import React, { memo, ReactNode, useContext, useEffect, 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 CalloutProps {
     target: string;
     children: ReactNode;
+    darkModePreference?: IDarkMode;
 }
 
-const Bubble = styled.div`
+const Bubble = styled.div<{ dark: boolean }>`
     border-radius: 1px;
     transform: translate(-50%, 0);
     filter: drop-shadow(0 1.6px 1px rgba(0, 0, 0, 0.24)) drop-shadow(0 -1px 0.8px rgba(0, 0, 0, 0.19));
@@ -25,15 +28,12 @@ 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;
-        @media (prefers-color-scheme: dark) {
-            background-color: #000;
-        }
     }
 `;
 
-const Callout = memo<CalloutProps>(function Callout({ target, children }) {
+const Callout = memo<CalloutProps>(function Callout({ target, children, darkModePreference = 'media' }) {
     const shadowDomMeta = useContext(ShadowDomContext);
     const { root } = shadowDomMeta;
     const [pos, setPos] = useState<[number, number] | null>(null);
@@ -48,11 +48,13 @@ const Callout = memo<CalloutProps>(function Callout({ target, children }) {
         }
     }, [target, root]);
 
+    const darkMode = useCurrentMediaTheme(darkModePreference);
+
     return (
         root &&
         pos &&
         createPortal(
-            <Bubble role="dialog" className="fixed bg-white dark:bg-zinc-900  z-50" style={{ left: pos[0], top: pos[1] + 4 }}>
+            <Bubble role="dialog" dark={darkMode === 'dark'} className="fixed bg-white dark:bg-zinc-900  z-50" style={{ left: pos[0], top: pos[1] + 4 }}>
                 {children}
             </Bubble>,
             root

package/src/components/clickMenu.tsx

@@ -3,16 +3,10 @@ import styled from "styled-components";
 
 const MenuContainer = styled.div`
     min-width: 100px;
-    background-color: #fff;
-    border: 1px solid #f0f0f0;
     position: absolute;
     z-index: 99;
     cursor: pointer;
     padding: 4px;
-    @media (prefers-color-scheme: dark) {
-        background-color: #000;
-        border: 1px solid #4b5563;
-    }
 `;
 interface ClickMenuProps {
     x: number;
@@ -22,7 +16,7 @@ interface ClickMenuProps {
 const ClickMenu: React.FC<ClickMenuProps> = (props) => {
     const { x, y, children } = props;
     return (
-        <MenuContainer className="shadow-lg text-sm" style={{ left: x + "px", top: y + "px" }}>
+        <MenuContainer className="shadow-lg text-sm bg-white border border-gray-100 dark:bg-black dark:border-gray-700" style={{ left: x + "px", top: y + "px" }}>
             {children}
         </MenuContainer>
     );

package/src/components/codeExport/index.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from "react";
+import Modal from "../modal";
+import { observer } from "mobx-react-lite";
+import { useGlobalStore } from "../../store";
+import DefaultButton from "../button/default";
+import PrimaryButton from "../button/primary";
+import { useTranslation } from "react-i18next";
+import DefaultTab, { ITabOption } from "../tabs/defaultTab";
+
+const syntaxHighlight = (json: any) => {
+    if (typeof json != "string") {
+        json = JSON.stringify(json, undefined, 4);
+    }
+    json = json
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/\n/g, "<br>")
+        .replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;")
+        .replace(/\s/g, "&nbsp;&nbsp;");
+    return json.replace(
+        /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
+        function (match) {
+            var cls = "text-sky-500"; // number
+            if (/^"/.test(match)) {
+                if (/:$/.test(match)) {
+                    cls = "text-purple-500"; // key
+                } else {
+                    cls = "text-emerald-500"; // string
+                }
+            } else if (/true|false/.test(match)) {
+                cls = "text-blue-500";
+            } else if (/null/.test(match)) {
+                cls = "text-sky-500";
+            }
+            return '<span class="' + cls + '">' + match + "</span>";
+        }
+    );
+};
+
+const CodeExport: React.FC = observer((props) => {
+    const { commonStore, vizStore } = useGlobalStore();
+    const { showCodeExportPanel } = commonStore;
+    const { t } = useTranslation();
+    const [tabKey, setTabKey] = useState<string>("graphic-walker");
+    const [code, setCode] = useState<any>("");
+
+    const specTabs: ITabOption[] = [
+        {
+            key: "graphic-walker",
+            label: "Graphic-Walker",
+        },
+        {
+            key: "vega-lite",
+            label: "Vega-Lite",
+            disabled: true
+        },
+    ];
+
+    useEffect(() => {
+        if (showCodeExportPanel) {
+            if (tabKey === "graphic-walker") {
+                const res = vizStore.exportViewSpec();
+                setCode(res);
+            } else {
+                setCode("vega code");
+            }
+        }
+    }, [tabKey, showCodeExportPanel]);
+    return (
+        <Modal
+            show={showCodeExportPanel}
+            onClose={() => {
+                commonStore.setShowCodeExportPanel(false);
+            }}
+        >
+            <div>
+                <h1>Code Export</h1>
+                <DefaultTab
+                    tabs={specTabs}
+                    selectedKey={tabKey}
+                    onSelected={(k) => {
+                        setTabKey(k as string);
+                    }}
+                />
+                {tabKey === "graphic-walker" && (
+                    <div className="text-sm px-6 max-h-56 overflow-auto">
+                        <div dangerouslySetInnerHTML={{ __html: syntaxHighlight(code) }} />
+                    </div>
+                )}
+                <div className="mt-4 flex justify-start">
+                    <PrimaryButton
+                        // text={t("actions.confirm")}
+                        className="mr-2 px-6"
+                        text="Copy to Clipboard"
+                        onClick={() => {
+                            navigator.clipboard.writeText(JSON.stringify(code));
+                            commonStore.setShowCodeExportPanel(false);
+                        }}
+                    />
+                    <DefaultButton
+                        text={t("actions.cancel")}
+                        className="mr-2 px-6"
+                        onClick={() => {
+                            commonStore.setShowCodeExportPanel(false);
+                        }}
+                    />
+                </div>
+            </div>
+        </Modal>
+    );
+});
+
+export default CodeExport;

package/src/components/dataTable/index.tsx

@@ -48,15 +48,15 @@ function getHeaderClassNames(field: IMutField) {
 function getSemanticColors(field: IMutField): string {
     switch (field.semanticType) {
         case "nominal":
-            return "bg-sky-100 text-sky-800";
+            return "border border-transparent bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-100 dark:border-sky-600";
         case "ordinal":
-            return "bg-indigo-100 text-indigo-800";
+            return "border border-transparent bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-100 dark:border-indigo-600";
         case "quantitative":
-            return "bg-purple-100 text-purple-800";
+            return "border border-transparent bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-100 dark:border-purple-600";
         case "temporal":
-            return "bg-yellow-100 text-yellow-800";
+            return "border border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100 dark:border-yellow-600";
         default:
-            return "bg-gray-400";
+            return "border border-transparent bg-gray-400";
     }
 }
 
@@ -97,7 +97,7 @@ const DataTable: React.FC<DataTableProps> = (props) => {
             />
             <table className="min-w-full divide-y">
                 <thead className="bg-gray-50 dark:bg-gray-900">
-                    <tr className="divide-x divide-gray-200 dark:divide-gray-600">
+                    <tr className="divide-x divide-gray-200 dark:divide-gray-700">
                         {metas.map((field, fIndex) => (
                             <th key={field.fid} className={""}>
                                 <div
@@ -152,9 +152,9 @@ const DataTable: React.FC<DataTableProps> = (props) => {
                         ))}
                     </tr>
                 </thead>
-                <tbody className="divide-y divide-gray-100 dark:divide-gray-600 bg-white dark:bg-zinc-900">
-                    {data.slice(from, to).map((row, index) => (
-                        <tr className={"divide-x divide-gray-200 dark:divide-gray-600 " + (index % 2 ? "bg-gray-50 dark:bg-gray-800" : "")} key={index}>
+                <tbody className="divide-y divide-gray-100 dark:divide-gray-700 bg-white dark:bg-zinc-900">
+                    {data.slice(from, to + 1).map((row, index) => (
+                        <tr className={"divide-x divide-gray-200 dark:divide-gray-700 " + (index % 2 ? "bg-gray-50 dark:bg-gray-900" : "")} key={index}>
                             {metas.map((field) => (
                                 <td
                                     key={field.fid + index}
@@ -163,7 +163,7 @@ const DataTable: React.FC<DataTableProps> = (props) => {
                                         " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 dark:text-gray-300 sm:pl-6"
                                     }
                                 >
-                                    {row[field.fid]}
+                                    {`${row[field.fid]}`}
                                 </td>
                             ))}
                         </tr>

package/src/components/loadingLayer.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function LoadingLayer () {
+    return <div className="bg-gray-100/50 dark:bg-gray-700/50 absolute top-0 left-0 right-0 bottom-0 z-50 flex items-center justify-center">
+        Loading...
+    </div>
+}

package/src/components/modal.tsx

@@ -25,16 +25,6 @@ const Container = styled.div`
     }
     max-height: 800px;
     overflow: auto;
-    > div.header {
-        background-color: #f0f0f0;
-        display: flex;
-        padding: 12px;
-        font-size: 14px;
-        align-items: center;
-        @media (prefers-color-scheme: dark) {
-            background-color: #000;
-        }
-    }
     > div.container {
         padding: 0.5em 1em 1em 1em;
     }
@@ -42,10 +32,6 @@ const Container = styled.div`
     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;
@@ -74,7 +60,7 @@ const Modal: React.FC<ModalProps> = (props) => {
                 }
             }}
         >
-            <Container role="dialog" className="shadow-lg rounded-md border border-gray-100 dark:border-gray-800" onMouseDown={(e) => e.stopPropagation()}>
+            <Container role="dialog" className="bg-white dark:bg-zinc-900 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"

package/src/components/sizeSetting.tsx

@@ -14,7 +14,7 @@ export const ResizeDialog: React.FC<SizeSettingProps> = (props) => {
     const { t } = useTranslation("translation", { keyPrefix: "main.tabpanel.settings.size_setting" });
 
     return (
-        <>
+        <div className="text-zinc-400">
             {children}
             <div className="mt-4 w-60">
                 <input
@@ -52,7 +52,7 @@ export const ResizeDialog: React.FC<SizeSettingProps> = (props) => {
                     {`${t("height")}: ${height}`}
                 </output>
             </div>
-        </>
+        </div>
     );
 };
 

package/src/components/tabs/defaultTab.tsx

@@ -7,6 +7,7 @@ function classNames(...classes: string[]) {
 export interface ITabOption {
     label: string | ReactElement;
     key: string;
+    disabled?: boolean;
 }
 interface DefaultProps {
     tabs: ITabOption[];
@@ -26,14 +27,15 @@ export default function Default(props: DefaultProps) {
                         role="tab"
                         tabIndex={0}
                         onClick={() => {
-                            onSelected(tab.key, tabIndex)
+                            !tab.disabled && onSelected(tab.key, tabIndex)
                         }}
                         key={tab.key}
                         className={classNames(
                             tab.key === selectedKey
                             ? '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'
+                          'whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm cursor-pointer',
+                            tab.disabled ? 'opacity-50 cursor-not-allowed' : ''
                         )}
                     >{tab.label}</span>
                 ))}

package/src/components/tabs/editableTab.tsx

@@ -1,74 +1,109 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-
+import { PencilSquareIcon } from "@heroicons/react/24/outline";
+import Modal from "../modal";
+import { unstable_batchedUpdates } from "react-dom";
+import DefaultButton from "../button/default";
+import PrimaryButton from "../button/primary";
 
 function classNames(...classes: string[]) {
-    return classes.filter(Boolean).join(' ')
+    return classes.filter(Boolean).join(" ");
 }
 
 export interface ITabOption {
     label: string;
     key: string;
-    options?: Record<string, any>;
+    editable?: boolean;
 }
 interface EditableTabsProps {
     tabs: ITabOption[];
     selectedKey: string;
     onSelected: (selectedKey: string, index: number) => void;
-    allowEdit?: boolean;
     onEditLabel?: (label: string, index: number) => void;
 }
 export default function EditableTabs(props: EditableTabsProps) {
-    const { tabs, selectedKey, onSelected, allowEdit, onEditLabel } = props;
-    const [editList, setEditList] = useState<boolean[]>([]);
+    const { tabs, selectedKey, onSelected, onEditLabel } = props;
+    const [editingIndex, setEditingIndex] = useState<number>(-1);
+    const [name, setName] = useState<string>("");
     const { t } = useTranslation();
 
-    const clearEditStatus = useCallback(() => {
-        setEditList(new Array(tabs.length).fill(false))
-    }, [tabs.length]);
-    
-    useEffect(() => {
-        clearEditStatus();
-    }, [clearEditStatus]);
-
     return (
-        <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">
+        <div className="border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden">
+            <Modal
+                show={editingIndex > -1}
+                onClose={() => {
+                    setEditingIndex(-1);
+                }}
+            >
+                <div>
+                    <span className="block text-sm font-medium leading-6">{t('main.tablist.chart_name')}</span>
+                    <div className="mt-2">
+                        <input
+                            value={name}
+                            onChange={(e) => {
+                                setName(e.target.value);
+                            }}
+                            type="text"
+                            name="text"
+                            className="block w-full rounded-md border-0 px-2 py-1.5 bg-transparent shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                        />
+                    </div>
+                    <div className="mt-4 flex justify-end">
+                        <DefaultButton
+                            className="mr-2"
+                            text={t("actions.cancel")}
+                            onClick={() => {
+                                unstable_batchedUpdates(() => {
+                                    setEditingIndex(-1);
+                                    setName("");
+                                });
+                            }}
+                        />
+                        <PrimaryButton
+                            text={t("actions.confirm")}
+                            onClick={() => {
+                                unstable_batchedUpdates(() => {
+                                    onEditLabel && onEditLabel(name, editingIndex);
+                                    setEditingIndex(-1);
+                                    setName("");
+                                });
+                            }}
+                        />
+                    </div>
+                </div>
+            </Modal>
+            <nav className="-mb-px flex h-8 border-gray-200 dark:border-gray-700" role="tablist" aria-label="Tabs">
                 {tabs.map((tab, tabIndex) => (
                     <span
                         role="tab"
                         tabIndex={0}
-                        dangerouslySetInnerHTML={{
-                            __html: t(tab.label, tab.options)
-                        }}
+                        // dangerouslySetInnerHTML={{
+                        //     __html: tab.label
+                        // }}
                         onClick={() => {
-                            onSelected(tab.key, tabIndex)
-                        }}
-                        onDoubleClick={() => {
-                            setEditList(v => {
-                                const nv = [...v];
-                                nv[tabIndex] = true;
-                                return nv
-                            })
-                        }}
-                        contentEditable={editList[tabIndex]}
-                        onInput={(e) => {
-                            onEditLabel && onEditLabel(`${e.currentTarget.textContent}`, tabIndex)
-                        }}
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter') {
-                                clearEditStatus();
-                                e.preventDefault();
-                            }
+                            onSelected(tab.key, tabIndex);
                         }}
                         key={tab.key}
                         className={classNames(
                             tab.key === selectedKey
                                 ? "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"
+                            "whitespace-nowrap border-gray-200 dark:border-gray-700 py-1 px-2 pr-6 text-sm cursor-default dark:text-white"
+                        )}
+                    >
+                        {tab.label}{" "}
+                        {tab.key === selectedKey && tab.editable && (
+                            <PencilSquareIcon
+                                className="w-3 inline cursor-pointer"
+                                onClick={() => {
+                                    unstable_batchedUpdates(() => {
+                                        setEditingIndex(tabIndex);
+                                        setName(tab.label);
+                                    });
+                                }}
+                            />
                         )}
-                    />
+                    </span>
                 ))}
             </nav>
         </div>