@cu-mkp/editioncrafter 1.3.0 → 1.3.1-beta.10

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

@@ -1,29 +1,43 @@
-import { Box, Button, ButtonGroup, Collapse, Divider, IconButton, Typography } from '@material-ui/core'
-import { red } from '@material-ui/core/colors'
+import { Box, Button, Collapse, Divider, IconButton, Input, Typography } from '@material-ui/core'
 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 { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 
 import { useLocation, useNavigate } from 'react-router-dom'
 import { getObjs } from '../../common/lib/sql'
 import DocumentDetail from './DocumentDetail'
+// import DocumentFilters from './DocumentFilters'
+import TagFilterContext from '../../EditionCrafter/context/TagFilterContext'
 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
+        d.id AS id,
+        d.name AS name,
+        d.local_id AS local_id,
+        json_group_array(document_taggings.tag) as tags
       FROM
-        documents
+        documents d
+          LEFT JOIN document_taggings ON d.id = document_taggings.document
+      GROUP BY d.id, d.name, d.local_id
     `)
-
   return getObjs(docStmt)
 }
 
+function getDocTags(db) {
+  const tagsStmt = db.prepare(`
+    SELECT
+      tags.id AS id
+    FROM
+      tags
+        LEFT JOIN taxonomies ON tags.taxonomy_id = taxonomies.id
+    WHERE
+      taxonomies.is_surface = 0 OR taxonomies.is_surface IS NULL
+    `)
+  return getObjs(tagsStmt)
+}
+
 function parseFolioID(folioID) {
   if (!folioID) {
     return null
@@ -50,27 +64,48 @@ function getSelection(path) {
 function SurfaceBrowser(props) {
   const { db, open, toggleOpen } = props
   const documents = useMemo(() => getData(db), [db])
+  const docTags = useMemo(() => getDocTags(db)?.map(tag => (tag.id)), [db])
   const [pageCount, setPageCount] = useState({})
   const [totalPages, setTotalPages] = useState(0)
   const [tags, setTags] = useState([])
   const [showFilters, setShowFilters] = useState(false)
+  const [query, setQuery] = useState(undefined)
+
+  const filterDocs = useCallback((docs, tags) => {
+    return docs.filter((doc) => {
+      const docID = doc.id
+      for (const tag of tags) {
+        if (docTags.includes(tag) && !JSON.parse(doc.tags)?.includes(tag)) {
+          const newCount = pageCount
+          newCount[docID] = 0
+          setPageCount(newCount)
+          return false
+        }
+      }
+      return true
+    })
+  }, [docTags, pageCount])
+
+  const filteredDocs = useMemo(() => (filterDocs(documents, tags)), [filterDocs, documents, tags])
+
+  const { clearTags } = useContext(TagFilterContext)
 
   const navigate = useNavigate()
   const location = useLocation()
   const selection = useMemo(() => getSelection(location.pathname), [location])
 
-  const navigateToSelection = (nextSelection) => {
+  const navigateToSelection = useCallback((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)
-  }
+  }, [location.search, navigate])
 
-  const updatePageCount = (documentID, numPages) => {
+  const updatePageCount = useCallback((documentID, numPages) => {
     const newCount = pageCount
     newCount[documentID] = numPages
     setPageCount(newCount)
-  }
+  }, [pageCount])
 
   useEffect(() => {
     let p = 0
@@ -80,7 +115,7 @@ function SurfaceBrowser(props) {
     setTotalPages(p)
   }, [pageCount, tags])
 
-  const documentDetails = documents.map((doc) => {
+  const documentDetails = useMemo(() => filteredDocs.map((doc) => {
     return (
       <DocumentDetail
         key={`document-detail-${doc.id}`}
@@ -91,11 +126,11 @@ function SurfaceBrowser(props) {
         selection={selection}
         navigateToSelection={navigateToSelection}
         updatePageCount={count => updatePageCount(doc.id, count)}
-        tags={tags}
+        tags={tags?.filter(tag => !docTags.includes(tag))}
       >
       </DocumentDetail>
     )
-  })
+  }), [db, docTags, filteredDocs, navigateToSelection, selection, tags, updatePageCount])
 
   return (
     <Collapse in={open} horizontal>
@@ -108,34 +143,51 @@ function SurfaceBrowser(props) {
         <Divider></Divider>
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
           <Typography>Contents</Typography>
-          <Button
-            startIcon={<TuneIcon />}
-            onClick={() => setShowFilters(current => (!current))}
-          >
-            Filter
+          <div>
             { 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',
-                  }}
+                  <Button
+                    onClick={() => {
+                      setTags([])
+                      clearTags()
+                    }}
+                    style={{
+                      marginRight: '24px',
+                    }}
                   >
-                    {tags.length}
-                  </div>
+                    Clear All
+                  </Button>
                 )
               : null}
-          </Button>
+            <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>
         </div>
         <Typography>
           {totalPages}
@@ -152,18 +204,22 @@ function SurfaceBrowser(props) {
           </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]))
-              }
-            }}
-          />
+          <div className="tag-filters">
+            <Input placeholder="Search for filters" value={query} onChange={(e) => { setQuery(e.target.value) }} className="tag-filters-search" />
+            <TagFilters
+              db={db}
+              filters={tags}
+              query={query}
+              onToggleSelected={(tagId) => {
+                if (tags.includes(tagId)) {
+                  setTags(current => (current.filter(t => (t !== tagId))))
+                }
+                else {
+                  setTags(current => ([...current, tagId]))
+                }
+              }}
+            />
+          </div>
         ) }
         <Box className="surface-browser-document-details">
           { documentDetails }

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

@@ -1,5 +1,6 @@
-import { Checkbox, FormControlLabel, FormGroup, Typography } from '@material-ui/core'
-import { useContext, useEffect, useMemo, useState } from 'react'
+import { Accordion, AccordionDetails, AccordionSummary, Checkbox, FormControlLabel, FormGroup, Typography } from '@material-ui/core'
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { getObjs } from '../../common/lib/sql'
 import TagFilterContext from '../../EditionCrafter/context/TagFilterContext'
 
@@ -9,6 +10,17 @@ function getData(db) {
       *
     FROM
       taxonomies;
+    ORDER BY
+      name ASC;
+  `)
+
+  const categoriesStmt = db.prepare(`
+    SELECT
+      *
+    FROM 
+      categories
+    ORDER BY
+      name ASC; 
   `)
 
   const tagsStmt = db.prepare(`
@@ -16,90 +28,234 @@ function getData(db) {
       tags.id AS id,
       tags.name AS name,
       tags.xml_id AS xml_id,
+      tags.parent_category_id AS parent_category_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`)
+      tags.xml_id
+    ORDER BY
+      tags.name ASC`)
 
   return {
     tags: getObjs(tagsStmt),
+    categories: getObjs(categoriesStmt),
     taxonomies: getObjs(taxonomiesStmt),
   }
 }
 
+function CategoryFilter(props) {
+  const {
+    name,
+    categoryId,
+    tags,
+    categories,
+    toggleTag,
+    onToggleSelected,
+    isSurface,
+    filters,
+  } = props
+
+  const hasDescendentTags = useCallback((catId) => {
+    if (tags?.filter(tag => (tag.parent_category_id === catId))?.length) {
+      return true
+    }
+
+    const subs = categories?.filter(cat => (cat.parent_category_id === catId))
+
+    for (const sub of subs) {
+      if (hasDescendentTags(sub.id)) {
+        return true
+      }
+    }
+
+    return false
+  }, [tags, categories])
+
+  const countDescendentTags = useCallback((catId) => {
+    let count = tags?.filter(tag => (tag.parent_category_id === catId))?.length
+
+    const subs = categories?.filter(cat => (cat.parent_category_id === catId))
+
+    for (const sub of subs) {
+      count = count + countDescendentTags(sub.id)
+    }
+
+    return count
+  }, [tags, categories])
+
+  const categoryTags = useMemo(() => {
+    return tags?.filter(tag => (tag.parent_category_id === categoryId))
+  }, [tags, categoryId])
+
+  const subcategories = useMemo(() => {
+    return categories?.filter(cat => (cat.parent_category_id === categoryId))
+  }, [categories, categoryId])
+
+  return hasDescendentTags(categoryId) && (
+    <Accordion>
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        aria-controls={`category-tags-${name}-content`}
+        id={`category-tags-${name}`}
+        className="accordion-summary"
+      >
+        <Typography>{name}</Typography>
+        <Typography>{countDescendentTags(categoryId) || ''}</Typography>
+      </AccordionSummary>
+      <AccordionDetails
+        className="accordion-detail"
+      >
+        { !!categoryTags?.length && (
+          <ul>
+            { categoryTags?.map(tag => (
+              <FormControlLabel
+                as="li"
+                control={(
+                  <Checkbox
+                    checked={filters.includes(tag.id)}
+                    onChange={() => {
+                      onToggleSelected(tag.id)
+                      if (isSurface) {
+                        toggleTag(tag.xml_id, 'left')
+                        toggleTag(tag.xml_id, 'right')
+                      }
+                    }}
+                  />
+                )}
+                key={tag.id}
+                label={tag.name}
+              />
+            ))}
+          </ul>
+        )}
+        {
+          !!subcategories?.length && (
+            <>
+              {
+                subcategories.map(cat => (
+                  <CategoryFilter
+                    key={cat.id}
+                    name={cat.name}
+                    categoryId={cat.id}
+                    tags={tags}
+                    categories={categories}
+                    toggleTag={toggleTag}
+                    onToggleSelected={onToggleSelected}
+                    isSurface={isSurface}
+                    filters={filters}
+                  />
+                ))
+              }
+            </>
+          )
+        }
+      </AccordionDetails>
+    </Accordion>
+  )
+}
+
 function TagFilters(props) {
-  const { onToggleSelected, filters } = props
+  const { onToggleSelected, filters, query } = 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 = {}
+    const filteredTags = data.tags.filter(tag => (!query || !query.length || tag.name.toLowerCase().includes(query.toLowerCase())))
     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
+      const tagList = filteredTags.filter(t => t.taxonomy_id === tax.id)
+      if (tagList?.length) {
+        tags[tax.id] = tagList
+      }
     }
     setDisplayedTags(tags)
-  }, [expanded, data])
+  }, [data, query])
 
   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>
+    <>
+      {
+        data?.tags?.length
+          ? (
+              <div className="tag-list">
+                <FormGroup>
+                  { data.taxonomies.sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase() ? 1 : a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 0)).map((tax) => {
+                    const tagList = displayedTags[tax.id]
+                    const topLevelTags = tagList?.filter(tag => (!tag.parent_category_id))
+                    return (
+                      tagList?.length
+                        ? (
+                            <Accordion>
+                              <AccordionSummary
+                                expandIcon={<ExpandMoreIcon />}
+                                aria-controls={`tags-${tax.name}-content`}
+                                id={`tags-${tax.name}`}
+                                className="accordion-summary"
+                              >
+                                <Typography>{`${tax.name.slice(0, 1).toUpperCase()}${tax.name.slice(1)}`}</Typography>
+                                <Typography>{tagList?.length || ''}</Typography>
+                              </AccordionSummary>
+                              <AccordionDetails
+                                className="accordion-detail"
+                              >
+                                <div key={tax.id}>
+                                  { !!topLevelTags?.length && (
+                                    <ul>
+                                      { topLevelTags?.map(tag => (
+                                        <FormControlLabel
+                                          as="li"
+                                          control={(
+                                            <Checkbox
+                                              checked={filters.includes(tag.id)}
+                                              onChange={() => {
+                                                onToggleSelected(tag.id)
+                                                if (tax.is_surface) {
+                                                  toggleTag(tag.xml_id, 'left')
+                                                  toggleTag(tag.xml_id, 'right')
+                                                }
+                                              }}
+                                            />
+                                          )}
+                                          key={tag.id}
+                                          label={tag.name}
+                                        />
+                                      ))}
+                                    </ul>
+                                  )}
+                                  {
+                                    data.categories?.filter(cat => (cat.taxonomy_id === tax.id && !cat.parent_category_id))?.map(cat => (
+                                      <CategoryFilter
+                                        key={cat.id}
+                                        name={cat.name}
+                                        categoryId={cat.id}
+                                        tags={tagList}
+                                        categories={data.categories}
+                                        toggleTag={toggleTag}
+                                        onToggleSelected={onToggleSelected}
+                                        isSurface={tax.is_surface}
+                                        filters={filters}
+                                      />
+                                    ))
+                                  }
+                                </div>
+                              </AccordionDetails>
+                            </Accordion>
+                          )
+                        : null
+                    )
+                  })}
+                </FormGroup>
               </div>
             )
-          })}
-        </FormGroup>
-      </div>
-    </div>
+          : null
+      }
+    </>
   )
 }
 

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

@@ -48,14 +48,14 @@ function getData(db) {
 
 function generateECProps(props, db) {
   const documents = getData(db)
-  const { documentName, baseURL, transcriptionTypes } = props
+  const { documentName, baseURL, transcriptionTypes, manifestPath = '/iiif/manifest.json' } = props
   const documentInfo = {}
 
   for (const document of documents) {
     documentInfo[document.local_id] = {
       documentName: document.name,
       transcriptionTypes,
-      iiifManifest: `${baseURL}/${document.local_id}/iiif/manifest.json`,
+      iiifManifest: `${baseURL}/${document.local_id}${manifestPath}`,
     }
   }
 

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

@@ -26,13 +26,18 @@
   overflow-y: auto;
   position: absolute;
   top: 48px;
-  left: 0;
+  left: 400px;
   background-color: #242629;
   z-index: 10000;
   padding: 12px 0 12px 12px;
-  width: 100%;
+  width: 450px;
   height: 100%;
-  max-height: 100dvh;
+  max-height: calc(97dvh - 48px);
+  border-left: solid white 1px;
+}
+
+.tag-explore .tag-filters .tag-filters-search {
+  margin-bottom: 24px;
 }
 
 .tag-explore .tag-filter-button {
@@ -153,8 +158,8 @@
   position: absolute;
   top: 0;
   left: 48px;
-  height: 100vh;
-  min-width: 300px;
+  height: 97dvh;
+  width: 400px;
   display: flex;
   flex-direction: column;
   background-color: #242629;
@@ -189,4 +194,6 @@
 
 .tag-explore .accordion-detail {
   background-color: #242629;
+  display: flex;
+  flex-direction: column;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cu-mkp/editioncrafter",
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.3.1-beta.10",
   "private": false,
   "description": "A simple digital critical edition publication tool",
   "license": "MIT",