@cccsaurora/clue-ui 0.15.0 → 1.0.0-dev.49

package/components/display/markdown/markdownPlugins/tabs.d.ts

@@ -0,0 +1,3 @@
+import type * as mdast from 'mdast';
+import type * as unified from 'unified';
+export declare const codeTabs: unified.Plugin<[], mdast.Root>;

package/components/display/markdown/markdownPlugins/tabs.js

@@ -0,0 +1,4 @@
+import { c } from "../../../../tabs-xGuUGsJd.js";
+export {
+  c as codeTabs
+};

package/components/enrichment/EnrichPopover.d.ts

@@ -0,0 +1,10 @@
+import { Selector } from "../../types/lookup";
+import { FC } from 'react';
+
+declare const EnrichPopover: FC<{
+    size?: 'small' | 'medium';
+    show?: boolean;
+    multiples?: boolean;
+    selector: Selector;
+}>;
+export default EnrichPopover;

package/components/enrichment/EnrichPopover.js

@@ -0,0 +1,88 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useTheme, Tooltip, IconButton, CircularProgress, Button, Popover, Paper, Stack, Box, Typography, Divider } from "@mui/material";
+import { useClueComponentSelector, useClueEnrichSelector } from "../../hooks/selectors.js";
+import { useState, useRef, useCallback, useEffect } from "react";
+import Iconified from "../display/icons/Iconified.js";
+import { c as capitalize } from "../../ActionForm-c5hLIfQ-.js";
+const EnrichPopover = ({ show = false, size = "small", selector }) => {
+  const { t } = useClueComponentSelector((ctx) => ctx.i18next);
+  const theme = useTheme();
+  const availableSources = useClueEnrichSelector((ctx) => ctx.availableSources);
+  const _enrich = useClueEnrichSelector((ctx) => ctx.enrich);
+  const [showEnrichMenu, setShowEnrichMenu] = useState(show);
+  const [loading, setLoading] = useState(false);
+  const enrichEl = useRef(null);
+  const enrich = useCallback(
+    async (_source) => {
+      setLoading(true);
+      try {
+        await _enrich(selector.type, selector.value, {
+          classification: selector.classification,
+          timeout: 30,
+          force: true,
+          noCache: true,
+          sources: [_source],
+          append: true
+        });
+      } finally {
+        setLoading(false);
+      }
+    },
+    [_enrich, selector.classification, selector.type, selector.value]
+  );
+  useEffect(() => {
+    setShowEnrichMenu(show);
+  }, [show]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    size === "small" ? /* @__PURE__ */ jsx(Tooltip, { ref: enrichEl, title: t("enrich"), children: /* @__PURE__ */ jsx("span", { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: () => setShowEnrichMenu(true),
+        disabled: Object.keys(availableSources).length < 1 || loading,
+        color: "info",
+        children: loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "info", size: "24px" }) : /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-auto-fix-high" })
+      }
+    ) }) }) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: enrichEl,
+        variant: "outlined",
+        color: "info",
+        disabled: Object.keys(availableSources).length < 1 || loading,
+        startIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "info", size: "20px" }) : /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-auto-fix-high" }),
+        sx: { alignSelf: "stretch" },
+        onClick: () => setShowEnrichMenu(true),
+        children: t("enrich")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        sx: { zIndex: 2e3 },
+        open: showEnrichMenu,
+        disablePortal: true,
+        onClose: () => setShowEnrichMenu(false),
+        anchorEl: enrichEl.current,
+        anchorOrigin: { horizontal: "left", vertical: "bottom" },
+        children: /* @__PURE__ */ jsx(Paper, { onClick: () => setShowEnrichMenu(false), children: /* @__PURE__ */ jsx(Stack, { divider: /* @__PURE__ */ jsx(Divider, { flexItem: true, orientation: "horizontal" }), children: availableSources.map((_source) => /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              px: 3,
+              py: 1,
+              cursor: "pointer",
+              transition: theme.transitions.create("background-color"),
+              "&:hover": { backgroundColor: theme.palette.background.default }
+            },
+            onClick: () => enrich(_source),
+            children: /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "body1", children: _source.split("-").map(capitalize).join(" ") }) }) })
+          },
+          _source
+        )) }) })
+      }
+    )
+  ] });
+};
+export {
+  EnrichPopover as default
+};

