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

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

@@ -107,8 +107,6 @@ function htmlToReactParserOptions(selectedZone, selectedTags) {
 function TranscriptionView(props) {
   const [searchParams] = useSearchParams()
 
-  const { tags } = useContext(TagFilterContext)
-
   const {
     side,
     folioID,
@@ -118,6 +116,9 @@ function TranscriptionView(props) {
     documentViewActions,
   } = props
 
+  const { tagsLeft, tagsRight } = useContext(TagFilterContext)
+  const tags = side === 'left' ? tagsLeft : tagsRight
+
   if (folioID === '-1') {
     return (
       <Watermark

package/dist/es/src/EditionCrafter/saga/RouteListenerSaga.js

@@ -131,7 +131,7 @@ function* resolveFolio(pathSegments) {
       folioIDs.push(thirdID)
 
     for (const folioID of folioIDs) {
-      const folioData = document.folioIndex[folioID]
+      const folioData = document.folioIndex[folioID] || document.folioIndex[decodeURI(folioID)]
       if (folioData && !folioData.loading) {
         // wait for folio to load and then advance state
         const folio = yield loadFolio(folioData)

package/dist/es/src/TagExplore/assets/InsertLeft.jsx

@@ -1,16 +1,19 @@
 function InsertLeft() {
   return (
     <svg width="28" height="21" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g id="fluent:document-one-page-20-regular" clipPath="url(#clip0_527_47401)">
+      <g
+        // id="fluent:document-one-page-20-regular"
+        // clipPath="url(#clip0_527_47401)"
+      >
         <path id="Vector" d="M1.26984 0H6.34921C6.68599 0 7.00898 0.158035 7.24712 0.43934C7.48526 0.720644 7.61905 1.10218 7.61905 1.5V10.5C7.61905 10.8978 7.48526 11.2794 7.24712 11.5607C7.00898 11.842 6.68599 12 6.34921 12H1.26984C0.933058 12 0.610069 11.842 0.371928 11.5607C0.133786 11.2794 0 10.8978 0 10.5V1.5C0 1.10218 0.133786 0.720644 0.371928 0.43934C0.610069 0.158035 0.933058 0 1.26984 0ZM1.26984 0.75C1.10145 0.75 0.939955 0.829018 0.820885 0.96967C0.701814 1.11032 0.634921 1.30109 0.634921 1.5V10.5C0.634921 10.6989 0.701814 10.8897 0.820885 11.0303C0.939955 11.171 1.10145 11.25 1.26984 11.25H6.34921C6.5176 11.25 6.67909 11.171 6.79816 11.0303C6.91723 10.8897 6.98413 10.6989 6.98413 10.5V1.5C6.98413 1.30109 6.91723 1.11032 6.79816 0.96967C6.67909 0.829018 6.5176 0.75 6.34921 0.75H1.26984Z" fill="white" />
         <path id="Vector_2" opacity="0.4" d="M9.6507 0H14.7301C15.0668 0 15.3898 0.158035 15.628 0.43934C15.8661 0.720644 15.9999 1.10218 15.9999 1.5V10.5C15.9999 10.8978 15.8661 11.2794 15.628 11.5607C15.3898 11.842 15.0668 12 14.7301 12H9.6507C9.31392 12 8.99093 11.842 8.75279 11.5607C8.51465 11.2794 8.38086 10.8978 8.38086 10.5V1.5C8.38086 1.10218 8.51465 0.720644 8.75279 0.43934C8.99093 0.158035 9.31392 0 9.6507 0ZM9.6507 0.75C9.48231 0.75 9.32081 0.829018 9.20174 0.96967C9.08267 1.11032 9.01578 1.30109 9.01578 1.5V10.5C9.01578 10.6989 9.08267 10.8897 9.20174 11.0303C9.32081 11.171 9.48231 11.25 9.6507 11.25H14.7301C14.8985 11.25 15.06 11.171 15.179 11.0303C15.2981 10.8897 15.365 10.6989 15.365 10.5V1.5C15.365 1.30109 15.2981 1.11032 15.179 0.96967C15.06 0.829018 14.8985 0.75 14.7301 0.75H9.6507Z" fill="white" />
         <path id="Vector_3" d="M5.82826 6.11765C5.82826 6.16445 5.81101 6.20934 5.7803 6.24243C5.74959 6.27553 5.70794 6.29412 5.66451 6.29412H4.02709V8.05882C4.02709 8.10563 4.00984 8.15051 3.97913 8.18361C3.94842 8.2167 3.90677 8.23529 3.86335 8.23529C3.81992 8.23529 3.77827 8.2167 3.74756 8.18361C3.71686 8.15051 3.6996 8.10563 3.6996 8.05882V6.29412H2.06218C2.01875 6.29412 1.9771 6.27553 1.9464 6.24243C1.91569 6.20934 1.89844 6.16445 1.89844 6.11765C1.89844 6.07084 1.91569 6.02596 1.9464 5.99286C1.9771 5.95977 2.01875 5.94118 2.06218 5.94118H3.6996V4.17647C3.6996 4.12967 3.71686 4.08478 3.74756 4.05169C3.77827 4.01859 3.81992 4 3.86335 4C3.90677 4 3.94842 4.01859 3.97913 4.05169C4.00984 4.08478 4.02709 4.12967 4.02709 4.17647V5.94118H5.66451C5.70794 5.94118 5.74959 5.95977 5.7803 5.99286C5.81101 6.02596 5.82826 6.07084 5.82826 6.11765Z" fill="white" />
       </g>
-      <defs>
+      {/* <defs>
         <clipPath id="clip0_527_47401">
           <rect width="16" height="12" fill="white" />
         </clipPath>
-      </defs>
+      </defs> */}
     </svg>
   )
 }

package/dist/es/src/TagExplore/assets/InsertRight.jsx

@@ -1,16 +1,18 @@
 function InsertRight() {
   return (
     <svg width="28" height="21" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clipPath="url(#clip0_527_47406)">
+      <g
+        // clipPath="url(#clip0_527_47406)"
+      >
         <path opacity="0.4" d="M1.27 0H6.35C6.68682 0 7.00985 0.158035 7.24802 0.43934C7.4862 0.720644 7.62 1.10218 7.62 1.5V10.5C7.62 10.8978 7.4862 11.2794 7.24802 11.5607C7.00985 11.842 6.68682 12 6.35 12H1.27C0.933175 12 0.610146 11.842 0.371974 11.5607C0.133803 11.2794 0 10.8978 0 10.5V1.5C0 1.10218 0.133803 0.720644 0.371974 0.43934C0.610146 0.158035 0.933175 0 1.27 0ZM1.27 0.75C1.10159 0.75 0.940073 0.829018 0.820987 0.96967C0.701902 1.11032 0.635 1.30109 0.635 1.5V10.5C0.635 10.6989 0.701902 10.8897 0.820987 11.0303C0.940073 11.171 1.10159 11.25 1.27 11.25H6.35C6.51841 11.25 6.67993 11.171 6.79901 11.0303C6.9181 10.8897 6.985 10.6989 6.985 10.5V1.5C6.985 1.30109 6.9181 1.11032 6.79901 0.96967C6.67993 0.829018 6.51841 0.75 6.35 0.75H1.27Z" fill="white" />
         <path d="M9.64988 0H14.7299C15.0667 0 15.3897 0.158035 15.6279 0.43934C15.8661 0.720644 15.9999 1.10218 15.9999 1.5V10.5C15.9999 10.8978 15.8661 11.2794 15.6279 11.5607C15.3897 11.842 15.0667 12 14.7299 12H9.64988C9.31306 12 8.99003 11.842 8.75186 11.5607C8.51369 11.2794 8.37988 10.8978 8.37988 10.5V1.5C8.37988 1.10218 8.51369 0.720644 8.75186 0.43934C8.99003 0.158035 9.31306 0 9.64988 0ZM9.64988 0.75C9.48147 0.75 9.31996 0.829018 9.20087 0.96967C9.08178 1.11032 9.01488 1.30109 9.01488 1.5V10.5C9.01488 10.6989 9.08178 10.8897 9.20087 11.0303C9.31996 11.171 9.48147 11.25 9.64988 11.25H14.7299C14.8983 11.25 15.0598 11.171 15.1789 11.0303C15.298 10.8897 15.3649 10.6989 15.3649 10.5V1.5C15.3649 1.30109 15.298 1.11032 15.1789 0.96967C15.0598 0.829018 14.8983 0.75 14.7299 0.75H9.64988Z" fill="white" />
         <path d="M14.2096 6.10028C14.2096 6.1404 14.1924 6.17887 14.1616 6.20724C14.1309 6.23561 14.0893 6.25154 14.0458 6.25154H12.4082V7.76415C12.4082 7.80426 12.391 7.84274 12.3603 7.87111C12.3295 7.89947 12.2879 7.91541 12.2445 7.91541C12.201 7.91541 12.1594 7.89947 12.1287 7.87111C12.0979 7.84274 12.0807 7.80426 12.0807 7.76415V6.25154H10.4431C10.3996 6.25154 10.358 6.23561 10.3273 6.20724C10.2966 6.17887 10.2793 6.1404 10.2793 6.10028C10.2793 6.06017 10.2966 6.02169 10.3273 5.99332C10.358 5.96496 10.3996 5.94902 10.4431 5.94902H12.0807V4.43642C12.0807 4.3963 12.0979 4.35783 12.1287 4.32946C12.1594 4.30109 12.201 4.28516 12.2445 4.28516C12.2879 4.28516 12.3295 4.30109 12.3603 4.32946C12.391 4.35783 12.4082 4.3963 12.4082 4.43642V5.94902H14.0458C14.0893 5.94902 14.1309 5.96496 14.1616 5.99332C14.1924 6.02169 14.2096 6.06017 14.2096 6.10028Z" fill="white" />
       </g>
-      <defs>
+      {/* <defs>
         <clipPath id="clip0_527_47406">
           <rect width="16" height="12" fill="white" />
         </clipPath>
-      </defs>
+      </defs> */}
     </svg>
   )
 }

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

@@ -195,29 +195,32 @@ function DocumentDetail(props) {
     updatePageCount(surfaces?.length)
   }, [surfaces, updatePageCount, tags])
 
-  return (
-    <Accordion>
-      <AccordionSummary
-        expandIcon={<ExpandMoreIcon />}
-        aria-controls={`document-detail-${documentID}-content`}
-        id={`document-detail-${documentID}`}
-        className="accordion-summary"
-      >
-        <Typography>{documentName}</Typography>
-        <Typography>{surfaces?.length || ''}</Typography>
-      </AccordionSummary>
-      <AccordionDetails
-        className="accordion-detail"
-      >
-        <ThumbnailGrid
-          navigateToSelection={navigateToSelection}
-          documentLocalID={documentLocalID}
-          surfaces={surfaces}
-          selection={selection}
-        >
-        </ThumbnailGrid>
-      </AccordionDetails>
-    </Accordion>
+  return ((!tags.length || surfaces.length)
+    ? (
+        <Accordion>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls={`document-detail-${documentID}-content`}
+            id={`document-detail-${documentID}`}
+            className="accordion-summary"
+          >
+            <Typography>{documentName}</Typography>
+            <Typography>{surfaces?.length || ''}</Typography>
+          </AccordionSummary>
+          <AccordionDetails
+            className="accordion-detail"
+          >
+            <ThumbnailGrid
+              navigateToSelection={navigateToSelection}
+              documentLocalID={documentLocalID}
+              surfaces={surfaces}
+              selection={selection}
+            >
+            </ThumbnailGrid>
+          </AccordionDetails>
+        </Accordion>
+      )
+    : null
   )
 }
 

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,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 }