@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.272

package/components/elements/hit/HitDetails.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { ArrowDropDown, InfoOutlined } from '@mui/icons-material';
+import { Accordion, AccordionDetails, AccordionSummary, Box, Divider, Grid, Stack, TextField, Tooltip, Typography, useTheme } from '@mui/material';
+import { flatten } from 'flat';
+import Fuse from 'fuse.js';
+import { capitalize, groupBy, isArray, isEmpty, isNull, isObject, isPlainObject, isUndefined, max, sortBy, uniq } from 'lodash-es';
+import { memo, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
+import PluginTypography from '../PluginTypography';
+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 (_jsxs(Box, { className: key.replace(/\./g, '_'), display: allPrimitives ? 'grid' : 'flex', sx: [
+            allPrimitives
+                ? {
+                    gridTemplateColumns: '40% 60%'
+                }
+                : {
+                    flexDirection: 'column'
+                }
+        ], overflow: "hidden", maxWidth: "100%", children: [_jsx(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: allPrimitives ? 'end' : 'start',
+                    borderRight: allPrimitives ? '1px solid' : 'none',
+                    borderColor: theme.palette.divider,
+                    pr: 1,
+                    mr: 1
+                }, children: _jsx("code", { style: {
+                        marginTop: allPrimitives ? 0 : theme.spacing(2),
+                        marginBottom: allPrimitives ? 0 : theme.spacing(1)
+                    }, children: allPrimitives ? key.padStart(maxKeyLength ?? key.length) : key }) }), _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 (_jsx(Grid, { item: true, xs: "auto", maxWidth: "100%", children: _jsx(ListRenderer, { objKey: `${key}.${index}`, entries: entry }) }, index));
+                        }
+                        if (isPlainObject(entry)) {
+                            return (_jsx(Grid, { item: true, xs: 'auto', maxWidth: "100%", minWidth: "350px", children: _jsx(ObjectRenderer, { parentKey: `${key}.${index}`, indent: true, data: entry }) }, index));
+                        }
+                        return (_jsxs(Grid, { item: true, maxWidth: "100%", className: `${key}_${index}`.replace(/\./g, '_'), component: "code", display: "flex", flexDirection: "row", children: [_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 && _jsx("span", { children: "," })] }, entry));
+                    }), omittedDuplicates && (_jsx(Grid, { item: true, display: "flex", alignItems: "center", children: _jsx(Tooltip, { title: t('duplicates.omitted'), children: _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))) ? 10000 : 0));
+    }, [data]);
+    const longestKey = useMemo(() => max(entries.map(([key]) => key.length)), [entries]);
+    return (_jsxs(Stack, { direction: "row", overflow: "hidden", maxWidth: "100%", children: [indent && _jsx(Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: 'primary.main', borderWidth: '2px' } }), _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 _jsx(ListRenderer, { maxKeyLength: longestKey, objKey: key, entries: val }, key);
+                    }
+                    return (_jsxs("code", { className: (parentKey ? `${parentKey}.${key}` : key).replace(/\./g, '_'), style: {
+                            display: 'grid',
+                            gridTemplateColumns: '40% 60%',
+                            alignItems: 'start',
+                            maxWidth: '100%'
+                        }, children: [_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: _jsx("code", { style: { maxWidth: '100%' }, children: key }) }), _jsx(Box, { display: "flex", alignItems: "start", children: _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 (_jsxs(Accordion, { defaultExpanded: true, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ArrowDropDown, {}), children: _jsx(Typography, { children: title }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 1, justifyContent: "stretch", sx: styles, children: _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 (_jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { value: query, onChange: event => setQuery(event.target.value), label: t('overview.search') }), Object.entries(groups).map(([section, entries]) => {
+                return (_jsx(Collapsible, { query: query, title: section
+                        .split('_')
+                        .map(word => capitalize(word))
+                        .join(' '), data: Object.fromEntries(entries) }, section));
+            })] }));
+};
+export default memo(HitDetails);

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

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

package/components/elements/hit/HitLabels.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Add, Check, Edit } from '@mui/icons-material';
+import { Backdrop, Box, Button, Chip, CircularProgress, Drawer, FormControl, FormHelperText, IconButton, InputAdornment, InputLabel, ListItemIcon, ListItemText, MenuItem, Select, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+import { LABEL_TYPES } from '@cccsaurora/howler-ui/utils/constants';
+const NewLabelForm = ({ handleSubmit }) => {
+    const { t } = useTranslation();
+    const [label, setLabel] = useState('');
+    const [category, setCategory] = useState('generic');
+    const [error, setError] = useState('');
+    const handleAdd = async () => {
+        if (!label) {
+            setError(t('hit.label.edit.add.error.empty'));
+        }
+        else {
+            try {
+                await handleSubmit({ label: label, category: category });
+                setLabel('');
+            }
+            catch (e) {
+                setError(e.message);
+            }
+        }
+    };
+    return (_jsxs(Stack, { spacing: 1, direction: "column", children: [_jsxs(FormControl, { children: [_jsx(InputLabel, { id: "type-label", htmlFor: "label-category", size: "small", children: t('hit.label.edit.add.category') }), _jsx(Select, { size: "small", sx: {
+                            '#label-category': { display: 'flex', flexDirection: 'row', alignItems: 'center' },
+                            '.MuiListItemIcon-root': { minWidth: 36, marginLeft: '2px' }
+                        }, label: t('hit.label.edit.add.category'), id: "label-category", labelId: "type-label", value: category, onChange: e => setCategory(e.target.value), children: Object.keys(LABEL_TYPES).map(key => (_jsxs(MenuItem, { value: key, children: [_jsx(ListItemIcon, { children: LABEL_TYPES[key].icon ?? _jsx(Check, { sx: { opacity: 0 } }) }), _jsx(ListItemText, { sx: { textTransform: 'capitalize' }, children: key })] }, key))) })] }), _jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: _jsxs(FormControl, { fullWidth: true, error: !!error, children: [_jsx(TextField, { label: t('hit.label.edit.add.label'), value: label, onChange: e => setLabel(e.currentTarget.value), onKeyDown: e => {
+                                if (e.key === 'Enter') {
+                                    handleAdd();
+                                }
+                                else if (error) {
+                                    setError('');
+                                }
+                            }, InputProps: {
+                                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: handleAdd, children: _jsx(Add, {}) }) }))
+                            } }), _jsx(FormHelperText, { children: error })] }) })] }));
+};
+const HitLabels = ({ hit, readOnly = false }) => {
+    const { dispatchApi } = useMyApi();
+    const { t } = useTranslation();
+    const updateHit = useContextSelector(HitContext, ctx => ctx.updateHit);
+    const [openDrawer, setOpenDrawer] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [labels, setLabels] = useState(Object.entries(hit.howler.labels).flatMap(([key, category]) => {
+        if (typeof category === 'string') {
+            category = [category];
+        }
+        return (category ?? []).map?.(label => ({ category: key, label: label })) ?? [];
+    }));
+    const submitLabel = useCallback(async (label) => {
+        // label can't be added more than once
+        if (labels.some(x => label.category === x.category && label.label === x.label)) {
+            throw new Error(t('hit.label.edit.add.error.duplicate'));
+        }
+        setLoading(true);
+        try {
+            const updatedHit = await dispatchApi(api.hit.labels.put(hit.howler.id, label.category, { value: [label.label] }));
+            updateHit(updatedHit);
+        }
+        finally {
+            setLoading(false);
+        }
+        setLabels([...labels, label]);
+    }, [dispatchApi, hit.howler.id, labels, updateHit, t]);
+    const deleteLabel = useCallback(async (label) => {
+        setLoading(true);
+        try {
+            const updatedHit = await dispatchApi(api.hit.labels.del(hit.howler.id, label.category, { value: [label.label] }));
+            updateHit(updatedHit);
+        }
+        finally {
+            setLoading(false);
+        }
+        setLabels(labels.filter(x => !(label.category === x.category && label.label === x.label)));
+    }, [dispatchApi, hit.howler.id, labels, updateHit]);
+    useEffect(() => {
+        if (hit.howler.labels) {
+            setLabels(Object.entries(hit.howler.labels).flatMap(([key, category]) => {
+                if (typeof category === 'string') {
+                    category = [category];
+                }
+                return (category ?? []).map?.(label => ({ category: key, label: label })) ?? [];
+            }));
+        }
+    }, [hit]);
+    return (_jsxs(Box, { sx: { py: 1 }, children: [_jsxs(Drawer, { open: openDrawer, onClose: () => setOpenDrawer(false), anchor: "right", PaperProps: { sx: { maxWidth: '90%', width: '500px' } }, children: [_jsx(Backdrop, { open: loading, sx: { position: 'absolute', zIndex: theme => theme.zIndex.drawer + 1 }, children: _jsx(CircularProgress, { color: "inherit" }) }), _jsxs(Stack, { direction: "column", spacing: 2, sx: { p: 2 }, children: [_jsx(Typography, { variant: "h4", children: t('hit.label.edit') }), _jsx(Box, { children: labels.map(label => {
+                                    const category = label.category.toLowerCase();
+                                    return (_jsx(Tooltip, { title: t(`hit.label.category.${category}`), children: _jsx(Chip, { icon: LABEL_TYPES[category]?.icon ?? undefined, variant: "filled", size: "small", label: label.label, onDelete: () => deleteLabel(label), sx: [
+                                                {
+                                                    mr: 1,
+                                                    mb: 1
+                                                },
+                                                LABEL_TYPES[category]?.color && {
+                                                    '&, & svg': {
+                                                        color: theme => theme.palette.getContrastText(LABEL_TYPES[category].color) + ' !important'
+                                                    },
+                                                    backgroundColor: LABEL_TYPES[category].color
+                                                }
+                                            ] }, label.label + hit.howler.id) }, label.label + hit.howler.id));
+                                }) }), _jsx(NewLabelForm, { handleSubmit: submitLabel })] })] }), labels.map(label => {
+                const category = label.category.toLowerCase();
+                return (_jsx(Tooltip, { title: t(`hit.label.category.${category}`), children: _jsx(Chip, { icon: LABEL_TYPES[category]?.icon ?? undefined, variant: "outlined", size: "small", label: label.label, sx: [
+                            {
+                                mr: 1
+                            },
+                            LABEL_TYPES[category]?.color && {
+                                '&, & svg': {
+                                    color: theme => theme.palette.getContrastText(LABEL_TYPES[category].color) + ' !important'
+                                },
+                                backgroundColor: LABEL_TYPES[category].color
+                            }
+                        ] }, label.category + label.label + hit.howler.id) }, label.category + label.label + hit.howler.id));
+            }), !readOnly && (_jsx(Button, { onClick: () => setOpenDrawer(true), startIcon: _jsx(Edit, {}), variant: "outlined", size: "small", children: _jsx(Trans, { i18nKey: "hit.label" }) }))] }));
+};
+export default memo(HitLabels);

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

