semiotic 3.0.0-beta.2 → 3.0.0-beta.4

package/ai/dist/src/components/Legend.js

@@ -1,140 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Legend;
-const React = __importStar(require("react"));
-const typeHash = {
-    fill: (style) => React.createElement("rect", { style: style, width: 20, height: 20 }),
-    line: (style) => React.createElement("line", { style: style, x1: 0, y1: 0, x2: 20, y2: 20 })
-};
-function renderType(item, i, type, styleFn) {
-    let renderedType;
-    if (typeof type === "function") {
-        renderedType = type(item);
-    }
-    else {
-        const Type = typeHash[type];
-        const style = styleFn(item, i);
-        renderedType = Type(style);
-    }
-    return renderedType;
-}
-const renderLegendGroupVertical = (legendGroup, customClickBehavior) => {
-    const { type = "fill", styleFn, items } = legendGroup;
-    const renderedItems = [];
-    let itemOffset = 0;
-    items.forEach((item, i) => {
-        const renderedType = renderType(item, i, type, styleFn);
-        renderedItems.push(React.createElement("g", { key: `legend-item-${i}`, transform: `translate(0,${itemOffset})`, onClick: customClickBehavior ? () => customClickBehavior(item) : undefined, style: {
-                cursor: customClickBehavior ? "pointer" : "default"
-            } },
-            renderedType,
-            React.createElement("text", { y: 15, x: 30 }, item.label)));
-        itemOffset += 25;
-    });
-    return renderedItems;
-};
-const renderLegendGroupHorizontal = (legendGroup, customClickBehavior) => {
-    const { type = "fill", styleFn, items } = legendGroup;
-    const renderedItems = [];
-    let itemOffset = 0;
-    items.forEach((item, i) => {
-        const renderedType = renderType(item, i, type, styleFn);
-        renderedItems.push(React.createElement("g", { key: `legend-item-${i}`, transform: `translate(${itemOffset},0)`, onClick: customClickBehavior ? () => customClickBehavior(item) : undefined, style: {
-                cursor: customClickBehavior ? "pointer" : "default"
-            } },
-            renderedType,
-            React.createElement("text", { y: 15, x: 25 }, item.label)));
-        itemOffset += 35;
-        itemOffset += item.label.length * 8;
-    });
-    return { items: renderedItems, offset: itemOffset };
-};
-const renderVerticalGroup = ({ legendGroups, width, customClickBehavior }) => {
-    let offset = 30;
-    const renderedGroups = [];
-    legendGroups.forEach((l, i) => {
-        offset += 5;
-        renderedGroups.push(React.createElement("line", { key: `legend-top-line legend-symbol-${i}`, stroke: "gray", x1: 0, y1: offset, x2: width, y2: offset }));
-        offset += 10;
-        if (l.label) {
-            offset += 20;
-            renderedGroups.push(React.createElement("text", { key: `legend-text-${i}`, y: offset, className: "legend-group-label" }, l.label));
-            offset += 10;
-        }
-        renderedGroups.push(React.createElement("g", { key: `legend-group-${i}`, className: "legend-item", transform: `translate(0,${offset})` }, renderLegendGroupVertical(l, customClickBehavior)));
-        offset += l.items.length * 25 + 10;
-    });
-    return renderedGroups;
-};
-const renderHorizontalGroup = ({ legendGroups, title, height, customClickBehavior }) => {
-    let offset = 0;
-    const renderedGroups = [];
-    const verticalOffset = title === false ? 10 : 40;
-    legendGroups.forEach((l, i) => {
-        if (l.label) {
-            renderedGroups.push(React.createElement("text", { key: `legend-text-${i}`, transform: `translate(${offset},${verticalOffset}) rotate(90)`, textAnchor: "start", className: "legend-group-label" }, l.label));
-            offset += 20;
-        }
-        const renderedItems = renderLegendGroupHorizontal(l, customClickBehavior);
-        renderedGroups.push(React.createElement("g", { key: `legend-group-${i}`, className: "legend-item", transform: `translate(${offset},${verticalOffset})` }, renderedItems.items));
-        offset += renderedItems.offset + 5;
-        if (legendGroups[i + 1]) {
-            renderedGroups.push(React.createElement("line", { key: `legend-top-line legend-symbol-${i}`, stroke: "gray", x1: offset, y1: verticalOffset - 10, x2: offset, y2: height + verticalOffset + 10 }));
-        }
-        offset += 15;
-    });
-    return (React.createElement("g", null,
-        title !== false && (React.createElement("line", { x1: 0, x2: offset + 10, y1: verticalOffset - 10, y2: verticalOffset - 10, stroke: "gray", className: "title-neatline" })),
-        renderedGroups));
-};
-function Legend(props) {
-    const { legendGroups, customClickBehavior, title = "Legend", width = 100, height = 20, orientation = "vertical" } = props;
-    const renderedGroups = orientation === "vertical"
-        ? renderVerticalGroup({
-            legendGroups,
-            width,
-            customClickBehavior
-        })
-        : renderHorizontalGroup({
-            legendGroups,
-            title,
-            height,
-            customClickBehavior
-        });
-    return (React.createElement("g", null,
-        title !== undefined && (React.createElement("text", { className: "legend-title", y: 20, x: orientation === "horizontal" ? 0 : width / 2, textAnchor: orientation === "horizontal" ? "start" : "middle" }, title)),
-        renderedGroups));
-}