package/components/fetchers/Fetcher.d.ts

@@ -0,0 +1,17 @@
+import { ChipProps, ModalProps, PaperProps, SkeletonProps, StackProps } from '@mui/material';
+import { Selector } from "../../types/lookup";
+import { default as React } from 'react';
+
+export interface FetcherProps extends Selector {
+    fetcherId: string;
+    slotProps?: {
+        paper?: PaperProps;
+        preview?: ModalProps;
+        stack?: StackProps;
+        image?: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
+        chip?: ChipProps;
+        skeleton?: SkeletonProps;
+    };
+}
+declare const _default: React.NamedExoticComponent<FetcherProps>;
+export default _default;

package/components/fetchers/Fetcher.js

@@ -0,0 +1,188 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { I as Icon } from "../../iconify-CXMreGTg.js";
+import { useTheme, Skeleton, Chip, Tooltip, Paper, Stack, Box, IconButton } from "@mui/material";
+import { F as FlexOne } from "../../FlexOne-BSYAhhtG.js";
+import Iconified from "../display/icons/Iconified.js";
+import { J as JSONViewer } from "../../index-BDrtH5ec.js";
+import { ClueComponentContext } from "../../hooks/ClueComponentContext.js";
+import { useClueFetcherSelector } from "../../hooks/selectors.js";
+import React__default, { useState, useEffect, memo } from "react";
+import { u as useContextSelector } from "../../index-BDVjGvMI.js";
+import Graph from "../display/graph/index.js";
+import Markdown from "../display/markdown/index.js";
+import PreviewModal from "./PreviewModal.js";
+import StatusChip from "./StatusChip.js";
+const Fetcher = React__default.memo(
+  ({
+    type,
+    value,
+    classification,
+    fetcherId,
+    slotProps: {
+      paper: paperProps = {},
+      preview: previewProps = {},
+      stack: stackProps = {},
+      image: imageProps = {},
+      chip: chipProps = {},
+      skeleton: skeletonProps = {}
+    } = {}
+  }) => {
+    var _a;
+    const theme = useTheme();
+    const fetchers = useClueFetcherSelector((ctx) => ctx.fetchers);
+    const fetchSelector = useClueFetcherSelector((ctx) => ctx.fetchSelector);
+    const fetchCompleted = useClueFetcherSelector((ctx) => ctx.fetchCompleted);
+    const { t } = useContextSelector(ClueComponentContext, (ctx) => ctx == null ? void 0 : ctx.i18next);
+    const [result, setResult] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [showPreview, setShowPreview] = useState(false);
+    useEffect(() => {
+      (async () => {
+        try {
+          setLoading(true);
+          setResult(await fetchSelector(fetcherId, { type, value, classification }));
+        } finally {
+          setLoading(false);
+        }
+      })();
+    }, [classification, fetchSelector, fetcherId, type, value]);
+    if (fetchCompleted) {
+      if (!fetcherId) {
+        console.warn("Missing fetcher Id. Component will not render.");
+        return null;
+      } else if (!fetcherId.includes(".")) {
+        console.warn(
+          "Invalid fetcher id. Must be in the format '<plugin_id>.<fetcher_id>'. Component will not render."
+        );
+        return null;
+      } else if (!(fetcherId in fetchers)) {
+        console.warn("Fetcher ID does not correspond to a registered fetcher. Component will not render.");
+        return null;
+      }
+    } else {
+      return null;
+    }
+    if (loading) {
+      if (((_a = fetchers[fetcherId]) == null ? void 0 : _a.format) === "status") {
+        return /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rounded",
+            height: "32px",
+            width: "150px",
+            ...skeletonProps,
+            sx: [
+              { borderRadius: "16px" },
+              ...Array.isArray(skeletonProps == null ? void 0 : skeletonProps.sx) ? skeletonProps == null ? void 0 : skeletonProps.sx : [skeletonProps == null ? void 0 : skeletonProps.sx]
+            ]
+          }
+        );
+      } else {
+        return /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", height: "325px", width: "300px", ...skeletonProps });
+      }
+    }
+    if ((result == null ? void 0 : result.outcome) === "failure" && fetchers[fetcherId].format === "status") {
+      return /* @__PURE__ */ jsx(
+        Chip,
+        {
+          icon: /* @__PURE__ */ jsx(Tooltip, { title: result.error, children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:information-outline", fontSize: "1.25rem" }) }),
+          label: t("error"),
+          color: "error",
+          ...chipProps
+        }
+      );
+    }
+    if ((result == null ? void 0 : result.format) === "status") {
+      return /* @__PURE__ */ jsx(StatusChip, { data: result.data, ...chipProps });
+    }
+    return /* @__PURE__ */ jsx(
+      Paper,
+      {
+        ...paperProps,
+        sx: [
+          {
+            p: 1,
+            overflow: "hidden",
+            flex: 1,
+            width: "100%",
+            minWidth: "300px"
+          },
+          ...Array.isArray(paperProps == null ? void 0 : paperProps.sx) ? paperProps == null ? void 0 : paperProps.sx : [paperProps == null ? void 0 : paperProps.sx]
+        ],
+        children: /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            sx: {
+              "& > img": {
+                borderRadius: "3px",
+                cursor: "zoom-in",
+                transition: theme.transitions.create("border-color", { duration: theme.transitions.duration.shortest }),
+                border: "3px solid transparent",
+                "&:hover": {
+                  borderColor: "primary.main"
+                }
+              }
+            },
+            children: [
+              (result == null ? void 0 : result.outcome) === "failure" && /* @__PURE__ */ jsx("code", { style: { color: theme.palette.error.main }, children: /* @__PURE__ */ jsx("pre", { style: { marginTop: 0, marginBottom: 0 }, children: result.error }) }),
+              (result == null ? void 0 : result.format) === "markdown" && /* @__PURE__ */ jsx(Markdown, { md: result.data }),
+              (result == null ? void 0 : result.format) === "image" && /* @__PURE__ */ jsx("img", { src: result.data.image, alt: result.data.alt, ...imageProps, onClick: () => setShowPreview(true) }),
+              (result == null ? void 0 : result.format) === "json" && /* @__PURE__ */ jsx(Box, { sx: { ".react-json-view": { backgroundColor: "transparent !important" } }, children: /* @__PURE__ */ jsx(JSONViewer, { data: result.data }) }),
+              (result == null ? void 0 : result.format) === "graph" && /* @__PURE__ */ jsx(Graph, { graph: result.data, sx: { minHeight: "600px" } }),
+              /* @__PURE__ */ jsx(FlexOne, {}),
+              /* @__PURE__ */ jsxs(
+                Stack,
+                {
+                  direction: "row",
+                  spacing: 1,
+                  ...stackProps,
+                  sx: [
+                    {
+                      py: theme.spacing(0.5),
+                      display: "flex",
+                      alignItems: "center"
+                    },
+                    ...Array.isArray(stackProps == null ? void 0 : stackProps.sx) ? stackProps == null ? void 0 : stackProps.sx : [stackProps == null ? void 0 : stackProps.sx]
+                  ],
+                  children: [
+                    /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-landscape", color: "primary", fontSize: "small" }),
+                    /* @__PURE__ */ jsx(
+                      Tooltip,
+                      {
+                        title: /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, children: [
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            t("type"),
+                            ": ",
+                            type
+                          ] }),
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            t("value"),
+                            ": ",
+                            value
+                          ] }),
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            t("classification"),
+                            ": ",
+                            classification ?? "N/A"
+                          ] })
+                        ] }),
+                        children: /* @__PURE__ */ jsx(Iconified, { icon: "ic:outline-info", fontSize: "small" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(FlexOne, {}),
+                    (result == null ? void 0 : result.link) && /* @__PURE__ */ jsx(IconButton, { size: "small", component: "a", href: result.link, children: /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-open-in-new", fontSize: "small" }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(PreviewModal, { ...previewProps, open: showPreview, result, onClose: () => setShowPreview(false) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+const Fetcher$1 = memo(Fetcher);
+export {
+  Fetcher$1 as default
+};

package/components/fetchers/PreviewModal.d.ts

@@ -0,0 +1,8 @@
+import { ModalProps } from '@mui/material';
+import { FetcherResult } from "../../types/fetcher";
+
+declare const _default: import('react').NamedExoticComponent<{
+    result: FetcherResult;
+    onClose?: () => void;
+} & Omit<ModalProps, "children">>;
+export default _default;

package/components/fetchers/PreviewModal.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { Modal, Paper } from "@mui/material";
+import { memo } from "react";
+const PreviewModal = ({ result, onClose, open = false, ...otherProps }) => {
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open,
+      sx: [
+        { display: "flex", alignItems: "center", justifyContent: "center" },
+        ...Array.isArray(otherProps == null ? void 0 : otherProps.sx) ? otherProps == null ? void 0 : otherProps.sx : [otherProps == null ? void 0 : otherProps.sx]
+      ],
+      onClose,
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(Paper, { sx: { maxHeight: "90%", maxWidth: "90%", p: 2, overflow: "auto" }, children: (result == null ? void 0 : result.format) === "image" && /* @__PURE__ */ jsx("img", { src: result.data.image, alt: result.data.alt, style: { maxWidth: "100%" } }) })
+    }
+  );
+};
+const PreviewModal$1 = memo(PreviewModal);
+export {
+  PreviewModal$1 as default
+};

package/components/fetchers/StatusChip.d.ts

@@ -0,0 +1,8 @@
+import { ChipProps } from '@mui/material';
+import { FetcherStatusResult } from "../../types/fetcher";
+import { FC } from 'react';
+
+declare const StatusChip: FC<ChipProps & {
+    data: FetcherStatusResult['data'];
+}>;
+export default StatusChip;

package/components/fetchers/StatusChip.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { I as Icon } from "../../iconify-CXMreGTg.js";
+import { useTheme, Chip } from "@mui/material";
+import { ClueComponentContext } from "../../hooks/ClueComponentContext.js";
+import { u as useContextSelector } from "../../index-BDVjGvMI.js";
+const StatusChip = ({ data, ...chipProps }) => {
+  var _a;
+  const theme = useTheme();
+  const { i18n, t } = useContextSelector(ClueComponentContext, (ctx) => ctx.i18next);
+  if (data == null ? void 0 : data.empty) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      icon: data.icon && /* @__PURE__ */ jsx(Icon, { icon: data.icon, fontSize: "1.25rem" }),
+      deleteIcon: /* @__PURE__ */ jsx("a", { href: data.link, rel: "noreferrer", target: "_blank", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:open-in-new", color: theme.palette.text.primary, fontSize: "1.25rem" }) }),
+      ...chipProps,
+      onDelete: data.link ? () => console.log("Navigating to %s", data.link) : null,
+      label: ((_a = data.labels.find((label) => label.language === i18n.language) ?? data.labels[0]) == null ? void 0 : _a.label) ?? t("unknown"),
+      sx: [
+        ...Array.isArray(chipProps == null ? void 0 : chipProps.sx) ? chipProps == null ? void 0 : chipProps.sx : [chipProps == null ? void 0 : chipProps.sx],
+        data.color && { backgroundColor: data.color }
+      ]
+    }
+  );
+};
+export {
+  StatusChip as default
+};

package/components/group/Entry.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+
+interface ClueEntryProps {
+    entry: any;
+    selected?: boolean;
+}
+declare const _default: import('react').NamedExoticComponent<PropsWithChildren<ClueEntryProps>>;
+export default _default;

package/components/group/Entry.js

@@ -0,0 +1,15 @@
+import { ClueGroupContext } from "../../hooks/ClueGroupContext.js";
+import { memo, useEffect } from "react";
+import { u as useContextSelector } from "../../index-BDVjGvMI.js";
+import { i as isEqual } from "../../utils-CxIhC2xH.js";
+const Entry = ({ children, entry, selected = false }) => {
+  const setValues = useContextSelector(ClueGroupContext, (ctx) => ctx == null ? void 0 : ctx.setValues);
+  useEffect(() => {
+    setValues == null ? void 0 : setValues((_values) => [..._values.filter((value) => !isEqual(value, entry)), ...selected ? [entry] : []]);
+  }, [entry, selected, setValues]);
+  return children;
+};
+const Entry$1 = memo(Entry);
+export {
+  Entry$1 as default
+};

package/components/group/Group.d.ts

@@ -0,0 +1,12 @@
+import { StackProps } from '@mui/material';
+import { ClueGroupContextProps } from "../../hooks/ClueGroupContext";
+import { PropsWithChildren } from 'react';
+
+interface ClueGroupProps extends ClueGroupContextProps {
+    showHeader?: boolean;
+    slotProps?: {
+        stack?: StackProps;
+    };
+}
+declare const _default: import('react').NamedExoticComponent<PropsWithChildren<ClueGroupProps>>;
+export default _default;

package/components/group/Group.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Stack } from "@mui/material";
+import { ClueGroupProvider } from "../../hooks/ClueGroupContext.js";
+import { memo } from "react";
+import GroupControl from "./GroupControl.js";
+const Group = ({ children, showHeader = true, slotProps, ...groupProps }) => {
+  return /* @__PURE__ */ jsx(ClueGroupProvider, { ...groupProps, children: showHeader ? /* @__PURE__ */ jsxs(Stack, { direction: "column", alignSelf: "stretch", ...(slotProps == null ? void 0 : slotProps.stack) ?? {}, children: [
+    /* @__PURE__ */ jsx(GroupControl, {}),
+    children
+  ] }) : children });
+};
+const Group$1 = memo(Group);
+export {
+  Group$1 as default
+};

package/components/group/GroupControl.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+
+declare const GroupControl: FC;
+export default GroupControl;

package/components/group/GroupControl.js

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card, Stack, Box, Typography, Autocomplete, TextField, Button, CircularProgress } from "@mui/material";
+import { F as FlexOne } from "../../FlexOne-BSYAhhtG.js";
+import Iconified from "../display/icons/Iconified.js";
+import { SNACKBAR_EVENT_ID } from "../../data/event.js";
+import { ClueGroupContext } from "../../hooks/ClueGroupContext.js";
+import { useClueComponentSelector, useClueEnrichSelector } from "../../hooks/selectors.js";
+import { safeDispatchEvent } from "../../utils/window.js";
+import { useState, useMemo, useCallback } from "react";
+import { u as useContextSelector } from "../../index-BDVjGvMI.js";
+import ExecutePopover from "../actions/ExecutePopover.js";
+import { c as capitalize } from "../../ActionForm-c5hLIfQ-.js";
+const GroupControl = () => {
+  const { t } = useClueComponentSelector((ctx) => ctx.i18next);
+  const { type, values, classification } = useContextSelector(ClueGroupContext, (ctx) => ({
+    type: ctx == null ? void 0 : ctx.type,
+    values: ctx == null ? void 0 : ctx.values,
+    classification: ctx == null ? void 0 : ctx.classification
+  }));
+  const sources = useClueEnrichSelector((ctx) => ctx.availableSources);
+  const enrich = useClueEnrichSelector((ctx) => ctx.bulkEnrich);
+  const [loading, setLoading] = useState(false);
+  const [selectedSources, setSelectedSources] = useState([]);
+  const fullValues = useMemo(
+    () => (values ?? []).map((value) => ({ value, type, classification })),
+    [classification, type, values]
+  );
+  const runEnrichment = useCallback(async () => {
+    if (loading) {
+      return;
+    }
+    try {
+      setLoading(true);
+      await enrich(
+        (values ?? []).map((value) => ({ type, value })),
+        { force: true, sources: selectedSources }
+      );
+    } catch (e) {
+      console.error(e);
+      safeDispatchEvent(
+        new CustomEvent(SNACKBAR_EVENT_ID, {
+          detail: {
+            message: e.toString(),
+            level: "error"
+          }
+        })
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [enrich, loading, selectedSources, type, values]);
+  return /* @__PURE__ */ jsx(Card, { sx: { p: 1 }, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: (theme) => ({
+          border: "thin solid",
+          alignSelf: "stretch",
+          display: "flex",
+          alignItems: "center",
+          px: 1,
+          borderRadius: "5px",
+          borderColor: theme.palette.divider
+        }),
+        children: /* @__PURE__ */ jsxs(Typography, { color: "text.secondary", children: [
+          (values == null ? void 0 : values.length) ?? 0,
+          " selected"
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(FlexOne, {}),
+    /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        size: "small",
+        multiple: true,
+        options: sources,
+        sx: { minWidth: "400px" },
+        renderInput: (params) => /* @__PURE__ */ jsx(TextField, { size: "small", placeholder: t("sources"), ...params }),
+        value: selectedSources,
+        onChange: (__, value) => setSelectedSources(value),
+        disableCloseOnSelect: true,
+        getOptionLabel: (opt) => opt.split(/[_-]/).map((word) => capitalize(word)).join(" ")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outlined",
+        color: "info",
+        disabled: (values == null ? void 0 : values.length) < 1 || loading,
+        startIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "info", size: "20px" }) : /* @__PURE__ */ jsx(Iconified, { icon: "ic:outline-play-arrow" }),
+        sx: { alignSelf: "stretch" },
+        onClick: runEnrichment,
+        children: t("enrich")
+      }
+    ),
+    /* @__PURE__ */ jsx(ExecutePopover, { selectors: fullValues, size: "medium", multiples: true })
+  ] }) });
+};
+export {
+  GroupControl as default
+};