@@ -0,0 +1,5 @@
+export declare enum HitLayout {
+    DENSE = "dense",
+    NORMAL = "normal",
+    COMFY = "comfy"
+}

package/components/elements/hit/HitLayout.js

@@ -0,0 +1,6 @@
+export var HitLayout;
+(function (HitLayout) {
+    HitLayout["DENSE"] = "dense";
+    HitLayout["NORMAL"] = "normal";
+    HitLayout["COMFY"] = "comfy";
+})(HitLayout || (HitLayout = {}));

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

@@ -0,0 +1,8 @@
+import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+declare const _default: import("react").NamedExoticComponent<{
+    analytic: Analytic;
+    selectedNotebook?: string;
+    hit?: Hit;
+}>;
+export default _default;

package/components/elements/hit/HitNotebooks.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Backdrop, Box, Button, Chip, CircularProgress, ClickAwayListener, Fade, MenuItem, Paper, Popper, Stack, TextField } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { safeStringPropertyCompare } from '@cccsaurora/howler-ui/utils/stringUtils';
+import HowlerCard from '../display/HowlerCard';
+import ConfirmNotebookModal from '../display/modals/ConfirmNotebookModal';
+const FETCH_OPTIONS = {
+    credentials: 'include',
+    headers: {
+        Accept: '*/*',
+        'Sec-Fetch-Dest': 'empty',
+        'Sec-Fetch-Mode': 'cors',
+        'Sec-Fetch-Site': 'same-site'
+    },
+    mode: 'cors'
+};
+const HitNotebooks = ({ analytic, selectedNotebook, hit }) => {
+    const { t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    const { showErrorMessage } = useMySnackbar();
+    const { dispatchApi } = useMyApi();
+    const [open, setOpen] = useState(false);
+    const [envs, setEnvs] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [loadedNotebook, setLoadedNotebook] = useState({
+        nb_content: null,
+        name: ''
+    });
+    const [anchorEl, setAnchorEl] = useState(null);
+    const { showModal } = useContext(ModalContext);
+    const handleToggle = (event) => {
+        setAnchorEl(event.currentTarget);
+        setOpen(prev => !prev);
+    };
+    const goToJupyhub = useCallback(async (filename, url) => {
+        try {
+            await fetch(url, {
+                ...FETCH_OPTIONS,
+                method: 'post',
+                body: `{"type":"notebook","content":${JSON.stringify(loadedNotebook.nb_content)}}`
+            });
+            window.open(`${envs[0].url}lab/tree/${filename}`, '_blank');
+            setOpen(false);
+        }
+        catch (e) {
+            showErrorMessage(t('hit.notebook.error.failToPost'));
+        }
+    }, [envs, loadedNotebook, showErrorMessage, t]);
+    const checkJupyhub = useCallback(async () => {
+        setLoading(true);
+        const nbFileName = hit ? `${loadedNotebook.name} - ${hit.howler.id}.ipynb` : `${loadedNotebook.name}.ipynb`;
+        //using fetch since we are going directly to jupyterhub
+        try {
+            const response = await fetch(`${envs[0].url}api/contents/${nbFileName}`, FETCH_OPTIONS);
+            if (response.status < 300) {
+                // if it exists, we need to ask for overwrite
+                showModal(_jsx(ConfirmNotebookModal, { onConfirm: () => {
+                        goToJupyhub(nbFileName, `${envs[0].url}post/${nbFileName}`);
+                    } }));
+            }
+            else {
+                goToJupyhub(nbFileName, `${envs[0].url}post/${nbFileName}`);
+            }
+        }
+        catch (e) {
+            // error means notebook doesn't exist, we can proceed with posting
+            goToJupyhub(nbFileName, `${envs[0].url}post/${nbFileName}`);
+        }
+        setLoading(false);
+    }, [envs, goToJupyhub, hit, loadedNotebook, showModal]);
+    const fetchEnvs = useCallback(async () => {
+        setLoading(true);
+        try {
+            const jhEnvs = await dispatchApi(api.notebook.environments.get(), { showError: true, throwError: false });
+            setEnvs(jhEnvs.envs.map(env => ({ ...env, url: env.url.endsWith('/') ? env.url : env.url + '/' })));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [dispatchApi]);
+    // retrieve notebook json from howler-api/nbgallery
+    const fetchNb = useCallback(async (link) => {
+        setLoading(true);
+        try {
+            const notebookResponse = await dispatchApi(api.notebook.post({
+                link: link ?? analytic?.notebooks.find(n => n.name === selectedNotebook).value,
+                analytic: analytic,
+                ...(hit ? { hit: hit } : {})
+            }), {
+                showError: true,
+                throwError: false
+            });
+            setLoadedNotebook(notebookResponse);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [analytic, dispatchApi, hit, selectedNotebook]);
+    useEffect(() => {
+        if (open) {
+            fetchEnvs(); //retrieve env info from howler-api/nbgallery
+            if (selectedNotebook) {
+                fetchNb();
+            }
+        }
+        else {
+            setLoadedNotebook({
+                nb_content: null,
+                name: ''
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    return (config.configuration.features.notebook &&
+        analytic?.notebooks && (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), mouseEvent: 'onMouseUp', children: _jsxs("div", { children: [_jsx(Popper, { open: open, anchorEl: anchorEl, placement: 'bottom', transition: true, sx: { zIndex: 1499 }, children: ({ TransitionProps }) => (_jsx(Fade, { ...TransitionProps, timeout: 350, children: _jsxs(Paper, { sx: { maxWidth: '90%', width: '400px', p: 1, position: 'relative' }, children: [_jsx(Backdrop, { open: loading, sx: { position: 'absolute', zIndex: theme => theme.zIndex.drawer + 1 }, children: _jsx(Stack, { direction: "column", children: _jsx("div", { style: { textAlign: 'center' }, children: _jsx(CircularProgress, { color: "inherit" }) }) }) }), _jsxs(Stack, { direction: "column", spacing: 2, sx: { p: 1 }, children: [_jsxs(TextField, { disabled: !!selectedNotebook, label: "Notebook", select: true, onChange: e => {
+                                                fetchNb(e.target.value);
+                                            }, SelectProps: {
+                                                MenuProps: {
+                                                    style: { zIndex: 35001 }
+                                                }
+                                            }, defaultValue: selectedNotebook ? analytic?.notebooks.find(n => n.name === selectedNotebook).value : '', children: [_jsx(MenuItem, { disabled: true, value: "", children: _jsx("em", { children: t('hit.notebook.select') }) }), analytic?.notebooks.sort(safeStringPropertyCompare('detection')).map(e => (_jsx(MenuItem, { value: e.value, children: _jsxs(Stack, { direction: 'row', sx: { width: '100%' }, children: [e.name, e.detection && (_jsxs(_Fragment, { children: [_jsx(Box, { flex: 1 }), _jsx(Chip, { label: e.detection, size: "small" })] }))] }) }, e.value)))] }), _jsx(Button, { variant: "outlined", disabled: loadedNotebook.name === '' || envs.length === 0, color: "success", onClick: () => checkJupyhub(), children: t('hit.notebook.goTo') })] })] }) })) }), _jsx(HowlerCard, { variant: "elevation", onClick: handleToggle, sx: [
+                        theme => ({
+                            cursor: 'pointer',
+                            backgroundColor: 'transparent',
+                            transition: theme.transitions.create(['border-color']),
+                            '&:hover': { borderColor: 'primary.main' }
+                        }),
+                        { border: 'thin solid', borderColor: 'transparent' }
+                    ], children: _jsxs(Stack, { direction: "row", p: 1, spacing: 1, alignItems: "center", children: [_jsx(Avatar, { variant: "rounded", src: '/images/jupyter_notebook_file_icon.png', sx: [
+                                    theme => ({
+                                        width: theme.spacing(3),
+                                        height: theme.spacing(3),
+                                        '& img': {
+                                            objectFit: 'contain'
+                                        }
+                                    })
+                                ], children: 'jupyter_notebook_file_icon.png' }), t('hit.notebook.tooltip')] }) })] }) })));
+};
+export default memo(HitNotebooks);

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

@@ -0,0 +1,9 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
+import { HitLayout } from './HitLayout';
+export declare const DEFAULT_FIELDS: string[];
+declare const _default: import("react").NamedExoticComponent<{
+    hit: WithMetadata<Hit>;
+    layout: HitLayout;
+}>;
+export default _default;

package/components/elements/hit/HitOutline.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Typography } from '@mui/material';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { createElement, memo, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { HitLayout } from './HitLayout';
+import DefaultOutline from './outlines/DefaultOutline';
+export const DEFAULT_FIELDS = ['howler.hash'];
+const HitOutline = ({ hit, layout }) => {
+    const { t } = useTranslation();
+    const { getMatchingTemplate } = useMatchers();
+    const [template, setTemplate] = useState(null);
+    useEffect(() => {
+        getMatchingTemplate(hit).then(setTemplate);
+    }, [getMatchingTemplate, hit]);
+    const outline = useMemo(() => {
+        if (template) {
+            return createElement(DefaultOutline, {
+                hit,
+                layout,
+                template,
+                fields: template.keys,
+                readonly: template.type === 'readonly'
+            });
+        }
+        else {
+            return createElement(DefaultOutline, {
+                hit,
+                layout,
+                fields: DEFAULT_FIELDS
+            });
+        }
+    }, [hit, layout, template]);
+    return (_jsxs(Box, { sx: { py: 1, width: '100%', pr: 2 }, children: [layout === HitLayout.COMFY && (_jsx(Typography, { variant: "body1", fontWeight: "bold", sx: { mb: 1 }, children: t('hit.details.title') })), layout !== HitLayout.DENSE && _jsx(Divider, { orientation: "horizontal", sx: { mb: 1 } }), outline] }));
+};
+export default memo(HitOutline);

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

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

package/components/elements/hit/HitOverview.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InsertLink } from '@mui/icons-material';
+import { Box, IconButton, Skeleton } from '@mui/material';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
+import { memo, useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import HandlebarsMarkdown from '../display/HandlebarsMarkdown';
+const HitOverview = ({ content, hit }) => {
+    const { getMatchingOverview } = useMatchers();
+    const [matchingOverview, setMatchingOverview] = useState(null);
+    useEffect(() => {
+        getMatchingOverview(hit).then(setMatchingOverview);
+    }, [getMatchingOverview, hit]);
+    const link = useMemo(() => matchingOverview
+        ? `/overviews/view?analytic=${encodeURIComponent(matchingOverview.analytic)}${matchingOverview.detection && '&detection=' + encodeURIComponent(matchingOverview.detection)}`
+        : hit
+            ? `/overviews/view?analytic=${encodeURIComponent(hit?.howler.analytic)}${hit?.howler.detection && '&detection=' + encodeURIComponent(hit?.howler.detection)}`
+            : null, [hit, matchingOverview]);
+    return (_jsxs(Box, { sx: { position: 'relative', height: '100%', overflow: 'auto' }, children: [link && (_jsx(IconButton, { component: Link, to: link, sx: theme => ({ position: 'absolute', right: theme.spacing(1), top: theme.spacing(1) }), children: _jsx(InsertLink, {}) })), matchingOverview || content ? (_jsx(ErrorBoundary, { children: _jsx(HandlebarsMarkdown, { md: content ?? matchingOverview.content, object: hit, disableLinks: true }) })) : (_jsx(Skeleton, { variant: "rounded", height: "40vh" }))] }));
+};
+export default memo(HitOverview);

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

@@ -0,0 +1,8 @@
+import type { AppSearchItemRendererOption } from '@cccsaurora/howler-ui/commons/components/app/AppSearchService';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+type QuickSearchProps = {
+    hit: Hit;
+    options: AppSearchItemRendererOption<Hit>;
+};
+declare const _default: import("react").NamedExoticComponent<QuickSearchProps>;
+export default _default;

package/components/elements/hit/HitQuickSearch.js

@@ -0,0 +1,31 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Chip, Divider, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { memo, useMemo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { ESCALATION_COLORS, PROVIDER_COLORS, STATUS_COLORS } from '@cccsaurora/howler-ui/utils/constants';
+import { formatDate, stringToColor } from '@cccsaurora/howler-ui/utils/utils';
+const HitQuickSearch = ({ hit, options }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const isUnderLg = useMediaQuery(theme.breakpoints.down('lg'));
+    const providerColor = useMemo(() => PROVIDER_COLORS[hit.event?.provider ?? 'unknown'] ?? stringToColor(hit.event.provider), [hit.event?.provider]);
+    return (_jsxs(Box, { sx: { overflow: 'hidden', borderBottom: `thin solid ${theme.palette.divider}`, pb: 1, mb: 0 }, display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, auto)", children: [_jsxs(Stack, { flexGrow: 1, gridColumn: options.state.mode === 'inline' ? 'span 2' : '', children: [_jsxs(Typography, { variant: "body1", fontWeight: "bold", children: [hit.howler.analytic, hit.howler.detection && ': ', hit.howler.detection] }), options.state.mode !== 'inline' && hit.howler?.outline && (_jsx(Tooltip, { placement: isUnderLg ? 'bottom' : 'left', componentsProps: {
+                            tooltip: {
+                                sx: {
+                                    fontSize: 12,
+                                    backgroundColor: theme.palette.background.paper,
+                                    color: theme.palette.getContrastText(theme.palette.background.paper)
+                                }
+                            }
+                        }, title: _jsxs(Stack, { divider: _jsx(Divider, { sx: { my: 0.5 } }), children: [_jsxs("div", { children: [_jsx(Trans, { i18nKey: "hit.header.threat" }), ": ", hit.howler.outline.threat] }), _jsxs("div", { children: [_jsx(Trans, { i18nKey: "hit.header.target" }), ": ", hit.howler.outline.target] }), _jsx("div", { children: hit.howler.outline.indicators.join(', ') })] }), children: _jsxs(Stack, { direction: { xs: 'column', sm: 'column' }, flex: 1, children: [_jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.threat" }), ": ", hit.howler.outline.threat] }), _jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.target" }), ": ", hit.howler.outline.target] }), _jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.indicators" }), ": ", hit.howler.outline.indicators.map(i => i).join(', ')] })] }) }))] }), _jsxs(Stack, { alignItems: options.state.mode === 'fullscreen' ? 'end' : 'start', spacing: 0.5, children: [options.state.mode === 'fullscreen' && _jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [options.state.mode === 'inline' && _jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }), _jsx(Chip, { sx: {
+                                    backgroundColor: providerColor,
+                                    color: theme.palette.getContrastText(providerColor)
+                                }, label: hit.organization?.name ?? _jsx(Trans, { i18nKey: "unknown" }), size: "small" }), _jsx(Chip, { label: hit.howler.escalation, size: "small", color: ESCALATION_COLORS[hit.howler.escalation] })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(Chip, { sx: {
+                                    '& .MuiChip-icon': {
+                                        marginLeft: 0
+                                    }
+                                }, label: hit?.howler.assignment !== 'unassigned'
+                                    ? hit?.howler.assignment
+                                    : t('app.drawer.hit.assignment.unassigned.name'), size: "small" }), _jsx(Chip, { label: hit.howler.status, size: "small", color: STATUS_COLORS[hit.howler.status] })] })] })] }));
+};
+export default memo(HitQuickSearch);

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

