@flanksource/clicky-ui 0.2.1 → 0.2.3

package/dist/data/Clicky.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
-import { useState, useMemo, useEffect, createContext, useRef, useContext, Fragment as Fragment$1 } from "react";
+import { useState, useContext, useMemo, useEffect, Fragment as Fragment$1, createContext, useRef } from "react";
 import { FilterForm } from "../rpc/FilterForm.js";
 import { parseJsonBody } from "../rpc/classify.js";
 import { packParameterValues, pruneParameterValues } from "../rpc/formMetadata.js";
@@ -10,13 +10,22 @@ import { cn } from "../lib/utils.js";
 import { DataTable } from "./DataTable.js";
 import { Tree } from "./Tree.js";
 import { Icon } from "./Icon.js";
-import { JsonView } from "./JsonView.js";
-import { highlightCode } from "./code-highlight.js";
+import { CodeBlock } from "./CodeBlock.js";
+import { sanitizeHtml, isBlockHtml } from "./html-utils.js";
 import { StackTrace } from "./diagnostics/RenderedStackTrace.js";
 import { Badge } from "./Badge.js";
 import { HoverCard } from "../overlay/HoverCard.js";
 import { Modal } from "../overlay/Modal.js";
 import { TagList, normalizeTags, TagActionsProvider } from "./cells/TagList.js";