package/ai/dist/src/components/LinkedCharts.js

@@ -1,95 +0,0 @@
-"use client";
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFilteredData = exports.useBrushSelection = exports.useLinkedHover = exports.useSelection = void 0;
-exports.LinkedCharts = LinkedCharts;
-const React = __importStar(require("react"));
-const react_1 = require("react");
-const SelectionStore_1 = require("./store/SelectionStore");
-// Re-export hooks for convenience
-var useSelection_1 = require("./store/useSelection");
-Object.defineProperty(exports, "useSelection", { enumerable: true, get: function () { return useSelection_1.useSelection; } });
-Object.defineProperty(exports, "useLinkedHover", { enumerable: true, get: function () { return useSelection_1.useLinkedHover; } });
-Object.defineProperty(exports, "useBrushSelection", { enumerable: true, get: function () { return useSelection_1.useBrushSelection; } });
-Object.defineProperty(exports, "useFilteredData", { enumerable: true, get: function () { return useSelection_1.useFilteredData; } });
-// ── Resolution initializer ─────────────────────────────────────────────────
-function ResolutionInit({ selections }) {
-    const setResolution = (0, SelectionStore_1.useSelectionSelector)((state) => state.setResolution);
-    (0, react_1.useEffect)(() => {
-        for (const [name, config] of Object.entries(selections)) {
-            if (config.resolution) {
-                setResolution(name, config.resolution);
-            }
-        }
-    }, []); // Run once on mount
-    return null;
-}
-// ── LinkedCharts component ─────────────────────────────────────────────────
-/**
- * LinkedCharts — context provider for coordinated chart views.
- *
- * Wraps any number of chart components (at any depth) and enables
- * cross-highlighting, brushing-and-linking, and cross-filtering via
- * the `selection`, `linkedHover`, and `linkedBrush` props on each chart.
- *
- * @example
- * ```tsx
- * <LinkedCharts>
- *   <Scatterplot data={d} xAccessor="x" yAccessor="y" colorBy="cat"
- *     linkedHover={{ name: "hl", fields: ["cat"] }}
- *     selection={{ name: "hl" }} />
- *   <BarChart data={agg} categoryAccessor="cat" valueAccessor="total"
- *     selection={{ name: "hl" }} />
- * </LinkedCharts>
- * ```
- *
- * @example
- * ```tsx
- * // Cross-filtering (each chart's own brush is excluded from its filter)
- * <LinkedCharts selections={{ dash: { resolution: "crossfilter" } }}>
- *   <Scatterplot data={d} xAccessor="age" yAccessor="income"
- *     linkedBrush={{ name: "dash", xField: "age", yField: "income" }}
- *     selection={{ name: "dash" }} />
- *   <BarChart data={d} categoryAccessor="region" valueAccessor="count"
- *     selection={{ name: "dash" }} />
- * </LinkedCharts>
- * ```
- */
-function LinkedCharts({ children, selections }) {
-    return (React.createElement(SelectionStore_1.SelectionProvider, null,
-        selections && React.createElement(ResolutionInit, { selections: selections }),
-        children));
-}

