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

package/components/elements/hit/HitComments.tsx

@@ -1,372 +0,0 @@
-import { Clear, KeyboardArrowDown, Send } from '@mui/icons-material';
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  AvatarGroup,
-  Chip,
-  IconButton,
-  Skeleton,
-  Stack,
-  TextField,
-  Typography
-} from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
-import { SocketContext, type RecievedDataType } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
-import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import type { Comment as AnalyticComment } from '@cccsaurora/howler-ui/models/entities/generated/Comment';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { SocketEvent } from '@cccsaurora/howler-ui/models/socket/HitUpdate';
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type FC,
-  type KeyboardEventHandler
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { compareTimestamp, sortByTimestamp } from '@cccsaurora/howler-ui/utils/utils';
-import Comment from '../Comment';
-import HowlerAvatar from '../display/HowlerAvatar';
-import TypingIndicator from '../display/TypingIndicator';
-
-const MAX_LENGTH = 5000;
-
-interface HitCommentsProps {
-  hit: Hit;
-  users: { [id: string]: HowlerUser };
-}
-
-const HitComments: FC<HitCommentsProps> = ({ hit, users }) => {
-  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<string[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [showClear, setShowClear] = useState(false);
-  const [length, setLength] = useState(0);
-  const [analyticId, setAnalyticId] = useState<string>();
-  const [analyticComments, setAnalyticComments] = useState<AnalyticComment[]>([]);
-  const [comments, setComments] = useState(sortByTimestamp(hit?.howler?.comment));
-
-  const input = useRef<HTMLTextAreaElement>();
-
-  /**
-   * Set the list of typers based on updates from the websocket
-   */
-  const handler = useMemo(
-    () => (data: RecievedDataType<SocketEvent>) => {
-      // Ensure the action is a user typing, that it's not us, and that were aren't aware of their typing already
-      if (
-        data.event?.action === 'typing' &&
-        data.event?.username !== user.username &&
-        !typers.includes(data.event?.username)
-      ) {
-        setTypers([...typers, data.event.username]);
-      } else if (data.event?.action === 'stop_typing' && data.event?.username !== user.username) {
-        setTypers(typers.filter(typer => typer !== data.event.username));
-      }
-    },
-    [typers, user.username]
-  );
-
-  useEffect(() => {
-    addListener<SocketEvent>('hitComments', handler);
-
-    return () => removeListener('hitComments');
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [handler]);
-
-  useEffect(() => {
-    if (hit?.howler?.analytic) {
-      getMatchingAnalytic(hit).then(analytic => {
-        setAnalyticId(analytic?.analytic_id);
-        setAnalyticComments(sortByTimestamp(analytic?.comment ?? []));
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getMatchingAnalytic, hit?.howler?.analytic]);
-
-  const onSubmit = useCallback(async () => {
-    if (!input.current?.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]);
-
-  /**
-   * Emit a typing event when textbox is focused
-   */
-  const onFocus = useCallback(
-    () =>
-      emit({
-        broadcast: true,
-        action: 'typing',
-        id: hit?.howler?.id
-      }),
-    [emit, hit?.howler?.id]
-  );
-
-  /**
-   * Emit a stop typing event when textbox is blurred
-   */
-  const onBlur = useCallback(
-    () =>
-      emit({
-        broadcast: true,
-        action: 'stop_typing',
-        id: hit?.howler?.id
-      }),
-    [emit, hit?.howler?.id]
-  );
-
-  const onClear = useCallback(() => {
-    input.current.value = '';
-    setShowClear(false);
-  }, []);
-
-  const checkForSubmit: KeyboardEventHandler<HTMLDivElement> = useCallback(
-    e => {
-      e.stopPropagation();
-
-      if (input.current?.value) {
-        setShowClear(true);
-        setLength(input.current.value.length);
-      }
-
-      if (e.ctrlKey && e.key === 'Enter' && !loading) {
-        onSubmit();
-      }
-    },
-    [loading, onSubmit]
-  );
-
-  const checkLength = useCallback(() => setLength(input.current?.value.length), []);
-
-  const handleDelete = useCallback(
-    async (commentId: string) => {
-      await dispatchApi(api.hit.comments.del(hit.howler.id, [commentId]), { throwError: true, showError: true });
-      setComments(comments.filter(cmt => cmt.id !== commentId));
-    },
-    [comments, dispatchApi, hit?.howler?.id]
-  );
-
-  const handleEdit = useCallback(
-    async (commentId: string, editValue: string) => {
-      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, hit?.howler?.id]
-  );
-
-  const handleQuote = useCallback((value: string) => {
-    if (input.current) {
-      // We use trimStart here so there isn't a bunch of newlines at the beginning of the comment
-      // when input.current.value is empty
-      input.current.value = `${input.current.value.trimStart()}\n\n${value
-        .split('\n')
-        .map(l => '> ' + l)
-        .join('\n')}\n\n`.trimStart();
-
-      setTimeout(() => {
-        input.current.focus();
-        // SPBK-2197 Fix - https://stackoverflow.com/a/10576409
-        input.current.selectionStart = input.current.selectionEnd = input.current.value.length;
-      }, 10);
-    }
-  }, []);
-
-  const handleReact = useCallback(
-    async (commentId: string, type: string) => {
-      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?.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?.reactions ?? {}), [user.username]: undefined } }
-          )
-        );
-      }
-    },
-    [comments, dispatchApi, hit?.howler.id, user.username]
-  );
-
-  /**
-   * Handle loading the comments when the hit changes
-   */
-  useEffect(() => {
-    if (hit?.howler?.comment) {
-      setComments(hit?.howler?.comment.slice().sort((a, b) => compareTimestamp(b.timestamp, a.timestamp)));
-    } else if (!hit) {
-      setComments([]);
-    }
-  }, [hit]);
-
-  /**
-   * This is the comments for the analytic associated with the hit. We show this at the start of the comment
-   * list, as if they've been pinned
-   */
-  const renderedAnalyticComments = useMemo(() => {
-    if (analyticComments.length < 1) {
-      return null;
-    }
-
-    const displayedComments = analyticComments.filter(c => !c.detection || c.detection === hit?.howler.detection);
-
-    return (
-      <Accordion variant="outlined">
-        <AccordionSummary expandIcon={<KeyboardArrowDown fontSize="small" />}>
-          <Typography variant="body1">{t('comments.analytic', { count: displayedComments.length })}</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Stack spacing={1}>
-            {displayedComments.map(c => (
-              <Comment
-                key={c.id}
-                comment={c}
-                extra={
-                  <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={`${hit?.howler?.analytic ?? 'Analytic'}${c.detection ? ' - ' + c.detection : ''}`}
-                  />
-                }
-                users={users}
-              />
-            ))}
-          </Stack>
-        </AccordionDetails>
-      </Accordion>
-    );
-  }, [analyticComments, analyticId, hit?.howler.analytic, hit?.howler.detection, navigate, t, users]);
-
-  const renderedComments = useMemo(
-    () =>
-      comments.map(c => (
-        <Comment
-          key={c.id}
-          comment={c}
-          users={users}
-          handleDelete={() => handleDelete(c.id)}
-          handleEdit={value => handleEdit(c.id, value)}
-          handleReact={type => handleReact(c.id, type)}
-          handleQuote={() => handleQuote(c.value)}
-        />
-      )),
-    [comments, handleDelete, handleEdit, handleQuote, handleReact, users]
-  );
-
-  return (
-    <Stack sx={{ py: 1, pr: 1 }} spacing={1}>
-      {hit && renderedAnalyticComments}
-      <Stack direction="row" spacing={1}>
-        <HowlerAvatar userId={user.username} />
-        <TextField
-          inputProps={{ sx: theme => ({ fontSize: theme.typography.body2.fontSize }) }}
-          InputLabelProps={{ shrink: false }}
-          placeholder={t('comments.add')}
-          onKeyDown={checkForSubmit}
-          onChangeCapture={checkLength}
-          inputRef={input}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          error={length > MAX_LENGTH}
-          fullWidth
-          multiline
-        />
-      </Stack>
-      <Stack direction="row" alignItems="center">
-        {typers.length > 0 && (
-          <>
-            <AvatarGroup componentsProps={{ additionalAvatar: { sx: { height: 24, width: 24, fontSize: '12px' } } }}>
-              {typers.map(typer => (
-                <HowlerAvatar key={typer} userId={typer} sx={{ height: 24, width: 24 }} />
-              ))}
-            </AvatarGroup>
-            <TypingIndicator />
-          </>
-        )}
-        <FlexOne />
-        {length > 0.9 * MAX_LENGTH && (
-          <Typography variant="caption" sx={[{ opacity: 0.7, mr: 1 }, length > MAX_LENGTH && { color: 'error.main' }]}>
-            {length}/{MAX_LENGTH}
-          </Typography>
-        )}
-        {showClear && (
-          <IconButton size="small" onClick={onClear} disabled={loading}>
-            <Clear fontSize="small" />
-          </IconButton>
-        )}
-        <IconButton size="small" onClick={onSubmit} disabled={loading || length > MAX_LENGTH}>
-          <Send fontSize="small" />
-        </IconButton>
-      </Stack>
-      {hit ? (
-        renderedComments
-      ) : (
-        <>
-          <Stack direction="row" spacing={1}>
-            <Skeleton width={40} height={40} variant="circular"></Skeleton>
-            <Skeleton width="100%" height={80} variant="rounded"></Skeleton>
-          </Stack>
-          <Stack direction="row" spacing={1}>
-            <Skeleton width={40} height={40} variant="circular"></Skeleton>
-            <Skeleton width="100%" height={100} variant="rounded"></Skeleton>
-          </Stack>
-          <Stack direction="row" spacing={1}>
-            <Skeleton width={40} height={40} variant="circular"></Skeleton>
-            <Skeleton width="100%" height={80} variant="rounded"></Skeleton>
-          </Stack>
-        </>
-      )}
-    </Stack>
-  );
-};
-
-export default HitComments;

