@cu-mkp/editioncrafter 1.3.0-beta.1 → 1.3.0-beta.3

package/dist/es/src/TagExplore/components/DocumentDetail.jsx

@@ -0,0 +1,224 @@
+import { Accordion, AccordionDetails, AccordionSummary, Grid, Typography } from '@material-ui/core'
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+import { useEffect, useMemo } from 'react'
+import { getObjs } from '../../common/lib/sql'
+import InsertLeft from '../assets/InsertLeft'
+import InsertRight from '../assets/InsertRight'
+import Left from '../assets/Left'
+import Right from '../assets/Right'
+
+const MAX_THUMBNAIL_DIMENSION = 100
+
+function getData(db, docID, tags = []) {
+  const surfaceStmt = db.prepare(`
+      SELECT
+        surfaces.id AS id,
+        surfaces.name AS name,
+        surfaces.xml_id AS xml_id,
+        surfaces.width AS width,
+        surfaces.height AS height,
+        surfaces.image_type AS image_type,
+        surfaces.image_url AS image_url,
+        surfaces.position AS position,
+        taggings.tag_id
+      FROM
+        surfaces
+      LEFT JOIN
+        elements
+      ON
+        surfaces.id = elements.surface_id
+      LEFT JOIN
+        taggings
+      ON
+        elements.id = taggings.element_id
+      WHERE
+        document_id=${docID}${tags.length ? ` AND taggings.tag_id IN (${tags.join(',')})` : ''} 
+      ORDER BY
+        surfaces.id, position
+    `)
+
+  // add thumbnail URLs
+  const surfaces = getObjs(surfaceStmt)
+  for (const surface of surfaces) {
+    surface.thumbnail_url = getThumbnailURL(surface)
+  }
+
+  return surfaces
+}
+
+function getThumbnailURL(surface) {
+  const { image_url, width, height, image_type } = surface
+
+  const ratio = height !== 0 ? width / height : 0
+
+  let thumbnailDimensions = []
+  if (ratio > 1) {
+    thumbnailDimensions = [MAX_THUMBNAIL_DIMENSION, Math.round(MAX_THUMBNAIL_DIMENSION / ratio)]
+  }
+  else {
+    thumbnailDimensions = [Math.round(MAX_THUMBNAIL_DIMENSION * ratio), MAX_THUMBNAIL_DIMENSION]
+  }
+
+  const thumbnailURL = image_type === 'iiif'
+    ? `${image_url}/full/${thumbnailDimensions.join(',')}/0/default.jpg`
+    : image_url
+
+  return thumbnailURL
+}
+
+function Thumbnail(props) {
+  const { surfaceID, name, imageURL, thumbnailURL, onClick, selection, info } = props
+
+  const isLeft = useMemo(() => (selection && selection?.left?.localID === info?.localID && selection?.left?.surfaceID === info?.surfaceID), [selection, info])
+  const isRight = useMemo(() => (selection && selection?.right?.localID === info?.localID && selection?.right?.surfaceID === info?.surfaceID), [selection, info])
+
+  const onError = (currentTarget) => {
+    currentTarget.onerror = null
+    const fullImageURL = `${imageURL.slice(0, -9)}full/full/0/default.jpg`
+    if (currentTarget.src !== fullImageURL) {
+      currentTarget.src = fullImageURL
+    }
+  }
+
+  return (
+    <Grid className="surface-thumbnail">
+      <figure className="surface-thumbnail-figure">
+        {isLeft
+          ? (
+              <div className="surface-thumbnail-overlay-selected left">
+                <div>
+                  <Left />
+                  <Typography>Left</Typography>
+                </div>
+              </div>
+            )
+          : isRight
+            ? (
+                <div className="surface-thumbnail-overlay-selected right">
+                  <div>
+                    <Right />
+                    <Typography>Right</Typography>
+                  </div>
+                </div>
+              )
+            : (
+                <div className="surface-thumbnail-overlay">
+                  <div className="surface-thumbnail-overlay-content">
+                    <a onClick={onClick.left} title="Insert left"><InsertLeft /></a>
+                    <a onClick={onClick.right} title="Insert right"><InsertRight /></a>
+                  </div>
+                </div>
+              )}
+        <div id={surfaceID}>
+          <img
+            src={thumbnailURL}
+            alt={name}
+            style={{ maxWidth: `${MAX_THUMBNAIL_DIMENSION}px`, maxHeight: `${MAX_THUMBNAIL_DIMENSION}px` }}
+            onError={onError}
+          />
+        </div>
+      </figure>
+      <figcaption className="surface-thumbnail-caption">
+        {name}
+      </figcaption>
+    </Grid>
+  )
+}
+
+function ThumbnailGrid(props) {
+  const { surfaces, selection, navigateToSelection, documentLocalID } = props
+
+  return (
+    <Grid className="thumbnail-grid" container>
+      {
+        surfaces.map(surface => (
+          <Thumbnail
+            key={`doc-detail-thumb-${surface.id}`}
+            surfaceID={surface.id}
+            name={surface.name}
+            imageURL={surface.image_url}
+            thumbnailURL={surface.thumbnail_url}
+            selection={selection}
+            info={{
+              localID: documentLocalID,
+              surfaceID: surface.xml_id,
+            }}
+            onClick={{
+              left: (e) => {
+                e.preventDefault()
+                navigateToSelection({
+                  left: {
+                    localID: documentLocalID,
+                    surfaceID: surface.xml_id,
+                  },
+                  right: selection.right,
+                })
+              },
+              right: (e) => {
+                e.preventDefault()
+                navigateToSelection({
+                  left: selection.left,
+                  right: {
+                    localID: documentLocalID,
+                    surfaceID: surface.xml_id,
+                  },
+                })
+              },
+            }}
+          >
+          </Thumbnail>
+        ),
+        )
+      }
+    </Grid>
+  )
+}
+
+function DocumentDetail(props) {
+  const { db, documentName, documentID, documentLocalID, navigateToSelection, updatePageCount, selection, tags } = props
+  const surfaces = useMemo(() => {
+    const taggedSurfaces = getData(db, documentID, tags)
+    const data = []
+    for (const entry of taggedSurfaces) {
+      if (!data.find(d => (d.id === entry.id))) {
+        const tags = taggedSurfaces.filter(s => (s.id === entry.id)).map(s => (s.tag_id))
+        data.push({
+          ...entry,
+          tag_id: [...new Set(tags)],
+        })
+      }
+    }
+    return data.filter(s => (tags.every(t => s.tag_id.includes(t))))
+  }, [db, documentID, tags])
+
+  useEffect(() => {
+    updatePageCount(surfaces?.length)
+  }, [surfaces, updatePageCount, tags])
+
+  return (
+    <Accordion>
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        aria-controls={`document-detail-${documentID}-content`}
+        id={`document-detail-${documentID}`}
+        className="accordion-summary"
+      >
+        <Typography>{documentName}</Typography>
+        <Typography>{surfaces?.length || ''}</Typography>
+      </AccordionSummary>
+      <AccordionDetails
+        className="accordion-detail"
+      >
+        <ThumbnailGrid
+          navigateToSelection={navigateToSelection}
+          documentLocalID={documentLocalID}
+          surfaces={surfaces}
+          selection={selection}
+        >
+        </ThumbnailGrid>
+      </AccordionDetails>
+    </Accordion>
+  )
+}
+
+export default DocumentDetail