package/ai/dist/src/components/ThemeProvider.js

@@ -1,79 +0,0 @@
-"use client";
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DARK_THEME = exports.LIGHT_THEME = void 0;
-exports.ThemeProvider = ThemeProviderWrapper;
-exports.useTheme = useTheme;
-const React = __importStar(require("react"));
-const ThemeStore_1 = require("./store/ThemeStore");
-Object.defineProperty(exports, "LIGHT_THEME", { enumerable: true, get: function () { return ThemeStore_1.LIGHT_THEME; } });
-Object.defineProperty(exports, "DARK_THEME", { enumerable: true, get: function () { return ThemeStore_1.DARK_THEME; } });
-// ── ThemeInitializer ────────────────────────────────────────────────────────
-// Calls setTheme on mount to sync the store with the prop value.
-function ThemeInitializer({ theme }) {
-    const setTheme = (0, ThemeStore_1.useThemeSelector)((state) => state.setTheme);
-    React.useEffect(() => {
-        if (theme !== undefined) {
-            setTheme(theme);
-        }
-    }, [theme, setTheme]);
-    return null;
-}
-// ── CSS Custom Properties wrapper ───────────────────────────────────────────
-function ThemeCSSWrapper({ children }) {
-    const theme = (0, ThemeStore_1.useThemeSelector)((state) => state.theme);
-    const style = {
-        position: "relative",
-        "--semiotic-bg": theme.colors.background,
-        "--semiotic-text": theme.colors.text,
-        "--semiotic-text-secondary": theme.colors.textSecondary,
-        "--semiotic-grid": theme.colors.grid,
-        "--semiotic-border": theme.colors.border,
-        "--semiotic-primary": theme.colors.primary,
-        "--semiotic-font-family": theme.typography.fontFamily
-    };
-    return React.createElement("div", { style: style }, children);
-}
-// ── ThemeProvider (public) ──────────────────────────────────────────────────
-function ThemeProviderWrapper({ theme, children }) {
-    return (React.createElement(ThemeStore_1.ThemeProvider, null,
-        React.createElement(ThemeInitializer, { theme: theme }),
-        React.createElement(ThemeCSSWrapper, null, children)));
-}
-// ── useTheme hook ───────────────────────────────────────────────────────────
-function useTheme() {
-    return (0, ThemeStore_1.useThemeSelector)((state) => state.theme);
-}

package/ai/dist/src/components/Tooltip/Tooltip.js

