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

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

@@ -0,0 +1,293 @@
+import { Checkbox, FormControlLabel, FormGroup, Typography } from '@material-ui/core'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { getObjs } from '../../common/lib/sql'
+
+function getData(db) {
+  const rolesStmt = db.prepare(`
+    SELECT * FROM roles
+    `)
+  const agentStmt = db.prepare(`
+        SELECT
+          people.name as name,
+          roles.name as role,
+          people.id as person_id,
+          roles.id as role_id
+        FROM
+          agents
+        LEFT JOIN people
+          ON people.id = agents.person
+        LEFT JOIN roles
+          ON roles.id = agents.role
+        GROUP BY
+          roles.name, people.name, people.id, roles.id
+    `)
+
+  const keywordsStmt = db.prepare(`
+      SELECT * FROM keywords
+    `)
+
+  const typesStmt = db.prepare(`
+    SELECT type FROM keywords GROUP BY type
+    `)
+
+  const langStmt = db.prepare(`SELECT * FROM languages`)
+  const locStmt = db.prepare(`SELECT * FROM locations`)
+
+  return {
+    agents: getObjs(agentStmt),
+    roles: getObjs(rolesStmt),
+    types: getObjs(typesStmt),
+    keywords: getObjs(keywordsStmt),
+    languages: getObjs(langStmt),
+    locations: getObjs(locStmt),
+  }
+}
+
+function DocumentFilters(props) {
+  const { filters, query } = props
+  const fullData = useMemo(() => getData(props.db), [props.db])
+  const [expanded, setExpanded] = useState(fullData.roles?.map(() => (false)))
+  const [keywordExpanded, setKeywordExpanded] = useState(fullData.types?.map(() => (false)))
+  const [langExpanded, setLangExpanded] = useState(false)
+  const [locExpanded, setLocExpanded] = useState(false)
+  const [displayedTags, setDisplayedTags] = useState({})
+
+  const data = useMemo(() => {
+    const agents = fullData.agents?.filter(ag => (!query || !query.length || ag.name?.toLowerCase().includes(query.toLowerCase())))
+    const keywords = fullData.keywords?.filter(term => (!query || !query.length || term.name?.toLowerCase().includes(query.toLowerCase())))
+    const languages = fullData.languages?.filter(lang => (!query || !query.length || lang.name.toLowerCase().includes(query.toLowerCase())))
+    const locations = fullData.locations?.filter(loc => (!query || !query.length || loc.name.toLowerCase().includes(query.toLowerCase())))
+    return ({
+      agents,
+      keywords,
+      languages,
+      locations,
+      types: fullData.types,
+      roles: fullData.roles,
+    })
+  }, [fullData, query])
+
+  useEffect(() => {
+    const tags = {}
+    for (let i = 0; i < data.roles.length; i++) {
+      const tax = data.roles[i]
+      const tagList = expanded[i] ? data.agents.filter(t => (t.role_id === tax.id)) : data.agents.filter(t => (t.role_id === tax.id))?.slice(0, 5)
+      tags[tax.id] = tagList
+    }
+    setDisplayedTags(tags)
+  }, [expanded, data])
+
+  const onToggleAgent = useCallback((role, person) => {
+    const current = [...filters.agents.data]
+    if (current.find(f => (f.role === role && f.person === person))) {
+      filters.agents.onUpdate(current => (current.filter(item => (item.role !== role || item.person !== person))))
+    }
+    else {
+      filters.agents.onUpdate(current => [...current, { role, person }])
+    }
+  }, [filters])
+
+  const onToggleKeyword = useCallback((type, term) => {
+    const current = [...filters.keywords.data]
+    if (current.find(f => (f.type === type && f.term === term))) {
+      filters.keywords.onUpdate(current => (current.filter(item => (item.type !== type || item.term !== term))))
+    }
+    else {
+      filters.keywords.onUpdate(current => [...current, { type, term }])
+    }
+  }, [filters])
+
+  const onToggleLanguage = useCallback((item_id) => {
+    const current = [...filters.langs.data]
+    if (current.includes(item_id)) {
+      filters.langs.onUpdate(current => (current.filter(i => (i !== item_id))))
+    }
+    else {
+      filters.langs.onUpdate(current => [...current, item_id])
+    }
+  }, [filters])
+
+  const onToggleLocation = useCallback((item_id) => {
+    const current = [...filters.locations.data]
+    if (current.includes(item_id)) {
+      filters.locations.onUpdate(current => (current.filter(i => (i !== item_id))))
+    }
+    else {
+      filters.locations.onUpdate(current => [...current, item_id])
+    }
+  }, [filters])
+
+  return (
+    <div className="tag-list">
+      <FormGroup>
+        { data.roles.map((tax, idx) => {
+          const tagList = displayedTags[tax.id]
+          return tagList?.length
+            ? (
+                <div key={tax.id}>
+                  <Typography>{tax.name}</Typography>
+                  <ul>
+                    { tagList?.map(tag => (
+                      <FormControlLabel
+                        as="li"
+                        control={(
+                          <Checkbox
+                            checked={!!filters.agents.data.find(ag => (ag.role === tax.id && ag.person === tag.person_id))}
+                            onChange={() => {
+                              onToggleAgent(tax.id, tag.person_id)
+                            }}
+                          />
+                        )}
+                        key={tag.person_id}
+                        label={tag.name}
+                      />
+                    ))}
+                  </ul>
+                  { (data.agents.filter(t => (t.role_id === tax.id))?.length && data.agents.filter(t => (t.role_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
+        })}
+        { data.types.map((tax, idx) => {
+          const tagList = data.keywords.filter(term => (term.type === tax.type))
+          return tagList?.length
+            ? (
+                <div key={tax.type}>
+                  <Typography>
+                    {tax.type[0].toUpperCase()}
+                    {tax.type.slice(1)}
+                  </Typography>
+                  <ul>
+                    { tagList?.map(tag => (
+                      <FormControlLabel
+                        as="li"
+                        control={(
+                          <Checkbox
+                            checked={!!filters.keywords.data.find(item => (item.type === tax.type && item.term === tag.id))}
+                            onChange={() => {
+                              onToggleKeyword(tax.type, tag.id)
+                            }}
+                          />
+                        )}
+                        key={tag.id}
+                        label={tag.name}
+                      />
+                    ))}
+                  </ul>
+                  { tagList.length >= 6
+                    ? (
+                        <button
+                          className="tag-filter-button"
+                          type="button"
+                          onClick={() => {
+                            const newState = [...keywordExpanded]
+                            newState[idx] = !keywordExpanded[idx]
+                            setKeywordExpanded(newState)
+                          }}
+                        >
+                          { keywordExpanded[idx] ? 'Show less' : 'Show more'}
+                        </button>
+                      )
+                    : null}
+                </div>
+              )
+            : null
+        })}
+        { data.languages?.length
+          ? (
+              <div>
+                <Typography>
+                  Language
+                </Typography>
+                <ul>
+                  { data.languages.map(tag => (
+                    <FormControlLabel
+                      as="li"
+                      control={(
+                        <Checkbox
+                          checked={filters.langs.data.includes(tag.id)}
+                          onChange={() => {
+                            onToggleLanguage(tag.id)
+                          }}
+                        />
+                      )}
+                      key={tag.id}
+                      label={tag.name}
+                    />
+                  ))}
+                </ul>
+                { data.languages.length >= 6
+                  ? (
+                      <button
+                        className="tag-filter-button"
+                        type="button"
+                        onClick={() => {
+                          setLangExpanded(current => !current)
+                        }}
+                      >
+                        { langExpanded ? 'Show less' : 'Show more'}
+                      </button>
+                    )
+                  : null}
+              </div>
+            )
+          : null }
+        { data.locations?.length
+          ? (
+              <div>
+                <Typography>
+                  Location of Publication
+                </Typography>
+                <ul>
+                  { data.locations.map(tag => (
+                    <FormControlLabel
+                      as="li"
+                      control={(
+                        <Checkbox
+                          checked={filters.locations.data.includes(tag.id)}
+                          onChange={() => {
+                            onToggleLocation(tag.id)
+                          }}
+                        />
+                      )}
+                      key={tag.id}
+                      label={tag.name}
+                    />
+                  ))}
+                </ul>
+                { data.locations.length >= 6
+                  ? (
+                      <button
+                        className="tag-filter-button"
+                        type="button"
+                        onClick={() => {
+                          setLocExpanded(current => !current)
+                        }}
+                      >
+                        { locExpanded ? 'Show less' : 'Show more'}
+                      </button>
+                    )
+                  : null}
+              </div>
+            )
+          : null }
+      </FormGroup>
+    </div>
+  )
+}
+
+export default DocumentFilters

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 }