@cccsaurora/clue-ui 1.0.2 → 1.1.0-dev.10

package/components/ClassificationChip.js

@@ -1,31 +1,52 @@
-import { jsx as u } from "react/jsx-runtime";
-import { Tooltip as p, Chip as x } from "@mui/material";
-import D from "../hooks/useClueConfig.js";
-import { getParts as C, normalizedClassification as _ } from "../utils/classificationParser.js";
-import v, { useMemo as s, memo as y } from "react";
-const g = ["default", "primary", "secondary", "error", "info", "success", "warning"], A = v.memo(
-  ({ classification: r, ...n }) => {
-    var i, f;
-    const { config: e } = D(), t = s(() => e.c12nDef ? C(r, e.c12nDef, "short", !0) : null, [r, e.c12nDef]), d = s(() => !e.c12nDef || !t ? r : _(t, e.c12nDef, "short", !0), [r, e.c12nDef, t]), o = s(() => {
-      var c, a, m;
-      const l = (m = (a = e.c12nDef) == null ? void 0 : a.levels_styles_map[(c = e.c12nDef) == null ? void 0 : c.levels_map[t.lvlIdx]]) == null ? void 0 : m.color;
-      return g.includes(l) ? { color: l } : l ? { sx: { color: l } } : { color: "default" };
-    }, [(i = e.c12nDef) == null ? void 0 : i.levels_map, (f = e.c12nDef) == null ? void 0 : f.levels_styles_map, t.lvlIdx]);
-    return /* @__PURE__ */ u(p, { title: r, children: /* @__PURE__ */ u(
-      x,
+import { jsx } from "react/jsx-runtime";
+import { Tooltip, Chip } from "@mui/material";
+import useClueConfig from "../hooks/useClueConfig.js";
+import { getParts, normalizedClassification } from "../utils/classificationParser.js";
+import React__default, { useMemo, memo } from "react";
+const THEME_TYPES = ["default", "primary", "secondary", "error", "info", "success", "warning"];
+const ClassificationChip = React__default.memo(
+  ({ classification, ...otherProps }) => {
+    var _a, _b;
+    const { config } = useClueConfig();
+    const parts = useMemo(() => {
+      if (!config.c12nDef) {
+        return null;
+      }
+      return getParts(classification, config.c12nDef, "short", true);
+    }, [classification, config.c12nDef]);
+    const normalized = useMemo(() => {
+      if (!config.c12nDef || !parts) {
+        return classification;
+      }
+      return normalizedClassification(parts, config.c12nDef, "short", true);
+    }, [classification, config.c12nDef, parts]);
+    const chipProps = useMemo(() => {
+      var _a2, _b2, _c;
+      const definedColor = (_c = (_b2 = config.c12nDef) == null ? void 0 : _b2.levels_styles_map[(_a2 = config.c12nDef) == null ? void 0 : _a2.levels_map[parts.lvlIdx]]) == null ? void 0 : _c.color;
+      if (THEME_TYPES.includes(definedColor)) {
+        return { color: definedColor };
+      }
+      if (definedColor) {
+        return { sx: { color: definedColor } };
+      }
+      return { color: "default" };
+    }, [(_a = config.c12nDef) == null ? void 0 : _a.levels_map, (_b = config.c12nDef) == null ? void 0 : _b.levels_styles_map, parts.lvlIdx]);
+    return /* @__PURE__ */ jsx(Tooltip, { title: classification, children: /* @__PURE__ */ jsx(
+      Chip,
       {
-        variant: n.variant || "outlined",
-        label: d,
-        ...o,
-        ...n,
+        variant: otherProps.variant || "outlined",
+        label: normalized,
+        ...chipProps,
+        ...otherProps,
         sx: [
-          ...Array.isArray(o.sx) ? o.sx : [o.sx],
-          ...Array.isArray(n.sx) ? n.sx : [n.sx]
+          ...Array.isArray(chipProps.sx) ? chipProps.sx : [chipProps.sx],
+          ...Array.isArray(otherProps.sx) ? otherProps.sx : [otherProps.sx]
         ]
       }
     ) });
   }
-), M = y(A);
+);
+const ClassificationChip$1 = memo(ClassificationChip);
 export {
-  M as default
+  ClassificationChip$1 as default
 };

package/components/CountBadge.js

@@ -1,29 +1,34 @@
-import { jsx as m } from "react/jsx-runtime";
-import { Badge as l } from "@mui/material";
-import { forwardRef as d, cloneElement as f, Children as g } from "react";
-const b = d(({ children: r, color: a = "primary", count: t, disabled: n, ...e }, o) => n ? f(g.only(r), { ref: o, ...e }) : /* @__PURE__ */ m(
-  l,
-  {
-    ref: o,
-    ...e,
-    badgeContent: t < 100 ? t : "99+",
-    color: a,
-    sx: (i) => ({
-      "& .MuiBadge-badge": {
-        backgroundColor: "transparent",
-        color: i.palette[a].main,
-        fontWeight: "bold",
-        right: 0,
-        top: 0,
-        transform: `translateY(-25%) translateX(${Math.min(Math.ceil(Math.log10(t)), 3) * 10}%)`,
-        px: 0,
-        fontSize: ".85rem"
-      },
-      pr: 1.5
-    }),
-    children: r
+import { jsx } from "react/jsx-runtime";
+import { Badge } from "@mui/material";
+import { forwardRef, cloneElement, Children } from "react";
+const CountBadge = forwardRef(({ children, color = "primary", count, disabled, ...props }, ref) => {
+  if (disabled) {
+    return cloneElement(Children.only(children), { ref, ...props });
   }
-));
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      ref,
+      ...props,
+      badgeContent: count < 100 ? count : "99+",
+      color,
+      sx: (theme) => ({
+        "& .MuiBadge-badge": {
+          backgroundColor: "transparent",
+          color: theme.palette[color].main,
+          fontWeight: "bold",
+          right: 0,
+          top: 0,
+          transform: `translateY(-25%) translateX(${Math.min(Math.ceil(Math.log10(count)), 3) * 10}%)`,
+          px: 0,
+          fontSize: ".85rem"
+        },
+        pr: 1.5
+      }),
+      children
+    }
+  );
+});
 export {
-  b as default
+  CountBadge as default
 };

package/components/EnrichedCard.js

@@ -1,150 +1,162 @@
-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 { u as U } from "../ClueEnrichContext-DH9lqjwH.js";
-import { memo as V, useState as X, useMemo as z, useCallback as Y } from "react";
-import { u as Z } from "../index-E7g8cRyW.js";
-import _ from "./AnnotationEntry.js";
-const P = ({
-  type: o,
-  value: r,
-  classification: f,
-  contextIcon: I = !1,
-  counters: m = !1,
-  hideLoading: y = !1,
-  ...e
+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 { u as uniq } from "../ClueEnrichContext-DIn6g8tw.js";
+import { memo, useState, useMemo, useCallback } from "react";
+import { u as useContextSelector } from "../index-BDVjGvMI.js";
+import AnnotationEntry from "./AnnotationEntry.js";
+const EnrichedCard = ({
+  type,
+  value,
+  classification: _classification,
+  contextIcon = false,
+  counters = false,
+  hideLoading = false,
+  ...otherProps
 }) => {
-  const p = q(), { t: E } = Z(H, (i) => i.i18next), u = b((i) => i.defaultClassification), x = b((i) => i.enrich), [S, A] = X("all"), l = z(
-    () => f ?? u,
-    [f, u]
-  ), [n, k] = N(o, r, l), c = J(r), v = z(() => ["all", ...U(n.map((i) => i.type))], [n]), w = Y(() => x(o, r, {
-    classification: l,
-    timeout: 15,
-    force: !0
-  }), [l, x, o, r]);
-  return /* @__PURE__ */ a(
-    F,
+  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,
     {
       sx: [
         {
           maxWidth: "900px"
         },
-        ...Array.isArray(e == null ? void 0 : e.sx) ? e == null ? void 0 : e.sx : [e == null ? void 0 : e.sx]
+        ...Array.isArray(otherProps == null ? void 0 : otherProps.sx) ? otherProps == null ? void 0 : otherProps.sx : [otherProps == null ? void 0 : otherProps.sx]
       ],
-      ...e,
+      ...otherProps,
       children: [
-        /* @__PURE__ */ t(
-          M,
+        /* @__PURE__ */ jsx(
+          CardHeader,
           {
-            title: /* @__PURE__ */ a(O, { direction: "row", spacing: 1, alignItems: "center", children: [
-              /* @__PURE__ */ t(R, { annotations: n, value: r, variant: "h6" }),
-              /* @__PURE__ */ t(
-                K,
+            title: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+              /* @__PURE__ */ jsx(FrequencyText, { annotations, value, variant: "h6" }),
+              /* @__PURE__ */ jsx(
+                AssessmentIcon,
                 {
-                  value: { type: o, value: r, classification: l },
-                  annotations: n,
-                  counters: m,
+                  value: { type, value, classification },
+                  annotations,
+                  counters,
                   fontSize: "1em",
-                  disableTooltip: !0
+                  disableTooltip: true
                 }
               ),
-              /* @__PURE__ */ t(
-                Q,
+              /* @__PURE__ */ jsx(
+                OpinionIcon,
                 {
-                  value: { type: o, value: r, classification: l },
-                  annotations: n,
-                  counters: m,
+                  value: { type, value, classification },
+                  annotations,
+                  counters,
                   fontSize: "1em",
-                  disableTooltip: !0
+                  disableTooltip: true
                 }
               ),
-              /* @__PURE__ */ t(
-                L,
+              /* @__PURE__ */ jsx(
+                ContextIcon,
                 {
-                  value: { type: o, value: r, classification: l },
-                  annotations: n,
-                  counters: m,
-                  showExtraIcon: I,
+                  value: { type, value, classification },
+                  annotations,
+                  counters,
+                  showExtraIcon: contextIcon,
                   fontSize: "inherit",
-                  disableTooltip: !0
+                  disableTooltip: true
                 }
               ),
-              k && !y && /* @__PURE__ */ t(W, { color: "primary", size: 18 })
+              loading && !hideLoading && /* @__PURE__ */ jsx(CircularProgress, { color: "primary", size: 18 })
             ] })
           }
         ),
-        /* @__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) => (
+        /* @__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) => (
               // eslint-disable-next-line react/no-array-index-key
-              /* @__PURE__ */ t(s, { item: !0, children: /* @__PURE__ */ t(
-                C,
+              /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+                Chip,
                 {
                   size: "small",
-                  variant: i === S ? "filled" : "outlined",
-                  icon: T[i] && /* @__PURE__ */ t(h, { icon: T[i] }),
-                  label: /* @__PURE__ */ a(g, { variant: "caption", textTransform: "capitalize", children: [
-                    i,
+                  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,
                     ":",
                     " ",
-                    i === "all" ? n.length : n.filter((j) => j.type === i).length
+                    opt === "all" ? annotations.length : annotations.filter((annotation) => annotation.type === opt).length
                   ] }),
-                  onClick: () => A(i)
+                  onClick: () => setFilter(opt)
                 }
-              ) }, d)
+              ) }, id)
             )),
-            (c == null ? void 0 : c.length) > 0 && /* @__PURE__ */ t(s, { item: !0, children: /* @__PURE__ */ t(
-              D,
+            (errors == null ? void 0 : errors.length) > 0 && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+              Tooltip,
               {
-                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, " ") }),
+                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, " ") }),
                   ":",
                   " ",
-                  i.message
-                ] }, i.source)) }),
-                children: /* @__PURE__ */ t(
-                  C,
+                  err.message
+                ] }, err.source)) }),
+                children: /* @__PURE__ */ jsx(
+                  Chip,
                   {
                     size: "small",
                     variant: "outlined",
-                    icon: /* @__PURE__ */ t(
-                      h,
+                    icon: /* @__PURE__ */ jsx(
+                      Icon,
                       {
                         icon: "material-symbols:timer-outline",
-                        color: p.palette.error.main,
+                        color: theme.palette.error.main,
                         style: { filter: "drop-shadow(0px 0px 1px rgb(0 0 0 / 0.4))" }
                       }
                     ),
-                    label: /* @__PURE__ */ a(g, { variant: "caption", textTransform: "capitalize", children: [
-                      E("annotation.failed"),
+                    label: /* @__PURE__ */ jsxs(Typography, { variant: "caption", textTransform: "capitalize", children: [
+                      t("annotation.failed"),
                       ": ",
-                      c.length
+                      errors.length
                     ] }),
-                    onClick: w
+                    onClick: forceEnrich
                   }
                 )
               }
             ) })
           ] }),
-          /* @__PURE__ */ t(s, { container: !0, spacing: 1, alignItems: "stretch", children: n.map((i, d) => (
+          /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, alignItems: "stretch", children: annotations.map((annotation, id) => (
             // eslint-disable-next-line react/no-array-index-key
-            /* @__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(_, { annotation: i }) }) }, d)
+            /* @__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)
           )) })
         ] })
       ]
     }
   );
-}, hi = V(P);
+};
+const EnrichedCard$1 = memo(EnrichedCard);
 export {
-  hi as default
+  EnrichedCard$1 as default
 };