+import { UiEllipsis } from "../icons/components/UiEllipsis.js";
+import { UiCheck } from "../icons/components/UiCheck.js";
+import { UiCloudDownload } from "../icons/components/UiCloudDownload.js";
+import { UiChevronUp } from "../icons/components/UiChevronUp.js";
+import { UiChevronDown } from "../icons/components/UiChevronDown.js";
+import { UiComment } from "../icons/components/UiComment.js";
+import { UiTable } from "../icons/components/UiTable.js";
+import { UiFileCode } from "../icons/components/UiFileCode.js";
+import { UiEye } from "../icons/components/UiEye.js";
 const CLICKY_PRIMARY_VIEW_FORMATS = ["clicky", "json"];
 const CLICKY_OVERFLOW_VIEW_FORMATS = [
   "pdf",
@@ -52,6 +61,10 @@ function Clicky(props) {
       ...props.onTableRowClick ? { onTableRowClick: props.onTableRowClick } : {},
       ...props.getTableRowHref ? { getTableRowHref: props.getTableRowHref } : {},
       ...props.isTableRowClickable ? { isTableRowClickable: props.isTableRowClickable } : {},
+      ...props.search ? { tableSearch: props.search } : {},
+      ...props.timeRange ? { tableTimeRange: props.timeRange } : {},
+      ...props.externalFilters ? { tableExternalFilters: props.externalFilters } : {},
+      ...props.pagination ? { tablePagination: props.pagination } : {},
       children: props.url ? /* @__PURE__ */ jsx(ClickyRemoteRenderer, { ...props, url: props.url }) : /* @__PURE__ */ jsx(
         ClickyContent,
         {
@@ -71,17 +84,26 @@ function ClickyRuntimeProvider({
   onTableRowClick,
   getTableRowHref,
   isTableRowClickable,
+  tableSearch,
+  tableTimeRange,
+  tableExternalFilters,
+  tablePagination,
   children
 }) {
   if (!commandRuntime) {
+    const hasOverrides = onTableRowClick || getTableRowHref || isTableRowClickable || tableSearch || tableTimeRange || tableExternalFilters || tablePagination;
     return /* @__PURE__ */ jsx(
       ClickyRuntimeContext.Provider,
       {
-        value: onTableRowClick || getTableRowHref || isTableRowClickable ? {
+        value: hasOverrides ? {
           ...clickyRuntimeContextDefault,
           onTableRowClick,
           getTableRowHref,
-          isTableRowClickable
+          isTableRowClickable,
+          tableSearch,
+          tableTimeRange,
+          tableExternalFilters,
+          tablePagination
         } : clickyRuntimeContextDefault,
         children
       }
@@ -94,6 +116,10 @@ function ClickyRuntimeProvider({
       ...onTableRowClick ? { onTableRowClick } : {},
       ...getTableRowHref ? { getTableRowHref } : {},
       ...isTableRowClickable ? { isTableRowClickable } : {},
+      ...tableSearch ? { tableSearch } : {},
+      ...tableTimeRange ? { tableTimeRange } : {},
+      ...tableExternalFilters ? { tableExternalFilters } : {},
+      ...tablePagination ? { tablePagination } : {},
       children
     }
   );
@@ -103,6 +129,10 @@ function ClickyCommandRuntimeProvider({
   onTableRowClick,
   getTableRowHref,
   isTableRowClickable,
+  tableSearch,
+  tableTimeRange,
+  tableExternalFilters,
+  tablePagination,
   children
 }) {
   const { operations, isLoading } = useOperations(commandRuntime.client);
@@ -112,10 +142,25 @@ function ClickyCommandRuntimeProvider({
       onTableRowClick,
       getTableRowHref,
       isTableRowClickable,
+      tableSearch,
+      tableTimeRange,
+      tableExternalFilters,
+      tablePagination,
       operations,
       operationsLoading: isLoading
     }),
-    [commandRuntime, getTableRowHref, isLoading, isTableRowClickable, onTableRowClick, operations]
+    [
+      commandRuntime,
+      getTableRowHref,
+      isLoading,
+      isTableRowClickable,
+      onTableRowClick,
+      operations,
+      tableSearch,
+      tableTimeRange,
+      tableExternalFilters,
+      tablePagination
+    ]
   );
   return /* @__PURE__ */ jsx(ClickyRuntimeContext.Provider, { value, children });
 }
@@ -279,7 +324,7 @@ function ClickyViewMenu({
           activeFormat && "border-foreground/20 bg-accent text-foreground"
         ),
         onClick: () => setOpen((current) => !current),
-        children: /* @__PURE__ */ jsx(Icon, { name: "codicon:ellipsis", className: "text-sm" })
+        children: /* @__PURE__ */ jsx(Icon, { icon: UiEllipsis, className: "text-sm" })
       }
     ),
     open && /* @__PURE__ */ jsx(
@@ -308,7 +353,7 @@ function ClickyViewMenu({
                 /* @__PURE__ */ jsx(
                   Icon,
                   {
-                    name: meta.icon,
+                    icon: meta.icon,
                     className: cn(
                       "mt-0.5 shrink-0 text-base text-muted-foreground",
                       active && "text-foreground"
@@ -318,7 +363,7 @@ function ClickyViewMenu({
                 /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-3", children: [
                     /* @__PURE__ */ jsx("span", { className: "font-medium", children: meta.label }),
-                    active && /* @__PURE__ */ jsx(Icon, { name: "codicon:check", className: "text-xs text-muted-foreground" })
+                    active && /* @__PURE__ */ jsx(Icon, { icon: UiCheck, className: "text-xs text-muted-foreground" })
                   ] }),
                   /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: meta.description })
                 ] })
@@ -352,7 +397,7 @@ function ClickyDownloadMenu({
           className: "inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           onClick: () => submitDownloadRequest(buildFormatUrl(url, primaryFormat)),
           children: [
-            /* @__PURE__ */ jsx(Icon, { name: "codicon:cloud-download", className: "text-sm" }),
+            /* @__PURE__ */ jsx(Icon, { icon: UiCloudDownload, className: "text-sm" }),
             /* @__PURE__ */ jsx("span", { children: `Download ${primaryMeta.label}` })
           ]
         }
@@ -367,7 +412,7 @@ function ClickyDownloadMenu({
           "aria-expanded": open,
           className: "inline-flex h-[34px] w-[34px] items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           onClick: () => setOpen((current) => !current),
-          children: /* @__PURE__ */ jsx(Icon, { name: open ? "codicon:chevron-up" : "codicon:chevron-down", className: "text-sm" })
+          children: /* @__PURE__ */ jsx(Icon, { icon: open ? UiChevronUp : UiChevronDown, className: "text-sm" })
         }
       )
     ] }),
@@ -394,7 +439,7 @@ function ClickyDownloadMenu({
                 /* @__PURE__ */ jsx(
                   Icon,
                   {
-                    name: meta.icon,
+                    icon: meta.icon,
                     className: "mt-0.5 shrink-0 text-base text-muted-foreground"
                   }
                 ),
@@ -688,70 +733,70 @@ function getRemoteFormatMeta(format) {
       return {
         label: "Clicky",
         description: "Rendered Clicky JSON with the rich Clicky viewer",
-        icon: "codicon:preview",
+        icon: UiEye,
         accept: "application/json+clicky, application/clicky+json;q=0.9, application/json;q=0.8,*/*;q=0.7"
       };
     case "json":
       return {
         label: "JSON",
         description: "Plain JSON for inspecting the raw response body",
-        icon: "vscode-icons:file-type-json",
+        icon: UiFileCode,
         accept: "application/json, text/plain;q=0.8,*/*;q=0.7"
       };
     case "pdf":
       return {
         label: "PDF",
         description: "Portable document for sharing and printing",
-        icon: "vscode-icons:file-type-pdf2",
+        icon: UiFileCode,
         accept: "application/pdf, */*;q=0.7"
       };
     case "html":
       return {
         label: "HTML",
         description: "Browser-ready HTML preview of the formatted output",
-        icon: "vscode-icons:file-type-html",
+        icon: UiFileCode,
         accept: "text/html, */*;q=0.7"
       };
     case "markdown":
       return {
         label: "Markdown",
         description: "Markdown formatted for docs, comments, and chat",
-        icon: "vscode-icons:file-type-markdown",
+        icon: UiFileCode,
         accept: "text/markdown, text/plain;q=0.8,*/*;q=0.7"
       };
     case "yaml":
       return {
         label: "YAML",
         description: "YAML for config-friendly inspection and export",
-        icon: "vscode-icons:file-type-yaml",
+        icon: UiFileCode,
         accept: "application/yaml, text/yaml;q=0.9, text/plain;q=0.8,*/*;q=0.7"
       };
     case "csv":
       return {
         label: "CSV",
         description: "Comma-separated values for spreadsheets and imports",
-        icon: "codicon:table",
+        icon: UiTable,
         accept: "text/csv, text/plain;q=0.8,*/*;q=0.7"
       };
     case "pretty":
       return {
         label: "Pretty",
         description: "Human-readable plain text output from the formatter",
-        icon: "codicon:file-code",
+        icon: UiFileCode,
         accept: "text/plain, */*;q=0.7"
       };
     case "excel":
       return {
         label: "Excel",
         description: "Spreadsheet workbook for offline analysis",
-        icon: "codicon:table",
+        icon: UiTable,
         accept: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, */*;q=0.7"
       };
     case "slack":
       return {
         label: "Slack",
         description: "Slack Block Kit JSON for chat-native output",
-        icon: "codicon:comment-discussion",
+        icon: UiComment,
         accept: "application/vnd.slack.block-kit+json, application/json;q=0.8,*/*;q=0.7"
       };
   }
@@ -923,11 +968,18 @@ function ClickyNodeRenderer({ node }) {
     case "map":
       return /* @__PURE__ */ jsx(ClickyMap, { node });
     case "table":
-      return /* @__PURE__ */ jsx(ClickyTable, { node });
+      return /* @__PURE__ */ jsx(ClickyTableNode, { node });
     case "tree":
       return /* @__PURE__ */ jsx(ClickyTreeNode, { node });
     case "code":
-      return /* @__PURE__ */ jsx(ClickyCodeBlock, { node });
+      return /* @__PURE__ */ jsx(
+        CodeBlock,
+        {
+          language: node.language,
+          source: node.source ?? node.plain ?? "",
+          highlightedHtml: node.highlightedHtml
+        }
+      );
     case "collapsed":
       return /* @__PURE__ */ jsx(ClickyCollapsed, { node });
     case "stacktrace":
@@ -1373,10 +1425,36 @@ function ClickyMap({ node }) {
     ] }, field.name))
   ] });
 }