@@ -0,0 +1,6 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { FC } from 'react';
+declare const HitRelated: FC<{
+    hit: Hit;
+}>;
+export default HitRelated;

package/components/elements/hit/HitRelated.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Grid } from '@mui/material';
+import RelatedLink from './related/RelatedLink';
+const HitRelated = ({ hit }) => {
+    return (_jsx(Grid, { container: true, spacing: 1, pr: 2, children: hit?.howler.links?.map(l => (_jsx(Grid, { item: true, xs: 6, sm: 4, md: 3, children: _jsx(RelatedLink, { ...l }) }, l.title + l.href))) }));
+};
+export default HitRelated;

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

@@ -0,0 +1,5 @@
+export declare enum HitShortcuts {
+    SHORTCUTS_HINT = "hint",
+    SHORTCUTS = "shortcut",
+    NO_SHORTCUTS = "no"
+}

package/components/elements/hit/HitShortcuts.js

@@ -0,0 +1,6 @@
+export var HitShortcuts;
+(function (HitShortcuts) {
+    HitShortcuts["SHORTCUTS_HINT"] = "hint";
+    HitShortcuts["SHORTCUTS"] = "shortcut";
+    HitShortcuts["NO_SHORTCUTS"] = "no";
+})(HitShortcuts || (HitShortcuts = {}));

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

@@ -0,0 +1,11 @@
+import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
+declare const _default: import("react").NamedExoticComponent<{
+    query: string;
+    response?: HowlerSearchResponse<WithMetadata<Hit>>;
+    execute?: boolean;
+    onStart?: () => void;
+    onComplete?: () => void;
+}>;
+export default _default;