dbf-mirador 4.2.3

package/src/components/SearchPanelControls.jsx

@@ -0,0 +1,174 @@
+import { useCallback, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import deburr from 'lodash/deburr';
+import isObject from 'lodash/isObject';
+import { useDebouncedCallback } from 'use-debounce';
+import Autocomplete from '@mui/material/Autocomplete';
+import CircularProgress from '@mui/material/CircularProgress';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import SearchIcon from '@mui/icons-material/SearchSharp';
+import { useTranslation } from 'react-i18next';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+import SearchPanelNavigation from '../containers/SearchPanelNavigation';
+
+const StyledForm = styled('form', { name: 'SearchPanelControls', slot: 'form' })(({ theme }) => ({
+  paddingBottom: theme.spacing(1),
+  paddingRight: theme.spacing(1.5),
+  width: '100%',
+}));
+
+/** Sometimes an autocomplete match can be a simple string, other times an object
+    with a `match` property, this function abstracts that away */
+const getMatch = (option) => (isObject(option) ? option.match : option);
+
+/** */
+export function SearchPanelControls({
+  autocompleteService = undefined,
+  companionWindowId,
+  fetchSearch,
+  query = '',
+  searchIsFetching = false,
+  searchService,
+  windowId,
+}) {
+  const { t } = useTranslation();
+  const [input, setInput] = useState(query);
+  const [search, setSearch] = useState(query);
+  const [suggestions, setSuggestions] = useState([]);
+
+  useEffect(() => {
+    setInput(query);
+    setSearch(query);
+    setSuggestions([]);
+  }, [query]);
+
+  useEffect(() => {
+    if (search && search !== '' && searchService) {
+      fetchSearch(windowId, companionWindowId, `${searchService.id}?${new URLSearchParams({ q: search })}`, search);
+    }
+  }, [search, searchService, companionWindowId, fetchSearch, windowId]);
+
+  /** */
+  const handleChange = (event, value, reason) => {
+    // For some reason the value gets reset to an empty value from the
+    // useAutocomplete hook sometimes, we just ignore these cases
+    if (reason === 'reset' && !value) {
+      return;
+    }
+    setInput(value);
+    setSuggestions([]);
+
+    if (value) {
+      fetchAutocomplete(value);
+    }
+  };
+
+  /** */
+  const fetchAutocomplete = useDebouncedCallback(
+    useCallback(() => {
+      if (!autocompleteService) return;
+      if (!input) return;
+
+      fetch(`${autocompleteService.id}?${new URLSearchParams({ q: input })}`)
+        .then((response) => response.json())
+        .then(receiveAutocomplete);
+    }, [autocompleteService, input]),
+    500,
+  );
+
+  /** */
+  const receiveAutocomplete = (json) => {
+    setSuggestions(json.terms);
+  };
+
+  /** */
+  const submitSearch = (event) => {
+    if (!input) return;
+
+    if (event) {
+      event.preventDefault();
+    }
+
+    setSearch(input);
+  };
+
+  /** */
+  const selectItem = (_event, selectedItem, _reason) => {
+    if (selectedItem && getMatch(selectedItem)) {
+      setSearch(getMatch(selectedItem));
+    }
+  };
+
+  const id = `search-${companionWindowId}`;
+  return (
+    <>
+      <StyledForm aria-label={t('searchTitle')} onSubmit={submitSearch}>
+        <Autocomplete
+          id={id}
+          inputValue={input}
+          options={suggestions}
+          getOptionLabel={getMatch}
+          isOptionEqualToValue={(option, value) =>
+            deburr(getMatch(option).trim()).toLowerCase() === deburr(getMatch(value).trim()).toLowerCase()
+          }
+          noOptionsText=""
+          onChange={selectItem}
+          onInputChange={handleChange}
+          freeSolo
+          disableClearable
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label={t('searchInputLabel')}
+              variant="standard"
+              slotProps={{
+                ...params.slotProps,
+
+                input: {
+                  ...params.InputProps,
+                  ...params.slotProps?.input,
+                  endAdornment: (
+                    <InputAdornment sx={{ position: 'relative' }} position="end">
+                      <MiradorMenuButton aria-label={t('searchSubmitAria')} type="submit">
+                        <SearchIcon />
+                      </MiradorMenuButton>
+                      {Boolean(searchIsFetching) && (
+                        <CircularProgress
+                          sx={{
+                            left: '50%',
+                            marginLeft: '-25px',
+                            marginTop: '-25px',
+                            position: 'absolute',
+                            top: '50%',
+                          }}
+                          size={50}
+                        />
+                      )}
+                    </InputAdornment>
+                  ),
+                },
+              }}
+            />
+          )}
+        />
+      </StyledForm>
+      <SearchPanelNavigation windowId={windowId} companionWindowId={companionWindowId} />
+    </>
+  );
+}
+
+SearchPanelControls.propTypes = {
+  autocompleteService: PropTypes.shape({
+    id: PropTypes.string,
+  }),
+  companionWindowId: PropTypes.string.isRequired,
+  fetchSearch: PropTypes.func.isRequired,
+  query: PropTypes.string,
+  searchIsFetching: PropTypes.bool,
+  searchService: PropTypes.shape({
+    id: PropTypes.string,
+  }).isRequired,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/SearchPanelNavigation.jsx

@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeftSharp';
+import ChevronRightIcon from '@mui/icons-material/ChevronRightSharp';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+
+/**
+ * SearchPanelNavigation ~
+ */
+export function SearchPanelNavigation({
+  numTotal = undefined,
+  searchHits = [],
+  selectedContentSearchAnnotation,
+  direction,
+  selectAnnotation,
+}) {
+  const { t } = useTranslation();
+  /** */
+  const nextSearchResult = (currentHitIndex) => {
+    selectAnnotation(searchHits[currentHitIndex + 1].annotations[0]);
+  };
+
+  /** */
+  const previousSearchResult = (currentHitIndex) => {
+    selectAnnotation(searchHits[currentHitIndex - 1].annotations[0]);
+  };
+
+  /** */
+  const hasNextResult = (currentHitIndex) => {
+    if (searchHits.length === 0) return false;
+    if (currentHitIndex < searchHits.length - 1) return true;
+    return false;
+  };
+
+  /** */
+  const hasPreviousResult = (currentHitIndex) => {
+    if (searchHits.length === 0) return false;
+    if (currentHitIndex > 0) return true;
+    return false;
+  };
+
+  const iconStyle = direction === 'rtl' ? { transform: 'rotate(180deg)' } : {};
+
+  const currentHitIndex = searchHits.findIndex((val) => val.annotations.includes(selectedContentSearchAnnotation[0]));
+  let lengthText = searchHits.length;
+  if (searchHits.length < numTotal) {
+    lengthText += '+';
+  }
+
+  if (searchHits.length === 0) return null;
+
+  return (
+    <Typography variant="body2" align="center">
+      <MiradorMenuButton
+        aria-label={t('searchPreviousResult')}
+        disabled={!hasPreviousResult(currentHitIndex)}
+        onClick={() => previousSearchResult(currentHitIndex)}
+      >
+        <ChevronLeftIcon style={iconStyle} />
+      </MiradorMenuButton>
+      <span style={{ unicodeBidi: 'plaintext' }} role="status">
+        {t('pagination', { current: currentHitIndex + 1, total: lengthText })}
+      </span>
+      <MiradorMenuButton
+        aria-label={t('searchNextResult')}
+        disabled={!hasNextResult(currentHitIndex)}
+        onClick={() => nextSearchResult(currentHitIndex)}
+      >
+        <ChevronRightIcon style={iconStyle} />
+      </MiradorMenuButton>
+    </Typography>
+  );
+}
+
+SearchPanelNavigation.propTypes = {
+  direction: PropTypes.string.isRequired,
+  numTotal: PropTypes.number,
+  searchHits: PropTypes.arrayOf(PropTypes.object),
+  selectAnnotation: PropTypes.func.isRequired,
+  selectedContentSearchAnnotation: PropTypes.arrayOf(PropTypes.string).isRequired,
+  // eslint-disable-next-line react/no-unused-prop-types
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/SearchResults.jsx

@@ -0,0 +1,138 @@
+import { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
+import List from '@mui/material/List';
+import Typography from '@mui/material/Typography';
+import BackIcon from '@mui/icons-material/ArrowBackSharp';
+import { announce } from '@react-aria/live-announcer';
+import { useTranslation } from 'react-i18next';
+import SearchHit from '../containers/SearchHit';
+import { ScrollTo } from './ScrollTo';
+
+/**
+ * Return SearchHits for every hit in the response
+ * Return SearchHits for every annotation in the response if there are no hits
+ */
+function SearchHitsAndAnnotations({
+  companionWindowId,
+  containerRef,
+  searchAnnotations,
+  searchHits,
+  windowId,
+  focused,
+  toggleFocus,
+}) {
+  if (searchHits.length === 0 && searchAnnotations.length > 0) {
+    return searchAnnotations.map((anno, index) => (
+      <SearchHit
+        announcer={announce}
+        annotationId={anno.id}
+        companionWindowId={companionWindowId}
+        containerRef={containerRef}
+        key={anno.id}
+        focused={focused}
+        index={index}
+        total={searchAnnotations.length}
+        windowId={windowId}
+        showDetails={toggleFocus}
+      />
+    ));
+  }
+
+  return searchHits.map((hit, index) => (
+    <SearchHit
+      announcer={announce}
+      containerRef={containerRef}
+      companionWindowId={companionWindowId}
+      key={hit.annotations[0]}
+      focused={focused}
+      hit={hit}
+      index={index}
+      total={searchHits.length}
+      windowId={windowId}
+      showDetails={toggleFocus}
+    />
+  ));
+}
+
+/** */
+export function SearchResults({
+  companionWindowId,
+  containerRef = undefined,
+  isFetching = false,
+  fetchSearch,
+  nextSearch = undefined,
+  query = undefined,
+  searchAnnotations = [],
+  searchHits = [],
+  searchNumTotal = undefined,
+  windowId,
+}) {
+  const { t } = useTranslation();
+  const [focused, setFocused] = useState(false);
+
+  /** */
+  const toggleFocus = useCallback(() => {
+    setFocused(!focused);
+  }, [setFocused, focused]);
+
+  const noResultsState = query && !isFetching && searchHits.length === 0 && searchAnnotations.length === 0;
+
+  return (
+    <>
+      {focused && (
+        <ScrollTo containerRef={containerRef} offsetTop={96} scrollTo>
+          <Button onClick={toggleFocus} sx={{ textTransform: 'none' }} size="small">
+            <BackIcon />
+            {t('backToResults')}
+          </Button>
+        </ScrollTo>
+      )}
+      {noResultsState && (
+        <Typography
+          sx={{
+            padding: 2,
+            typography: 'h6',
+          }}
+        >
+          {t('searchNoResults')}
+        </Typography>
+      )}
+      <List disablePadding>
+        <SearchHitsAndAnnotations
+          companionWindowId={companionWindowId}
+          containerRef={containerRef}
+          searchAnnotations={searchAnnotations}
+          searchHits={searchHits}
+          windowId={windowId}
+          focused={focused}
+          toggleFocus={toggleFocus}
+        />
+      </List>
+      {nextSearch && (
+        <Button
+          sx={{ width: '100%' }}
+          color="secondary"
+          onClick={() => fetchSearch(windowId, companionWindowId, nextSearch, query)}
+        >
+          {t('moreResults')}
+          <br />
+          {`(${t('searchResultsRemaining', { numLeft: searchNumTotal - searchHits.length })})`}
+        </Button>
+      )}
+    </>
+  );
+}
+
+SearchResults.propTypes = {
+  companionWindowId: PropTypes.string.isRequired,
+  containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]),
+  fetchSearch: PropTypes.func.isRequired,
+  isFetching: PropTypes.bool,
+  nextSearch: PropTypes.string,
+  query: PropTypes.string,
+  searchAnnotations: PropTypes.arrayOf(PropTypes.object),
+  searchHits: PropTypes.arrayOf(PropTypes.object),
+  searchNumTotal: PropTypes.number,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/SelectCollection.jsx

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import ListSharpIcon from '@mui/icons-material/ListSharp';
+import { useTranslation } from 'react-i18next';
+
+/**
+ *
+ */
+export function SelectCollection({ collectionPath = [], manifestId = null, showCollectionDialog, windowId = null }) {
+  const { t } = useTranslation();
+  const openCollectionDialog = useCallback(() => {
+    showCollectionDialog(manifestId, collectionPath.slice(0, -1), windowId);
+  }, [collectionPath, manifestId, showCollectionDialog, windowId]);
+
+  return (
+    <Grid container sx={{ alignContent: 'center', justifyContent: 'center', width: '100%' }}>
+      <Stack>
+        <Typography variant="h4" component="p" sx={{ mb: 2, textAlign: 'center' }}>
+          <em>{t('noItemSelected')}</em>
+        </Typography>
+        <Button
+          aria-label="show collection"
+          color="primary"
+          variant="contained"
+          onClick={openCollectionDialog}
+          startIcon={<ListSharpIcon />}
+        >
+          {t('showCollection')}
+        </Button>
+      </Stack>
+    </Grid>
+  );
+}
+
+SelectCollection.propTypes = {
+  collectionPath: PropTypes.arrayOf(PropTypes.string),
+  manifestId: PropTypes.string,
+  showCollectionDialog: PropTypes.func.isRequired,
+  windowId: PropTypes.string,
+};

package/src/components/SidebarIndexItem.jsx

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+
+/** */
+export function SidebarIndexItem({ label }) {
+  return <Typography variant="body1">{label}</Typography>;
+}
+
+SidebarIndexItem.propTypes = {
+  label: PropTypes.string.isRequired,
+};

package/src/components/SidebarIndexList.jsx

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import { styled } from '@mui/material/styles';
+import { ScrollTo } from './ScrollTo';
+import MiradorCanvas from '../lib/MiradorCanvas';
+import SidebarIndexItem from '../containers/SidebarIndexItem';
+import SidebarIndexThumbnail from '../containers/SidebarIndexThumbnail';
+
+const StyledItem = styled(MenuItem, { name: 'SidebarIndexList', slot: 'item' })(({ theme }) => ({
+  alignItems: 'flex-start',
+  gap: theme.spacing(1),
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(1),
+  position: 'initial',
+  whiteSpace: 'normal',
+}));
+
+/** */
+function getIdAndLabelOfCanvases(canvases) {
+  return canvases.map((canvas) => ({
+    id: canvas.id,
+    label: new MiradorCanvas(canvas).getLabel(),
+  }));
+}
+
+/** */
+export function SidebarIndexList({ canvases, containerRef, selectedCanvasIds = [], setCanvas, variant = 'item', windowId }) {
+  const canvasesIdAndLabel = useMemo(() => getIdAndLabelOfCanvases(canvases), [canvases]);
+  let Item;
+
+  switch (variant) {
+    case 'thumbnail':
+      Item = SidebarIndexThumbnail;
+      break;
+    default:
+      Item = SidebarIndexItem;
+  }
+
+  return (
+    <MenuList variant="selectedMenu">
+      {canvasesIdAndLabel.map((canvas, canvasIndex) => {
+        const onClick = () => {
+          setCanvas(windowId, canvas.id);
+        };
+
+        return (
+          <ScrollTo
+            containerRef={containerRef}
+            key={`${canvas.id}-${variant}`}
+            offsetTop={96} // offset for the height of the form above
+            selected={selectedCanvasIds.includes(canvas.id)}
+            scrollTo={selectedCanvasIds.includes(canvas.id)}
+          >
+            <StyledItem key={canvas.id} divider onClick={onClick} component="li">
+              <Item label={canvas.label} canvas={canvases[canvasIndex]} />
+            </StyledItem>
+          </ScrollTo>
+        );
+      })}
+    </MenuList>
+  );
+}
+
+SidebarIndexList.propTypes = {
+  canvases: PropTypes.array.isRequired,
+  containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]).isRequired,
+  selectedCanvasIds: PropTypes.arrayOf(PropTypes.string),
+  setCanvas: PropTypes.func.isRequired,
+  variant: PropTypes.oneOf(['item', 'thumbnail']),
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/SidebarIndexTableOfContents.jsx

@@ -0,0 +1,170 @@
+import PropTypes from 'prop-types';
+import { alpha, styled } from '@mui/material/styles';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { ScrollTo } from './ScrollTo';
+
+const StyledVisibleNode = styled('div')(() => ({}));
+
+/** */
+function getStartCanvasId(node) {
+  const jsonld = node.data.__jsonld;
+  if (jsonld.startCanvas && typeof jsonld.startCanvas === 'string') {
+    return jsonld.startCanvas;
+  }
+  if (jsonld.start) {
+    if (jsonld.start.type === 'Canvas' && typeof jsonld.start.id === 'string') {
+      return jsonld.start.id;
+    }
+    if (jsonld.start.type === 'SpecificResource' && typeof jsonld.start.source === 'string') {
+      return jsonld.start.source;
+    }
+  }
+  return node.data.getCanvasIds()[0];
+}
+
+/** */
+function deepFind(treeNode, id) {
+  if (treeNode.id === id) {
+    return treeNode;
+  }
+
+  let result = null;
+
+  if (treeNode.nodes) {
+    for (let i = 0; result == null && i < treeNode.nodes.length; i += 1) {
+      result = deepFind(treeNode.nodes[i], id);
+    }
+  }
+
+  return result;
+}
+
+/** */
+const ScrollToForTreeItem = ({ children, itemId, ...props }) => <ScrollTo {...props}>{children}</ScrollTo>;
+
+ScrollToForTreeItem.propTypes = {
+  children: PropTypes.node.isRequired,
+  itemId: PropTypes.string.isRequired,
+};
+
+/** */
+const CollapseIcon = (props) => <ExpandMoreIcon {...props} color="action" />;
+/** */
+const ExpandIcon = (props) => <ChevronRightIcon {...props} color="action" />;
+/** */
+export function SidebarIndexTableOfContents({
+  toggleNode,
+  expandNodes,
+  setCanvas,
+  windowId,
+  treeStructure,
+  visibleNodeIds,
+  expandedNodeIds,
+  containerRef,
+  nodeIdToScrollTo,
+}) {
+  /** */
+  const handleNodeSelect = (event, itemId) => {
+    if (event.key === ' ' || event.key === 'Spacebar') {
+      toggleNode(itemId);
+    }
+
+    selectTreeItem(itemId);
+  };
+
+  /** */
+  const handleNodeToggle = (_event, itemIds) => {
+    expandNodes(itemIds);
+  };
+
+  /** */
+  const selectTreeItem = (itemId) => {
+    const node = deepFind(treeStructure, itemId);
+
+    // Do not select if there are no canvases listed or it has children
+    if (!node.data.getCanvasIds() || node.data.getCanvasIds().length === 0 || node.nodes.length > 0) {
+      return;
+    }
+    const target = getStartCanvasId(node);
+    const canvasId = target.indexOf('#') === -1 ? target : target.substr(0, target.indexOf('#'));
+    setCanvas(windowId, canvasId);
+  };
+
+  if (!treeStructure) {
+    return null;
+  }
+
+  /** */
+  const renderTree = (node) => (
+    <ScrollToForTreeItem
+      containerRef={containerRef}
+      key={node.id}
+      itemId={node.id}
+      offsetTop={96}
+      scrollTo={nodeIdToScrollTo === node.id}
+    >
+      <TreeItem
+        itemId={node.id}
+        label={
+          <StyledVisibleNode
+            sx={(theme) => ({
+              backgroundColor:
+                visibleNodeIds.indexOf(node.id) !== -1 &&
+                alpha(theme.palette.highlights?.primary || theme.palette.action.selected, 0.35),
+              display: visibleNodeIds.indexOf(node.id) !== -1 && 'inline',
+            })}
+          >
+            {node.label}
+          </StyledVisibleNode>
+        }
+      >
+        {node.nodes && node.nodes.length > 0 ? node.nodes.map(renderTree) : null}
+      </TreeItem>
+    </ScrollToForTreeItem>
+  );
+
+  return (
+    <SimpleTreeView
+      sx={{ flexGrow: 1 }}
+      slots={{
+        collapseIcon: CollapseIcon,
+        endIcon: null,
+        expandIcon: ExpandIcon,
+      }}
+      onSelectedItemsChange={handleNodeSelect}
+      onExpandedItemsChange={handleNodeToggle}
+      expandedItems={expandedNodeIds}
+    >
+      {Array.isArray(treeStructure.nodes) && treeStructure.nodes.length > 0 ? (
+        treeStructure.nodes.map((n) => renderTree(n))
+      ) : (
+        <p>No items found</p>
+      )}
+    </SimpleTreeView>
+  );
+}
+
+SidebarIndexTableOfContents.propTypes = {
+  containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]).isRequired,
+  expandedNodeIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  expandNodes: PropTypes.func.isRequired,
+  nodeIdToScrollTo: PropTypes.string.isRequired,
+  setCanvas: PropTypes.func.isRequired,
+  toggleNode: PropTypes.func.isRequired,
+  treeStructure: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    nodes: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired,
+        nodes: PropTypes.array,
+      }),
+    ),
+  }).isRequired,
+  visibleNodeIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  windowId: PropTypes.string.isRequired,
+};