semiotic 2.0.3 → 3.0.0-beta.2

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

@@ -0,0 +1,140 @@
+"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

@@ -0,0 +1,95 @@
+"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

@@ -0,0 +1,79 @@
+"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

@@ -0,0 +1,309 @@
+"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;
+}