@cccsaurora/clue-ui 1.0.1-dev.55 → 1.0.1

package/components/EnrichedCard.js

@@ -1,162 +1,150 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { I as Icon } from "../iconify-CXMreGTg.js";
-import { useTheme, Card, CardHeader, Stack, CircularProgress, Divider, CardContent, Grid, Chip, Typography, Tooltip, Box } from "@mui/material";
-import { ClueComponentContext } from "../hooks/ClueComponentContext.js";
-import { useClueEnrichSelector } from "../hooks/selectors.js";
-import useAnnotations from "../hooks/useAnnotations.js";
-import useErrors from "../hooks/useErrors.js";
-import AssessmentIcon from "../icons/Assessment.js";
-import ContextIcon from "../icons/Context.js";
-import OpinionIcon from "../icons/Opinion.js";
-import { ICON_MAP } from "../icons/iconMap.js";
-import FrequencyText from "../text/Frequency.js";
-import { memo, useState, useMemo, useCallback } from "react";
-import { u as useContextSelector } from "../index-BDVjGvMI.js";
-import AnnotationEntry from "./AnnotationEntry.js";
-import { u as uniq } from "../ClueEnrichContext-m-4vn9rz.js";
-const EnrichedCard = ({
-  type,
-  value,
-  classification: _classification,
-  contextIcon = false,
-  counters = false,
-  hideLoading = false,
-  ...otherProps
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { I as h } from "../iconify-BBckr5AQ.js";
+import { useTheme as q, Card as F, CardHeader as M, Stack as O, CircularProgress as W, Divider as $, CardContent as B, Grid as s, Chip as C, Typography as g, Tooltip as D, Box as G } from "@mui/material";
+import { ClueComponentContext as H } from "../hooks/ClueComponentContext.js";
+import { useClueEnrichSelector as b } from "../hooks/selectors.js";
+import N from "../hooks/useAnnotations.js";
+import J from "../hooks/useErrors.js";
+import K from "../icons/Assessment.js";
+import L from "../icons/Context.js";
+import Q from "../icons/Opinion.js";
+import { ICON_MAP as T } from "../icons/iconMap.js";
+import R from "../text/Frequency.js";
+import { memo as U, useState as V, useMemo as z, useCallback as X } from "react";
+import { u as Y } from "../index-E7g8cRyW.js";
+import Z from "./AnnotationEntry.js";
+import { u as _ } from "../ClueEnrichContext-CbJVBm4w.js";
+const P = ({
+  type: o,
+  value: r,
+  classification: f,
+  contextIcon: I = !1,
+  counters: m = !1,
+  hideLoading: y = !1,
+  ...e
 }) => {
-  const theme = useTheme();
-  const { t } = useContextSelector(ClueComponentContext, (ctx) => ctx.i18next);
-  const defaultClassification = useClueEnrichSelector((ctx) => ctx.defaultClassification);
-  const enrich = useClueEnrichSelector((state) => state.enrich);
-  const [filter, setFilter] = useState("all");
-  const classification = useMemo(
-    () => _classification ?? defaultClassification,
-    [_classification, defaultClassification]
-  );
-  const [annotations, loading] = useAnnotations(type, value, classification);
-  const errors = useErrors(value);
-  const options = useMemo(() => ["all", ...uniq(annotations.map((annotation) => annotation.type))], [annotations]);
-  const forceEnrich = useCallback(() => {
-    return enrich(type, value, {
-      classification,
-      timeout: 15,
-      force: true
-    });
-  }, [classification, enrich, type, value]);
-  return /* @__PURE__ */ jsxs(
-    Card,
+  const p = q(), { t: E } = Y(H, (i) => i.i18next), u = b((i) => i.defaultClassification), x = b((i) => i.enrich), [S, A] = V("all"), l = z(
+    () => f ?? u,
+    [f, u]
+  ), [n, k] = N(o, r, l), c = J(r), v = z(() => ["all", ..._(n.map((i) => i.type))], [n]), w = X(() => x(o, r, {
+    classification: l,
+    timeout: 15,
+    force: !0
+  }), [l, x, o, r]);
+  return /* @__PURE__ */ a(
+    F,
     {
       sx: [
         {
           maxWidth: "900px"
         },
-        ...Array.isArray(otherProps == null ? void 0 : otherProps.sx) ? otherProps == null ? void 0 : otherProps.sx : [otherProps == null ? void 0 : otherProps.sx]
+        ...Array.isArray(e == null ? void 0 : e.sx) ? e == null ? void 0 : e.sx : [e == null ? void 0 : e.sx]
       ],
-      ...otherProps,
+      ...e,
       children: [
-        /* @__PURE__ */ jsx(
-          CardHeader,
+        /* @__PURE__ */ t(
+          M,
           {
-            title: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
-              /* @__PURE__ */ jsx(FrequencyText, { annotations, value, variant: "h6" }),
-              /* @__PURE__ */ jsx(
-                AssessmentIcon,
+            title: /* @__PURE__ */ a(O, { direction: "row", spacing: 1, alignItems: "center", children: [
+              /* @__PURE__ */ t(R, { annotations: n, value: r, variant: "h6" }),
+              /* @__PURE__ */ t(
+                K,
                 {
-                  value: { type, value, classification },
-                  annotations,
-                  counters,
+                  value: { type: o, value: r, classification: l },
+                  annotations: n,
+                  counters: m,
                   fontSize: "1em",
-                  disableTooltip: true
+                  disableTooltip: !0
                 }
               ),
-              /* @__PURE__ */ jsx(
-                OpinionIcon,
+              /* @__PURE__ */ t(
+                Q,
                 {
-                  value: { type, value, classification },
-                  annotations,
-                  counters,
+                  value: { type: o, value: r, classification: l },
+                  annotations: n,
+                  counters: m,
                   fontSize: "1em",
-                  disableTooltip: true
+                  disableTooltip: !0
                 }
               ),
-              /* @__PURE__ */ jsx(
-                ContextIcon,
+              /* @__PURE__ */ t(
+                L,
                 {
-                  value: { type, value, classification },
-                  annotations,
-                  counters,
-                  showExtraIcon: contextIcon,
+                  value: { type: o, value: r, classification: l },
+                  annotations: n,
+                  counters: m,
+                  showExtraIcon: I,
                   fontSize: "inherit",
-                  disableTooltip: true
+                  disableTooltip: !0
                 }
               ),
-              loading && !hideLoading && /* @__PURE__ */ jsx(CircularProgress, { color: "primary", size: 18 })
+              k && !y && /* @__PURE__ */ t(W, { color: "primary", size: 18 })
             ] })
           }
         ),
-        /* @__PURE__ */ jsx(Divider, { sx: { mx: 1 } }),
-        /* @__PURE__ */ jsxs(CardContent, { sx: { p: 1 }, children: [
-          /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 0.5, sx: { mb: 1 }, children: [
-            options.map((opt, id) => (
+        /* @__PURE__ */ t($, { sx: { mx: 1 } }),
+        /* @__PURE__ */ a(B, { sx: { p: 1 }, children: [
+          /* @__PURE__ */ a(s, { container: !0, spacing: 0.5, sx: { mb: 1 }, children: [
+            v.map((i, d) => (
               // eslint-disable-next-line react/no-array-index-key
-              /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-                Chip,
+              /* @__PURE__ */ t(s, { item: !0, children: /* @__PURE__ */ t(
+                C,
                 {
                   size: "small",
-                  variant: opt === filter ? "filled" : "outlined",
-                  icon: ICON_MAP[opt] && /* @__PURE__ */ jsx(Icon, { icon: ICON_MAP[opt] }),
-                  label: /* @__PURE__ */ jsxs(Typography, { variant: "caption", textTransform: "capitalize", children: [
-                    opt,
+                  variant: i === S ? "filled" : "outlined",
+                  icon: T[i] && /* @__PURE__ */ t(h, { icon: T[i] }),
+                  label: /* @__PURE__ */ a(g, { variant: "caption", textTransform: "capitalize", children: [
+                    i,
                     ":",
                     " ",
-                    opt === "all" ? annotations.length : annotations.filter((annotation) => annotation.type === opt).length
+                    i === "all" ? n.length : n.filter((j) => j.type === i).length
                   ] }),
-                  onClick: () => setFilter(opt)
+                  onClick: () => A(i)
                 }
-              ) }, id)
+              ) }, d)
             )),
-            (errors == null ? void 0 : errors.length) > 0 && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-              Tooltip,
+            (c == null ? void 0 : c.length) > 0 && /* @__PURE__ */ t(s, { item: !0, children: /* @__PURE__ */ t(
+              D,
               {
-                title: /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: errors.map((err) => /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("span", { style: { textTransform: "capitalize" }, children: err.source.replace(/-/g, " ") }),
+                title: /* @__PURE__ */ t("div", { onClick: (i) => i.stopPropagation(), children: c.map((i) => /* @__PURE__ */ a("div", { children: [
+                  /* @__PURE__ */ t("span", { style: { textTransform: "capitalize" }, children: i.source.replace(/-/g, " ") }),
                   ":",
                   " ",
-                  err.message
-                ] }, err.source)) }),
-                children: /* @__PURE__ */ jsx(
-                  Chip,
+                  i.message
+                ] }, i.source)) }),
+                children: /* @__PURE__ */ t(
+                  C,
                   {
                     size: "small",
                     variant: "outlined",
-                    icon: /* @__PURE__ */ jsx(
-                      Icon,
+                    icon: /* @__PURE__ */ t(
+                      h,
                       {
                         icon: "material-symbols:timer-outline",
-                        color: theme.palette.error.main,
+                        color: p.palette.error.main,
                         style: { filter: "drop-shadow(0px 0px 1px rgb(0 0 0 / 0.4))" }
                       }
                     ),
-                    label: /* @__PURE__ */ jsxs(Typography, { variant: "caption", textTransform: "capitalize", children: [
-                      t("annotation.failed"),
+                    label: /* @__PURE__ */ a(g, { variant: "caption", textTransform: "capitalize", children: [
+                      E("annotation.failed"),
                       ": ",
-                      errors.length
+                      c.length
                     ] }),
-                    onClick: forceEnrich
+                    onClick: w
                   }
                 )
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, alignItems: "stretch", children: annotations.map((annotation, id) => (
+          /* @__PURE__ */ t(s, { container: !0, spacing: 1, alignItems: "stretch", children: n.map((i, d) => (
             // eslint-disable-next-line react/no-array-index-key
-            /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, minWidth: "300px", children: /* @__PURE__ */ jsx(Box, { sx: { border: `thin solid ${theme.palette.divider}`, p: 1, height: "100%" }, children: /* @__PURE__ */ jsx(AnnotationEntry, { annotation }) }) }, id)
+            /* @__PURE__ */ t(s, { item: !0, xs: 6, minWidth: "300px", children: /* @__PURE__ */ t(G, { sx: { border: `thin solid ${p.palette.divider}`, p: 1, height: "100%" }, children: /* @__PURE__ */ t(Z, { annotation: i }) }) }, d)
           )) })
         ] })
       ]
     }
   );
-};
-const EnrichedCard$1 = memo(EnrichedCard);
+}, hi = U(P);
 export {
-  EnrichedCard$1 as default
+  hi as default
 };

package/components/EnrichedChip.js

@@ -1,176 +1,151 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Chip, Tooltip, Box, Stack, CircularProgress } from "@mui/material";
-import Iconified from "./display/icons/Iconified.js";
-import { ClueComponentContext } from "../hooks/ClueComponentContext.js";
-import { ClueGroupContext } from "../hooks/ClueGroupContext.js";
-import { C as CluePopupContext } from "../AnnotationPreview-BvNpZOP0.js";
-import { useClueEnrichSelector } from "../hooks/selectors.js";
-import useAnnotations from "../hooks/useAnnotations.js";
-import ActionIcon from "../icons/Action.js";
-import AssessmentIcon from "../icons/Assessment.js";
-import ContextIcon from "../icons/Context.js";
-import OpinionIcon from "../icons/Opinion.js";
-import FrequencyText from "../text/Frequency.js";
-import React__default, { useRef, useMemo, useCallback, useEffect, memo } from "react";
-import { u as useContextSelector } from "../index-BDVjGvMI.js";
-const EnrichedChip = React__default.memo(
+import { jsx as l, jsxs as O } from "react/jsx-runtime";
+import { Chip as B, Tooltip as G, Box as $, Stack as H, CircularProgress as J } from "@mui/material";
+import K from "./display/icons/Iconified.js";
+import { ClueComponentContext as L } from "../hooks/ClueComponentContext.js";
+import { ClueGroupContext as N } from "../hooks/ClueGroupContext.js";
+import { C as E } from "../AnnotationPreview-DWRDhxUB.js";
+import { useClueEnrichSelector as Q } from "../hooks/selectors.js";
+import U from "../hooks/useAnnotations.js";
+import V from "../icons/Action.js";
+import v from "../icons/Assessment.js";
+import q from "../icons/Context.js";
+import z from "../icons/Opinion.js";
+import W from "../text/Frequency.js";
+import X, { useRef as Y, useMemo as x, useCallback as Z, useEffect as _, memo as F } from "react";
+import { u as d } from "../index-E7g8cRyW.js";
+const D = X.memo(
   ({
-    type: _type,
-    value,
-    classification: _classification,
-    contextIcon = false,
-    counters = false,
-    hideDetails = false,
-    hideLoading = false,
-    forceDetails = false,
-    setForceDetails = null,
-    useDetailsIcon = false,
-    skipEnrichment = false,
-    slotProps = {},
-    ...otherProps
+    type: b,
+    value: o,
+    classification: k,
+    contextIcon: y = !1,
+    counters: a = !1,
+    hideDetails: T = !1,
+    hideLoading: A = !1,
+    forceDetails: f = !1,
+    setForceDetails: u = null,
+    useDetailsIcon: p = !1,
+    skipEnrichment: R = !1,
+    slotProps: s = {},
+    ...t
   }) => {
-    const { t } = useContextSelector(ClueComponentContext, (ctx) => ctx.i18next);
-    const anchorRef = useRef();
-    const groupType = useContextSelector(ClueGroupContext, (ctx) => ctx == null ? void 0 : ctx.type);
-    const defaultClassification = useClueEnrichSelector((ctx) => ctx.defaultClassification);
-    const type = useMemo(() => _type ?? groupType, [_type, groupType]);
-    const classification = useMemo(
-      () => _classification ?? defaultClassification,
-      [_classification, defaultClassification]
+    const { t: j } = d(L, (i) => i.i18next), C = Y(), S = d(N, (i) => i == null ? void 0 : i.type), w = Q((i) => i.defaultClassification), n = x(() => b ?? S, [b, S]), e = x(
+      () => k ?? w,
+      [k, w]
     );
-    if (!type) {
+    if (!n)
       throw new Error("Type was not provided as a prop, and component is not used in a group context.");
-    }
-    const [annotations, loading] = useAnnotations(type, value, classification, { skipEnrichment });
-    const showInfo = useContextSelector(CluePopupContext, (ctx) => ctx.showInfo);
-    const closeInfo = useContextSelector(CluePopupContext, (ctx) => ctx.closeInfo);
-    const buildOptions = useCallback(() => {
-      const options = {};
-      if (setForceDetails) {
-        options.onClose = () => setForceDetails(false);
-      }
-      if (slotProps == null ? void 0 : slotProps.popover) {
-        options.popoverProps = slotProps.popover;
-      }
-      return options;
-    }, [setForceDetails, slotProps.popover]);
-    const clicker = useMemo(
-      () => !loading ? !hideDetails || useDetailsIcon ? (e) => {
-        var _a;
-        showInfo("details", anchorRef.current, { type, value, classification }, buildOptions());
-        (_a = otherProps.onClick) == null ? void 0 : _a.call(otherProps, e);
-        e.stopPropagation();
-        e.preventDefault();
-      } : otherProps.onClick : (
+    const [m, c] = U(n, o, e, { skipEnrichment: R }), g = d(E, (i) => i.showInfo), M = d(E, (i) => i.closeInfo), h = Z(() => {
+      const i = {};
+      return u && (i.onClose = () => u(!1)), s != null && s.popover && (i.popoverProps = s.popover), i;
+    }, [u, s.popover]), I = x(
+      () => c ? (
         // We need to give a dummy callback when loading so the popover doesn't get confused
-        (e) => {
-          var _a;
-          (_a = otherProps.onClick) == null ? void 0 : _a.call(otherProps, e);
+        (i) => {
+          var r;
+          (r = t.onClick) == null || r.call(t, i);
         }
-      ),
+      ) : !T || p ? (i) => {
+        var r;
+        g("details", C.current, { type: n, value: o, classification: e }, h()), (r = t.onClick) == null || r.call(t, i), i.stopPropagation(), i.preventDefault();
+      } : t.onClick,
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [loading, hideDetails, useDetailsIcon, otherProps, type, value, classification]
+      [c, T, p, t, n, o, e]
     );
-    useEffect(() => {
-      if (forceDetails) {
-        showInfo("details", anchorRef.current, { type, value, classification }, buildOptions());
-      } else {
-        closeInfo("details", {
-          type,
-          value,
-          classification
-        });
-      }
-    }, [classification, forceDetails, type, value]);
-    return /* @__PURE__ */ jsx(
-      Chip,
+    return _(() => {
+      f ? g("details", C.current, { type: n, value: o, classification: e }, h()) : M("details", {
+        type: n,
+        value: o,
+        classification: e
+      });
+    }, [e, f, n, o]), /* @__PURE__ */ l(
+      B,
       {
-        ...otherProps,
-        ref: anchorRef,
-        variant: otherProps.variant || "outlined",
+        ...t,
+        ref: C,
+        variant: t.variant || "outlined",
         sx: {
-          height: otherProps.size !== "small" ? "40px" : "unset",
+          height: t.size !== "small" ? "40px" : "unset",
           "& .MuiChip-label": { overflow: "visible" },
-          ...otherProps.sx ?? {}
+          ...t.sx ?? {}
         },
-        label: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
-          /* @__PURE__ */ jsx(
-            AssessmentIcon,
+        label: /* @__PURE__ */ O(H, { direction: "row", spacing: 1, alignItems: "center", children: [
+          /* @__PURE__ */ l(
+            v,
             {
-              ubiquitous: true,
-              value: { type, value, classification },
-              annotations,
-              counters,
-              disableTooltip: forceDetails,
+              ubiquitous: !0,
+              value: { type: n, value: o, classification: e },
+              annotations: m,
+              counters: a,
+              disableTooltip: f,
               style: { flexShrink: 0 }
             }
           ),
-          /* @__PURE__ */ jsx(
-            OpinionIcon,
+          /* @__PURE__ */ l(
+            z,
             {
-              ubiquitous: true,
-              value: { type, value, classification },
-              annotations,
-              counters,
-              disableTooltip: forceDetails,
+              ubiquitous: !0,
+              value: { type: n, value: o, classification: e },
+              annotations: m,
+              counters: a,
+              disableTooltip: f,
               style: { flexShrink: 0 }
             }
           ),
-          /* @__PURE__ */ jsx(
-            ContextIcon,
+          /* @__PURE__ */ l(
+            q,
             {
-              ubiquitous: true,
-              value: { type, value, classification },
-              annotations,
-              counters,
-              showExtraIcon: contextIcon,
-              disableTooltip: forceDetails,
+              ubiquitous: !0,
+              value: { type: n, value: o, classification: e },
+              annotations: m,
+              counters: a,
+              showExtraIcon: y,
+              disableTooltip: f,
               style: { flexShrink: 0 }
             }
           ),
-          otherProps.label ?? /* @__PURE__ */ jsx(FrequencyText, { fontSize: "inherit", annotations, value }),
-          /* @__PURE__ */ jsx(
-            AssessmentIcon,
+          t.label ?? /* @__PURE__ */ l(W, { fontSize: "inherit", annotations: m, value: o }),
+          /* @__PURE__ */ l(
+            v,
             {
-              value: { type, value, classification },
-              annotations,
-              counters,
-              disableTooltip: forceDetails,
+              value: { type: n, value: o, classification: e },
+              annotations: m,
+              counters: a,
+              disableTooltip: f,
               style: { flexShrink: 0 }
             }
           ),
-          /* @__PURE__ */ jsx(
-            OpinionIcon,
+          /* @__PURE__ */ l(
+            z,
             {
-              value: { type, value, classification },
-              annotations,
-              counters,
-              disableTooltip: forceDetails,
+              value: { type: n, value: o, classification: e },
+              annotations: m,
+              counters: a,
+              disableTooltip: f,
               style: { flexShrink: 0 }
             }
           ),
-          /* @__PURE__ */ jsx(
-            ContextIcon,
+          /* @__PURE__ */ l(
+            q,
             {
-              value: { type, value, classification },
-              annotations,
-              counters,
-              showExtraIcon: contextIcon,
-              disableTooltip: forceDetails,
+              value: { type: n, value: o, classification: e },
+              annotations: m,
+              counters: a,
+              showExtraIcon: y,
+              disableTooltip: f,
               style: { flexShrink: 0 }
             }
           ),
-          /* @__PURE__ */ jsx(ActionIcon, { counters, value: { type, value, classification }, disableTooltip: forceDetails }),
-          loading && !hideLoading && /* @__PURE__ */ jsx(CircularProgress, { color: "primary", size: 16 })
+          /* @__PURE__ */ l(V, { counters: a, value: { type: n, value: o, classification: e }, disableTooltip: f }),
+          c && !A && /* @__PURE__ */ l(J, { color: "primary", size: 16 })
         ] }),
-        onClick: !useDetailsIcon ? clicker : void 0,
-        onDelete: !loading && useDetailsIcon ? clicker : void 0,
-        deleteIcon: useDetailsIcon ? /* @__PURE__ */ jsx(Tooltip, { title: t("details.open"), children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { pr: 1 }, children: /* @__PURE__ */ jsx(Iconified, { icon: "ic:outline-info" }) }) }) : null
+        onClick: p ? void 0 : I,
+        onDelete: !c && p ? I : void 0,
+        deleteIcon: p ? /* @__PURE__ */ l(G, { title: j("details.open"), children: /* @__PURE__ */ l($, { component: "span", sx: { pr: 1 }, children: /* @__PURE__ */ l(K, { icon: "ic:outline-info" }) }) }) : null
       }
     );
   }
-);
-const EnrichedChip$1 = memo(EnrichedChip);
+), ui = F(D);
 export {
-  EnrichedChip$1 as default
+  ui as default
 };