package/dist/es/src/TagExplore/components/NarrowSidebar.jsx

@@ -0,0 +1,35 @@
+import {
+    FaQuestionCircle
+} from 'react-icons/fa'  
+
+import { BsFillGrid3X3GapFill } from 'react-icons/bs'
+import { List, ListItem, ListItemIcon, Paper } from '@material-ui/core'
+
+function NarrowSidebar(props) {
+    const { helpRef, toggleDrawer, toggleHelp } = props
+    return (
+        <Paper className="narrow-sidebar">
+            <List>
+                <ListItem 
+                    onClick={toggleDrawer}
+                    button
+                >
+                    <ListItemIcon>
+                        <BsFillGrid3X3GapFill />
+                    </ListItemIcon>
+                </ListItem>
+                <ListItem
+                    onClick={toggleHelp}
+                    ref={helpRef}
+                    button
+                >
+                    <ListItemIcon>
+                        <FaQuestionCircle />
+                    </ListItemIcon>
+                </ListItem>
+            </List>
+        </Paper>
+    )
+}
+
+export default NarrowSidebar

package/dist/es/src/TagExplore/components/SurfaceBrowser.jsx

@@ -0,0 +1,176 @@
+import { Box, Button, ButtonGroup, Collapse, Divider, IconButton, Typography } from '@material-ui/core'
+import { red } from '@material-ui/core/colors'
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'
+import GridOnIcon from '@material-ui/icons/GridOn'
+import ListIcon from '@material-ui/icons/List'
+import TuneIcon from '@material-ui/icons/Tune'
+import { useEffect, useMemo, useState } from 'react'
+
+import { useLocation, useNavigate } from 'react-router-dom'
+import { getObjs } from '../../common/lib/sql'
+import DocumentDetail from './DocumentDetail'
+import TagFilters from './TagFilters'
+
+function getData(db) {
+  const docStmt = db.prepare(`
+      SELECT
+        documents.id AS id,
+        documents.name AS name,
+        documents.local_id AS local_id
+      FROM
+        documents
+    `)
+
+  return getObjs(docStmt)
+}
+
+function parseFolioID(folioID) {
+  if (!folioID) {
+    return null
+  }
+  const parts = folioID.split('_')
+  const localID = parts.slice(0, parts.length - 1).join('_')
+  const surfaceID = parts[parts.length - 1]
+
+  return {
+    localID,
+    surfaceID,
+  }
+}
+
+function getSelection(path) {
+  const parts = path.split('/')
+  const folioID = parts[2]
+  const folioID2 = parts[4]
+  const left = parseFolioID(folioID)
+  const right = parseFolioID(folioID2)
+  return { left, right }
+}
+
+function SurfaceBrowser(props) {
+  const { db, open, toggleOpen } = props
+  const documents = useMemo(() => getData(db), [db])
+  const [pageCount, setPageCount] = useState({})
+  const [totalPages, setTotalPages] = useState(0)
+  const [tags, setTags] = useState([])
+  const [showFilters, setShowFilters] = useState(false)
+
+  const navigate = useNavigate()
+  const location = useLocation()
+  const selection = useMemo(() => getSelection(location.pathname), [location])
+
+  const navigateToSelection = (nextSelection) => {
+    const folioID = nextSelection?.left ? `${nextSelection.left.localID}_${nextSelection.left.surfaceID}` : null
+    const folioID2 = nextSelection?.right ? `${nextSelection.right.localID}_${nextSelection.right.surfaceID}` : null
+    const navParams = `/ec/${folioID || '-1'}/${folioID ? 'f' : 'g'}/${folioID2 || '-1'}/${folioID2 ? 'f' : 'g'}`
+    navigate(navParams + location.search)
+  }
+
+  const updatePageCount = (documentID, numPages) => {
+    const newCount = pageCount
+    newCount[documentID] = numPages
+    setPageCount(newCount)
+  }
+
+  useEffect(() => {
+    let p = 0
+    for (const key of Object.keys(pageCount)) {
+      p += pageCount[key]
+    }
+    setTotalPages(p)
+  }, [pageCount, tags])
+
+  const documentDetails = documents.map((doc) => {
+    return (
+      <DocumentDetail
+        key={`document-detail-${doc.id}`}
+        db={db}
+        documentName={doc.name}
+        documentLocalID={doc.local_id}
+        documentID={doc.id}
+        selection={selection}
+        navigateToSelection={navigateToSelection}
+        updatePageCount={count => updatePageCount(doc.id, count)}
+        tags={tags}
+      >
+      </DocumentDetail>
+    )
+  })
+
+  return (
+    <Collapse in={open} horizontal>
+      <Box
+        className="surface-browser"
+      >
+        <IconButton onClick={toggleOpen} className="surface-browser-close">
+          <ChevronLeftIcon />
+        </IconButton>
+        <Divider></Divider>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Typography>Contents</Typography>
+          <Button
+            startIcon={<TuneIcon />}
+            onClick={() => setShowFilters(current => (!current))}
+          >
+            Filter
+            { tags && tags.length
+              ? (
+                  <div style={{
+                    fontSize: 'small',
+                    backgroundColor: 'red',
+                    borderRadius: '999px',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    padding: '3px',
+                    color: 'white',
+                    height: '16px',
+                    width: '16px',
+                    position: 'absolute',
+                    top: '0',
+                    left: '-12px',
+                  }}
+                  >
+                    {tags.length}
+                  </div>
+                )
+              : null}
+          </Button>
+        </div>
+        <Typography>
+          {totalPages}
+          {' '}
+          Page
+          { totalPages !== 1 ? 's' : ''}
+        </Typography>
+        {/* <ButtonGroup color="primary" aria-label="outlined primary button group">
+          <IconButton aria-label="grid">
+            <GridOnIcon></GridOnIcon>
+          </IconButton>
+          <IconButton aria-label="list">
+            <ListIcon></ListIcon>
+          </IconButton>
+        </ButtonGroup> */}
+        { showFilters && (
+          <TagFilters
+            db={db}
+            filters={tags}
+            onToggleSelected={(tagId) => {
+              if (tags.includes(tagId)) {
+                setTags(current => (current.filter(t => (t !== tagId))))
+              }
+              else {
+                setTags(current => ([...current, tagId]))
+              }
+            }}
+          />
+        ) }
+        <Box className="surface-browser-document-details">
+          { documentDetails }
+        </Box>
+      </Box>
+    </Collapse>
+  )
+}
+
+export default SurfaceBrowser

