@cu-mkp/editioncrafter 1.3.1-beta.1 → 1.3.1-beta.11

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

@@ -1,5 +1,5 @@
-import { useEffect, useMemo, useState } from 'react'
-import { BrowserRouter, HashRouter } from 'react-router-dom'
+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'
@@ -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}`,
     }
   }
 
@@ -71,8 +71,6 @@ function TagExplore(props) {
   const [ecProps, setECProps] = useState(null)
   const [filters, setFilters] = useState(initialFilters)
 
-  const Router = useMemo(() => props.serverNav ? BrowserRouter : HashRouter, [props.serverNav])
-
   useEffect(() => {
     const loadDb = async () => {
       const db = await initDb(props.dbUrl)
@@ -98,12 +96,12 @@ function TagExplore(props) {
 
   return (
     <div className="tag-explore">
-      <Router>
+      <HashRouter>
         <TagFilterProvider>
           <TagExploreSidebar db={db} />
           <EditionCrafter {...ecProps} />
         </TagFilterProvider>
-      </Router>
+      </HashRouter>
     </div>
   )
 }

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: 490px;
   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.1-beta.1",
+  "version": "1.3.1-beta.11",
   "private": false,
   "description": "A simple digital critical edition publication tool",
   "license": "MIT",