@inkindcards/semantic-layer 2.0.0 → 2.1.0

package/dist/components.cjs

@@ -805,10 +805,556 @@ function AdminDashboard({ className }) {
     tab === "users" && /* @__PURE__ */ jsxRuntime.jsx(UsersTab, {})
   ] });
 }
+var InspectableRegistryContext = react.createContext(null);
+function InspectableRegistry({ children }) {
+  const [entries, setEntries] = react.useState(/* @__PURE__ */ new Map());
+  const [inspectActive, setInspectActive] = react.useState(false);
+  const [selectedId, setSelectedId] = react.useState(null);
+  const register = react.useCallback((entry) => {
+    setEntries((prev) => {
+      const next = new Map(prev);
+      next.set(entry.id, entry);
+      return next;
+    });
+  }, []);
+  const unregister = react.useCallback((id) => {
+    setEntries((prev) => {
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+    setSelectedId((prev) => prev === id ? null : prev);
+  }, []);
+  const value = {
+    entries,
+    register,
+    unregister,
+    inspectActive,
+    setInspectActive,
+    selectedId,
+    setSelectedId
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(InspectableRegistryContext.Provider, { value, children });
+}
+function Inspectable({
+  label,
+  currentSource = "unknown",
+  data,
+  columns,
+  children
+}) {
+  const registry = react.useContext(InspectableRegistryContext);
+  const id = react.useId();
+  const ref = react.useRef(null);
+  const inferredColumns = columns ?? (data?.[0] ? Object.keys(data[0]) : []);
+  const sampleValues = data?.slice(0, 3) ?? [];
+  react.useEffect(() => {
+    if (!registry) return;
+    registry.register({
+      id,
+      label,
+      currentSource,
+      columns: inferredColumns,
+      sampleValues,
+      element: ref.current
+    });
+    return () => registry.unregister(id);
+  }, [id, label, currentSource, inferredColumns.join(","), registry]);
+  if (!registry) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  const isSelected = registry.selectedId === id;
+  const showOutline = registry.inspectActive;
+  const handleClick = (e) => {
+    if (!registry.inspectActive) return;
+    e.stopPropagation();
+    registry.setSelectedId(isSelected ? null : id);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      onClick: handleClick,
+      style: {
+        position: "relative",
+        outline: showOutline ? isSelected ? "2px solid #3b82f6" : "2px dashed #93c5fd" : "none",
+        outlineOffset: 2,
+        borderRadius: 4,
+        cursor: showOutline ? "pointer" : "inherit",
+        transition: "outline 0.15s ease"
+      },
+      children: [
+        showOutline && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: -10,
+              left: 4,
+              fontSize: 10,
+              fontWeight: 600,
+              fontFamily: "system-ui, -apple-system, sans-serif",
+              color: "#fff",
+              backgroundColor: isSelected ? "#3b82f6" : "#93c5fd",
+              padding: "1px 6px",
+              borderRadius: 3,
+              zIndex: 1e4,
+              pointerEvents: "none",
+              whiteSpace: "nowrap"
+            },
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/field-matcher.ts
+var AGG_PREFIXES = ["total_", "sum_", "avg_", "count_", "min_", "max_", "num_"];
+var NOISE_SUFFIXES = ["_name", "_id", "_value", "_val", "_amt", "_amount"];
+function camelToSnake(s) {
+  return s.replace(/([a-z0-9])([A-Z])/g, "$1_$2").toLowerCase();
+}
+function normalize(s) {
+  let result = camelToSnake(s).toLowerCase().trim();
+  for (const prefix of AGG_PREFIXES) {
+    if (result.startsWith(prefix) && result.length > prefix.length) {
+      result = result.slice(prefix.length);
+      break;
+    }
+  }
+  for (const suffix of NOISE_SUFFIXES) {
+    if (result.endsWith(suffix) && result.length > suffix.length) {
+      result = result.slice(0, -suffix.length);
+      break;
+    }
+  }
+  return result;
+}
+function matchExact(column, catalog) {
+  const lower = column.toLowerCase();
+  return catalog.find((f) => f.name.toLowerCase() === lower) ?? null;
+}
+function matchNormalized(column, catalog) {
+  const norm = normalize(column);
+  return catalog.find((f) => normalize(f.name) === norm) ?? null;
+}
+function matchDisplayName(column, catalog) {
+  const lower = normalize(column).replace(/_/g, " ");
+  if (lower.length < 3) return null;
+  return catalog.find((f) => f.displayName.toLowerCase().includes(lower)) ?? catalog.find((f) => f.description.toLowerCase().includes(lower)) ?? null;
+}
+function matchFields(columns, catalog) {
+  return columns.map((column) => {
+    const exact = matchExact(column, catalog);
+    if (exact) return { column, suggestedField: exact, confidence: "exact" };
+    const normalized = matchNormalized(column, catalog);
+    if (normalized) return { column, suggestedField: normalized, confidence: "fuzzy" };
+    const display = matchDisplayName(column, catalog);
+    if (display) return { column, suggestedField: display, confidence: "fuzzy" };
+    return { column, suggestedField: null, confidence: "manual" };
+  });
+}
+
+// src/components/prompt-generator.ts
+function generateMigrationPrompt(componentLabel, mappings) {
+  const resolved = mappings.filter((m) => m.field !== null);
+  if (resolved.length === 0) {
+    return `Replace the sample/hardcoded data in the "${componentLabel}" component with live data from the semantic layer using useSemanticQuery. Use the DataCatalog to find the right field names.`;
+  }
+  const metrics = resolved.filter((m) => m.field.type === "metric").map((m) => m.field.name);
+  const timeDims = resolved.filter((m) => m.field.type === "time_dimension").map((m) => m.field.name);
+  const dims = resolved.filter((m) => m.field.type === "dimension").map((m) => m.field.name);
+  const groupBy = [...timeDims, ...dims];
+  const parts = [
+    `Replace the sample/hardcoded data in the "${componentLabel}" component with a useSemanticQuery call using:`
+  ];
+  if (metrics.length > 0) {
+    parts.push(`  metrics: [${metrics.map((n) => `'${n}'`).join(", ")}]`);
+  }
+  if (groupBy.length > 0) {
+    parts.push(`  groupBy: [${groupBy.map((n) => `'${n}'`).join(", ")}]`);
+  }
+  if (timeDims.length > 0) {
+    parts.push(`  grain: 'month'`);
+  }
+  parts.push("");
+  parts.push("Map the query result columns to the component's props:");
+  for (const m of resolved) {
+    parts.push(`  "${m.column}" \u2192 data column "${m.field.name}"`);
+  }
+  parts.push("");
+  parts.push(
+    "Remove the old hardcoded/sample data and any fetch logic it used. Use the data, isLoading, and error values from useSemanticQuery to render the component."
+  );
+  return parts.join("\n");
+}
+function DataInspector({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(InspectableRegistry, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(InspectorOverlay, {}),
+    children
+  ] });
+}
+function InspectorOverlay() {
+  const registry = react.useContext(InspectableRegistryContext);
+  if (!registry) return null;
+  const { inspectActive, setInspectActive, selectedId, setSelectedId, entries } = registry;
+  react.useEffect(() => {
+    function handleKeyDown(e) {
+      if (e.ctrlKey && e.shiftKey && e.key === "I") {
+        e.preventDefault();
+        setInspectActive(!inspectActive);
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [inspectActive, setInspectActive]);
+  const selectedEntry = selectedId ? entries.get(selectedId) ?? null : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ToggleButton,
+      {
+        active: inspectActive,
+        count: entries.size,
+        onToggle: () => {
+          setInspectActive(!inspectActive);
+          if (inspectActive) setSelectedId(null);
+        }
+      }
+    ),
+    selectedEntry && /* @__PURE__ */ jsxRuntime.jsx(
+      InspectorModal,
+      {
+        entry: selectedEntry,
+        onClose: () => setSelectedId(null)
+      }
+    )
+  ] });
+}
+function ToggleButton({
+  active,
+  count,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick: onToggle,
+      title: active ? "Exit inspect mode (Ctrl+Shift+I)" : "Enter inspect mode (Ctrl+Shift+I)",
+      style: {
+        position: "fixed",
+        bottom: 20,
+        right: 20,
+        zIndex: 99999,
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "8px 16px",
+        fontSize: 13,
+        fontWeight: 600,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        color: active ? "#fff" : "#374151",
+        backgroundColor: active ? "#3b82f6" : "#fff",
+        border: `1px solid ${active ? "#2563eb" : "#d1d5db"}`,
+        borderRadius: 999,
+        cursor: "pointer",
+        boxShadow: "0 2px 8px rgba(0,0,0,0.12)",
+        transition: "all 0.15s ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+        ] }),
+        active ? "Inspecting" : "Inspect Data",
+        count > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minWidth: 18,
+              height: 18,
+              fontSize: 11,
+              fontWeight: 700,
+              borderRadius: 999,
+              backgroundColor: active ? "rgba(255,255,255,0.25)" : "#e5e7eb",
+              color: active ? "#fff" : "#6b7280",
+              padding: "0 5px"
+            },
+            children: count
+          }
+        )
+      ]
+    }
+  );
+}
+function InspectorModal({
+  entry,
+  onClose
+}) {
+  const { fields: catalog } = chunkT2C43AAL_cjs.useMetrics();
+  const initialMatches = react.useMemo(
+    () => matchFields(entry.columns, catalog),
+    [entry.columns, catalog]
+  );
+  const [mappings, setMappings] = react.useState(
+    () => new Map(initialMatches.map((m) => [m.column, m.suggestedField]))
+  );
+  react.useEffect(() => {
+    setMappings(new Map(initialMatches.map((m) => [m.column, m.suggestedField])));
+  }, [initialMatches]);
+  const [copied, setCopied] = react.useState(false);
+  const handleFieldChange = react.useCallback((column, field) => {
+    setMappings((prev) => {
+      const next = new Map(prev);
+      next.set(column, field);
+      return next;
+    });
+  }, []);
+  const handleGenerate = react.useCallback(async () => {
+    const fieldMappings = entry.columns.map((col) => ({
+      column: col,
+      field: mappings.get(col) ?? null
+    }));
+    const prompt = generateMigrationPrompt(entry.label, fieldMappings);
+    try {
+      await navigator.clipboard.writeText(prompt);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = prompt;
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  }, [entry, mappings]);
+  const confidenceMap = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const m of initialMatches) map.set(m.column, m.confidence);
+    return map;
+  }, [initialMatches]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: onClose, style: backdropStyle }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalHeaderStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 16, fontWeight: 700, color: "#111827" }, children: entry.label }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 2 }, children: [
+            "Source: ",
+            entry.currentSource
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClose, style: closeBtnStyle, children: "\xD7" })
+      ] }),
+      entry.sampleValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: sectionStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: sectionTitleStyle, children: "Current Data Preview" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { style: previewTableStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: entry.columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("th", { style: previewThStyle, children: col }, col)) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: entry.sampleValues.map((row, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: entry.columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { style: previewTdStyle, children: row[col] === null || row[col] === void 0 ? "\u2014" : String(row[col]) }, col)) }, i)) })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: sectionStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: sectionTitleStyle, children: "Field Mapping" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: 13 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("th", { style: mappingThStyle, children: "Current Column" }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { style: mappingThStyle, children: "Confidence" }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { style: mappingThStyle, children: "Semantic Layer Field" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: entry.columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+            MappingRow,
+            {
+              column: col,
+              confidence: confidenceMap.get(col) ?? "manual",
+              selectedField: mappings.get(col) ?? null,
+              catalog,
+              onChange: (field) => handleFieldChange(col, field)
+            },
+            col
+          )) })
+        ] }),
+        catalog.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "#9ca3af", marginTop: 8, textAlign: "center" }, children: "No semantic layer catalog available. Connect to the gateway to enable smart matching." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "12px 20px", borderTop: "1px solid #e5e7eb" }, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleGenerate, style: generateBtnStyle, children: copied ? "Copied to clipboard!" : "Generate Migration Prompt" }) })
+    ] })
+  ] });
+}
+function MappingRow({
+  column,
+  confidence,
+  selectedField,
+  catalog,
+  onChange
+}) {
+  const badgeColors = {
+    exact: { bg: "#dcfce7", color: "#15803d" },
+    fuzzy: { bg: "#fef9c3", color: "#a16207" },
+    manual: { bg: "#fee2e2", color: "#dc2626" }
+  };
+  const badge = badgeColors[confidence] ?? badgeColors.manual;
+  return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("td", { style: mappingTdStyle, children: /* @__PURE__ */ jsxRuntime.jsx("code", { style: { fontSize: 12, color: "#6366f1", fontFamily: "monospace" }, children: column }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("td", { style: { ...mappingTdStyle, textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        style: {
+          display: "inline-block",
+          padding: "1px 6px",
+          fontSize: 10,
+          fontWeight: 600,
+          borderRadius: 4,
+          backgroundColor: badge.bg,
+          color: badge.color
+        },
+        children: confidence
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("td", { style: mappingTdStyle, children: catalog.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "select",
+      {
+        value: selectedField?.name ?? "",
+        onChange: (e) => {
+          const field = catalog.find((f) => f.name === e.target.value) ?? null;
+          onChange(field);
+        },
+        style: selectStyle2,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "-- none --" }),
+          catalog.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: f.name, children: [
+            f.displayName,
+            " (",
+            f.type,
+            ") \u2014 ",
+            f.name
+          ] }, f.name))
+        ]
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#9ca3af" }, children: selectedField ? selectedField.name : "No catalog" }) })
+  ] });
+}
+var backdropStyle = {
+  position: "fixed",
+  inset: 0,
+  backgroundColor: "rgba(0,0,0,0.3)",
+  zIndex: 1e5
+};
+var modalStyle = {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  zIndex: 100001,
+  width: "min(640px, 90vw)",
+  maxHeight: "80vh",
+  backgroundColor: "#fff",
+  borderRadius: 12,
+  boxShadow: "0 8px 30px rgba(0,0,0,0.2)",
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  fontFamily: "system-ui, -apple-system, sans-serif"
+};
+var modalHeaderStyle = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "flex-start",
+  padding: "16px 20px",
+  borderBottom: "1px solid #e5e7eb"
+};
+var closeBtnStyle = {
+  background: "none",
+  border: "none",
+  fontSize: 22,
+  color: "#6b7280",
+  cursor: "pointer",
+  padding: "0 4px",
+  lineHeight: 1
+};
+var sectionStyle = {
+  padding: "12px 20px",
+  overflow: "auto",
+  flex: 1
+};
+var sectionTitleStyle = {
+  fontSize: 11,
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: "#6b7280",
+  marginBottom: 8
+};
+var previewTableStyle = {
+  width: "100%",
+  borderCollapse: "collapse",
+  fontSize: 12
+};
+var previewThStyle = {
+  padding: "4px 8px",
+  textAlign: "left",
+  fontWeight: 600,
+  color: "#374151",
+  backgroundColor: "#f9fafb",
+  borderBottom: "1px solid #e5e7eb",
+  whiteSpace: "nowrap"
+};
+var previewTdStyle = {
+  padding: "4px 8px",
+  color: "#6b7280",
+  borderBottom: "1px solid #f3f4f6",
+  whiteSpace: "nowrap",
+  maxWidth: 150,
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+};
+var mappingThStyle = {
+  padding: "6px 8px",
+  textAlign: "left",
+  fontWeight: 600,
+  fontSize: 11,
+  color: "#6b7280",
+  borderBottom: "1px solid #e5e7eb"
+};
+var mappingTdStyle = {
+  padding: "6px 8px",
+  borderBottom: "1px solid #f3f4f6",
+  verticalAlign: "middle"
+};
+var selectStyle2 = {
+  width: "100%",
+  padding: "4px 6px",
+  fontSize: 12,
+  border: "1px solid #d1d5db",
+  borderRadius: 4,
+  backgroundColor: "#fff",
+  color: "#111827"
+};
+var generateBtnStyle = {
+  width: "100%",
+  padding: "10px 16px",
+  fontSize: 14,
+  fontWeight: 600,
+  color: "#fff",
+  backgroundColor: "#3b82f6",
+  border: "none",
+  borderRadius: 8,
+  cursor: "pointer"
+};
 
 exports.AdminDashboard = AdminDashboard;
 exports.DataCatalog = DataCatalog;
+exports.DataInspector = DataInspector;
+exports.Inspectable = Inspectable;
 exports.MetricPicker = MetricPicker;
 exports.ResultsTable = ResultsTable;
+exports.generateMigrationPrompt = generateMigrationPrompt;
+exports.matchFields = matchFields;
 //# sourceMappingURL=components.cjs.map
 //# sourceMappingURL=components.cjs.map