@kanaries/graphic-walker 0.4.1 → 0.4.3

package/src/components/pivotTable/leftTree.tsx

@@ -1,9 +1,10 @@
 import React, { ReactNode, useMemo } from 'react';
 import { INestNode } from './inteface';
 import { IField } from '../../interfaces';
+import { MinusCircleIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
 
 function getChildCount(node: INestNode): number {
-    if (node.children.length === 0) {
+    if (node.isCollapsed || node.children.length === 0) {
         return 1;
     }
     return node.children.map(getChildCount).reduce((a, b) => a + b, 0);
@@ -17,23 +18,34 @@ function getChildCount(node: INestNode): number {
  * @param cellRows
  * @returns
  */
-function renderTree(node: INestNode, dimsInRow: IField[], depth: number, cellRows: ReactNode[][], meaNumber: number) {
+function renderTree(node: INestNode, dimsInRow: IField[], depth: number, cellRows: ReactNode[][], meaNumber: number, onHeaderCollapse: (node: INestNode) => void) {
     const childrenSize = getChildCount(node);
+    const { isCollapsed } = 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)}
+            className={`bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 align-top whitespace-nowrap p-2 text-xs m-1 border border-gray-300`}
+            colSpan={isCollapsed ? node.height + 1 : 1}
+            rowSpan={isCollapsed ? Math.max(meaNumber, 1) : childrenSize * Math.max(meaNumber, 1)}
         >
-            {node.value}
+            <div className="flex">
+                <div>{node.value}</div>
+                {node.height > 0 && node.key !== "__total" && (
+                    <>
+                        {isCollapsed && <PlusCircleIcon className="w-3 ml-1 self-center cursor-pointer" onClick={() => onHeaderCollapse(node)} />}
+                        {!isCollapsed && <MinusCircleIcon className="w-3 ml-1 self-center cursor-pointer" onClick={() => onHeaderCollapse(node)} />}
+                    </>
+                )}
+            </div>
         </td>
     );
+    if (isCollapsed) return
     for (let i = 0; i < node.children.length; i++) {
         const child = node.children[i];
-        renderTree(child, dimsInRow, depth + 1, cellRows, meaNumber);
+        renderTree(child, dimsInRow, depth + 1, cellRows, meaNumber, onHeaderCollapse);
         if (i < node.children.length - 1) {
             cellRows.push([]);
         }
@@ -44,12 +56,13 @@ export interface TreeProps {
     data: INestNode;
     dimsInRow: IField[];
     measInRow: IField[];
+    onHeaderCollapse: (node: INestNode) => void;
 }
 const LeftTree: React.FC<TreeProps> = (props) => {
-    const { data, dimsInRow, measInRow } = props;
+    const { data, dimsInRow, measInRow, onHeaderCollapse } = props;
     const nodeCells: ReactNode[] = useMemo(() => {
         const cellRows: ReactNode[][] = [[]];
-        renderTree(data, dimsInRow, 0, cellRows, measInRow.length);
+        renderTree(data, dimsInRow, 0, cellRows, measInRow.length, onHeaderCollapse);
         cellRows[0].shift();
         if (measInRow.length > 0) {
             const ans: ReactNode[][] = [];
@@ -58,7 +71,7 @@ const LeftTree: React.FC<TreeProps> = (props) => {
                     ...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"
+                        className="bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 whitespace-nowrap p-2 text-xs m-1 border border-gray-300"
                     >
                         {measInRow[0].aggName}({measInRow[0].name})
                     </td>,
@@ -67,7 +80,7 @@ const LeftTree: React.FC<TreeProps> = (props) => {
                     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"
+                            className="bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 whitespace-nowrap p-2 text-xs m-1 border border-gray-300"
                         >
                             {measInRow[j].aggName}({measInRow[j].name})
                         </td>,
@@ -79,7 +92,7 @@ const LeftTree: React.FC<TreeProps> = (props) => {
         return cellRows;
     }, [data, dimsInRow, measInRow]);
     return (
-        <thead className="bg-gray-50 border border-gray-300 border border-gray-300">
+        <thead className="bg-gray-50 border border-gray-300">
             {nodeCells.map((row, rIndex) => (
                 <tr className="border border-gray-300" key={rIndex}>
                     {row}

package/src/components/pivotTable/metricTable.tsx

@@ -15,11 +15,10 @@ function getCellData (cell: IRow, measure: IField) {
     }
     return cell[meaKey];
 }
-const MetricTable: React.FC<MetricTableProps> = (props) => {
+const MetricTable: React.FC<MetricTableProps> = React.memo((props) => {
     const { matrix, meaInRows, meaInColumns } = props;
-
     return (
-        <tbody className="bg-white border-r border-b border-gray-300">
+        <tbody className="bg-white dark:bg-black text-gray-800 dark:text-gray-100 border-r border-b border-gray-300">
             {matrix.map((row, rIndex) => {
                 if (meaInRows.length !== 0) {
                     return meaInRows.map((rowMea, rmIndex) => {
@@ -31,7 +30,7 @@ const MetricTable: React.FC<MetricTableProps> = (props) => {
                                         if (meaInColumns.length !== 0) {
                                             return meaInColumns.map((colMea, cmIndex) => (
                                                 <td
-                                                    className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                                    className="whitespace-nowrap p-2 text-xs"
                                                     key={`${rIndex}-${cIndex}-${rowMea.fid}-${rowMea.aggName}-${colMea.fid}-${colMea.aggName}`}
                                                 >
                                                     {getCellData(cell, rowMea)} , {getCellData(cell, colMea)}
@@ -40,7 +39,7 @@ const MetricTable: React.FC<MetricTableProps> = (props) => {
                                         }
                                         return (
                                             <td
-                                                className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                                className="whitespace-nowrap p-2 text-xs"
                                                 key={`${rIndex}-${cIndex}-${rowMea.fid}-${rowMea.aggName}`}
                                             >
                                                 {getCellData(cell, rowMea)}
@@ -59,7 +58,7 @@ const MetricTable: React.FC<MetricTableProps> = (props) => {
                             if (meaInRows.length === 0 && meaInColumns.length !== 0) {
                                 return meaInColumns.map((colMea, cmIndex) => (
                                     <td
-                                        className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                        className="whitespace-nowrap p-2 text-xs"
                                         key={`${rIndex}-${cIndex}-${cmIndex}-${colMea.fid}-${colMea.aggName}`}
                                     >
                                         {
@@ -70,7 +69,7 @@ const MetricTable: React.FC<MetricTableProps> = (props) => {
                             }else if (meaInRows.length === 0 && meaInColumns.length === 0) {
                                 return (
                                     <td
-                                        className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                        className="whitespace-nowrap p-2 text-xs"
                                         key={`${rIndex}-${cIndex}`}
                                     >
                                         {`True`}
@@ -79,12 +78,12 @@ const MetricTable: React.FC<MetricTableProps> = (props) => {
                             } else {
                                 return meaInRows.flatMap((rowMea, rmIndex) => (
                                     <td
-                                        className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                        className="whitespace-nowrap p-2 text-xs"
                                         key={`${rIndex}-${cIndex}-${rmIndex}-${rowMea.fid}-${rowMea.aggName}`}
                                     >
                                         {meaInColumns.flatMap((colMea, cmIndex) => (
                                             <td
-                                                className="whitespace-nowrap p-2 text-xs text-gray-500"
+                                                className="whitespace-nowrap p-2 text-xs"
                                                 key={`${rIndex}-${cIndex}-${rmIndex}-${cmIndex}-${colMea.fid}-${colMea.aggName}`}
                                             >
                                                 { getCellData(cell, rowMea) } , { getCellData(cell, colMea) }
@@ -102,6 +101,12 @@ const MetricTable: React.FC<MetricTableProps> = (props) => {
             })}
         </tbody>
     );
-};
+}, function areEqual(prevProps, nextProps) {
+    if (JSON.stringify(prevProps.matrix) === JSON.stringify(nextProps.matrix)) {
+        return true;
+    }
+    
+    return false;
+});
 
 export default MetricTable;

package/src/components/pivotTable/topTree.tsx

@@ -1,9 +1,10 @@
-import React, { ReactNode, useMemo } from 'react';
+import React, { ReactNode, useEffect, useMemo } from 'react';
 import { INestNode } from './inteface';
 import { IField } from '../../interfaces';
+import { MinusCircleIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
 
 function getChildCount(node: INestNode): number {
-    if (node.children.length === 0) {
+    if (node.isCollapsed || node.children.length === 0) {
         return 1;
     }
     return node.children.map(getChildCount).reduce((a, b) => a + b, 0);
@@ -17,23 +18,34 @@ function getChildCount(node: INestNode): number {
  * @param cellRows
  * @returns
  */
-function renderTree(node: INestNode, dimsInCol: IField[], depth: number, cellRows: ReactNode[][], meaNumber: number) {
+function renderTree(node: INestNode, dimsInCol: IField[], depth: number, cellRows: ReactNode[][], meaNumber: number, onHeaderCollapse: (node: INestNode) => void) {
     const childrenSize = getChildCount(node);
+    const { isCollapsed } = 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)}
+            key={`${depth}-${node.fieldKey}-${node.value}-${cellRows[depth].length}`}
+            className="bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 align-top whitespace-nowrap p-2 text-xs m-1 border border-gray-300"
+            colSpan={isCollapsed ? Math.max(meaNumber, 1) : childrenSize * Math.max(meaNumber, 1)}
+            rowSpan={isCollapsed ? node.height + 1 : 1}
         >
-            {node.value}
+            <div className="flex">
+                <div>{node.value}</div>
+                {node.height > 0 && node.key !== "__total" && (
+                    <>
+                        {isCollapsed && <PlusCircleIcon className="w-3 ml-1 self-center cursor-pointer" onClick={() => onHeaderCollapse(node)} />}
+                        {!isCollapsed && <MinusCircleIcon className="w-3 ml-1 self-center cursor-pointer" onClick={() => onHeaderCollapse(node)} />}
+                    </>
+                )}
+            </div>
         </td>
     );
+    if (isCollapsed) return;
     for (let i = 0; i < node.children.length; i++) {
         const child = node.children[i];
-        renderTree(child, dimsInCol, depth + 1, cellRows, meaNumber);
+        renderTree(child, dimsInCol, depth + 1, cellRows, meaNumber, onHeaderCollapse);
     }
 }
 
@@ -41,19 +53,35 @@ export interface TreeProps {
     data: INestNode;
     dimsInCol: IField[];
     measInCol: IField[];
+    onHeaderCollapse: (node: INestNode) => void;
+    onTopTreeHeaderRowNumChange: (num: number) => void;
 }
 const TopTree: React.FC<TreeProps> = (props) => {
-    const { data, dimsInCol, measInCol } = props;
-    const nodeCells: ReactNode[] = useMemo(() => {
+    const { data, dimsInCol, measInCol, onHeaderCollapse, onTopTreeHeaderRowNumChange } = 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;
+        renderTree(data, dimsInCol, 0, cellRows, measInCol.length, onHeaderCollapse);
+        const totalChildrenSize = getChildCount(data);
+
+        // if all children in one layer are collapsed, then we need to reset the rowSpan of all children to 1
+        cellRows.forEach((row: ReactNode[], rowIdx: number) => {
+            const rowSpanArr = row.map(child => React.isValidElement(child) ? child.props.rowSpan : 0)
+            if (rowSpanArr.length > 0 && rowSpanArr[0] > 1 && rowSpanArr.every(v => v === rowSpanArr[0])) {
+                row.forEach((childObj, childIdx) => {
+                    if (React.isValidElement(childObj)) {
+                        const newChild = React.cloneElement(childObj, {...childObj.props, rowSpan: 1});
+                        cellRows[rowIdx][childIdx] = newChild;
+                    }
+                })
+            }
+        });
+
         cellRows.push(
-            new Array(totalChildrenSize).fill(0).flatMap(() =>
+            new Array(totalChildrenSize).fill(0).flatMap((ele, idx) =>
                 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"
+                        key={`${cellRows.length}-${m.fid}-${m.aggName}-${idx}`}
+                        className="bg-zinc-100 dark:bg-zinc-800 text-gray-800 dark:text-gray-100 whitespace-nowrap p-2 text-xs m-1 border border-gray-300"
                     >
                         {m.aggName}({m.name})
                     </td>
@@ -63,10 +91,15 @@ const TopTree: React.FC<TreeProps> = (props) => {
         cellRows.shift();
         return cellRows;
     }, [data, dimsInCol, measInCol]);
+
+    useEffect(() => {
+        onTopTreeHeaderRowNumChange(nodeCells.filter((row) => row.length > 0).length);
+    }, [nodeCells]);
+
     return (
-        <thead className="border border-gray-300 bg-gray-50 border border-gray-300">
+        <thead className="border border-gray-300 bg-gray-50">
             {nodeCells.map((row, rIndex) => (
-                <tr className="border border-gray-300" key={rIndex}>
+                <tr className={`${row?.length > 0 ? "" : "hidden"} border border-gray-300`} key={rIndex}>
                     {row}
                 </tr>
             ))}

package/src/components/pivotTable/utils.ts

@@ -3,12 +3,13 @@ import { INestNode } from "./inteface";
 
 const key_prefix = 'nk_';
 
-export function insertNode (tree: INestNode, layerKeys: string[], nodeData: IRow, depth: number) {
+function insertNode (tree: INestNode, layerKeys: string[], nodeData: IRow, depth: number, collapsedKeyList: string[]) {
     if (depth >= layerKeys.length) {
         // tree.key = nodeData[layerKeys[depth]];
         return;   
     }
     const key = nodeData[layerKeys[depth]];
+    const uniqueKey = `${tree.uniqueKey}__${key}`;
     // console.log({
     //     key,
     //     nodeData,
@@ -23,25 +24,78 @@ export function insertNode (tree: INestNode, layerKeys: string[], nodeData: IRow
         child = {
             key,
             value: key,
+            uniqueKey: uniqueKey, 
             fieldKey: layerKeys[depth],
             children: [],
+            path: [...tree.path, {key: layerKeys[depth], value: key}],
+            height: layerKeys.length - depth - 1,
+            isCollapsed: false,
         }
-        tree.children.push(child);
+        if (collapsedKeyList.includes(tree.uniqueKey)) {
+            tree.isCollapsed = true;
+        }
+        tree.children.splice(binarySearchIndex(tree.children, child.key), 0, child);
     }
-    insertNode(child, layerKeys, nodeData, depth + 1);
+    insertNode(child, layerKeys, nodeData, depth + 1, collapsedKeyList);
+
+}
+
+// Custom binary search function to find appropriate index for insertion.
+function binarySearchIndex(arr: INestNode[], keyVal: string | number): number {
+    let start = 0, end = arr.length - 1;
 
+    while (start <= end) {
+        let middle = Math.floor((start + end) / 2);
+        let middleVal = arr[middle].key;
+        if (typeof middleVal === 'number' && typeof keyVal === 'number') {
+            if (middleVal < keyVal) start = middle + 1;
+            else end = middle - 1;
+        } else {
+            let cmp = String(middleVal).localeCompare(String(keyVal));
+            if (cmp < 0) start = middle + 1;
+            else end = middle - 1;
+        }
+    }
+    return start;
 }
+
 const ROOT_KEY = '__root';
+const TOTAL_KEY = '__total'
 
-export function buildNestTree (layerKeys: string[], data: IRow[]): INestNode {
+function insertSummaryNode (node: INestNode): void {
+    if (node.children.length > 0) {
+        node.children.push({
+            key: TOTAL_KEY,
+            value: 'total',
+            fieldKey: node.children[0].fieldKey,
+            uniqueKey: `${node.uniqueKey}${TOTAL_KEY}`,
+            children: [],
+            path: [],
+            height: node.children[0].height,
+            isCollapsed: true,
+        });
+        for (let i = 0; i < node.children.length - 1; i ++) {
+            insertSummaryNode(node.children[i]);
+        }
+    }
+};
+
+export function buildNestTree (layerKeys: string[], data: IRow[], collapsedKeyList: string[], showSummary: boolean): INestNode {
     const tree: INestNode = {
         key: ROOT_KEY,
         value: 'root',
         fieldKey: 'root',
+        uniqueKey: ROOT_KEY,
         children: [],
+        path: [],
+        height: layerKeys.length,
+        isCollapsed: false,
     };
     for (let row of data) {
-        insertNode(tree, layerKeys, row, 0);
+        insertNode(tree, layerKeys, row, 0, collapsedKeyList);
+    }
+    if (showSummary) {
+        insertSummaryNode(tree);
     }
     return tree;
 }
@@ -56,7 +110,7 @@ class NodeIterator {
     public first () {
         let node = this.tree
         this.nodeStack = [node];
-        while (node.children.length > 0) {
+        while (node.children.length > 0 && !node.isCollapsed) {
             this.nodeStack.push(node.children[0])
             node = node.children[0]
         }
@@ -75,7 +129,7 @@ class NodeIterator {
             if (nodeIndex === -1) break;
             // console.log(this.nodeStack.map(n => `${n.fieldKey}-${n.value}`))
             if (cursorMoved) {
-                if (node.children.length > 0) {
+                if (node.children.length > 0 && !node.isCollapsed) {
                     this.nodeStack.push(node.children[0]);
                     continue;
                 } else {
@@ -102,7 +156,7 @@ class NodeIterator {
         // console.log(this.current)
         return this.current;
     }
-    public predicates (): { key: string; value: any }[] {
+    public predicates (): { key: string; value: string | number }[] {
         return this.nodeStack.filter(node => node.key !== ROOT_KEY).map(node => ({
             key: node.fieldKey,
             value: node.value
@@ -121,9 +175,14 @@ export function buildMetricTableFromNestTree (leftTree: INestNode, topTree: INes
         const vec: any[] = [];
         iteTop.first();
         while (iteTop.current !== null) {
-            const predicates = iteLeft.predicates().concat(iteTop.predicates());
-            const row = data.find(r => predicates.every(pre => r[pre.key] === pre.value))
-            vec.push(row)
+            const predicates = iteLeft.predicates().concat(iteTop.predicates()).filter((ele) => ele.value !== "total");
+            const matchedRows = data.filter(r => predicates.every(pre => r[pre.key] === pre.value));
+            if (matchedRows.length > 0) {
+                // If multiple rows are matched, then find the most matched one (the row with smallest number of keys)
+                vec.push(matchedRows.reduce((a, b) => Object.keys(a).length < Object.keys(b).length ? a : b));
+            } else {
+                vec.push(undefined);
+            }
             iteTop.next();
         }
         mat.push(vec)

package/src/components/visualConfig/index.tsx

@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useGlobalStore } from '../../store';
 import { NonPositionChannelConfigList,PositionChannelConfigList } from '../../config'; 
 
@@ -15,6 +15,8 @@ const VisualConfigPanel: React.FC = (props) => {
     const { commonStore, vizStore } = useGlobalStore();
     const { showVisualConfigPanel } = commonStore;
     const { visualConfig } = vizStore;
+    const { coordSystem, geoms: [markType] } = visualConfig;
+    const isChoropleth = coordSystem === 'geographic' && markType === 'choropleth';
     const { t } = useTranslation();
     const formatConfigList: (keyof IVisualConfig['format'])[] = [
         'numberFormat',
@@ -35,12 +37,14 @@ const VisualConfigPanel: React.FC = (props) => {
         size: visualConfig.resolve.size,
     });
     const [zeroScale, setZeroScale] = useState<boolean>(visualConfig.zeroScale);
+    const [scaleIncludeUnmatchedChoropleth, setScaleIncludeUnmatchedChoropleth] = useState<boolean>(visualConfig.scaleIncludeUnmatchedChoropleth ?? false);
     const [background, setBackground] = useState<string | undefined>(visualConfig.background);
 
     useEffect(() => {
         setZeroScale(visualConfig.zeroScale);
         setBackground(visualConfig.background);
         setResolve(toJS(visualConfig.resolve));
+        setScaleIncludeUnmatchedChoropleth(visualConfig.scaleIncludeUnmatchedChoropleth ?? false);
         setFormat({
             numberFormat: visualConfig.format.numberFormat,
             timeFormat: visualConfig.format.timeFormat,
@@ -140,6 +144,17 @@ const VisualConfigPanel: React.FC = (props) => {
                         }}
                     />
                 </div>
+                {isChoropleth && (
+                    <div className="my-2">
+                        <Toggle
+                            label="include unmatched choropleth in scale"
+                            enabled={scaleIncludeUnmatchedChoropleth}
+                            onChange={(en) => {
+                                setScaleIncludeUnmatchedChoropleth(en);
+                            }}
+                        />
+                    </div>
+                )}
                 <div className="mt-4">
                     <PrimaryButton
                         text={t('actions.confirm')}
@@ -148,6 +163,7 @@ const VisualConfigPanel: React.FC = (props) => {
                             runInAction(() => {
                                 vizStore.setVisualConfig('format', format);
                                 vizStore.setVisualConfig('zeroScale', zeroScale);
+                                vizStore.setVisualConfig('scaleIncludeUnmatchedChoropleth', scaleIncludeUnmatchedChoropleth);
                                 vizStore.setVisualConfig('background', background);
                                 vizStore.setVisualConfig('resolve', resolve);
                                 commonStore.setShowVisualConfigPanel(false);

package/src/config.ts

@@ -1,20 +1,31 @@
-import { DraggableFieldState, IStackMode, IVisualConfig } from "./interfaces";
+import { DraggableFieldState, ICoordMode, IStackMode, IVisualConfig } from "./interfaces";
 
-export const GEMO_TYPES: Readonly<string[]> = [
-    'auto',
-    'bar',
-    'line',
-    'area',
-    'trail',
-    'point',
-    'circle',
-    'tick',
-    'rect',
-    'arc',
-    'text',
-    'boxplot',
-    'table'
-] as const;
+export const GEMO_TYPES: Record<ICoordMode, Readonly<string[]>> = {
+    generic: [
+        'auto',
+        'bar',
+        'line',
+        'area',
+        'trail',
+        'point',
+        'circle',
+        'tick',
+        'rect',
+        'arc',
+        'text',
+        'boxplot',
+        'table',
+    ],
+    geographic: [
+        'poi',
+        'choropleth',
+    ],
+} as const;
+
+export const COORD_TYPES: Readonly<ICoordMode[]> = [
+    'generic',
+    'geographic',
+];
 
 export const STACK_MODE: Readonly<IStackMode[]> = [
     'none',

package/src/dataSource/table.tsx

@@ -14,21 +14,17 @@ const Table: React.FC<TableProps> = (props) => {
     const { commonStore } = useGlobalStore();
     const { tmpDSRawFields, tmpDataSource } = commonStore;
 
-    const tempDataset = React.useMemo(() => {
-        return {
-            id: "tmp",
-            name: "tmp",
-            dataSource: tmpDataSource,
-            rawFields: toJS(tmpDSRawFields),
-        };
-    }, [tmpDataSource, tmpDSRawFields]);
-9
-    const computation = React.useMemo(() => getComputation(tempDataset.dataSource), [tempDataset])
+    const computation = React.useMemo(() => getComputation(tmpDataSource), [tmpDataSource])
 
     return (
         <DataTable
             size={size}
-            dataset={tempDataset}
+            dataset={{
+                id: "tmp",
+                name: "tmp",
+                dataSource: tmpDataSource,
+                rawFields: toJS(tmpDSRawFields),
+            }}
             computation={computation}
             total={tmpDataSource.length}
             onMetaChange={(fid, fIndex, diffMeta) => {

package/src/fields/aestheticFields.tsx

@@ -26,6 +26,10 @@ const AestheticFields: React.FC = props => {
                 return aestheticFields.filter(f => f.id === 'text' || f.id === 'color' || f.id === 'size' || f.id === 'opacity');
             case 'table':
                 return []
+            case 'poi':
+                return aestheticFields.filter(f => f.id === 'color' || f.id === 'opacity' || f.id === 'size' || f.id === 'details');
+            case 'choropleth':
+                return aestheticFields.filter(f => f.id === 'color' || f.id === 'opacity' || f.id === 'text' || f.id === 'details');
             default:
                 return aestheticFields.filter(f => f.id !== 'text');
         }

package/src/fields/fieldsContext.tsx

@@ -48,6 +48,9 @@ export const DRAGGABLE_STATE_KEYS: Readonly<IDraggableStateKey[]> = [
     { id: 'shape', mode: 1},
     { id: 'theta', mode: 1 },
     { id: 'radius', mode: 1 },
+    { id: 'longitude', mode: 1 },
+    { id: 'latitude', mode: 1 },
+    { id: 'geoId', mode: 1 },
     { id: 'filters', mode: 1 },
     { id: 'details', mode: 1 },
     { id: 'text', mode: 1 },

package/src/fields/posFields/index.tsx

@@ -9,14 +9,20 @@ import OBFieldContainer from '../obComponents/obFContainer';
 const PosFields: React.FC = props => {
     const { vizStore } = useGlobalStore();
     const { visualConfig } = vizStore;
-    const { geoms } = visualConfig;
+    const { geoms, coordSystem = 'generic' } = visualConfig;
 
     const channels = useMemo(() => {
+        if (coordSystem === 'geographic') {
+            if (geoms[0] === 'choropleth') {
+                return DRAGGABLE_STATE_KEYS.filter(f => f.id === 'geoId');
+            }
+            return DRAGGABLE_STATE_KEYS.filter(f => f.id === 'longitude' || f.id === 'latitude');
+        }
         if (geoms[0] === 'arc') {
             return DRAGGABLE_STATE_KEYS.filter(f => f.id === 'radius' || f.id === 'theta');
         }
         return DRAGGABLE_STATE_KEYS.filter(f => f.id === 'columns' || f.id === 'rows');
-    }, [geoms[0]])
+    }, [geoms[0], coordSystem])
     return <div>
         {
             channels.map(dkey => <FieldListContainer name={dkey.id} key={dkey.id}>

package/src/global.d.ts

@@ -1,7 +1,7 @@
 declare module '@kanaries/react-beautiful-dnd' {
-    export const DOM: {
-        setHead: (head: HTMLElement | ShadowRoot) => void;
-        setBody: (body: HTMLElement | ShadowRoot) => void;
-    };
+    export const DOMProvider: import('react').Provider<{
+        head: HTMLElement | ShadowRoot;
+        body: HTMLElement | ShadowRoot;
+    }>;
     export * from 'react-beautiful-dnd';
 }