package/components/elements/hit/HitDetails.tsx

@@ -1,324 +0,0 @@
-/* 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 type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { FC } from 'react';
-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: FC<{
-  objKey?: string;
-  maxKeyLength?: number;
-  entries: any[];
-}> = 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 (
-    <Box
-      className={key.replace(/\./g, '_')}
-      display={allPrimitives ? 'grid' : 'flex'}
-      sx={[
-        allPrimitives
-          ? {
-              gridTemplateColumns: '40% 60%'
-            }
-          : {
-              flexDirection: 'column'
-            }
-      ]}
-      overflow="hidden"
-      maxWidth="100%"
-    >
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: allPrimitives ? 'end' : 'start',
-          borderRight: allPrimitives ? '1px solid' : 'none',
-          borderColor: theme.palette.divider,
-          pr: 1,
-          mr: 1
-        }}
-      >
-        <code
-          style={{
-            marginTop: allPrimitives ? 0 : theme.spacing(2),
-            marginBottom: allPrimitives ? 0 : theme.spacing(1)
-          }}
-        >
-          {allPrimitives ? key.padStart(maxKeyLength ?? key.length) : key}
-        </code>
-      </Box>
-      <Grid container spacing={allPrimitives ? 1 : 4} ml={allPrimitives ? -1 : -4} overflow="hidden" maxWidth="100%">
-        {uniqueEntries.map((entry, index) => {
-          if (Array.isArray(entry)) {
-            return (
-              <Grid item xs="auto" maxWidth="100%" key={index}>
-                <ListRenderer objKey={`${key}.${index}`} entries={entry} />
-              </Grid>
-            );
-          }
-
-          if (isPlainObject(entry)) {
-            return (
-              <Grid item xs={'auto'} maxWidth="100%" minWidth="350px" key={index}>
-                <ObjectRenderer parentKey={`${key}.${index}`} indent data={entry} />
-              </Grid>
-            );
-          }
-
-          return (
-            <Grid
-              item
-              maxWidth="100%"
-              key={entry}
-              className={`${key}_${index}`.replace(/\./g, '_')}
-              component="code"
-              display="flex"
-              flexDirection="row"
-            >
-              <PluginTypography
-                context="details"
-                component="code"
-                style={{ maxWidth: '100%', font: 'inherit' }}
-                value={entry}
-                field={key.replace(/\.[0-9]+/g, '')}
-              >
-                {entry}
-              </PluginTypography>
-              {/* eslint-disable-next-line react/jsx-no-literals */}
-              {allPrimitives && index < uniqueEntries.length - 1 && <span>,</span>}
-            </Grid>
-          );
-        })}
-        {omittedDuplicates && (
-          <Grid item display="flex" alignItems="center">
-            <Tooltip title={t('duplicates.omitted')}>
-              <InfoOutlined sx={{ fontSize: '20px', ml: 1 }} color="disabled" />
-            </Tooltip>
-          </Grid>
-        )}
-      </Grid>
-    </Box>
-  );
-});
-
-const ObjectRenderer: FC<{ parentKey?: string; showParentKey?: boolean; data: any; indent?: boolean }> = 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 (
-      <Stack direction="row" overflow="hidden" maxWidth="100%">
-        {indent && <Divider orientation="vertical" flexItem sx={{ borderColor: 'primary.main', borderWidth: '2px' }} />}
-        <Stack flex={1} ml={1} maxWidth="100%">
-          {entries
-            .filter(([__, val]) => !isNull(val) && !isUndefined(val) && !isEmpty(val))
-            .map(([key, val]) => {
-              if (Array.isArray(val)) {
-                return <ListRenderer maxKeyLength={longestKey} key={key} objKey={key} entries={val} />;
-              }
-
-              return (
-                <code
-                  className={(parentKey ? `${parentKey}.${key}` : key).replace(/\./g, '_')}
-                  key={key}
-                  style={{
-                    display: 'grid',
-                    gridTemplateColumns: '40% 60%',
-                    alignItems: 'start',
-                    maxWidth: '100%'
-                  }}
-                >
-                  <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'
-                    }}
-                  >
-                    <code style={{ maxWidth: '100%' }}>{key}</code>
-                  </Box>
-                  <Box display="flex" alignItems="start">
-                    <PluginTypography
-                      context="details"
-                      component="code"
-                      style={{ maxWidth: '100%', font: 'inherit' }}
-                      value={val}
-                      field={(parentKey ? parentKey.concat('.', key) : key).replace(/\.[0-9]+/g, '')}
-                    >
-                      {val}
-                    </PluginTypography>
-                  </Box>
-                </code>
-              );
-            })}
-        </Stack>
-      </Stack>
-    );
-  }
-);
-
-const Collapsible: FC<{ query: string; title: string; data: { [index: string]: any } }> = memo(
-  ({ title, data, query }) => {
-    const throttler = useMemo(() => new Throttler(400), []);
-
-    const [scores, setScores] = useState<[string, number][]>([]);
-    const [results, setResults] = useState<{ [index: string]: any }>({});
-
-    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 (
-      <Accordion defaultExpanded>
-        <AccordionSummary expandIcon={<ArrowDropDown />}>
-          <Typography>{title}</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Stack spacing={1} justifyContent="stretch" sx={styles}>
-            <ObjectRenderer showParentKey data={results} />
-          </Stack>
-        </AccordionDetails>
-      </Accordion>
-    );
-  }
-);
-
-const HitDetails: FC<{ hit: Hit }> = ({ 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 (
-    <Stack spacing={1}>
-      <TextField value={query} onChange={event => setQuery(event.target.value)} label={t('overview.search')} />
-      {Object.entries(groups).map(([section, entries]) => {
-        return (
-          <Collapsible
-            query={query}
-            key={section}
-            title={section
-              .split('_')
-              .map(word => capitalize(word))
-              .join(' ')}
-            data={Object.fromEntries(entries)}
-          />
-        );
-      })}
-    </Stack>
-  );
-};
-
-export default memo(HitDetails);