-function ClickyTable({ node }) {
+function ClickyTableNode({ node }) {
+  return /* @__PURE__ */ jsx(
+    ClickyTable,
+    {
+      columns: node.columns ?? [],
+      rows: node.rows ?? [],
+      ...node.autoFilter !== void 0 ? { autoFilter: node.autoFilter } : {}
+    }
+  );
+}
+function ClickyTable({
+  columns,
+  rows,
+  autoFilter,
+  onTableRowClick,
+  getTableRowHref,
+  isTableRowClickable,
+  search,
+  timeRange,
+  externalFilters,
+  pagination
+}) {
   const runtime = useContext(ClickyRuntimeContext);
-  const columns = node.columns ?? [];
-  const rows = node.rows ?? [];
+  const rowClick = onTableRowClick ?? runtime.onTableRowClick;
+  const rowHref = getTableRowHref ?? runtime.getTableRowHref;
+  const rowClickable = isTableRowClickable ?? runtime.isTableRowClickable;
+  const effectiveSearch = search ?? runtime.tableSearch;
+  const effectiveTimeRange = timeRange ?? runtime.tableTimeRange;
+  const effectiveExternalFilters = externalFilters ?? runtime.tableExternalFilters;
+  const effectivePagination = pagination ?? runtime.tablePagination;
   if (columns.length === 0 || rows.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "No data" });
   }