package/dist/es/src/TagExplore/components/TagExploreSidebar.jsx

@@ -0,0 +1,55 @@
+import { createTheme, ThemeProvider } from '@material-ui/core/styles'
+import React, { useRef, useState } from 'react'
+
+import HelpPopper from '../../EditionCrafter/component/HelpPopper'
+import NarrowSidebar from './NarrowSidebar'
+import SurfaceBrowser from './SurfaceBrowser'
+
+function TagExploreSidebar(props) {
+  const { db } = props
+  const [openHelp, setOpenHelp] = useState(false)
+  const [openDrawer, setOpenDrawer] = useState(false)
+
+  const toggleHelp = () => {
+    setOpenHelp(!openHelp)
+  }
+
+  const toggleDrawer = () => {
+    setOpenDrawer(!openDrawer)
+  }
+
+  const helpRef = useRef(null)
+  const helpMarginStyle = { marginLeft: '60px', backgroundColor: '#242629', zIndex: '9999' }
+  const theme = createTheme({
+    palette: {
+      type: 'dark',
+    },
+  })
+
+  return (
+    <div className="tag-explore-sidebar">
+      <ThemeProvider theme={theme}>
+        <NarrowSidebar
+          toggleDrawer={toggleDrawer}
+          toggleHelp={toggleHelp}
+          helpRef={helpRef}
+        >
+        </NarrowSidebar>
+        <SurfaceBrowser
+          db={db}
+          open={openDrawer}
+          toggleOpen={toggleDrawer}
+        >
+        </SurfaceBrowser>
+        <HelpPopper
+          marginStyle={helpMarginStyle}
+          anchorEl={helpRef.current}
+          open={openHelp}
+          onClose={toggleHelp}
+        />
+      </ThemeProvider>
+    </div>
+  )
+}
+
+export default TagExploreSidebar

