@kanaries/graphic-walker 0.4.1 → 0.4.3

package/src/components/leafletRenderer/geoConfigPanel.tsx

@@ -0,0 +1,197 @@
+import { observer } from 'mobx-react-lite';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { runInAction } from 'mobx';
+import { useGlobalStore } from '../../store';
+import Modal from '../modal';
+import PrimaryButton from '../button/primary';
+import DefaultButton from '../button/default';
+import type { Topology } from '../../interfaces';
+
+const GeoConfigPanel: React.FC = (props) => {
+    const { commonStore, vizStore } = useGlobalStore();
+    const { showGeoJSONConfigPanel } = commonStore;
+    const { visualConfig } = vizStore;
+    const { geoKey, geojson } = visualConfig;
+    const { t: tGlobal } = useTranslation('translation');
+    const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings' });
+
+    const [dataMode, setDataMode] = useState<'GeoJSON' | 'TopoJSON'>('GeoJSON');
+    const [featureId, setFeatureId] = useState('');
+    const [url, setUrl] = useState('');
+    const [geoJSON, setGeoJSON] = useState('');
+    const [topoJSON, setTopoJSON] = useState('');
+    const [topoJSONKey, setTopoJSONKey] = useState('');
+
+    const defaultTopoJSONKey = useMemo(() => {
+        try {
+            const value = JSON.parse(topoJSON) as Topology;
+            return Object.keys(value.objects)[0] || '';
+        } catch (error) {
+            return '';
+        }
+    }, [topoJSON]);
+
+    useEffect(() => {
+        setFeatureId(geoKey || '');
+    }, [geoKey]);
+
+    useEffect(() => {
+        setGeoJSON(geojson ? JSON.stringify(geojson, null, 2) : '');
+    }, [geojson]);
+
+    return (
+        <Modal
+            show={showGeoJSONConfigPanel}
+            onClose={() => {
+                commonStore.setShowGeoJSONConfigPanel(false);
+            }}
+        >
+            <div>
+                <h2 className="text-lg mb-4">{t('geography')}</h2>
+                <div>
+                    <div className="my-2">
+                        <label className="block text-xs font-medium leading-6 text-gray-900">{t('geography_settings.geoKey')}</label>
+                        <div className="mt-1">
+                            <input
+                                type="text"
+                                className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                value={featureId}
+                                onChange={(e) => {
+                                    setFeatureId(e.target.value);
+                                }}
+                            />
+                        </div>
+                    </div>
+                    <div className="my-2">
+                        <label className="block text-xs font-medium leading-6 text-gray-900">{t(`geography_settings.${dataMode.toLowerCase()}`)}</label>
+                        <div className="mt-1 flex flex-col space-y-2">
+                            <div role="radiogroup">
+                                <div className="flex items-center space-x-2">
+                                    <input
+                                        type="radio"
+                                        name="dataMode"
+                                        id="geojson"
+                                        className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 dark:bg-gray-800 dark:border-gray-600"
+                                        checked={dataMode === 'GeoJSON'}
+                                        onChange={() => {
+                                            setDataMode('GeoJSON');
+                                        }}
+                                    />
+                                    <label htmlFor="geojson" className="text-xs whitespace-nowrap">
+                                        {t('geography_settings.geojson')}
+                                    </label>
+                                    <input
+                                        type="radio"
+                                        name="dataMode"
+                                        id="topojson"
+                                        className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 dark:bg-gray-800 dark:border-gray-600"
+                                        checked={dataMode === 'TopoJSON'}
+                                        onChange={() => {
+                                            setDataMode('TopoJSON');
+                                        }}
+                                    />
+                                    <label htmlFor="topojson" className="text-xs whitespace-nowrap">
+                                        {t('geography_settings.topojson')}
+                                    </label>
+                                </div>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                                <label className="text-xs whitespace-nowrap capitalize">
+                                    {t('geography_settings.href', { format: dataMode.toLowerCase() })}
+                                </label>
+                                <input
+                                    type="text"
+                                    className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                    value={url}
+                                    placeholder={t('geography_settings.hrefPlaceholder', { format: dataMode.toLowerCase() })}
+                                    onChange={(e) => {
+                                        setUrl(e.target.value);
+                                    }}
+                                />
+                                <DefaultButton
+                                    text={t('geography_settings.load')}
+                                    className="mr-2"
+                                    onClick={() => {
+                                        if (url) {
+                                            fetch(url)
+                                                .then((res) => res.json())
+                                                .then((json) => {
+                                                    (dataMode === 'GeoJSON' ? setGeoJSON : setTopoJSON)(
+                                                        JSON.stringify(json, null, 2)
+                                                    );
+                                                });
+                                        }
+                                    }}
+                                />
+                            </div>
+                            <textarea
+                                className="block w-full h-40 rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 resize-none"
+                                value={dataMode === 'GeoJSON' ? geoJSON : topoJSON}
+                                placeholder={t('geography_settings.jsonInputPlaceholder', { format: dataMode.toLowerCase() })}
+                                onChange={(e) => {
+                                    (dataMode === 'GeoJSON' ? setGeoJSON : setTopoJSON)(e.target.value);
+                                }}
+                            />
+                            {dataMode === 'TopoJSON' && (
+                                <div className="flex items-center space-x-2">
+                                    <label className="text-xs whitespace-nowrap capitalize">
+                                        {t('geography_settings.objectKey')}
+                                    </label>
+                                    <input
+                                        type="text"
+                                        className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                        value={topoJSONKey}
+                                        placeholder={defaultTopoJSONKey}
+                                        onChange={(e) => {
+                                            setTopoJSONKey(e.target.value);
+                                        }}
+                                    />
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+                <div className="mt-4">
+                    <PrimaryButton
+                        text={tGlobal('actions.confirm')}
+                        className="mr-2"
+                        onClick={() => {
+                            try {
+                                const json = JSON.parse(dataMode === 'GeoJSON' ? geoJSON : topoJSON);
+                                if (dataMode === 'TopoJSON') {
+                                    runInAction(() => {
+                                        vizStore.setGeographicData({
+                                            type: 'TopoJSON',
+                                            data: json,
+                                            objectKey: topoJSONKey || defaultTopoJSONKey,
+                                        }, featureId);
+                                    });
+                                } else {
+                                    runInAction(() => {
+                                        vizStore.setGeographicData({
+                                            type: 'GeoJSON',
+                                            data: json,
+                                        }, featureId);
+                                    });
+                                }
+                                commonStore.setShowGeoJSONConfigPanel(false);
+                            } catch (err) {
+                                console.error(err);
+                            }
+                        }}
+                    />
+                    <DefaultButton
+                        text={tGlobal('actions.cancel')}
+                        className="mr-2"
+                        onClick={() => {
+                            commonStore.setShowGeoJSONConfigPanel(false);
+                        }}
+                    />
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+export default observer(GeoConfigPanel);

package/src/components/leafletRenderer/index.tsx

@@ -0,0 +1,70 @@
+import React, { forwardRef, useMemo } from "react";
+import type { DeepReadonly, DraggableFieldState, IRow, IVisualConfig, VegaGlobalConfig } from "../../interfaces";
+import POIRenderer from "./POIRenderer";
+import ChoroplethRenderer from "./ChoroplethRenderer";
+
+
+export interface ILeafletRendererProps {
+    name?: string;
+    vegaConfig?: VegaGlobalConfig;
+    draggableFieldState: DeepReadonly<DraggableFieldState>;
+    visualConfig: DeepReadonly<IVisualConfig>;
+    data: IRow[];
+}
+
+export interface ILeafletRendererRef {}
+
+export const LEAFLET_DEFAULT_WIDTH = 800;
+export const LEAFLET_DEFAULT_HEIGHT = 600;
+
+const LeafletRenderer = forwardRef<ILeafletRendererRef, ILeafletRendererProps>(function LeafletRenderer (props, ref) {
+    const { name, draggableFieldState, data, visualConfig, vegaConfig = {} } = props;
+    const { latitude: [lat], longitude: [lng], geoId: [geoId], dimensions, measures, size: [size], color: [color], opacity: [opacity], text: [text], details } = draggableFieldState;
+    const { defaultAggregated, geoms: [markType], geojson, geoKey = '', scaleIncludeUnmatchedChoropleth = false } = visualConfig;
+    const allFields = useMemo(() => [...dimensions, ...measures], [dimensions, measures]);
+    const latField = useMemo(() => allFields.find((f) => f.geoRole === 'latitude'), [allFields]);
+    const lngField = useMemo(() => allFields.find((f) => f.geoRole === 'longitude'), [allFields]);
+    const latitude = useMemo(() => lat ?? latField, [lat, latField]);
+    const longitude = useMemo(() => lng ?? lngField, [lng, lngField]);
+
+    if (markType === 'poi') {
+        return (
+            <POIRenderer
+                name={name}
+                data={data}
+                allFields={allFields}
+                defaultAggregated={defaultAggregated}
+                latitude={latitude}
+                longitude={longitude}
+                color={color}
+                opacity={opacity}
+                size={size}
+                details={details}
+                vegaConfig={vegaConfig}
+            />
+        );
+    } else if (markType === 'choropleth') {
+        return (
+            <ChoroplethRenderer
+                name={name}
+                data={data}
+                allFields={allFields}
+                features={geojson}
+                geoKey={geoKey}
+                defaultAggregated={defaultAggregated}
+                geoId={geoId}
+                color={color}
+                opacity={opacity}
+                text={text}
+                details={details}
+                vegaConfig={vegaConfig}
+                scaleIncludeUnmatchedChoropleth={scaleIncludeUnmatchedChoropleth}
+            />
+        );
+    }
+
+    return null;
+});
+
+
+export default LeafletRenderer;

package/src/components/leafletRenderer/tooltip.tsx

@@ -0,0 +1,24 @@
+import React, { memo, useMemo } from "react";
+import type { DeepReadonly, IViewField, VegaGlobalConfig } from "../../interfaces";
+import { useDisplayValueFormatter } from "./utils";
+
+
+export interface ITooltipContentProps {
+    allFields: readonly DeepReadonly<IViewField>[];
+    vegaConfig: VegaGlobalConfig;
+    field: DeepReadonly<IViewField>;
+    value: unknown;
+}
+
+export const TooltipContent = memo<ITooltipContentProps>(function TooltipContent ({ allFields, vegaConfig, field, value }) {
+    const { fid, analyticType, aggName } = field;
+    const fieldDisplayLabel = useMemo(() => {
+        const name = allFields.find(f => f.fid === fid)?.name ?? fid;
+        return analyticType === 'measure' && aggName ? `${aggName}(${name})` : name;
+    }, [allFields, fid, analyticType, aggName]);
+    const formatter = useDisplayValueFormatter(field.semanticType, vegaConfig);
+    
+    return (
+        <p>{fieldDisplayLabel}: {formatter(value)}</p>
+    );
+});

package/src/components/leafletRenderer/utils.ts

@@ -0,0 +1,52 @@
+import { useMemo } from "react";
+import { timeFormat as tFormat } from "d3-time-format";
+import { format } from "d3-format";
+import type { Config as VlConfig } from 'vega-lite';
+import type { ISemanticType, VegaGlobalConfig } from "../../interfaces";
+
+
+const defaultFormatter = (value: unknown): string => `${value}`;
+
+export const useDisplayValueFormatter = (semanticType: ISemanticType, vegaConfig: VegaGlobalConfig): (value: unknown) => string => {
+    const { timeFormat = "%b %d, %Y", numberFormat } = vegaConfig as Partial<VlConfig>;
+    const timeFormatter = useMemo<(value: unknown) => string>(() => {
+        const tf = tFormat(timeFormat);
+        return (value: unknown) => {
+            if (typeof value !== 'number' && typeof value !== 'string') {
+                return '';
+            }
+            const date = new Date(value);
+            if (isNaN(date.getTime())) {
+                return 'Invalid Date';
+            }
+            return tf(date);
+        };
+    }, [timeFormat]);
+    const numberFormatter = useMemo<(value: unknown) => string>(() => {
+        if (!numberFormat) {
+            return (value: unknown) => {
+                if (typeof value !== 'number') {
+                    return '';
+                }
+                return value.toLocaleString();
+            };
+        }
+        const nf = format(numberFormat);
+        return (value: unknown) => {
+            if (typeof value !== 'number') {
+                return '';
+            }
+            return nf(value);
+        };
+    }, [numberFormat]);
+    const formatter = useMemo(() => {
+        if (semanticType === 'quantitative') {
+            return numberFormatter;
+        } else if (semanticType === 'temporal') {
+            return timeFormatter;
+        } else {
+            return defaultFormatter;
+        }
+    }, [semanticType, numberFormatter, timeFormatter]);
+    return formatter;
+};

package/src/components/pivotTable/index.tsx

@@ -1,12 +1,16 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { StoreWrapper, useGlobalStore } from '../../store';
-import { PivotTableDataProps, PivotTableStoreWrapper, usePivotTableStore } from './store';
+import React, { useEffect, useMemo, useState, useRef } from 'react';
+import { useGlobalStore } from '../../store';
+import { buildPivotTableService } from '../../services';
+import { toWorkflow } from '../../utils/workflow';
+import { dataQueryServer } from '../../computation/serverComputation';
+import { useAppRootContext } from '../../components/appRoot';
 import { observer } from 'mobx-react-lite';
 import LeftTree from './leftTree';
 import TopTree from './topTree';
 import {
     DeepReadonly,
     DraggableFieldState,
+    IComputationFunction,
     IDarkMode,
     IRow,
     IThemeKey,
@@ -14,24 +18,10 @@ import {
     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}
-//         />
-//     );
-// })
+import LoadingLayer from '../loadingLayer';
 
 interface PivotTableProps {
     themeKey?: IThemeKey;
@@ -40,23 +30,31 @@ interface PivotTableProps {
     loading: boolean;
     draggableFieldState: DeepReadonly<DraggableFieldState>;
     visualConfig: DeepReadonly<IVisualConfig>;
+    computationFunction: IComputationFunction
 }
-const PivotTable: React.FC<PivotTableProps> = (props) => {
-    const { data, draggableFieldState } = props;
-    // const store = usePivotTableStore();
-    // const { vizStore } = useGlobalStore();
-    // const { draggableFieldState } = vizStore;
-    const { rows, columns } = draggableFieldState;
+
+const PivotTable: React.FC<PivotTableProps> = observer(function PivotTableComponent (props) {
+    const { data, visualConfig, loading, computationFunction } = props;
+    const appRef = useAppRootContext();
     const [leftTree, setLeftTree] = useState<INestNode | null>(null);
     const [topTree, setTopTree] = useState<INestNode | null>(null);
     const [metricTable, setMetricTable] = useState<any[][]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+
+    const { vizStore, commonStore } = useGlobalStore();
+    const { allFields, viewFilters, viewMeasures, sort, limit, draggableFieldState } = vizStore;
+    const { rows, columns } = draggableFieldState;
+    const { showTableSummary, defaultAggregated } = visualConfig;
+    const { tableCollapsedHeaderMap } = commonStore;
+    const aggData = useRef<IRow[]>([]);
+    const [ topTreeHeaderRowNum, setTopTreeHeaderRowNum ] = useState<number>(0);
 
     const dimsInRow = useMemo(() => {
-        return rows.filter((f) => f.analyticType === 'dimension');
+        return toJS(rows).filter((f) => f.analyticType === 'dimension');
     }, [rows]);
 
     const dimsInColumn = useMemo(() => {
-        return columns.filter((f) => f.analyticType === 'dimension');
+        return toJS(columns).filter((f) => f.analyticType === 'dimension');
     }, [columns]);
 
     const measInRow = useMemo(() => {
@@ -68,51 +66,157 @@ const PivotTable: React.FC<PivotTableProps> = (props) => {
     }, [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);
-            unstable_batchedUpdates(() => {
-                setLeftTree(lt);
-                setTopTree(tt);
-                setMetricTable(metric);
-            });
+        if (tableCollapsedHeaderMap.size > 0) {
+            // If some visual configs change, clear the collapse state
+            // As tableCollapsedHeaderMap is also listened, data will be reaggregated later.
+            commonStore.resetTableCollapsedHeader();
+            // This forces data to be reaggregated if showTableSummary is on, as aggregation will be skipped later.
+            if (showTableSummary) {
+                aggregateGroupbyData();
+            }
+        } else {
+            aggregateThenGenerate();
+        }
+    }, [data]);
+
+    useEffect(() => {
+        if (showTableSummary) {
+            // If showTableSummary is on, there is no need to generate extra queries. Directly generate new table.
+            generateNewTable();
+        } else {
+            aggregateThenGenerate();
         }
-    }, [dimsInRow, dimsInColumn, data]);
+    }, [tableCollapsedHeaderMap]);
+
+    const aggregateThenGenerate = async() => {
+        await aggregateGroupbyData();
+        generateNewTable();
+    };
+
+    const generateNewTable = () => {
+        appRef.current?.updateRenderStatus('rendering');
+        setIsLoading(true);
+        buildPivotTableService(
+            dimsInRow,
+            dimsInColumn,
+            data,
+            aggData.current,
+            Array.from(tableCollapsedHeaderMap.keys()),
+            showTableSummary
+        )
+            .then((data) => {
+                const {lt, tt, metric} = data;
+                unstable_batchedUpdates(() => {
+                    setLeftTree(lt);
+                    setTopTree(tt);
+                    setMetricTable(metric);
+                });
+                appRef.current?.updateRenderStatus('idle');
+                setIsLoading(false);
+            })
+            .catch((err) => {
+                appRef.current?.updateRenderStatus('error');
+                console.log(err);
+                setIsLoading(false);
+            })
+    };
+
+    const aggregateGroupbyData = () => {
+        if (dimsInRow.length === 0 && dimsInColumn.length === 0) return;
+        if (data.length === 0) return;
+        let groupbyCombListInRow:IViewField[][]  = [];
+        let groupbyCombListInCol:IViewField[][]  = [];
+        if (showTableSummary) {
+            groupbyCombListInRow = dimsInRow.map((dim, idx) => dimsInRow.slice(0, idx));
+            groupbyCombListInCol = dimsInColumn.map((dim, idx) => dimsInColumn.slice(0, idx));
+        } else {
+            const collapsedDimList = Array.from(tableCollapsedHeaderMap).map(([key, path]) => path[path.length - 1].key);
+            const collapsedDimsInRow = dimsInRow.filter((dim) => collapsedDimList.includes(dim.fid));
+            const collapsedDimsInColumn = dimsInColumn.filter((dim) => collapsedDimList.includes(dim.fid));
+            groupbyCombListInRow = collapsedDimsInRow.map((dim) => dimsInRow.slice(0, dimsInRow.indexOf(dim) + 1));
+            groupbyCombListInCol = collapsedDimsInColumn.map((dim) => dimsInColumn.slice(0, dimsInColumn.indexOf(dim) + 1));
+        }
+        groupbyCombListInRow.push(dimsInRow);
+        groupbyCombListInCol.push(dimsInColumn);
+        const groupbyCombList:IViewField[][] = groupbyCombListInCol.flatMap(combInCol =>
+            groupbyCombListInRow.map(combInRow => [...combInCol, ...combInRow])
+        ).slice(0, -1);
+        setIsLoading(true);
+        appRef.current?.updateRenderStatus('computing');
+        const groupbyPromises: Promise<IRow[]>[] = groupbyCombList.map((dimComb) => {
+            const workflow = toWorkflow(
+                viewFilters,
+                allFields,
+                dimComb,
+                viewMeasures,
+                defaultAggregated,
+                sort,
+                limit > 0 ? limit : undefined
+            );
+            return dataQueryServer(computationFunction, workflow, limit > 0 ? limit : undefined)
+                .catch((err) => {
+                    appRef.current?.updateRenderStatus('error');
+                    return [];
+                });
+        });
+        return new Promise<void>((resolve, reject) => {
+            Promise.all(groupbyPromises)
+                .then((result) => {
+                    setIsLoading(false);
+                    const finalizedData = [...result.flat()];
+                    aggData.current = finalizedData;
+                    resolve();
+                })
+                .catch((err) => {
+                    console.error(err);
+                    setIsLoading(false);
+                    reject();
+                });
+        })
+
+    };
 
     // 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 className="relative">
+            {(isLoading || loading) && <LoadingLayer />}
+            <div className="flex">
+                <table className="border border-gray-300 border-collapse">
+                    <thead className="border border-gray-300">
+                        {new Array(topTreeHeaderRowNum).fill(0).map((_, i) => (
+                            <tr className="" key={i}>
+                                <td className="bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 p-2 m-1 text-xs border border-gray-300" colSpan={dimsInRow.length + (measInRow.length > 0 ? 1 : 0)}>_</td>
+                            </tr>
+                        ))}
+                    </thead>
+                    {leftTree && 
+                        <LeftTree 
+                            data={leftTree} 
+                            dimsInRow={dimsInRow} 
+                            measInRow={measInRow} 
+                            onHeaderCollapse={commonStore.updateTableCollapsedHeader.bind(commonStore)}
+                        />}
+                </table>
+                <table className="border border-gray-300 border-collapse">
+                    {topTree && 
+                        <TopTree 
+                            data={topTree} 
+                            dimsInCol={dimsInColumn} 
+                            measInCol={measInColumn} 
+                            onHeaderCollapse={commonStore.updateTableCollapsedHeader.bind(commonStore)}
+                            onTopTreeHeaderRowNumChange={(num) => setTopTreeHeaderRowNum(num)}
+                        />}
+                    {metricTable && 
+                        <MetricTable 
+                            matrix={metricTable} 
+                            meaInColumns={measInColumn} 
+                            meaInRows={measInRow} 
+                        />}
+                </table>
+            </div>
         </div>
-    );
-};
 
-export default PivotTable;
+    );
+});
 
-// const PivotTableApp: React.FC<PivotTableProps> = (props) => {
-//     return (
-//         <PivotTableStoreWrapper {...props}>
-//             <PivotTable />
-//         </PivotTableStoreWrapper>
-//     );
-// };
+export default PivotTable;

package/src/components/pivotTable/inteface.ts

@@ -1,8 +1,12 @@
 import { IAggregator } from "../../interfaces";
 
 export interface INestNode {
-    key: string;
-    value: string;
+    key: string | number;
+    value: string | number;
+    uniqueKey: string;
     fieldKey: string;
     children: INestNode[];
+    height: number;
+    isCollapsed: boolean;
+    path: Record<INestNode["fieldKey"], INestNode["value"]>[];
 }