package/components/stats/QueryStatus.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+
+declare const QueryStatus: FC;
+export default QueryStatus;

package/components/stats/QueryStatus.js

@@ -0,0 +1,61 @@
+import { jsxs } from "react/jsx-runtime";
+import { Stack, Typography } from "@mui/material";
+import { ClueDatabaseContext } from "../../hooks/ClueDatabaseContext.js";
+import { useClueEnrichSelector } from "../../hooks/selectors.js";
+import { useContext, useState, useEffect } from "react";
+const QueryStatus = () => {
+  const database = useContext(ClueDatabaseContext);
+  const ready = useClueEnrichSelector((ctx) => ctx.ready);
+  const [pendingCount, setPendingCount] = useState(0);
+  const [inProgressCount, setInProgressCount] = useState(0);
+  const [completeCount, setCompleteCount] = useState(0);
+  useEffect(() => {
+    if (!ready) {
+      return;
+    }
+    const observables = [
+      database.status.count({ selector: { status: "pending" } }).$.subscribe(setPendingCount),
+      database.status.count({ selector: { status: "in-progress" } }).$.subscribe(setInProgressCount),
+      database.status.count({ selector: { status: "complete" } }).$.subscribe(setCompleteCount)
+    ];
+    return () => {
+      try {
+        observables.forEach((_observable) => _observable.unsubscribe());
+      } catch (e) {
+        console.warn(e);
+      }
+    };
+  }, [database, ready]);
+  if (pendingCount + inProgressCount + completeCount < 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      spacing: 1,
+      sx: (theme) => ({
+        border: `thin solid ${theme.palette.divider}`,
+        borderRadius: theme.spacing(0.5),
+        mx: 1,
+        p: 1
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(Typography, { sx: { fontFamily: "monospace" }, children: [
+          "Pending: ",
+          pendingCount
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { sx: { fontFamily: "monospace" }, children: [
+          "In Progress: ",
+          inProgressCount
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { sx: { fontFamily: "monospace" }, children: [
+          "Complete: ",
+          completeCount
+        ] })
+      ]
+    }
+  );
+};
+export {
+  QueryStatus as default
+};

package/countBy-C69WslUA.js

@@ -0,0 +1,14 @@
+import { b as baseAssignValue } from "./_baseAssignValue-CNbcU6Nb.js";
+import { c as createAggregator } from "./_createAggregator-BpVy5xMi.js";
+var objectProto = Object.prototype;
+var hasOwnProperty = objectProto.hasOwnProperty;
+var countBy = createAggregator(function(result, value, key) {
+  if (hasOwnProperty.call(result, key)) {
+    ++result[key];
+  } else {
+    baseAssignValue(result, key, 1);
+  }
+});
+export {
+  countBy as c
+};

package/data/event.d.ts

@@ -0,0 +1,12 @@
+import { OptionsObject } from 'notistack';
+import { ReactNode } from 'react';
+
+export declare const SNACKBAR_EVENT_ID = "snackbar.message";
+export declare const SHOW_EVENT_ID = "clue.showPopup";
+export declare const HIDE_EVENT_ID = "clue.hidePopup";
+export type SnackbarEvents = {
+    message: ReactNode;
+    level: 'success' | 'error' | 'info' | 'warning';
+    timeout?: number;
+    options?: OptionsObject;
+};

package/data/event.js

@@ -0,0 +1,8 @@
+const SNACKBAR_EVENT_ID = "snackbar.message";
+const SHOW_EVENT_ID = "clue.showPopup";
+const HIDE_EVENT_ID = "clue.hidePopup";
+export {
+  HIDE_EVENT_ID,
+  SHOW_EVENT_ID,
+  SNACKBAR_EVENT_ID
+};