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

package/components/elements/hit/HitLabels.tsx

@@ -1,265 +0,0 @@
-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 type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Labels } from '@cccsaurora/howler-ui/models/entities/generated/Labels';
-import type { FC } from 'react';
-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';
-
-type LabelState = {
-  category: keyof Labels;
-  label: string;
-};
-
-const NewLabelForm: FC<{ handleSubmit: (label: LabelState) => Promise<void> }> = ({ handleSubmit }) => {
-  const { t } = useTranslation();
-  const [label, setLabel] = useState<string>('');
-  const [category, setCategory] = useState<string>('generic');
-  const [error, setError] = useState<string>('');
-
-  const handleAdd = async () => {
-    if (!label) {
-      setError(t('hit.label.edit.add.error.empty'));
-    } else {
-      try {
-        await handleSubmit({ label: label, category: category as keyof Labels });
-        setLabel('');
-      } catch (e) {
-        setError(e.message);
-      }
-    }
-  };
-
-  return (
-    <Stack spacing={1} direction="column">
-      <FormControl>
-        <InputLabel id="type-label" htmlFor="label-category" size="small">
-          {t('hit.label.edit.add.category')}
-        </InputLabel>
-        <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)}
-        >
-          {Object.keys(LABEL_TYPES).map(key => (
-            <MenuItem key={key} value={key}>
-              <ListItemIcon>{LABEL_TYPES[key].icon ?? <Check sx={{ opacity: 0 }} />}</ListItemIcon>
-              <ListItemText sx={{ textTransform: 'capitalize' }}>{key}</ListItemText>
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-      <Stack direction="row" spacing={1} alignItems="center">
-        <FormControl fullWidth error={!!error}>
-          <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: (
-                <InputAdornment position="end">
-                  <IconButton onClick={handleAdd}>
-                    <Add />
-                  </IconButton>
-                </InputAdornment>
-              )
-            }}
-          />
-          <FormHelperText>{error}</FormHelperText>
-        </FormControl>
-      </Stack>
-    </Stack>
-  );
-};
-
-const HitLabels: FC<{ hit: Hit; readOnly?: boolean }> = ({ 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<LabelState[]>(
-    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: LabelState) => {
-      // 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: LabelState) => {
-      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 (
-    <Box sx={{ py: 1 }}>
-      <Drawer
-        open={openDrawer}
-        onClose={() => setOpenDrawer(false)}
-        anchor="right"
-        PaperProps={{ sx: { maxWidth: '90%', width: '500px' } }}
-      >
-        <Backdrop open={loading} sx={{ position: 'absolute', zIndex: theme => theme.zIndex.drawer + 1 }}>
-          <CircularProgress color="inherit" />
-        </Backdrop>
-        <Stack direction="column" spacing={2} sx={{ p: 2 }}>
-          <Typography variant="h4">{t('hit.label.edit')}</Typography>
-          <Box>
-            {labels.map(label => {
-              const category = label.category.toLowerCase();
-
-              return (
-                <Tooltip title={t(`hit.label.category.${category}`)} key={label.label + hit.howler.id}>
-                  <Chip
-                    icon={LABEL_TYPES[category]?.icon ?? undefined}
-                    variant="filled"
-                    key={label.label + hit.howler.id}
-                    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
-                      }
-                    ]}
-                  />
-                </Tooltip>
-              );
-            })}
-          </Box>
-          <NewLabelForm handleSubmit={submitLabel} />
-        </Stack>
-      </Drawer>
-      {labels.map(label => {
-        const category = label.category.toLowerCase();
-        return (
-          <Tooltip title={t(`hit.label.category.${category}`)} key={label.category + label.label + hit.howler.id}>
-            <Chip
-              icon={LABEL_TYPES[category]?.icon ?? undefined}
-              key={label.category + label.label + hit.howler.id}
-              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
-                }
-              ]}
-            />
-          </Tooltip>
-        );
-      })}
-
-      {!readOnly && (
-        <Button onClick={() => setOpenDrawer(true)} startIcon={<Edit />} variant="outlined" size="small">
-          <Trans i18nKey="hit.label" />
-        </Button>
-      )}
-    </Box>
-  );
-};
-
-export default memo(HitLabels);

package/components/elements/hit/HitLayout.ts

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

package/components/elements/hit/HitNotebooks.tsx