package/dist/es/src/TagExplore/components/TagFilters.jsx

@@ -0,0 +1,106 @@
+import { Checkbox, FormControlLabel, FormGroup, Typography } from '@material-ui/core'
+import { useContext, useEffect, useMemo, useState } from 'react'
+import { getObjs } from '../../common/lib/sql'
+import TagFilterContext from '../../EditionCrafter/context/TagFilterContext'
+
+function getData(db) {
+  const taxonomiesStmt = db.prepare(`
+    SELECT
+      *
+    FROM
+      taxonomies;
+  `)
+
+  const tagsStmt = db.prepare(`
+    SELECT
+      tags.id AS id,
+      tags.name AS name,
+      tags.xml_id AS xml_id,
+      taxonomies.name as taxonomy,
+      taxonomies.id as taxonomy_id
+    FROM
+      tags
+    LEFT JOIN taxonomies
+      ON tags.taxonomy_id = taxonomies.id
+    INNER JOIN taggings
+      ON taggings.tag_id = tags.id
+    INNER JOIN elements
+      ON elements.id = taggings.element_id
+    WHERE
+      elements.type = 'zone'
+    GROUP BY
+      tags.xml_id`)
+
+  return {
+    tags: getObjs(tagsStmt),
+    taxonomies: getObjs(taxonomiesStmt),
+  }
+}
+
+function TagFilters(props) {
+  const { onToggleSelected, filters } = props
+  const data = useMemo(() => getData(props.db), [props.db])
+  const [expanded, setExpanded] = useState(data.taxonomies?.map(() => (false)))
+  const [displayedTags, setDisplayedTags] = useState({})
+
+  const { toggleTag } = useContext(TagFilterContext)
+
+  useEffect(() => {
+    const tags = {}
+    for (let i = 0; i < data.taxonomies.length; i++) {
+      const tax = data.taxonomies[i]
+      const tagList = expanded[i] ? data.tags.filter(t => (t.taxonomy_id === tax.id)) : data.tags.filter(t => (t.taxonomy_id === tax.id))?.slice(0, 5)
+      tags[tax.id] = tagList
+    }
+    setDisplayedTags(tags)
+  }, [expanded, data])
+
+  return (
+    <div className="tag-filters">
+      <div className="tag-list">
+        <FormGroup>
+          { data.taxonomies.map((tax, idx) => {
+            const tagList = displayedTags[tax.id]
+            return (
+              <div key={tax.id}>
+                <Typography>{tax.name}</Typography>
+                <ul>
+                  { tagList?.map(tag => (
+                    <FormControlLabel
+                      as="li"
+                      control={(
+                        <Checkbox
+                          checked={filters.includes(tag.id)}
+                          onChange={() => {
+                            onToggleSelected(tag.id)
+                            toggleTag(tag.xml_id, 'left')
+                            toggleTag(tag.xml_id, 'right')
+                          }}
+                        />
+                      )}
+                      key={tag.id}
+                      label={tag.name}
+                    />
+                  ))}
+                </ul>
+                <button
+                  className="tag-filter-button"
+                  type="button"
+                  onClick={() => {
+                    const newState = [...expanded]
+                    newState[idx] = !expanded[idx]
+                    setExpanded(newState)
+                  }}
+                >
+                  { !data.tags.filter(t => (t.taxonomy_id === tax.id))?.length || data.tags.filter(t => (t.taxonomy_id === tax.id)).length < 6 ? null : expanded[idx] ? 'Show less' : 'Show more'}
+                </button>
+              </div>
+            )
+          })}
+        </FormGroup>
+      </div>
+    </div>
+  )
+}
+
+export default TagFilters