@@ -1420,18 +1498,24 @@ function ClickyTable({ node }) {
     {
       data: rows,
       columns: tableColumns,
-      ...node.autoFilter !== void 0 ? { autoFilter: node.autoFilter } : {},
-      ...defaultSortColumn ? { defaultSort: { key: `cells.${defaultSortColumn.name}`, dir: "asc" } } : {},
+      ...autoFilter !== void 0 ? { autoFilter } : {},
+      ...defaultSortColumn ? {
+        defaultSort: {
+          key: `cells.${defaultSortColumn.name}`,
+          dir: "asc"
+        }
+      } : {},
       getRowId: (row, index) => `${index}-${columns.map((column) => clickyNodeText(row.cells[column.name])).filter(Boolean).join("|")}`,
       renderExpandedRow: (row, context) => /* @__PURE__ */ jsx(ClickyTableRowDetail, { row, columns, context }),
-      ...runtime.onTableRowClick ? { onRowClick: runtime.onTableRowClick } : {},
-      ...runtime.getTableRowHref ? { getRowHref: runtime.getTableRowHref } : {},
-      ...runtime.onTableRowClick && (runtime.isTableRowClickable || runtime.getTableRowHref) ? {
-        isRowClickable: runtime.isTableRowClickable ?? ((row) => {
-          var _a;
-          return Boolean((_a = runtime.getTableRowHref) == null ? void 0 : _a.call(runtime, row));
-        })
-      } : {}
+      ...rowClick ? { onRowClick: rowClick } : {},
+      ...rowHref ? { getRowHref: rowHref } : {},
+      ...rowClick && (rowClickable || rowHref) ? {
+        isRowClickable: rowClickable ?? ((row) => Boolean(rowHref == null ? void 0 : rowHref(row)))
+      } : {},
+      ...effectiveSearch ? { externalSearch: effectiveSearch } : {},
+      ...effectiveTimeRange ? { externalTimeRange: effectiveTimeRange } : {},
+      ...effectiveExternalFilters ? { externalFilters: effectiveExternalFilters } : {},
+      ...effectivePagination ? { pagination: effectivePagination } : {}
     }
   );
 }
@@ -1633,63 +1717,6 @@ function ClickyTreeNode({ node }) {
     }
   );
 }
