@kanaries/graphic-walker 0.3.4 → 0.3.6

package/dist/interfaces.d.ts

@@ -75,7 +75,7 @@ export interface IField {
     analyticType: IAnalyticType;
     cmp?: (a: any, b: any) => number;
     computed?: boolean;
-    expressoion?: IExpression;
+    expression?: IExpression;
 }
 export interface IViewField extends IField {
     dragId: string;
@@ -140,6 +140,7 @@ export interface DraggableFieldState {
     radius: IViewField[];
     details: IViewField[];
     filters: IFilterField[];
+    text: IViewField[];
 }
 export interface IDraggableStateKey {
     id: keyof DraggableFieldState;
@@ -163,6 +164,11 @@ export interface IVisualConfig {
     showActions: boolean;
     interactiveScale: boolean;
     sorted: 'none' | 'ascending' | 'descending';
+    format: {
+        numberFormat?: string;
+        timeFormat?: string;
+        normalizedNumberFormat?: string;
+    };
     size: {
         mode: 'auto' | 'fixed';
         width: number;

package/dist/lib/insights/utils.d.ts

@@ -1,10 +1,8 @@
 import { IField } from '../../interfaces';
-import { IAggQuery } from '../interfaces';
 export declare function groupByAnalyticTypes(fields: IField[]): {
     dimensions: IField[];
     measures: IField[];
 };
-export declare function meaList2AggProps(measures: IField[]): IAggQuery['agg'];
 export declare function complementaryFields(props: {
     selection: IField[];
     all: IField[];

package/dist/lib/interfaces.d.ts

@@ -2,9 +2,11 @@ import { IAggregator } from "../interfaces";
 export interface IAggQuery {
     op: 'aggregate';
     groupBy: string[];
-    agg: {
-        [field: string]: IAggregator;
-    };
+    measures: {
+        field: string;
+        agg: IAggregator;
+        asFieldKey: string;
+    }[];
 }
 export interface IFoldQuery {
     op: 'fold';

package/dist/store/commonStore.d.ts

@@ -14,6 +14,7 @@ export declare class CommonStore {
     };
     showDataConfig: boolean;
     showCodeExportPanel: boolean;
+    showVisualConfigPanel: boolean;
     filters: Filters;
     segmentKey: ISegmentKey;
     constructor();
@@ -24,6 +25,7 @@ export declare class CommonStore {
     setShowInsightBoard(show: boolean): void;
     showEmbededMenu(position: [number, number]): void;
     setShowCodeExportPanel(show: boolean): void;
+    setShowVisualConfigPanel(show: boolean): void;
     closeEmbededMenu(): void;
     initTempDS(): void;
     updateTempFields(fields: IMutField[]): void;

package/dist/store/visualSpecStore.d.ts

@@ -109,6 +109,7 @@ export declare class VizSpecStore {
     setFieldSort(stateKey: keyof DraggableFieldState, index: number, sortType: "none" | "ascending" | "descending"): void;
     applyDefaultSort(sortType?: "none" | "ascending" | "descending"): void;
     appendField(destinationKey: keyof DraggableFieldState, field: IViewField | undefined): void;
+    setVizFormatConfig(formatKey: keyof IVisualConfig['format'], value?: string): void;
     renderSpec(spec: Specification): void;
     destroy(): void;
     exportAsRaw(): string;

package/dist/utils/index.d.ts

@@ -20,3 +20,4 @@ export declare function createCountField(): IViewField;
 export declare function getRange(nums: number[]): [number, number];
 export declare function makeNumbersBeautiful(nums: number[]): number[];
 export declare function classNames(...classes: string[]): string;
+export declare function getMeaAggKey(meaKey: string, agg?: string | undefined): string;

package/dist/vis/react-vega.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IViewField, IRow, IStackMode, IDarkMode, IThemeKey } from '../interfaces';
+import { IViewField, IRow, IStackMode, IDarkMode, IThemeKey, IVisualConfig } from '../interfaces';
 export interface IReactVegaHandler {
     getSVGData: () => Promise<string[]>;
     getCanvasData: () => Promise<string[]>;
@@ -7,6 +7,7 @@ export interface IReactVegaHandler {
     downloadPNG: (filename?: string) => Promise<string[]>;
 }
 interface ReactVegaProps {
+    format: IVisualConfig['format'];
     rows: Readonly<IViewField[]>;
     columns: Readonly<IViewField[]>;
     dataSource: IRow[];
@@ -20,6 +21,7 @@ interface ReactVegaProps {
     shape?: IViewField;
     theta?: IViewField;
     radius?: IViewField;
+    text?: IViewField;
     details?: Readonly<IViewField[]>;
     showActions: boolean;
     layoutMode: string;

package/dist/vis/spec/encode.d.ts

@@ -14,7 +14,9 @@ export interface IEncodeProps {
     theta: IViewField;
     radius: IViewField;
     details: Readonly<IViewField[]>;
+    text: IViewField;
 }
+export declare function availableChannels(geomType: string): Set<string>;
 export declare function channelEncode(props: IEncodeProps): {
     [key: string]: any;
 };

package/dist/visualSettings/index.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import { IDarkMode } from '../interfaces';
 import { IReactVegaHandler } from '../vis/react-vega';
+import { ToolbarItemProps } from '../components/toolbar';
 interface IVisualSettings {
     darkModePreference: IDarkMode;
     rendererHandler?: React.RefObject<IReactVegaHandler>;
+    exclude?: string[];
+    extra?: ToolbarItemProps[];
 }
 declare const _default: React.FunctionComponent<IVisualSettings>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

package/src/App.tsx

@@ -18,6 +18,8 @@ import SegmentNav from './segments/segmentNav';
 import DatasetConfig from './dataSource/datasetConfig';
 import { useCurrentMediaTheme } from './utils/media';
 import CodeExport from './components/codeExport';
+import VisualConfig from './components/visualConfig';
+import type { ToolbarItemProps } from './components/toolbar';
 
 export interface IGWProps {
     dataSource?: IRow[];
@@ -35,6 +37,10 @@ export interface IGWProps {
     themeKey?: IThemeKey;
     dark?: IDarkMode;
     storeRef?: React.MutableRefObject<IGlobalStore | null>;
+    toolbar?: {
+        extra?: ToolbarItemProps[];
+        exclude?: string[];
+    };
 }
 
 const App = observer<IGWProps>(function App(props) {
@@ -48,6 +54,7 @@ const App = observer<IGWProps>(function App(props) {
         fieldKeyGuard = true,
         themeKey = 'vega',
         dark = 'media',
+        toolbar,
     } = props;
     const { commonStore, vizStore } = useGlobalStore();
 
@@ -123,8 +130,9 @@ const App = observer<IGWProps>(function App(props) {
                         style={{ marginTop: '0em', borderTop: 'none' }}
                         className="m-4 p-4 border border-gray-200 dark:border-gray-700"
                     >
-                        <VisualSettings rendererHandler={rendererRef} darkModePreference={dark} />
+                        <VisualSettings rendererHandler={rendererRef} darkModePreference={dark} exclude={toolbar?.exclude} extra={toolbar?.extra} />
                         <CodeExport />
+                        <VisualConfig />
                         <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
                             <div className="md:col-span-3 xl:col-span-1">
                                 <DatasetFields />
@@ -185,3 +193,5 @@ const App = observer<IGWProps>(function App(props) {
 });
 
 export default App;
+
+export type { ToolbarItemProps };

package/src/components/pivotTable/index.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { StoreWrapper, useGlobalStore } from '../../store';
+import { PivotTableDataProps, PivotTableStoreWrapper, usePivotTableStore } from './store';
+import { observer } from 'mobx-react-lite';
+import LeftTree from './leftTree';
+import TopTree from './topTree';
+import {
+    DeepReadonly,
+    DraggableFieldState,
+    IDarkMode,
+    IRow,
+    IThemeKey,
+    IViewField,
+    IVisualConfig,
+} from '../../interfaces';
+import { INestNode } from './inteface';
+import { buildMetricTableFromNestTree, buildNestTree } from './utils';
+import { unstable_batchedUpdates } from 'react-dom';
+import MetricTable from './metricTable';
+import { toJS } from 'mobx';
+
+// const PTStateConnector = observer(function StateWrapper (props: PivotTableProps) {
+//     const store = usePivotTableStore();
+//     const { vizStore } = useGlobalStore();
+//     const { draggableFieldState } = vizStore;
+//     const { rows, columns } = draggableFieldState;
+//     return (
+//         <PivotTable
+//             {...props}
+//             draggableFieldState={draggableFieldState}
+//             visualConfig={visualConfig}
+//         />
+//     );
+// })
+
+interface PivotTableProps {
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
+    data: IRow[];
+    loading: boolean;
+    draggableFieldState: DeepReadonly<DraggableFieldState>;
+    visualConfig: IVisualConfig;
+}
+const PivotTable: React.FC<PivotTableProps> = (props) => {
+    const { data, draggableFieldState } = props;
+    // const store = usePivotTableStore();
+    // const { vizStore } = useGlobalStore();
+    // const { draggableFieldState } = vizStore;
+    const { rows, columns } = draggableFieldState;
+    const [leftTree, setLeftTree] = useState<INestNode | null>(null);
+    const [topTree, setTopTree] = useState<INestNode | null>(null);
+    const [metricTable, setMetricTable] = useState<any[][]>([]);
+
+    const dimsInRow = useMemo(() => {
+        return rows.filter((f) => f.analyticType === 'dimension');
+    }, [rows]);
+
+    const dimsInColumn = useMemo(() => {
+        return columns.filter((f) => f.analyticType === 'dimension');
+    }, [columns]);
+
+    const measInRow = useMemo(() => {
+        return rows.filter((f) => f.analyticType === 'measure');
+    }, [rows]);
+
+    const measInColumn = useMemo(() => {
+        return columns.filter((f) => f.analyticType === 'measure');
+    }, [columns]);
+
+    useEffect(() => {
+        if ((dimsInRow.length > 0 || dimsInColumn.length > 0) && data.length > 0) {
+            const lt = buildNestTree(
+                dimsInRow.map((d) => d.fid),
+                data
+            );
+            const tt = buildNestTree(
+                dimsInColumn.map((d) => d.fid),
+                data
+            );
+            const metric = buildMetricTableFromNestTree(lt, tt, data);
+            // debugger
+            unstable_batchedUpdates(() => {
+                setLeftTree(lt);
+                setTopTree(tt);
+                setMetricTable(metric);
+            });
+        }
+    }, [dimsInRow, dimsInColumn, data]);
+
+    // const { leftTree, topTree, metricTable } = store;
+    return (
+        <div className="flex">
+            <table className="border border-gray-300 border-collapse">
+                <thead className="border border-gray-300">
+                    {new Array(dimsInColumn.length + (measInColumn.length > 0 ? 1 : 0)).fill(0).map((_, i) => (
+                        <tr className="" key={i}>
+                            <td className="p-2 m-1 text-xs text-white border border-gray-300" colSpan={dimsInRow.length + (measInRow.length > 0 ? 1 : 0)}>_</td>
+                        </tr>
+                    ))}
+                </thead>
+                {leftTree && <LeftTree data={leftTree} dimsInRow={dimsInRow} measInRow={measInRow} />}
+            </table>
+            <table className="border border-gray-300 border-collapse">
+                {topTree && <TopTree data={topTree} dimsInCol={dimsInColumn} measInCol={measInColumn} />}
+                {metricTable && <MetricTable matrix={metricTable} meaInColumns={measInColumn} meaInRows={measInRow} />}
+            </table>
+        </div>
+    );
+};
+
+export default PivotTable;
+
+// const PivotTableApp: React.FC<PivotTableProps> = (props) => {
+//     return (
+//         <PivotTableStoreWrapper {...props}>
+//             <PivotTable />
+//         </PivotTableStoreWrapper>
+//     );
+// };

package/src/components/pivotTable/inteface.ts

@@ -0,0 +1,8 @@
+import { IAggregator } from "../../interfaces";
+
+export interface INestNode {
+    key: string;
+    value: string;
+    fieldKey: string;
+    children: INestNode[];
+}

package/src/components/pivotTable/leftTree.tsx

@@ -0,0 +1,92 @@
+import React, { ReactNode, useMemo } from 'react';
+import { INestNode } from './inteface';
+import { IField } from '../../interfaces';
+
+function getChildCount(node: INestNode): number {
+    if (node.children.length === 0) {
+        return 1;
+    }
+    return node.children.map(getChildCount).reduce((a, b) => a + b, 0);
+}
+
+/**
+ * render pivot table left tree table
+ * @param node
+ * @param dimsInRow
+ * @param depth
+ * @param cellRows
+ * @returns
+ */
+function renderTree(node: INestNode, dimsInRow: IField[], depth: number, cellRows: ReactNode[][], meaNumber: number) {
+    const childrenSize = getChildCount(node);
+    if (depth > dimsInRow.length) {
+        return;
+    }
+    cellRows[cellRows.length - 1].push(
+        <td
+            key={`${depth}-${node.fieldKey}-${node.value}`}
+            className="whitespace-nowrap p-2 text-xs text-gray-500 m-1 border border-gray-300"
+            rowSpan={childrenSize * Math.max(meaNumber, 1)}
+        >
+            {node.value}
+        </td>
+    );
+    for (let i = 0; i < node.children.length; i++) {
+        const child = node.children[i];
+        renderTree(child, dimsInRow, depth + 1, cellRows, meaNumber);
+        if (i < node.children.length - 1) {
+            cellRows.push([]);
+        }
+    }
+}
+
+export interface TreeProps {
+    data: INestNode;
+    dimsInRow: IField[];
+    measInRow: IField[];
+}
+const LeftTree: React.FC<TreeProps> = (props) => {
+    const { data, dimsInRow, measInRow } = props;
+    const nodeCells: ReactNode[] = useMemo(() => {
+        const cellRows: ReactNode[][] = [[]];
+        renderTree(data, dimsInRow, 0, cellRows, measInRow.length);
+        cellRows[0].shift();
+        if (measInRow.length > 0) {
+            const ans: ReactNode[][] = [];
+            for (let row of cellRows) {
+                ans.push([
+                    ...row,
+                    <td
+                        key={`0-${measInRow[0].fid}-${measInRow[0].aggName}`}
+                        className="whitespace-nowrap p-2 text-xs text-gray-500 m-1 border border-gray-300"
+                    >
+                        {measInRow[0].aggName}({measInRow[0].name})
+                    </td>,
+                ]);
+                for (let j = 1; j < measInRow.length; j++) {
+                    ans.push([
+                        <td
+                            key={`${j}-${measInRow[j].fid}-${measInRow[j].aggName}`}
+                            className="whitespace-nowrap p-2 text-xs text-gray-500 m-1 border border-gray-300"
+                        >
+                            {measInRow[j].aggName}({measInRow[j].name})
+                        </td>,
+                    ]);
+                }
+            }
+            return ans;
+        }
+        return cellRows;
+    }, [data, dimsInRow, measInRow]);
+    return (
+        <thead className="bg-gray-50 border border-gray-300 border border-gray-300">
+            {nodeCells.map((row, rIndex) => (
+                <tr className="border border-gray-300" key={rIndex}>
+                    {row}
+                </tr>
+            ))}
+        </thead>
+    );
+};
+
+export default LeftTree;

package/src/components/pivotTable/metricTable.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { IField, IRow } from '../../interfaces';
+import { getMeaAggKey } from '../../utils';
+
+interface MetricTableProps {
+    matrix: any[][];
+    meaInRows: IField[];
+    meaInColumns: IField[];
+}
+
+function getCellData (cell: IRow, measure: IField) {
+    const meaKey = getMeaAggKey(measure.fid, measure.aggName);
+    if (cell[meaKey] === undefined) {
+        return '--';
+    }
+    return cell[meaKey];
+}
+const MetricTable: React.FC<MetricTableProps> = (props) => {
+    const { matrix, meaInRows, meaInColumns } = props;
+
+    return (
+        <tbody className="bg-white border-r border-b border-gray-300">
+            {matrix.map((row, rIndex) => {
+                if (meaInRows.length !== 0) {
+                    return meaInRows.map((rowMea, rmIndex) => {
+                        return (
+                            <tr className="divide-x divide-gray-200" key={`${rIndex}-${rowMea.fid}-${rowMea.aggName}`}>
+                                {
+                                    row.flatMap((cell, cIndex) => {
+                                        cell = cell ?? {};
+                                        if (meaInColumns.length !== 0) {
+                                            return meaInColumns.map((colMea, cmIndex) => (
+                                                <td
+                                                    className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                                    key={`${rIndex}-${cIndex}-${rowMea.fid}-${rowMea.aggName}-${colMea.fid}-${colMea.aggName}`}
+                                                >
+                                                    {getCellData(cell, rowMea)} , {getCellData(cell, colMea)}
+                                                </td>
+                                            ));
+                                        }
+                                        return (
+                                            <td
+                                                className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                                key={`${rIndex}-${cIndex}-${rowMea.fid}-${rowMea.aggName}`}
+                                            >
+                                                {getCellData(cell, rowMea)}
+                                            </td>
+                                        );
+                                    })
+                                }
+                            </tr>
+                        );
+                    });
+                }
+                return (
+                    <tr className="divide-x divide-gray-200" key={rIndex}>
+                        {row.flatMap((cell, cIndex) => {
+                            cell = cell ?? {};
+                            if (meaInRows.length === 0 && meaInColumns.length !== 0) {
+                                return meaInColumns.map((colMea, cmIndex) => (
+                                    <td
+                                        className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                        key={`${rIndex}-${cIndex}-${cmIndex}-${colMea.fid}-${colMea.aggName}`}
+                                    >
+                                        {
+                                            getCellData(cell, colMea)
+                                        }
+                                    </td>
+                                ));
+                            }else if (meaInRows.length === 0 && meaInColumns.length === 0) {
+                                return (
+                                    <td
+                                        className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                        key={`${rIndex}-${cIndex}`}
+                                    >
+                                        {`True`}
+                                    </td>
+                                );
+                            } else {
+                                return meaInRows.flatMap((rowMea, rmIndex) => (
+                                    <td
+                                        className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                        key={`${rIndex}-${cIndex}-${rmIndex}-${rowMea.fid}-${rowMea.aggName}`}
+                                    >
+                                        {meaInColumns.flatMap((colMea, cmIndex) => (
+                                            <td
+                                                className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                                key={`${rIndex}-${cIndex}-${rmIndex}-${cmIndex}-${colMea.fid}-${colMea.aggName}`}
+                                            >
+                                                { getCellData(cell, rowMea) } , { getCellData(cell, colMea) }
+                                            </td>
+                                        ))}
+                                    </td>
+                                ));
+                            }
+                            // return measures.map((mea) => (
+                            //     <td className='whitespace-nowrap p-2 text-xs text-gray-500' key={`${rIndex}-${cIndex}-${mea.fid}`}>{cell[mea.fid] ?? '--'}</td>
+                            // ));
+                        })}
+                    </tr>
+                );
+            })}
+        </tbody>
+    );
+};
+
+export default MetricTable;

package/src/components/pivotTable/store.tsx

@@ -0,0 +1,66 @@
+import { makeAutoObservable, observable } from 'mobx';
+import { INestNode } from './inteface';
+import { IAggQuery } from '../../lib/interfaces';
+import { queryView } from '../../lib/viewQuery';
+import { IField, IRow } from '../../interfaces';
+import React, { createContext, useContext, useEffect } from 'react';
+import { getMeaAggKey } from '../../utils';
+
+class PivotTableStore {
+    public leftTree: INestNode | null = null;
+    public topTree: INestNode | null = null;
+    public metricTable: any[][] = [];
+    public dataSource: IRow[] = [];
+    public metas: IField[] = [];
+    public viewData: IRow[] = [];
+    constructor() {
+        makeAutoObservable(this, {
+            leftTree: observable.ref,
+            topTree: observable.ref,
+            metricTable: observable.ref,
+            dataSource: observable.ref,
+            metas: observable.ref,
+        });
+    }
+    public init(dataSource: IRow[], metas: IField[]) {
+        this.dataSource = dataSource ?? [];
+        this.metas = metas ?? [];
+        this.leftTree = null;
+        this.metricTable = [];
+        this.topTree = null;
+        this.viewData = [];
+    }
+    public async queryData(leftQuery: IAggQuery, topQuery: IAggQuery) {
+        const viewQuery: IAggQuery = {
+            op: 'aggregate',
+            groupBy: leftQuery.groupBy.concat(topQuery.groupBy),
+            measures: leftQuery.measures.concat(topQuery.measures).map(mea => ({
+                field: mea.field,
+                agg: mea.agg,
+                asFieldKey: getMeaAggKey(mea.field, mea.agg)
+            }))
+        };
+        const viewData = queryView(this.dataSource, this.metas, viewQuery);
+        this.viewData = viewData;
+    }
+}
+
+const initStore = new PivotTableStore();
+const PTContext = createContext<PivotTableStore>(initStore);
+
+export interface PivotTableDataProps {
+    data: IRow[];
+    metas: IField[];
+}
+export const PivotTableStoreWrapper: React.FC<PivotTableDataProps> = (props) => {
+    const { data, metas } = props;
+    useEffect(() => {
+        initStore.init(data, metas);
+    }, [data, metas]);
+    return <PTContext.Provider value={initStore}>{props.children}</PTContext.Provider>;
+};
+
+
+export function usePivotTableStore () {
+    return useContext(PTContext)
+}

package/src/components/pivotTable/topTree.tsx

@@ -0,0 +1,77 @@
+import React, { ReactNode, useMemo } from 'react';
+import { INestNode } from './inteface';
+import { IField } from '../../interfaces';
+
+function getChildCount(node: INestNode): number {
+    if (node.children.length === 0) {
+        return 1;
+    }
+    return node.children.map(getChildCount).reduce((a, b) => a + b, 0);
+}
+
+/**
+ * render pivot table left tree table
+ * @param node
+ * @param dimsInCol
+ * @param depth
+ * @param cellRows
+ * @returns
+ */
+function renderTree(node: INestNode, dimsInCol: IField[], depth: number, cellRows: ReactNode[][], meaNumber: number) {
+    const childrenSize = getChildCount(node);
+    if (depth > dimsInCol.length) {
+        return;
+    }
+    cellRows[depth].push(
+        <td
+            key={`${depth}-${node.fieldKey}-${node.value}`}
+            className="whitespace-nowrap p-2 text-xs text-gray-500 m-1 border border-gray-300"
+            colSpan={childrenSize * Math.max(meaNumber, 1)}
+        >
+            {node.value}
+        </td>
+    );
+    for (let i = 0; i < node.children.length; i++) {
+        const child = node.children[i];
+        renderTree(child, dimsInCol, depth + 1, cellRows, meaNumber);
+    }
+}
+
+export interface TreeProps {
+    data: INestNode;
+    dimsInCol: IField[];
+    measInCol: IField[];
+}
+const TopTree: React.FC<TreeProps> = (props) => {
+    const { data, dimsInCol, measInCol } = props;
+    const nodeCells: ReactNode[] = useMemo(() => {
+        const cellRows: ReactNode[][] = new Array(dimsInCol.length + 1).fill(0).map(() => []);
+        renderTree(data, dimsInCol, 0, cellRows, measInCol.length);
+        const totalChildrenSize = cellRows[cellRows.length - 1].length;
+        cellRows.push(
+            new Array(totalChildrenSize).fill(0).flatMap(() =>
+                measInCol.map((m) => (
+                    <td
+                        key={`${cellRows.length}-${m.fid}-${m.aggName}`}
+                        className="whitespace-nowrap p-2 text-xs text-gray-500 m-1 border border-gray-300"
+                    >
+                        {m.aggName}({m.name})
+                    </td>
+                ))
+            )
+        );
+        cellRows.shift();
+        return cellRows;
+    }, [data, dimsInCol, measInCol]);
+    return (
+        <thead className="border border-gray-300 bg-gray-50 border border-gray-300">
+            {nodeCells.map((row, rIndex) => (
+                <tr className="border border-gray-300" key={rIndex}>
+                    {row}
+                </tr>
+            ))}
+        </thead>
+    );
+};
+
+export default TopTree;