@@ -1,264 +0,0 @@
-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 type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { FC } from 'react';
-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: RequestInit = {
-  credentials: 'include',
-  headers: {
-    Accept: '*/*',
-    'Sec-Fetch-Dest': 'empty',
-    'Sec-Fetch-Mode': 'cors',
-    'Sec-Fetch-Site': 'same-site'
-  },
-  mode: 'cors'
-};
-
-type Envs = { name: string; url: string; default: boolean; user_interface: string };
-
-const HitNotebooks: FC<{ analytic: Analytic; selectedNotebook?: string; hit?: Hit }> = ({
-  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<Envs[]>([]);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [loadedNotebook, setLoadedNotebook] = useState<{ nb_content: any; name: string }>({
-    nb_content: null,
-    name: ''
-  });
-  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
-
-  const { showModal } = useContext(ModalContext);
-
-  const handleToggle = (event: React.MouseEvent<HTMLDivElement>) => {
-    setAnchorEl(event.currentTarget);
-    setOpen(prev => !prev);
-  };
-
-  const goToJupyhub = useCallback(
-    async (filename: string, url: string) => {
-      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(
-          <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?: string) => {
-      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 && (
-      <ClickAwayListener onClickAway={() => setOpen(false)} mouseEvent={'onMouseUp'}>
-        <div>
-          <Popper open={open} anchorEl={anchorEl} placement={'bottom'} transition sx={{ zIndex: 1499 }}>
-            {({ TransitionProps }) => (
-              <Fade {...TransitionProps} timeout={350}>
-                <Paper sx={{ maxWidth: '90%', width: '400px', p: 1, position: 'relative' }}>
-                  <Backdrop open={loading} sx={{ position: 'absolute', zIndex: theme => theme.zIndex.drawer + 1 }}>
-                    <Stack direction="column">
-                      <div style={{ textAlign: 'center' }}>
-                        <CircularProgress color="inherit" />
-                      </div>
-                    </Stack>
-                  </Backdrop>
-                  <Stack direction="column" spacing={2} sx={{ p: 1 }}>
-                    <TextField
-                      disabled={!!selectedNotebook}
-                      label="Notebook"
-                      select
-                      onChange={e => {
-                        fetchNb(e.target.value);
-                      }}
-                      SelectProps={{
-                        MenuProps: {
-                          style: { zIndex: 35001 }
-                        }
-                      }}
-                      defaultValue={
-                        selectedNotebook ? analytic?.notebooks.find(n => n.name === selectedNotebook).value : ''
-                      }
-                    >
-                      <MenuItem disabled value="">
-                        <em>{t('hit.notebook.select')}</em>
-                      </MenuItem>
-                      {analytic?.notebooks.sort(safeStringPropertyCompare('detection')).map(e => (
-                        <MenuItem value={e.value} key={e.value}>
-                          <Stack direction={'row'} sx={{ width: '100%' }}>
-                            {e.name}
-                            {e.detection && (
-                              <>
-                                <Box flex={1} />
-                                <Chip label={e.detection} size="small"></Chip>
-                              </>
-                            )}
-                          </Stack>
-                        </MenuItem>
-                      ))}
-                    </TextField>
-                    <Button
-                      variant="outlined"
-                      disabled={loadedNotebook.name === '' || envs.length === 0}
-                      color="success"
-                      onClick={() => checkJupyhub()}
-                    >
-                      {t('hit.notebook.goTo')}
-                    </Button>
-                  </Stack>
-                </Paper>
-              </Fade>
-            )}
-          </Popper>
-          <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' }
-            ]}
-          >
-            <Stack direction="row" p={1} spacing={1} alignItems="center">
-              <Avatar
-                variant="rounded"
-                src={'/images/jupyter_notebook_file_icon.png'}
-                sx={[
-                  theme => ({
-                    width: theme.spacing(3),
-                    height: theme.spacing(3),
-                    '& img': {
-                      objectFit: 'contain'
-                    }
-                  })
-                ]}
-              >
-                {'jupyter_notebook_file_icon.png'}
-              </Avatar>
-              {t('hit.notebook.tooltip')}
-            </Stack>
-          </HowlerCard>
-        </div>
-      </ClickAwayListener>
-    )
-  );
-};
-
-export default memo(HitNotebooks);

package/components/elements/hit/HitOutline.tsx

@@ -1,56 +0,0 @@
-import { Box, Divider, Typography } from '@mui/material';
-import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Template } from '@cccsaurora/howler-ui/models/entities/generated/Template';
-import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
-import type { FC } from 'react';
-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: FC<{ hit: WithMetadata<Hit>; layout: HitLayout }> = ({ hit, layout }) => {
-  const { t } = useTranslation();
-
-  const { getMatchingTemplate } = useMatchers();
-
-  const [template, setTemplate] = useState<Template>(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 (
-    <Box sx={{ py: 1, width: '100%', pr: 2 }}>
-      {layout === HitLayout.COMFY && (
-        <Typography variant="body1" fontWeight="bold" sx={{ mb: 1 }}>
-          {t('hit.details.title')}
-        </Typography>
-      )}
-      {layout !== HitLayout.DENSE && <Divider orientation="horizontal" sx={{ mb: 1 }} />}
-      {outline}
-    </Box>
-  );
-};
-
-export default memo(HitOutline);

package/components/elements/hit/HitOverview.tsx

@@ -1,53 +0,0 @@
-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 type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Overview } from '@cccsaurora/howler-ui/models/entities/generated/Overview';
-import type { FC } from 'react';
-import { memo, useEffect, useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
-import HandlebarsMarkdown from '../display/HandlebarsMarkdown';
-
-const HitOverview: FC<{ content?: string; hit: Hit }> = ({ content, hit }) => {
-  const { getMatchingOverview } = useMatchers();
-
-  const [matchingOverview, setMatchingOverview] = useState<Overview>(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 (
-    <Box sx={{ position: 'relative', height: '100%', overflow: 'auto' }}>
-      {link && (
-        <IconButton
-          component={Link}
-          to={link}
-          sx={theme => ({ position: 'absolute', right: theme.spacing(1), top: theme.spacing(1) })}
-        >
-          <InsertLink />
-        </IconButton>
-      )}
-      {matchingOverview || content ? (
-        <ErrorBoundary>
-          <HandlebarsMarkdown md={content ?? matchingOverview.content} object={hit} disableLinks />
-        </ErrorBoundary>
-      ) : (
-        <Skeleton variant="rounded" height="40vh" />
-      )}
-    </Box>
-  );
-};
-
-export default memo(HitOverview);