-function ClickyCodeBlock({ node }) {
-  const language = (node.language ?? "").toLowerCase().replace(/^\.+/, "");
-  const source = node.source ?? node.plain ?? "";
-  const chromaHtml = node.highlightedHtml ? sanitizeHtml(node.highlightedHtml) : "";
-  const parsedJson = useMemo(
-    () => language === "json" ? tryParseJson(source) : JSON_PARSE_FAILED,
-    [language, source]
-  );
-  const [shikiHtml, setShikiHtml] = useState(null);
-  const wantsClientHighlight = !chromaHtml && !!language && !!source;
-  useEffect(() => {
-    if (!wantsClientHighlight) {
-      setShikiHtml(null);
-      return;
-    }
-    let cancelled = false;
-    highlightCode(source, { lang: language }).then((out) => {
-      if (!cancelled) setShikiHtml(out);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [wantsClientHighlight, language, source]);
-  if (parsedJson !== JSON_PARSE_FAILED) {
-    return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-md border border-border bg-muted/40", children: [
-      /* @__PURE__ */ jsx("div", { className: "border-b border-border px-3 py-1.5 text-[11px] uppercase tracking-wide text-muted-foreground", children: "json" }),
-      /* @__PURE__ */ jsx("div", { className: "overflow-auto p-3 text-xs", children: /* @__PURE__ */ jsx(JsonView, { data: parsedJson, defaultOpenDepth: 2 }) })
-    ] });
-  }
-  const xmlClasses = language === "xml" || language === "xslt" || language === "html" ? " [&_.chroma_.nt]:text-pink-700 [&_.chroma_.nt]:dark:text-pink-300 [&_.chroma_.nt]:font-semibold [&_.chroma_.na]:text-amber-700 [&_.chroma_.na]:dark:text-amber-300 [&_.chroma_.s]:text-emerald-700 [&_.chroma_.s]:dark:text-emerald-300 [&_.chroma_.c]:text-slate-500 [&_.chroma_.c]:italic [&_.chroma_.cp]:text-slate-500 [&_.chroma_.cp]:italic [&_pre]:leading-relaxed" : "";
-  return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-md border border-border bg-muted/40", children: [
-    /* @__PURE__ */ jsx("div", { className: "border-b border-border px-3 py-1.5 text-[11px] uppercase tracking-wide text-muted-foreground", children: node.language || "text" }),
-    chromaHtml ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "overflow-auto p-3 text-xs font-mono [&_.chroma]:bg-transparent [&_pre]:m-0 [&_pre]:whitespace-pre-wrap [&_pre]:bg-transparent" + xmlClasses,
-        dangerouslySetInnerHTML: { __html: chromaHtml }
-      }
-    ) : shikiHtml ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "overflow-auto p-3 text-xs font-mono [&_pre]:m-0 [&_pre.shiki]:!bg-transparent [&_pre]:whitespace-pre-wrap",
-        dangerouslySetInnerHTML: { __html: shikiHtml }
-      }
-    ) : /* @__PURE__ */ jsx("pre", { className: "overflow-auto whitespace-pre-wrap break-words p-3 text-xs font-mono text-foreground", children: source })
-  ] });
-}
-const JSON_PARSE_FAILED = Symbol("json-parse-failed");
-function tryParseJson(source) {
-  const trimmed = source.trim();
-  if (!trimmed) return JSON_PARSE_FAILED;
-  try {
-    return JSON.parse(trimmed);
-  } catch {
-    return JSON_PARSE_FAILED;
-  }
-}
 function isBadgeShape(value) {
   return value === "pill" || value === "rounded" || value === "square";
 }
@@ -1796,27 +1823,6 @@ function toInlineStyle(style, text) {
   }
   return Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0;
 }
-function sanitizeHtml(raw) {
-  if (!raw) return "";
-  if (typeof DOMParser === "undefined") {
-    return raw.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, "").replace(/\son\w+="[^"]*"/gi, "").replace(/\son\w+='[^']*'/gi, "");
-  }
-  const doc = new DOMParser().parseFromString(raw, "text/html");
-  doc.querySelectorAll("script,iframe,object,embed,form").forEach((element) => element.remove());
-  doc.querySelectorAll("*").forEach((element) => {
-    Array.from(element.attributes).forEach((attribute) => {
-      const name = attribute.name.toLowerCase();
-      const value = attribute.value.trim().toLowerCase();
-      if (name.startsWith("on") || name === "srcdoc") {
-        element.removeAttribute(attribute.name);
-      }
-      if ((name === "href" || name === "src") && value.startsWith("javascript:")) {
-        element.removeAttribute(attribute.name);
-      }
-    });
-  });
-  return doc.body.innerHTML;
-}
 function prettifyName(name) {
   return name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/_/g, " ").replace(/\b\w/g, (value) => value.toUpperCase());
 }
@@ -1950,11 +1956,10 @@ function clickyNodeText(node) {
 function isInlineNode(node) {
   return node.kind === "text" || node.kind === "link" || node.kind === "link-command" || node.kind === "icon" || node.kind === "html" || node.kind === "button" || node.kind === "button-group";
 }
-function isBlockHtml(html) {
-  return /<(div|p|pre|table|ul|ol|li|details|blockquote|h[1-6])/i.test(html);
-}
 export {
   Clicky,
+  ClickyNodeRenderer as ClickyNodeView,
+  ClickyTable,
   parseClickyData
 };
 //# sourceMappingURL=Clicky.js.map