@cu-mkp/editioncrafter 1.2.1 → 1.3.0-beta.2

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,108 @@
+import { useEffect, useState } from 'react'
+import { HashRouter } from 'react-router-dom'
+import initSqlJs from 'sql.js'
+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/1.12.0/${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

package/dist/es/src/TagExplore/styles/base.css

@@ -0,0 +1,192 @@
+.tag-explore {
+  display: grid;
+  max-height: 100vh;
+  grid-template-columns: 50px 1fr;
+}
+
+.tag-explore-sidebar {
+  position: relative;
+  z-index: 999;
+  height: 100%;
+  max-height: 100dvh;
+}
+
+.tag-explore .narrow-sidebar {
+  height: 100vh;
+  width: 48px;
+}
+
+.tag-explore-sidebar {
+  overflow-y: none;
+  height: 100%;
+  background-color: black;
+}
+
+.tag-explore .tag-filters {
+  overflow-y: auto;
+  position: absolute;
+  top: 48px;
+  left: 0;
+  background-color: #242629;
+  z-index: 10000;
+  padding: 12px 0 12px 12px;
+  width: 100%;
+  height: 100%;
+  max-height: 100dvh;
+}
+
+.tag-explore .tag-filter-button {
+  background-color: #242629;
+  padding: 12px;
+  color: white;
+  border: 1px solid white;
+  border-radius: 6px;
+  margin: 6px auto 12px auto;
+  cursor: pointer;
+}
+
+.tag-explore .tag-filter-button:hover {
+  background-color: white;
+  color: black;
+}
+
+.tag-explore .tag-filters ul {
+  display: flex;
+  flex-direction: column;
+}
+
+.tag-explore .surface-browser-close {
+  position: absolute;
+  top: 0;
+  right: -24px;
+  background-color: #242629;
+}
+
+.tag-explore .tag-filters .tag-list, .tag-explore-sidebar {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.surface-thumbnail-caption {
+  text-align: center;
+}
+
+.surface-thumbnail-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  background-color: #2426297d;
+  opacity: 0%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
+
+.surface-thumbnail-overlay-selected {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+.surface-thumbnail-overlay-selected.left {
+  border: 2px solid #008F81;
+}
+
+.surface-thumbnail-overlay-selected.right {
+  border: 2px solid #A31621;
+}
+
+.surface-thumbnail-overlay-selected > div {
+  color: white;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  gap: 6px;
+  align-items: center;
+  padding: 6px;
+  border-top-left-radius: 6px;
+  font-size: small;
+}
+
+.surface-thumbnail-overlay-selected.left > div {
+  background-color: #008F81;
+}
+
+.surface-thumbnail-overlay-selected.right > div {
+  background-color: #A31621;
+}
+
+.surface-thumbnail-overlay .surface-thumbnail-overlay-content {
+  opacity: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
+  padding: 8px;
+  background-color: #242629;
+}
+
+.surface-thumbnail-overlay:hover {
+  opacity: 100%;
+}
+
+.surface-thumbnail-overlay a {
+  cursor: pointer;
+}
+
+.surface-thumbnail-figure {
+  padding: 0;
+  margin: 16px;
+  position: relative;
+}
+
+.tag-explore .surface-browser {
+  position: absolute;
+  top: 0;
+  left: 48px;
+  height: 100vh;
+  min-width: 300px;
+  display: flex;
+  flex-direction: column;
+  background-color: #242629;
+  color: white;
+  padding: 12px;
+}
+
+.tag-explore .surface-browser-document-details {
+  overflow-y: auto;
+  position: relative;
+}
+
+.tag-explore .accordion-summary {
+  flex-direction: row-reverse;
+  background-color: #242629
+}
+
+.tag-explore .accordion-summary div {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+/* .tag-explore .accordion-summary .MuiAccordionSummary-expandIcon {
+  padding-left: 0;
+} */
+
+.tag-explore .accordion-summary .MuiAccordionSummary-content {
+  padding-left: 12px;
+  gap: 12px;
+}
+
+.tag-explore .accordion-detail {
+  background-color: #242629;
+}

package/dist/es/src/{RecordList/component → common/components}/Pill.jsx

@@ -1,3 +1,5 @@
+import './Pill.style.css'
+
 function Pill(props) {
   return (
     <button className={props.isActive ? 'active pill' : 'pill'} onClick={props.onClick} type="button">

package/dist/es/src/common/components/Pill.style.css

@@ -0,0 +1,16 @@
+.pill {
+  appearance: none;
+  display: flex;
+  height: 32px;
+  padding: 4px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  border-radius: 50px;
+  border: 1px solid #CEDAE7;
+  background: #CEDAE7;
+  color: #0A0A0A;
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 500;
+}