@cccsaurora/howler-ui 2.14.0-dev.259 → 2.14.0-dev.263

package/components/elements/hit/HitComments.js

@@ -0,0 +1,280 @@
+import { jsxs, jsx, Fragment } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { KeyboardArrowDown, Clear, Send } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { Accordion, AccordionSummary, Typography, AccordionDetails, Stack, Chip, TextField, AvatarGroup, IconButton, Skeleton } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { a as api } from "../../../index-BPPnUdfP.js";
+import "../../../commons/components/app/AppContexts.js";
+import { useContext, useState, useRef, useMemo, useEffect, useCallback } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import "../../../i18n.js";
+import "../../../commons/components/app/hooks/useAppSitemap.js";
+import { useAppUser } from "../../../commons/components/app/hooks/useAppUser.js";
+import useMatchers from "../../app/hooks/useMatchers.js";
+import { SocketContext } from "../../app/providers/SocketProvider.js";
+import FlexOne from "../addons/layout/FlexOne.js";
+import useMyApi from "../../hooks/useMyApi.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import { useNavigate } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-router-dom@6.30.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-router-dom/dist/index.js";
+import { sortByTimestamp, compareTimestamp } from "../../../utils/utils.js";
+import Comment from "../Comment.js";
+import HowlerAvatar from "../display/HowlerAvatar.js";
+import TypingIndicator from "../display/TypingIndicator.js";
+const MAX_LENGTH = 5e3;
+const HitComments = ({ hit, users }) => {
+  var _a, _b, _c, _d, _e, _f;
+  const { user } = useAppUser();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { dispatchApi } = useMyApi();
+  const { addListener, removeListener, emit } = useContext(SocketContext);
+  const { getMatchingAnalytic } = useMatchers();
+  const [typers, setTypers] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [showClear, setShowClear] = useState(false);
+  const [length, setLength] = useState(0);
+  const [analyticId, setAnalyticId] = useState();
+  const [analyticComments, setAnalyticComments] = useState([]);
+  const [comments, setComments] = useState(sortByTimestamp((_a = hit == null ? void 0 : hit.howler) == null ? void 0 : _a.comment));
+  const input = useRef();
+  const handler = useMemo(
+    () => (data) => {
+      var _a2, _b2, _c2, _d2, _e2;
+      if (((_a2 = data.event) == null ? void 0 : _a2.action) === "typing" && ((_b2 = data.event) == null ? void 0 : _b2.username) !== user.username && !typers.includes((_c2 = data.event) == null ? void 0 : _c2.username)) {
+        setTypers([...typers, data.event.username]);
+      } else if (((_d2 = data.event) == null ? void 0 : _d2.action) === "stop_typing" && ((_e2 = data.event) == null ? void 0 : _e2.username) !== user.username) {
+        setTypers(typers.filter((typer) => typer !== data.event.username));
+      }
+    },
+    [typers, user.username]
+  );
+  useEffect(() => {
+    addListener("hitComments", handler);
+    return () => removeListener("hitComments");
+  }, [handler]);
+  useEffect(() => {
+    var _a2;
+    if ((_a2 = hit == null ? void 0 : hit.howler) == null ? void 0 : _a2.analytic) {
+      getMatchingAnalytic(hit).then((analytic) => {
+        setAnalyticId(analytic == null ? void 0 : analytic.analytic_id);
+        setAnalyticComments(sortByTimestamp((analytic == null ? void 0 : analytic.comment) ?? []));
+      });
+    }
+  }, [getMatchingAnalytic, (_b = hit == null ? void 0 : hit.howler) == null ? void 0 : _b.analytic]);
+  const onSubmit = useCallback(async () => {
+    var _a2;
+    if (!((_a2 = input.current) == null ? void 0 : _a2.value) || !hit || input.current.value.length > MAX_LENGTH) return;
+    setLoading(true);
+    try {
+      const result = await dispatchApi(api.hit.comments.post(hit.howler.id, input.current.value), {
+        showError: true,
+        throwError: true,
+        logError: false
+      });
+      setComments(sortByTimestamp(result.howler.comment));
+      input.current.value = "";
+      setShowClear(false);
+    } finally {
+      setLoading(false);
+    }
+  }, [dispatchApi, hit]);
+  const onFocus = useCallback(
+    () => {
+      var _a2;
+      return emit({
+        broadcast: true,
+        action: "typing",
+        id: (_a2 = hit == null ? void 0 : hit.howler) == null ? void 0 : _a2.id
+      });
+    },
+    [emit, (_c = hit == null ? void 0 : hit.howler) == null ? void 0 : _c.id]
+  );
+  const onBlur = useCallback(
+    () => {
+      var _a2;
+      return emit({
+        broadcast: true,
+        action: "stop_typing",
+        id: (_a2 = hit == null ? void 0 : hit.howler) == null ? void 0 : _a2.id
+      });
+    },
+    [emit, (_d = hit == null ? void 0 : hit.howler) == null ? void 0 : _d.id]
+  );
+  const onClear = useCallback(() => {
+    input.current.value = "";
+    setShowClear(false);
+  }, []);
+  const checkForSubmit = useCallback(
+    (e) => {
+      var _a2;
+      e.stopPropagation();
+      if ((_a2 = input.current) == null ? void 0 : _a2.value) {
+        setShowClear(true);
+        setLength(input.current.value.length);
+      }
+      if (e.ctrlKey && e.key === "Enter" && !loading) {
+        onSubmit();
+      }
+    },
+    [loading, onSubmit]
+  );
+  const checkLength = useCallback(() => {
+    var _a2;
+    return setLength((_a2 = input.current) == null ? void 0 : _a2.value.length);
+  }, []);
+  const handleDelete = useCallback(
+    async (commentId) => {
+      await dispatchApi(api.hit.comments.del(hit.howler.id, [commentId]), { throwError: true, showError: true });
+      setComments(comments.filter((cmt) => cmt.id !== commentId));
+    },
+    [comments, dispatchApi, (_e = hit == null ? void 0 : hit.howler) == null ? void 0 : _e.id]
+  );
+  const handleEdit = useCallback(
+    async (commentId, editValue) => {
+      await dispatchApi(api.hit.comments.put(hit.howler.id, commentId, editValue), {
+        throwError: true,
+        showError: true
+      });
+      setComments(comments.map((cmt) => cmt.id !== commentId ? cmt : { ...cmt, value: editValue }));
+    },
+    [comments, dispatchApi, (_f = hit == null ? void 0 : hit.howler) == null ? void 0 : _f.id]
+  );
+  const handleQuote = useCallback((value) => {
+    if (input.current) {
+      input.current.value = `${input.current.value.trimStart()}
+
+${value.split("\n").map((l) => "> " + l).join("\n")}
+
+`.trimStart();
+      setTimeout(() => {
+        input.current.focus();
+        input.current.selectionStart = input.current.selectionEnd = input.current.value.length;
+      }, 10);
+    }
+  }, []);
+  const handleReact = useCallback(
+    async (commentId, type) => {
+      if (type) {
+        await dispatchApi(api.hit.comments.react.put(hit.howler.id, commentId, type));
+        setComments(
+          comments.map(
+            (cmt) => cmt.id !== commentId ? cmt : { ...cmt, reactions: { ...(cmt == null ? void 0 : cmt.reactions) ?? {}, [user.username]: type } }
+          )
+        );
+      } else {
+        await dispatchApi(api.hit.comments.react.del(hit.howler.id, commentId));
+        setComments(
+          comments.map(
+            (cmt) => cmt.id !== commentId ? cmt : { ...cmt, reactions: { ...(cmt == null ? void 0 : cmt.reactions) ?? {}, [user.username]: void 0 } }
+          )
+        );
+      }
+    },
+    [comments, dispatchApi, hit == null ? void 0 : hit.howler.id, user.username]
+  );
+  useEffect(() => {
+    var _a2, _b2;
+    if ((_a2 = hit == null ? void 0 : hit.howler) == null ? void 0 : _a2.comment) {
+      setComments((_b2 = hit == null ? void 0 : hit.howler) == null ? void 0 : _b2.comment.slice().sort((a, b) => compareTimestamp(b.timestamp, a.timestamp)));
+    } else if (!hit) {
+      setComments([]);
+    }
+  }, [hit]);
+  const renderedAnalyticComments = useMemo(() => {
+    if (analyticComments.length < 1) {
+      return null;
+    }
+    const displayedComments = analyticComments.filter((c) => !c.detection || c.detection === (hit == null ? void 0 : hit.howler.detection));
+    return /* @__PURE__ */ jsxs(Accordion, { variant: "outlined", children: [
+      /* @__PURE__ */ jsx(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx(KeyboardArrowDown, { fontSize: "small" }), children: /* @__PURE__ */ jsx(Typography, { variant: "body1", children: t("comments.analytic", { count: displayedComments.length }) }) }),
+      /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsx(Stack, { spacing: 1, children: displayedComments.map((c) => {
+        var _a2;
+        return /* @__PURE__ */ jsx(
+          Comment,
+          {
+            comment: c,
+            extra: /* @__PURE__ */ jsx(
+              Chip,
+              {
+                size: "small",
+                variant: "outlined",
+                onClick: () => navigate(
+                  "/analytics" + (analyticId ? `/${analyticId}?tab=comments` + (c.detection ? `&filter=${c.detection}` : "") : "")
+                ),
+                sx: (theme) => ({ marginLeft: "0 !important", mr: `${theme.spacing(2)} !important` }),
+                label: `${((_a2 = hit == null ? void 0 : hit.howler) == null ? void 0 : _a2.analytic) ?? "Analytic"}${c.detection ? " - " + c.detection : ""}`
+              }
+            ),
+            users
+          },
+          c.id
+        );
+      }) }) })
+    ] });
+  }, [analyticComments, analyticId, hit == null ? void 0 : hit.howler.analytic, hit == null ? void 0 : hit.howler.detection, navigate, t, users]);
+  const renderedComments = useMemo(
+    () => comments.map((c) => /* @__PURE__ */ jsx(
+      Comment,
+      {
+        comment: c,
+        users,
+        handleDelete: () => handleDelete(c.id),
+        handleEdit: (value) => handleEdit(c.id, value),
+        handleReact: (type) => handleReact(c.id, type),
+        handleQuote: () => handleQuote(c.value)
+      },
+      c.id
+    )),
+    [comments, handleDelete, handleEdit, handleQuote, handleReact, users]
+  );
+  return /* @__PURE__ */ jsxs(Stack, { sx: { py: 1, pr: 1 }, spacing: 1, children: [
+    hit && renderedAnalyticComments,
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+      /* @__PURE__ */ jsx(HowlerAvatar, { userId: user.username }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          inputProps: { sx: (theme) => ({ fontSize: theme.typography.body2.fontSize }) },
+          InputLabelProps: { shrink: false },
+          placeholder: t("comments.add"),
+          onKeyDown: checkForSubmit,
+          onChangeCapture: checkLength,
+          inputRef: input,
+          onFocus,
+          onBlur,
+          error: length > MAX_LENGTH,
+          fullWidth: true,
+          multiline: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", children: [
+      typers.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(AvatarGroup, { componentsProps: { additionalAvatar: { sx: { height: 24, width: 24, fontSize: "12px" } } }, children: typers.map((typer) => /* @__PURE__ */ jsx(HowlerAvatar, { userId: typer, sx: { height: 24, width: 24 } }, typer)) }),
+        /* @__PURE__ */ jsx(TypingIndicator, {})
+      ] }),
+      /* @__PURE__ */ jsx(FlexOne, {}),
+      length > 0.9 * MAX_LENGTH && /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: [{ opacity: 0.7, mr: 1 }, length > MAX_LENGTH && { color: "error.main" }], children: [
+        length,
+        "/",
+        MAX_LENGTH
+      ] }),
+      showClear && /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onClear, disabled: loading, children: /* @__PURE__ */ jsx(Clear, { fontSize: "small" }) }),
+      /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onSubmit, disabled: loading || length > MAX_LENGTH, children: /* @__PURE__ */ jsx(Send, { fontSize: "small" }) })
+    ] }),
+    hit ? renderedComments : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: 40, height: 40, variant: "circular" }),
+        /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: 40, height: 40, variant: "circular" }),
+        /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 100, variant: "rounded" })
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: 40, height: 40, variant: "circular" }),
+        /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })
+      ] })
+    ] })
+  ] });
+};
+export {
+  HitComments as default
+};

