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

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

@@ -1,29 +1,42 @@
-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, 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 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 +63,46 @@ 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 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 +112,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 +123,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>
@@ -152,18 +184,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

@@ -22,12 +22,6 @@ function getData(db) {
       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`)
 
@@ -38,8 +32,9 @@ function getData(db) {
 }
 
 function TagFilters(props) {
-  const { onToggleSelected, filters } = props
+  const { onToggleSelected, filters, query } = props
   const data = useMemo(() => getData(props.db), [props.db])
+  console.log(data.taxonomies)
   const [expanded, setExpanded] = useState(data.taxonomies?.map(() => (false)))
   const [displayedTags, setDisplayedTags] = useState({})
 
@@ -47,59 +42,78 @@ function TagFilters(props) {
 
   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 = expanded[i] ? filteredTags.filter(t => (t.taxonomy_id === tax.id)) : filteredTags.filter(t => (t.taxonomy_id === tax.id))?.slice(0, 5)
+      if (tagList?.length) {
+        tags[tax.id] = tagList
+      }
     }
     setDisplayedTags(tags)
-  }, [expanded, data])
+  }, [expanded, 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.map((tax, idx) => {
+                    const tagList = displayedTags[tax.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}
+                                  />
+                                ))}
+                              </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
+                    )
+                  })}
+                </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'
@@ -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: 300px;
   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;

package/package.json

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