@cu-mkp/editioncrafter 1.3.1-beta.7 → 1.3.1-beta.9

package/dist/es/src/EditionCrafter/action/DocumentActions.js

@@ -216,6 +216,7 @@ function parseSingleManifest(manifest, transcriptionTypes, document) {
         annotations: canvas.annotations
           ? canvas.annotations.filter(a => a.motivation === 'tagging')
           : [],
+        metadata: canvas.metadata,
       }
 
       folios.push(folio)

package/dist/es/src/EditionCrafter/action/rootReducer.js

@@ -4,12 +4,11 @@ import { createReducer } from '../model/ReduxStore'
 import DiplomaticActions from './DiplomaticActions'
 import DocumentActions from './DocumentActions'
 import GlossaryActions from './GlossaryActions'
-import NotesActions from './NotesActions'
-
 import diplomaticInitialState from './initialState/diplomaticInitialState'
 import documentInitialState from './initialState/documentInitialState'
 import glossaryInitialState from './initialState/glossaryInitialState'
 import notesInitialState from './initialState/notesInitialState'
+import NotesActions from './NotesActions'
 
 export default function rootReducer(config) {
   const {
@@ -30,8 +29,14 @@ export default function rootReducer(config) {
       derivativesInfo[key] = config.documentInfo[key].documentName
     })
   }
-  const transcriptionTypes = variorum ? transcriptionTypesInfo : config.transcriptionTypes
-  const iiifManifest = variorum ? manifestInfo : config.iiifManifest
+
+  // handle the case that there's exactly one document in documentInfo
+  let docConfig = config
+  if (documentInfo && Object.keys(documentInfo).length === 1) {
+    docConfig = Object.values(documentInfo)[0]
+  }
+  const transcriptionTypes = variorum ? transcriptionTypesInfo : docConfig.transcriptionTypes
+  const iiifManifest = variorum ? manifestInfo : docConfig.iiifManifest
   const derivativeNames = variorum && derivativesInfo
   return combineReducers({
     diplomatic: createReducer('DiplomaticActions', DiplomaticActions, diplomaticInitialState),

package/dist/es/src/EditionCrafter/component/ImageMetadata.js

@@ -0,0 +1,13 @@
+export default function ImageMetadata(props) {
+  const { data } = props
+
+  return (
+    <div className="image-metadata">
+      { Object.keys(data)?.map(key => (
+        <div key={key}>
+          { `${key}: ${data[key]}` }
+        </div>
+      ))}
+    </div>
+  )
+}

package/dist/es/src/EditionCrafter/component/ImageView.js

@@ -10,6 +10,7 @@ import {
   useSearchParams,
 } from 'react-router-dom'
 import TagFilterContext from '../context/TagFilterContext'
+import ImageMetadata from './ImageMetadata'
 import ImageZoomControl from './ImageZoomControl'
 import Navigation from './Navigation'
 
@@ -187,6 +188,11 @@ function ImageView(props) {
                 initViewer={initViewer}
                 loading={folio.loading}
               />
+              {
+                folio.metadata && (
+                  <ImageMetadata data={folio.metadata} />
+                )
+              }
             </div>
           )
         : (

package/dist/es/src/EditionCrafter/scss/_imageMetadata.scss

@@ -0,0 +1,16 @@
+.editioncrafter {
+
+  .image-metadata {
+    position: absolute;
+    bottom: 8px;
+    left: 8px;
+    background-color: rgba(128, 128, 128, 0.5);
+    color: white;
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    flex-wrap: wrap;
+    padding: 4px 6px;
+  }
+
+}

package/dist/es/src/EditionCrafter/scss/editioncrafter.scss

@@ -99,6 +99,7 @@ animation: #{$str};
 
 @import "diplomatic";
 @import "imageGridView";
+@import "imageMetadata";
 @import "splitPaneView";
 @import "imageView";
 @import "imageZoomControl";

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,6 +28,7 @@ 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
@@ -23,18 +36,119 @@ function getData(db) {
     LEFT JOIN taxonomies
       ON tags.taxonomy_id = taxonomies.id
     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 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>{categoryTags?.length || ''}</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, 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)
@@ -44,13 +158,13 @@ function TagFilters(props) {
     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] ? filteredTags.filter(t => (t.taxonomy_id === tax.id)) : filteredTags.filter(t => (t.taxonomy_id === tax.id))?.slice(0, 5)
+      const tagList = filteredTags.filter(t => t.taxonomy_id === tax.id)
       if (tagList?.length) {
         tags[tax.id] = tagList
       }
     }
     setDisplayedTags(tags)
-  }, [expanded, data, query])
+  }, [data, query])
 
   return (
     <>
@@ -59,49 +173,52 @@ function TagFilters(props) {
           ? (
               <div className="tag-list">
                 <FormGroup>
-                  { data.taxonomies.map((tax, idx) => {
+                  { data.taxonomies.map((tax) => {
                     const tagList = displayedTags[tax.id]
+                    const topLevelTags = tagList?.filter(tag => (!tag.parent_category_id))
                     return (
                       tagList?.length
                         ? (
                             <div key={tax.id}>
                               <Typography>{`${tax.name.slice(0, 1).toUpperCase()}${tax.name.slice(1)}`}</Typography>
-                              <ul>
-                                { tagList?.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}
+                              { !!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}
                                   />
-                                ))}
-                              </ul>
-                              { data.tags.filter(t => (t.taxonomy_id === tax.id))?.length && data.tags.filter(t => (t.taxonomy_id === tax.id)).length >= 6
-                                ? (
-                                    <button
-                                      className="tag-filter-button"
-                                      type="button"
-                                      onClick={() => {
-                                        const newState = [...expanded]
-                                        newState[idx] = !expanded[idx]
-                                        setExpanded(newState)
-                                      }}
-                                    >
-                                      { expanded[idx] ? 'Show less' : 'Show more'}
-                                    </button>
-                                  )
-                                : null }
+                                ))
+                              }
                             </div>
                           )
                         : null

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

@@ -30,7 +30,7 @@
   background-color: #242629;
   z-index: 10000;
   padding: 12px 0 12px 12px;
-  width: 300px;
+  width: 430px;
   height: 100%;
   max-height: calc(97dvh - 48px);
   border-left: solid white 1px;
@@ -194,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.7",
+  "version": "1.3.1-beta.9",
   "private": false,
   "description": "A simple digital critical edition publication tool",
   "license": "MIT",