@cccsaurora/clue-ui 1.2.1-patch.256 → 1.3.0-dev.255

package/AnnotationDetails-CEou0vCc.js

@@ -0,0 +1,175 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { I as Icon } from "./iconify-CXMreGTg.js";
+import { useTheme, Stack, Typography, Tooltip, Box, IconButton, CircularProgress, Chip, Accordion, AccordionSummary, AccordionDetails, Divider } from "@mui/material";
+import Iconified from "./components/display/icons/Iconified.js";
+import { SNACKBAR_EVENT_ID } from "./data/event.js";
+import { ClueComponentContext } from "./hooks/ClueComponentContext.js";
+import { b as useClueEnrichSelector } from "./ActionForm-C0aE9HUv.js";
+import useAnnotations from "./hooks/useAnnotations.js";
+import useErrors from "./hooks/useErrors.js";
+import { ICON_MAP } from "./icons/iconMap.js";
+import { safeDispatchEvent } from "./utils/window.js";
+import { g as groupBy } from "./groupBy-ChDRT7uy.js";
+import { u as uniq } from "./useClueTypeConfig-D2tf4-NM.js";
+import { memo, useState, useMemo, useCallback, useEffect } from "react";
+import { u as useContextSelector } from "./index-AMfoEg_6.js";
+import ExecutePopover from "./components/actions/ExecutePopover.js";
+import AnnotationEntry from "./components/AnnotationEntry.js";
+import ClassificationChip from "./components/ClassificationChip.js";
+import EnrichPopover from "./components/enrichment/EnrichPopover.js";
+function isNull(value) {
+  return value === null;
+}
+const AnnotationDetails = ({ enrichRequest, setReady, updatePosition }) => {
+  const theme = useTheme();
+  const { t } = useContextSelector(ClueComponentContext, (ctx) => ctx.i18next);
+  const [filter, setFilter] = useState("all");
+  const enrich = useClueEnrichSelector((state) => state.enrich);
+  const [annotations, loading] = useAnnotations(
+    enrichRequest == null ? void 0 : enrichRequest.type,
+    enrichRequest == null ? void 0 : enrichRequest.value,
+    enrichRequest == null ? void 0 : enrichRequest.classification,
+    { skipEnrichment: true }
+  );
+  const errors = useErrors(enrichRequest == null ? void 0 : enrichRequest.value);
+  const options = useMemo(
+    () => ["all", ...uniq((annotations ?? []).map((annotation) => annotation.type))],
+    [annotations]
+  );
+  const annotationsByType = useMemo(() => groupBy(annotations ?? [], "type"), [annotations]);
+  const forceEnrich = useCallback(async () => {
+    await enrich(enrichRequest.type, enrichRequest.value, {
+      classification: enrichRequest.classification,
+      timeout: 15,
+      force: true
+    });
+  }, [enrichRequest, enrich]);
+  useEffect(() => {
+    if (!setReady) {
+      return;
+    }
+    setReady(enrichRequest && !isNull(annotations));
+    updatePosition == null ? void 0 : updatePosition();
+  }, [annotations, enrichRequest, setReady, updatePosition]);
+  return enrichRequest && !isNull(annotations) && /* @__PURE__ */ jsxs(Stack, { direction: "column", sx: { p: 1, width: "100%" }, spacing: 1, children: [
+    /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+        /* @__PURE__ */ jsxs(Stack, { children: [
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body1", fontWeight: "bold", children: "Clue" }),
+            enrichRequest.classification && /* @__PURE__ */ jsx(ClassificationChip, { size: "small", classification: enrichRequest.classification })
+          ] }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+            enrichRequest.type.toLocaleUpperCase(),
+            " ",
+            t("enrichment")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+        /* @__PURE__ */ jsx(Tooltip, { title: t("refresh"), children: /* @__PURE__ */ jsx(Box, { sx: { alignSelf: "center", m: -1 }, children: /* @__PURE__ */ jsx(IconButton, { onClick: () => forceEnrich(), disabled: loading, children: loading ? /* @__PURE__ */ jsx(CircularProgress, { variant: "indeterminate", size: 20 }) : /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-replay", fontSize: "small" }) }) }) }),
+        /* @__PURE__ */ jsx(Tooltip, { title: t("clipboard"), children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            sx: { alignSelf: "center", m: -1 },
+            onClick: () => {
+              navigator.clipboard.writeText(enrichRequest.value);
+              safeDispatchEvent(
+                new CustomEvent(SNACKBAR_EVENT_ID, {
+                  detail: {
+                    message: `${enrichRequest.value} ${t("clipboard.success")}`,
+                    level: "success"
+                  }
+                })
+              );
+            },
+            children: /* @__PURE__ */ jsx(Iconified, { icon: "ic:outline-assignment", fontSize: "small" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(EnrichPopover, { selector: enrichRequest }),
+        /* @__PURE__ */ jsx(ExecutePopover, { selectors: [enrichRequest] })
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, children: [
+        options.map((opt, id) => /* @__PURE__ */ jsx(
+          Chip,
+          {
+            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,
+              ":",
+              " ",
+              opt === "all" ? annotations.length : annotations.filter((annotation) => annotation.type === opt).length
+            ] }),
+            onClick: () => setFilter(opt)
+          },
+          id
+        )),
+        (errors == null ? void 0 : errors.length) > 0 && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: errors.map((err, err_id) => /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { style: { textTransform: "capitalize" }, children: err.source.replace(/-/g, " ") }),
+              ":",
+              " ",
+              err.message
+            ] }, err_id)) }),
+            children: /* @__PURE__ */ jsx(
+              Chip,
+              {
+                size: "small",
+                variant: "outlined",
+                icon: /* @__PURE__ */ jsx(Icon, { icon: "material-symbols:timer-outline", color: theme.palette.error.main }),
+                label: /* @__PURE__ */ jsxs(Typography, { variant: "caption", textTransform: "capitalize", children: [
+                  t("annotation.failed"),
+                  ": ",
+                  errors.length
+                ] }),
+                onClick: forceEnrich
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Box, {}),
+    Object.keys(annotationsByType).filter((type) => !filter || filter === "all" || type === filter).map((type, id) => /* @__PURE__ */ jsxs(
+      Accordion,
+      {
+        defaultExpanded: true,
+        sx: {
+          marginTop: `${theme.spacing(1)} !important`,
+          marginBottom: "0 !important",
+          "&:before": { height: 0 }
+        },
+        children: [
+          filter === "all" && /* @__PURE__ */ jsx(
+            AccordionSummary,
+            {
+              expandIcon: /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-arrow-drop-down" }),
+              sx: {
+                minHeight: "initial !important",
+                mt: 0.5,
+                mb: 0,
+                px: 1,
+                "& .MuiAccordionSummary-content": { my: 0.5, mx: 0 },
+                "& .MuiAccordionSummary-content.Mui-expanded": { my: 0.5, mx: 0 }
+              },
+              children: /* @__PURE__ */ jsx(Typography, { variant: "body1", textTransform: "capitalize", children: type }, type)
+            }
+          ),
+          /* @__PURE__ */ jsxs(AccordionDetails, { sx: { px: 1 }, children: [
+            filter === "all" && /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", sx: { mb: 1 } }),
+            /* @__PURE__ */ jsx(Stack, { spacing: 1, divider: /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", flexItem: true }), children: annotationsByType[type].map((annotation, ann_id) => /* @__PURE__ */ jsx(AnnotationEntry, { annotation }, ann_id)) })
+          ] })
+        ]
+      },
+      id
+    ))
+  ] });
+};
+const AnnotationDetails$1 = memo(AnnotationDetails);
+export {
+  AnnotationDetails$1 as A,
+  isNull as i
+};

package/AnnotationPreview-CLMVD6Ec.js

@@ -0,0 +1,188 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { I as Icon } from "./iconify-CXMreGTg.js";
+import { useTheme, Popper, Fade, Paper, Stack, Typography, Divider } from "@mui/material";
+import AnnotationDetailPopover from "./components/AnnotationDetailPopover.js";
+import useAnnotations from "./hooks/useAnnotations.js";
+import { t as twitterShort } from "./utils-71DpzFrA.js";
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { c as createContext, u as useContextSelector } from "./index-AMfoEg_6.js";
+import { SHOW_EVENT_ID, HIDE_EVENT_ID } from "./data/event.js";
+import { safeDispatchEvent, safeAddEventListener } from "./utils/window.js";
+import { i as isNull } from "./AnnotationDetails-CEou0vCc.js";
+const CluePopupContext = createContext(null);
+const CluePopupProvider = ({ children }) => {
+  const [popupType, setPopupType] = useState(null);
+  const [detailsAnchorEl, setDetailsAnchorEl] = useState(null);
+  const [detailsData, setDetailsData] = useState(null);
+  const [detailsContent, setDetailsContent] = useState(null);
+  const [popoverProps, setPopoverProps] = useState({});
+  const externalOnClose = useRef(null);
+  const showInfo = useCallback((type, anchorEl, value, options) => {
+    safeDispatchEvent(
+      new CustomEvent(SHOW_EVENT_ID, {
+        detail: {
+          type,
+          anchorEl,
+          value,
+          options
+        }
+      })
+    );
+  }, []);
+  const closeInfo = useCallback(
+    (type, value) => {
+      safeDispatchEvent(
+        new CustomEvent(HIDE_EVENT_ID, {
+          detail: {
+            type,
+            value
+          }
+        })
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const handleShowPopup = useCallback((event) => {
+    const { detail } = event;
+    setPopupType(detail.type);
+    setDetailsData(detail.value);
+    if (detail.options) {
+      if (detail.options.content) {
+        setDetailsContent(detail.options.content);
+      }
+      if (detail.options.onClose) {
+        externalOnClose.current = detail.options.onClose;
+      }
+      if (detail.options.popoverProps) {
+        setPopoverProps(detail.options.popoverProps);
+      }
+    }
+    setDetailsAnchorEl(detail.anchorEl);
+  }, []);
+  const handleHidePopup = useCallback(
+    (event) => {
+      const { detail } = event;
+      if (detailsData && (detail.type !== popupType || detailsData.type !== detail.value.type || detailsData.value !== detail.value.value)) {
+        return;
+      }
+      setPopupType(null);
+      setDetailsAnchorEl(null);
+      setDetailsData(null);
+      setDetailsContent(null);
+      setPopoverProps({});
+      externalOnClose.current = null;
+    },
+    [detailsData, popupType]
+  );
+  useEffect(() => {
+    const cleanupShow = safeAddEventListener(SHOW_EVENT_ID, handleShowPopup);
+    const cleanupHide = safeAddEventListener(HIDE_EVENT_ID, handleHidePopup);
+    return () => {
+      cleanupShow();
+      cleanupHide();
+    };
+  }, [handleShowPopup, handleHidePopup]);
+  const context = useMemo(
+    () => ({
+      showInfo,
+      closeInfo,
+      __detailsContent: detailsContent
+    }),
+    [closeInfo, detailsContent, showInfo]
+  );
+  return /* @__PURE__ */ jsxs(CluePopupContext.Provider, { value: context, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      AnnotationDetailPopover,
+      {
+        ...popoverProps,
+        anchorEl: detailsAnchorEl,
+        open: !!detailsAnchorEl && popupType === "details",
+        enrichRequest: detailsData,
+        onClose: () => {
+          if (externalOnClose.current) {
+            externalOnClose.current();
+          } else {
+            closeInfo("details", detailsData);
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AnnotationPreview,
+      {
+        ...popoverProps,
+        anchorEl: detailsAnchorEl,
+        open: !!detailsAnchorEl && !isNull(popupType) && popupType !== "details",
+        annotationType: popupType,
+        enrichRequest: detailsData
+      }
+    )
+  ] });
+};
+const AnnotationPreview = ({ annotationType, anchorEl, enrichRequest, open, ...otherProps }) => {
+  const theme = useTheme();
+  const _detailsContent = useContextSelector(CluePopupContext, (state) => state.__detailsContent);
+  const [annotations] = useAnnotations(enrichRequest == null ? void 0 : enrichRequest.type, enrichRequest == null ? void 0 : enrichRequest.value, enrichRequest == null ? void 0 : enrichRequest.classification);
+  const filteredAnnotations = useMemo(
+    () => annotationType === "actionResults" ? [] : annotations.filter((annotation) => annotation.type === annotationType),
+    [annotationType, annotations]
+  );
+  const getZIndex = useCallback((_anchorEl) => {
+    try {
+      const zIndex = parseInt(window.getComputedStyle(_anchorEl, null).getPropertyValue("z-index"));
+      if (isNaN(zIndex)) {
+        return getZIndex(_anchorEl.parentElement);
+      }
+      return (zIndex + 2).toString();
+    } catch {
+      return "2";
+    }
+  }, []);
+  if (!filteredAnnotations.length && !_detailsContent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Popper,
+    {
+      ...otherProps,
+      open,
+      anchorEl,
+      placement: "bottom-start",
+      sx: [{ zIndex: getZIndex(anchorEl) }, ...Array.isArray(otherProps.sx) ? otherProps.sx : [otherProps.sx]],
+      children: /* @__PURE__ */ jsx(Fade, { in: !!anchorEl, children: /* @__PURE__ */ jsx(Paper, { sx: { overflowY: "auto", maxWidth: "500px", boxShadow: theme.shadows[2] }, children: /* @__PURE__ */ jsx(Stack, { direction: "column", sx: { p: 1 }, spacing: 1, divider: /* @__PURE__ */ jsx(Divider, { orientation: "horizontal" }), children: _detailsContent ?? filteredAnnotations.map((annotation) => /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "column",
+          spacing: 1,
+          children: [
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+              annotation.analytic_icon && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: annotation.analytic_icon,
+                  style: { filter: "drop-shadow(0px 0px 1px rgb(0 0 0 / 0.4))" }
+                }
+              ),
+              /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { textTransform: "capitalize" }, children: annotation.analytic ?? annotation.author }),
+              /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+                "(",
+                twitterShort(annotation.timestamp),
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", children: annotation.summary }),
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: annotation.value })
+          ]
+        },
+        annotation.analytic + annotation.author + annotation.value + annotation.link + annotation.summary + annotation.timestamp
+      )) }) }) })
+    }
+  );
+};
+export {
+  AnnotationPreview as A,
+  CluePopupContext as C,
+  CluePopupProvider as a
+};