package/dist/es/src/TagExplore/index.jsx

@@ -0,0 +1,109 @@
+import { useEffect, useState } from 'react'
+import { HashRouter } from 'react-router-dom'
+import initSqlJs from 'sql.js'
+import sqlJsInfo from 'sql.js/package.json'
+import Loading from '../common/components/Loading'
+import { getObjs } from '../common/lib/sql'
+import EditionCrafter from '../EditionCrafter'
+import TagFilterProvider from '../EditionCrafter/context/TagFilter'
+import TagExploreSidebar from './components/TagExploreSidebar'
+import './styles/base.css'
+
+const initialFilters = {
+  categories: [],
+  tags: [],
+}
+
+async function initDb(url) {
+  const file = await fetch(url)
+
+  if (!file.ok) {
+    throw new Error('Failed fetching SQLite file.')
+  }
+
+  const buf = await file.arrayBuffer()
+  const arr = new Uint8Array(buf)
+
+  const db = await initSqlJs({
+    locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/${sqlJsInfo.version}/${file}`,
+  }).then((SQL) => {
+    const db = new SQL.Database(arr)
+    return db
+  })
+
+  return db
+}
+
+function getData(db) {
+  const documentStmt = db.prepare(`
+    SELECT
+      documents.name AS name,
+      documents.local_id AS local_id
+    FROM
+      documents
+  `)
+
+  return getObjs(documentStmt)
+}
+
+function generateECProps(props, db) {
+  const documents = getData(db)
+  const { documentName, baseURL, transcriptionTypes } = props
+  const documentInfo = {}
+
+  for (const document of documents) {
+    documentInfo[document.local_id] = {
+      documentName: document.name,
+      transcriptionTypes,
+      iiifManifest: `${baseURL}/${document.local_id}/iiif/manifest.json`,
+    }
+  }
+
+  return {
+    documentName,
+    documentInfo,
+    tagExplorerMode: true,
+  }
+}
+
+function TagExplore(props) {
+  const [db, setDb] = useState(null)
+  const [ecProps, setECProps] = useState(null)
+  const [filters, setFilters] = useState(initialFilters)
+
+  useEffect(() => {
+    const loadDb = async () => {
+      const db = await initDb(props.dbUrl)
+      const ecProps = generateECProps(props, db)
+      setDb(db)
+      setECProps(ecProps)
+    }
+
+    if (!db) {
+      loadDb()
+    }
+
+    return () => {
+      if (db) {
+        db.close()
+      }
+    }
+  }, [props.dbUrl, db])
+
+  if (!db || !ecProps) {
+    return <Loading />
+  }
+
+  return (
+    <div className="tag-explore">
+      <HashRouter>
+        <TagFilterProvider>
+          <TagExploreSidebar db={db} />
+          <EditionCrafter {...ecProps} />
+        </TagFilterProvider>
+      </HashRouter>
+    </div>
+  )
+}
+
+export default TagExplore