package/components/elements/hit/HitDetails.d.ts

@@ -0,0 +1,5 @@
+import { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+declare const _default: import('react').NamedExoticComponent<{
+    hit: Hit;
+}>;
+export default _default;

package/components/elements/hit/HitDetails.js

@@ -0,0 +1,238 @@
+import { jsxs, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { InfoOutlined, ArrowDropDown } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+icons-material@5.18.0_@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18._b9cf98cd2d466d3b4f338d38bc895c0b/node_modules/@mui/icons-material/esm/index.js";
+import { useTheme, Box, Grid, Tooltip, Stack, Divider, Accordion, AccordionSummary, Typography, AccordionDetails, TextField } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { flatten } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/flat@6.0.1/node_modules/flat/index.js";
+import Fuse from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/fuse.js@7.1.0/node_modules/fuse.js/dist/fuse.mjs";
+import { isObject, uniq, isPlainObject, sortBy, isArray, max, isNull, isUndefined, isEmpty, groupBy, capitalize } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js";
+import { memo, useMemo, useState, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import Throttler from "../../../utils/Throttler.js";
+import PluginTypography from "../PluginTypography.js";
+const ListRenderer = memo(({ objKey: key, entries, maxKeyLength }) => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+  const allPrimitives = useMemo(() => entries.every((entry) => !isObject(entry)), [entries]);
+  const uniqueEntries = useMemo(() => uniq(entries), [entries]);
+  const omittedDuplicates = useMemo(() => uniqueEntries.length !== entries.length, [entries, uniqueEntries]);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: key.replace(/\./g, "_"),
+      display: allPrimitives ? "grid" : "flex",
+      sx: [
+        allPrimitives ? {
+          gridTemplateColumns: "40% 60%"
+        } : {
+          flexDirection: "column"
+        }
+      ],
+      overflow: "hidden",
+      maxWidth: "100%",
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: allPrimitives ? "end" : "start",
+              borderRight: allPrimitives ? "1px solid" : "none",
+              borderColor: theme.palette.divider,
+              pr: 1,
+              mr: 1
+            },
+            children: /* @__PURE__ */ jsx(
+              "code",
+              {
+                style: {
+                  marginTop: allPrimitives ? 0 : theme.spacing(2),
+                  marginBottom: allPrimitives ? 0 : theme.spacing(1)
+                },
+                children: allPrimitives ? key.padStart(maxKeyLength ?? key.length) : key
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(Grid, { container: true, spacing: allPrimitives ? 1 : 4, ml: allPrimitives ? -1 : -4, overflow: "hidden", maxWidth: "100%", children: [
+          uniqueEntries.map((entry, index) => {
+            if (Array.isArray(entry)) {
+              return /* @__PURE__ */ jsx(Grid, { item: true, xs: "auto", maxWidth: "100%", children: /* @__PURE__ */ jsx(ListRenderer, { objKey: `${key}.${index}`, entries: entry }) }, index);
+            }
+            if (isPlainObject(entry)) {
+              return /* @__PURE__ */ jsx(Grid, { item: true, xs: "auto", maxWidth: "100%", minWidth: "350px", children: /* @__PURE__ */ jsx(ObjectRenderer, { parentKey: `${key}.${index}`, indent: true, data: entry }) }, index);
+            }
+            return /* @__PURE__ */ jsxs(
+              Grid,
+              {
+                item: true,
+                maxWidth: "100%",
+                className: `${key}_${index}`.replace(/\./g, "_"),
+                component: "code",
+                display: "flex",
+                flexDirection: "row",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    PluginTypography,
+                    {
+                      context: "details",
+                      component: "code",
+                      style: { maxWidth: "100%", font: "inherit" },
+                      value: entry,
+                      field: key.replace(/\.[0-9]+/g, ""),
+                      children: entry
+                    }
+                  ),
+                  allPrimitives && index < uniqueEntries.length - 1 && /* @__PURE__ */ jsx("span", { children: "," })
+                ]
+              },
+              entry
+            );
+          }),
+          omittedDuplicates && /* @__PURE__ */ jsx(Grid, { item: true, display: "flex", alignItems: "center", children: /* @__PURE__ */ jsx(Tooltip, { title: t("duplicates.omitted"), children: /* @__PURE__ */ jsx(InfoOutlined, { sx: { fontSize: "20px", ml: 1 }, color: "disabled" }) }) })
+        ] })
+      ]
+    }
+  );
+});
+const ObjectRenderer = memo(
+  ({ data, parentKey, indent = false }) => {
+    const theme = useTheme();
+    const entries = useMemo(() => {
+      const unsorted = Object.entries(flatten(data, { safe: true })).map(([key, val]) => [key, val]);
+      const sortedAlphabetical = unsorted.map(([key]) => key).sort();
+      return sortBy(
+        unsorted,
+        ([key, val]) => sortedAlphabetical.indexOf(key) - // This pushes complex objects to the bottom of the list, so they are always rendered last.
+        // We check for if the value is a primitve, or if it's an array and every entry is a primitive.
+        (!isObject(val) || isArray(val) && val.every((entry) => !isObject(entry)) ? 1e4 : 0)
+      );
+    }, [data]);
+    const longestKey = useMemo(() => max(entries.map(([key]) => key.length)), [entries]);
+    return /* @__PURE__ */ jsxs(Stack, { direction: "row", overflow: "hidden", maxWidth: "100%", children: [
+      indent && /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: "primary.main", borderWidth: "2px" } }),
+      /* @__PURE__ */ jsx(Stack, { flex: 1, ml: 1, maxWidth: "100%", children: entries.filter(([__, val]) => !isNull(val) && !isUndefined(val) && !isEmpty(val)).map(([key, val]) => {
+        if (Array.isArray(val)) {
+          return /* @__PURE__ */ jsx(ListRenderer, { maxKeyLength: longestKey, objKey: key, entries: val }, key);
+        }
+        return /* @__PURE__ */ jsxs(
+          "code",
+          {
+            className: (parentKey ? `${parentKey}.${key}` : key).replace(/\./g, "_"),
+            style: {
+              display: "grid",
+              gridTemplateColumns: "40% 60%",
+              alignItems: "start",
+              maxWidth: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  display: "flex",
+                  justifyContent: "end",
+                  sx: {
+                    marginRight: theme.spacing(1),
+                    marginBottom: 0,
+                    marginTop: 0,
+                    borderRight: "1px solid",
+                    borderColor: theme.palette.divider,
+                    paddingRight: theme.spacing(1),
+                    height: "100%",
+                    wordWrap: "break-word"
+                  },
+                  children: /* @__PURE__ */ jsx("code", { style: { maxWidth: "100%" }, children: key })
+                }
+              ),
+              /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "start", children: /* @__PURE__ */ jsx(
+                PluginTypography,
+                {
+                  context: "details",
+                  component: "code",
+                  style: { maxWidth: "100%", font: "inherit" },
+                  value: val,
+                  field: (parentKey ? parentKey.concat(".", key) : key).replace(/\.[0-9]+/g, ""),
+                  children: val
+                }
+              ) })
+            ]
+          },
+          key
+        );
+      }) })
+    ] });
+  }
+);
+const Collapsible = memo(
+  ({ title, data, query }) => {
+    const throttler = useMemo(() => new Throttler(400), []);
+    const [scores, setScores] = useState([]);
+    const [results, setResults] = useState({});
+    const options = useMemo(() => Object.entries(data).map(([key, value]) => ({ key, value })), [data]);
+    const keys = useMemo(
+      () => options.flatMap((option) => isArray(option.value) ? Object.keys(flatten(option.value)) : []).map((key) => key.replace(/\d+/g, "value")).filter((key) => !!key),
+      [options]
+    );
+    const fuse = useMemo(
+      () => new Fuse(options, { includeScore: true, threshold: 0.4, keys: uniq(["key", "value", ...keys]) }),
+      [keys, options]
+    );
+    useEffect(() => {
+      if (!query) {
+        setResults(data);
+        setScores([]);
+        return;
+      }
+      throttler.debounce(() => {
+        const fuseResults = fuse.search(query);
+        setScores(fuseResults.map((result) => [result.item.key, result.score]));
+        setResults(fuseResults.reduce((acc, entry) => ({ ...acc, [entry.item.key]: entry.item.value }), {}));
+      });
+    }, [data, fuse, query, throttler]);
+    const styles = useMemo(
+      () => scores.map(([key, score]) => ({
+        [`& .${key.replace(/\./g, "_")}`]: {
+          opacity: 1 - Math.pow(score, 0.5),
+          fontWeight: score < 0.05 ? "bold" : "initial"
+        }
+      })),
+      [scores]
+    );
+    if (isEmpty(results)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(Accordion, { defaultExpanded: true, children: [
+      /* @__PURE__ */ jsx(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx(ArrowDropDown, {}), children: /* @__PURE__ */ jsx(Typography, { children: title }) }),
+      /* @__PURE__ */ jsx(AccordionDetails, { children: /* @__PURE__ */ jsx(Stack, { spacing: 1, justifyContent: "stretch", sx: styles, children: /* @__PURE__ */ jsx(ObjectRenderer, { showParentKey: true, data: results }) }) })
+    ] });
+  }
+);
+const HitDetails = ({ hit }) => {
+  const { t } = useTranslation();
+  const [query, setQuery] = useState("");
+  const groups = useMemo(
+    () => groupBy(
+      Object.entries(flatten(hit ?? {}, { safe: true })).filter(
+        ([key, value]) => key.includes(".") && ["howler", "labels"].every((prefix) => !key.startsWith(prefix)) && !isEmpty(value)
+      ),
+      ([key]) => key.split(".")[0]
+    ),
+    [hit]
+  );
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+    /* @__PURE__ */ jsx(TextField, { value: query, onChange: (event) => setQuery(event.target.value), label: t("overview.search") }),
+    Object.entries(groups).map(([section, entries]) => {
+      return /* @__PURE__ */ jsx(
+        Collapsible,
+        {
+          query,
+          title: section.split("_").map((word) => capitalize(word)).join(" "),
+          data: Object.fromEntries(entries)
+        },
+        section
+      );
+    })
+  ] });
+};
+const HitDetails$1 = memo(HitDetails);
+export {
+  HitDetails$1 as default
+};

package/components/elements/hit/HitLabels.d.ts

@@ -0,0 +1,6 @@
+import { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+declare const _default: import('react').NamedExoticComponent<{
+    hit: Hit;
+    readOnly?: boolean;
+}>;
+export default _default;