@@ -1,309 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultTooltipStyle = void 0;
-exports.Tooltip = Tooltip;
-exports.MultiLineTooltip = MultiLineTooltip;
-exports.normalizeTooltip = normalizeTooltip;
-const React = __importStar(require("react"));
-/**
- * Default tooltip styles following best practices
- */
-exports.defaultTooltipStyle = {
-    background: "rgba(0, 0, 0, 0.85)",
-    color: "white",
-    padding: "8px 12px",
-    borderRadius: "4px",
-    fontSize: "14px",
-    lineHeight: "1.5",
-    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-    pointerEvents: "none",
-    maxWidth: "300px",
-    wordWrap: "break-word"
-};
-/**
- * Extract value from data using accessor
- */
-function getValue(data, accessor) {
-    if (typeof accessor === "function") {
-        return accessor(data);
-    }
-    return data[accessor];
-}
-/**
- * Format a value for display
- */
-function formatValue(value, format) {
-    if (format) {
-        return format(value);
-    }
-    if (value === null || value === undefined) {
-        return "";
-    }
-    // Format numbers with commas
-    if (typeof value === "number") {
-        return value.toLocaleString();
-    }
-    // Format dates
-    if (value instanceof Date) {
-        return value.toLocaleDateString();
-    }
-    // Handle objects (e.g. resolved network nodes with an id property)
-    if (typeof value === "object" && value !== null) {
-        const obj = value;
-        if (obj.id !== undefined)
-            return String(obj.id);
-        if (obj.name !== undefined)
-            return String(obj.name);
-        return JSON.stringify(value);
-    }
-    return String(value);
-}
-/**
- * Create a simple tooltip that displays a single value or title
- *
- * @example
- * ```tsx
- * <Scatterplot
- *   data={data}
- *   tooltip={Tooltip({ title: "name" })}
- * />
- * ```
- *
- * @example
- * ```tsx
- * <BarChart
- *   data={data}
- *   tooltip={Tooltip({
- *     title: d => `${d.category}: ${d.value}`,
- *     style: { background: "#333" }
- *   })}
- * />
- * ```
- */
-function Tooltip(config = {}) {
-    const { fields, title, format, style = {}, className = "" } = config;
-    // Return a tooltipContent function that Semiotic expects
-    return (data) => {
-        // Guard against undefined/null data
-        if (!data || typeof data !== "object") {
-            return null;
-        }
-        let titleContent;
-        const fieldLines = [];
-        if (title) {
-            const titleValue = getValue(data, title);
-            titleContent = formatValue(titleValue, format);
-        }
-        if (fields && fields.length > 0) {
-            fields.forEach((field) => {
-                let label;
-                let accessor;
-                let fieldFormat;
-                if (typeof field === "string") {
-                    label = field;
-                    accessor = field;
-                    fieldFormat = format;
-                }
-                else {
-                    label = field.label;
-                    accessor = field.accessor || field.key || "";
-                    fieldFormat = field.format || format;
-                }
-                const value = getValue(data, accessor);
-                fieldLines.push({
-                    label,
-                    value: formatValue(value, fieldFormat)
-                });
-            });
-        }
-        else if (!title) {
-            // Default: try common field names (only when no title or fields specified)
-            const commonFields = ["value", "y", "name", "id", "label"];
-            for (const field of commonFields) {
-                if (data[field] !== undefined) {
-                    titleContent = formatValue(data[field], format);
-                    break;
-                }
-            }
-            // If still nothing, show first non-internal property
-            if (!titleContent) {
-                const keys = Object.keys(data).filter(k => !k.startsWith("_"));
-                if (keys.length > 0) {
-                    titleContent = formatValue(data[keys[0]], format);
-                }
-            }
-        }
-        const mergedStyle = { ...exports.defaultTooltipStyle, ...style };
-        return (React.createElement("div", { className: `semiotic-tooltip ${className}`.trim(), style: mergedStyle },
-            titleContent && React.createElement("div", { style: { fontWeight: fieldLines.length > 0 ? "bold" : "normal" } }, titleContent),
-            fieldLines.map((line, index) => (React.createElement("div", { key: index, style: { marginTop: index === 0 && titleContent ? "4px" : 0 } },
-                line.label && React.createElement("span", null,
-                    line.label,
-                    ": "),
-                line.value)))));
-    };
-}
-/**
- * Create a multi-line tooltip that displays multiple fields
- *
- * @example
- * ```tsx
- * <Scatterplot
- *   data={data}
- *   tooltip={MultiLineTooltip({
- *     fields: ["name", "value", "category"]
- *   })}
- * />
- * ```
- *
- * @example
- * ```tsx
- * <LineChart
- *   data={data}
- *   tooltip={MultiLineTooltip({
- *     title: "series",
- *     fields: [
- *       { label: "X", accessor: "x", format: v => v.toFixed(2) },
- *       { label: "Y", accessor: "y", format: v => v.toFixed(2) },
- *       { label: "Category", accessor: "category" }
- *     ]
- *   })}
- * />
- * ```
- *
- * @example
- * ```tsx
- * <BarChart
- *   data={data}
- *   tooltip={MultiLineTooltip({
- *     fields: [
- *       { label: "Category", accessor: "category" },
- *       { label: "Sales", accessor: "value", format: v => `$${v.toLocaleString()}` }
- *     ],
- *     showLabels: true
- *   })}
- * />
- * ```
- */
-function MultiLineTooltip(config = {}) {
-    const { fields = [], title, format, style = {}, className = "", showLabels = true, separator = ": " } = config;
-    // Return a tooltipContent function that Semiotic expects
-    return (data) => {
-        // Guard against undefined/null data
-        if (!data || typeof data !== "object") {
-            return null;
-        }
-        const lines = [];
-        // Add title line if specified
-        if (title) {
-            const titleValue = getValue(data, title);
-            lines.push({
-                value: formatValue(titleValue, format)
-            });
-        }
-        // Add field lines
-        if (fields && Array.isArray(fields) && fields.length > 0) {
-            fields.forEach((field) => {
-                let label;
-                let accessor;
-                let fieldFormat;
-                if (typeof field === "string") {
-                    // Simple string field name
-                    label = field;
-                    accessor = field;
-                    fieldFormat = format;
-                }
-                else {
-                    // Full TooltipField object
-                    // Support both 'key' and 'accessor' for backward compatibility
-                    label = field.label;
-                    accessor = field.accessor || field.key || "";
-                    fieldFormat = field.format || format;
-                }
-                const value = getValue(data, accessor);
-                const formattedValue = formatValue(value, fieldFormat);
-                lines.push({
-                    label: showLabels ? label : undefined,
-                    value: formattedValue
-                });
-            });
-        }
-        else {
-            // Default: show all non-internal properties
-            const keys = Object.keys(data).filter((k) => !k.startsWith("_") && k !== "data");
-            keys.forEach((key) => {
-                lines.push({
-                    label: showLabels ? key : undefined,
-                    value: formatValue(data[key], format)
-                });
-            });
-        }
-        const mergedStyle = { ...exports.defaultTooltipStyle, ...style };
-        // Safety check: ensure lines is an array
-        if (!Array.isArray(lines) || lines.length === 0) {
-            return null;
-        }
-        return (React.createElement("div", { className: `semiotic-tooltip semiotic-tooltip-multiline ${className}`.trim(), style: mergedStyle }, lines.map((line, index) => (React.createElement("div", { key: index, style: { marginBottom: index < lines.length - 1 ? "4px" : 0 } },
-            line.label && (React.createElement("strong", null,
-                line.label,
-                separator)),
-            line.value)))));
-    };
-}
-/**
- * Convert a tooltip prop to the format Semiotic expects
- */
-function normalizeTooltip(tooltip) {
-    if (tooltip === true) {
-        // Enable default tooltip
-        return true;
-    }
-    if (typeof tooltip === "function") {
-        // Already a tooltip function, use it as tooltipContent
-        return tooltip;
-    }
-    if (tooltip === false || tooltip === undefined) {
-        // No tooltip
-        return false;
-    }
-    // Config object with fields/title — convert to a tooltip function
-    if (typeof tooltip === "object" && tooltip !== null && ("fields" in tooltip || "title" in tooltip)) {
-        const config = tooltip;
-        return Tooltip(config);
-    }
-    // Should not reach here but return true to enable default tooltip
-    return true;
-}