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

package/dist/es/src/EditionCrafter/model/Folio.js

@@ -24,6 +24,27 @@ function getTagIds(html) {
   return tagIds
 }
 
+function getZoneTagData(annotations) {
+  const tagIds = new Set()
+  const zoneTagIndex = {}
+
+  annotations.forEach((anno) => {
+    zoneTagIndex[anno.id] = []
+    anno.body.forEach((item) => {
+      if (item.purpose === 'classifying') {
+        const value = item.value.slice(1)
+        tagIds.add(value)
+        zoneTagIndex[anno.id].push(value)
+      }
+    })
+  })
+
+  return {
+    tagIds: Array.from(tagIds),
+    zoneTagIndex,
+  }
+}
+
 export async function loadFolio(folioData) {
   if (folioData.loading) {
     return folioData
@@ -49,6 +70,11 @@ export async function loadFolio(folioData) {
     })
   }
 
+  const { tagIds, zoneTagIndex } = getZoneTagData(folio.annotations)
+
+  folio.tagIds = [...tagIds]
+  folio.zoneTagIndex = { ...zoneTagIndex }
+
   if (transcriptionTypes.length > 0) {
     for await (const transcriptionType of transcriptionTypes) {
       const { htmlURL, xmlURL } = folio.annotationURLs[transcriptionType]
@@ -68,7 +94,7 @@ export async function loadFolio(folioData) {
         }
         else {
           folio.transcription[transcriptionType] = transcription
-          folio.tagIds = tagIds
+          folio.tagIds = [...folio.tagIds, ...tagIds]
           folio.loading = false
           transcriptionTypeTracker[transcriptionType] = true
         }

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

@@ -5,14 +5,12 @@ import { putResolveAction } from '../model/ReduxStore'
 
 const justDocument = state => state.document
 const justGlossary = state => state.glossary
+const justNotes = state => state.notes
 
-function* parseTags(headerUrl) {
-  const tags = {}
-
-  const res = yield fetch(headerUrl)
+function* parseTagUrl(url) {
+  const res = yield fetch(url)
 
   if (!res.ok) {
-    yield putResolveAction('DocumentActions.loadTags', tags)
     return null
   }
 
@@ -22,6 +20,8 @@ function* parseTags(headerUrl) {
 
   const categoryEls = headerDoc.querySelectorAll('tei-category')
 
+  const documentTags = {}
+
   for (const categoryEl of categoryEls) {
     const xmlId = categoryEl.getAttribute('id')
 
@@ -29,12 +29,28 @@ function* parseTags(headerUrl) {
       const desc = categoryEl.querySelector('tei-catdesc')
       if (desc) {
         const name = desc.textContent
-        tags[xmlId] = name
+        documentTags[xmlId] = name
       }
     }
   }
 
-  yield putResolveAction('DocumentActions.loadTags', tags)
+  return documentTags
+}
+
+function* parseTags(headerUrl) {
+  if (typeof headerUrl === 'string') {
+    const result = yield parseTagUrl(headerUrl)
+    yield putResolveAction('DocumentActions.loadTags', result)
+  }
+  else {
+    const tags = {}
+
+    for (const docId of Object.keys(headerUrl)) {
+      tags[docId] = yield parseTagUrl(headerUrl[docId])
+    }
+
+    yield putResolveAction('DocumentActions.loadTags', tags)
+  }
 }
 
 function* userNavigation(action) {
@@ -48,6 +64,7 @@ function* userNavigation(action) {
         yield resolveDocumentManifest()
         yield resolveDocumentTags()
         yield resolveGlossary()
+        yield resolveNotes()
         yield resolveFolio(pathSegments)
         break
       }
@@ -134,6 +151,15 @@ function* resolveGlossary() {
   }
 }
 
+function* resolveNotes() {
+  const notes = yield select(justNotes)
+  if (!notes.loaded && notes.URL) {
+    const response = yield fetch(notes.URL)
+    const txt = yield response.text()
+    yield putResolveAction('NotesActions.loadNotes', txt)
+  }
+}
+
 export default function* routeListenerSaga() {
   yield takeEvery('RouteListenerSaga.userNavigation', userNavigation)
 }

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

@@ -31,7 +31,7 @@
 		stroke-linejoin: round;
 		fill: rgba(67, 133, 246, 0.1) !important;
 	}
-	
+
 	.a9s-annotation.a9s-annotation.hover > rect,
 	.a9s-annotation.a9s-annotation.hover > polygon
 	 {

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

@@ -0,0 +1,49 @@
+.editioncrafter {
+
+	#notesView {
+	
+		#notesViewInner {
+			margin: 5px 0 0 0;
+			// @include md {
+			// 	margin: 52px 0 0 0;
+			// }
+			width: calc(100% - 1.2rem);
+				max-height: calc(100vh - 170px);
+				padding: 5px 16px;
+		}
+		
+		#notesContent {
+			padding: max(80px, 5rem) 0 0;
+			max-height: 100vh;
+			-webkit-user-select: text;
+			-moz-user-select: text;
+			-ms-user-select: text;
+			user-select: text;
+			min-width: max(10rem, 160px);
+			@include md {
+				padding: max(3.5rem, 56px) 0 0;
+			}
+
+			table {
+				margin-top: 30px;
+			}
+
+			td, th {
+				border: 1px solid #ddd;
+				padding: 8px;
+			}
+			  
+			tr:nth-child(even){
+				background-color: #f2f2f2;
+			}
+			  
+			th {
+				padding-top: 12px;
+				padding-bottom: 12px;
+				text-align: left;
+				background-color: gray;
+				color: white;
+			}
+		}
+	}
+}

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

@@ -105,6 +105,7 @@ animation: #{$str};
 @import "transcriptView";
 @import "xmlView";
 @import "glossary";
+@import "notes";
 @import "jumpbox";
 
 @import "CETEIcean";

package/dist/es/src/RecordList/component/Record.jsx

@@ -1,6 +1,6 @@
 import { useContext, useMemo } from 'react'
+import Pill from '../../common/components/Pill'
 import FilterContext from '../context/FilterContext'
-import Pill from './Pill'
 
 function getRecordName(div) {
   if (div.element_name) {

package/dist/es/src/RecordList/component/RecordListView.jsx

@@ -1,6 +1,6 @@
 import { useContext, useMemo } from 'react'
+import { getObjs } from '../../common/lib/sql'
 import FilterContext from '../context/FilterContext'
-import { getObjs } from '../lib/sql'
 import Record from './Record'
 
 function cleanUpTagIds(obj) {

package/dist/es/src/RecordList/component/Sidebar.jsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { getObjs } from '../lib/sql'
+import { getObjs } from '../../common/lib/sql'
 import CollapsibleMenu from './CollapsibleMenu'
 import SidebarTagList from './SidebarTagList'
 

package/dist/es/src/RecordList/component/SidebarTagList.jsx

@@ -1,7 +1,7 @@
 import { useContext, useMemo } from 'react'
 import { IoCheckmarkSharp } from 'react-icons/io5'
+import Pill from '../../common/components/Pill'
 import FilterContext from '../context/FilterContext'
-import Pill from './Pill'
 
 function TagPill(props) {
   const { categories, toggleCategoryFilter, tags, toggleTagFilter } = useContext(FilterContext)

package/dist/es/src/RecordList/index.jsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import initSqlJs from 'sql.js'
-import Loading from './component/Loading'
+import Loading from '../common/components/Loading'
 import RecordListView from './component/RecordListView'
 import Sidebar from './component/Sidebar'
 

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

@@ -60,19 +60,3 @@
   background-color: #ffffff;
 }
 
-.editioncrafter-record-list .pill {
-  appearance: none;
-  display: flex;
-  height: 32px;
-  padding: 4px 12px;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-  border-radius: 50px;
-  border: 1px solid #CEDAE7;
-  background: #CEDAE7;
-  color: #0A0A0A;
-  font-family: Inter;
-  font-size: 14px;
-  font-weight: 500;
-}

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

@@ -0,0 +1,18 @@
+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)">
+        <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>
+        <clipPath id="clip0_527_47401">
+          <rect width="16" height="12" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default InsertLeft

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

@@ -0,0 +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)">
+        <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>
+        <clipPath id="clip0_527_47406">
+          <rect width="16" height="12" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default InsertRight

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

@@ -0,0 +1,17 @@
+function Left() {
+  return (
+    <svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_527_47371)">
+        <path d="M1.57302 0H6.01747C6.31215 0 6.59477 0.144866 6.80314 0.402728C7.01152 0.660591 7.12858 1.01033 7.12858 1.375V9.625C7.12858 9.98967 7.01152 10.3394 6.80314 10.5973C6.59477 10.8551 6.31215 11 6.01747 11H1.57302C1.27834 11 0.995725 10.8551 0.787351 10.5973C0.578977 10.3394 0.461914 9.98967 0.461914 9.625V1.375C0.461914 1.01033 0.578977 0.660591 0.787351 0.402728C0.995725 0.144866 1.27834 0 1.57302 0ZM1.57302 0.6875C1.42568 0.6875 1.28437 0.759933 1.18019 0.888864C1.076 1.0178 1.01747 1.19266 1.01747 1.375V9.625C1.01747 9.80734 1.076 9.98221 1.18019 10.1111C1.28437 10.2401 1.42568 10.3125 1.57302 10.3125H6.01747C6.16481 10.3125 6.30612 10.2401 6.41031 10.1111C6.51449 9.98221 6.57302 9.80734 6.57302 9.625V1.375C6.57302 1.19266 6.51449 1.0178 6.41031 0.888864C6.30612 0.759933 6.16481 0.6875 6.01747 0.6875H1.57302Z" fill="white" />
+        <path opacity="0.4" d="M8.90603 0H13.3505C13.6452 0 13.9278 0.144866 14.1362 0.402728C14.3445 0.660591 14.4616 1.01033 14.4616 1.375V9.625C14.4616 9.98967 14.3445 10.3394 14.1362 10.5973C13.9278 10.8551 13.6452 11 13.3505 11H8.90603C8.61135 11 8.32873 10.8551 8.12036 10.5973C7.91198 10.3394 7.79492 9.98967 7.79492 9.625V1.375C7.79492 1.01033 7.91198 0.660591 8.12036 0.402728C8.32873 0.144866 8.61135 0 8.90603 0ZM8.90603 0.6875C8.75869 0.6875 8.61738 0.759933 8.5132 0.888864C8.40901 1.0178 8.35048 1.19266 8.35048 1.375V9.625C8.35048 9.80734 8.40901 9.98221 8.5132 10.1111C8.61738 10.2401 8.75869 10.3125 8.90603 10.3125H13.3505C13.4978 10.3125 13.6391 10.2401 13.7433 10.1111C13.8475 9.98221 13.906 9.80734 13.906 9.625V1.375C13.906 1.19266 13.8475 1.0178 13.7433 0.888864C13.6391 0.759933 13.4978 0.6875 13.3505 0.6875H8.90603Z" fill="white" />
+      </g>
+      <defs>
+        <clipPath id="clip0_527_47371">
+          <rect width="14" height="11" fill="white" transform="translate(0.461914)" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default Left

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

@@ -0,0 +1,17 @@
+function Right() {
+  return (
+    <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_527_47381)">
+        <path opacity="0.4" d="M1.11111 0H5.55555C5.85024 0 6.13285 0.144866 6.34123 0.402728C6.5496 0.660591 6.66667 1.01033 6.66667 1.375V9.625C6.66667 9.98967 6.5496 10.3394 6.34123 10.5973C6.13285 10.8551 5.85024 11 5.55555 11H1.11111C0.816426 11 0.533811 10.8551 0.325437 10.5973C0.117063 10.3394 0 9.98967 0 9.625V1.375C0 1.01033 0.117063 0.660591 0.325437 0.402728C0.533811 0.144866 0.816426 0 1.11111 0ZM1.11111 0.6875C0.963768 0.6875 0.822461 0.759933 0.718274 0.888864C0.614087 1.0178 0.555555 1.19266 0.555555 1.375V9.625C0.555555 9.80734 0.614087 9.98221 0.718274 10.1111C0.822461 10.2401 0.963768 10.3125 1.11111 10.3125H5.55555C5.7029 10.3125 5.8442 10.2401 5.94839 10.1111C6.05258 9.98221 6.11111 9.80734 6.11111 9.625V1.375C6.11111 1.19266 6.05258 1.0178 5.94839 0.888864C5.8442 0.759933 5.7029 0.6875 5.55555 0.6875H1.11111Z" fill="white" />
+        <path d="M8.44412 0H12.8886C13.1832 0 13.4659 0.144866 13.6742 0.402728C13.8826 0.660591 13.9997 1.01033 13.9997 1.375V9.625C13.9997 9.98967 13.8826 10.3394 13.6742 10.5973C13.4659 10.8551 13.1832 11 12.8886 11H8.44412C8.14943 11 7.86682 10.8551 7.65844 10.5973C7.45007 10.3394 7.33301 9.98967 7.33301 9.625V1.375C7.33301 1.01033 7.45007 0.660591 7.65844 0.402728C7.86682 0.144866 8.14943 0 8.44412 0ZM8.44412 0.6875C8.29678 0.6875 8.15547 0.759933 8.05128 0.888864C7.94709 1.0178 7.88856 1.19266 7.88856 1.375V9.625C7.88856 9.80734 7.94709 9.98221 8.05128 10.1111C8.15547 10.2401 8.29678 10.3125 8.44412 10.3125H12.8886C13.0359 10.3125 13.1772 10.2401 13.2814 10.1111C13.3856 9.98221 13.4441 9.80734 13.4441 9.625V1.375C13.4441 1.19266 13.3856 1.0178 13.2814 0.888864C13.1772 0.759933 13.0359 0.6875 12.8886 0.6875H8.44412Z" fill="white" />
+      </g>
+      <defs>
+        <clipPath id="clip0_527_47381">
+          <rect width="14" height="11" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default Right

package/dist/es/src/TagExplore/assets/insert_left.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="fluent:document-one-page-20-regular" clip-path="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>
+<clipPath id="clip0_527_47401">
+<rect width="16" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/es/src/TagExplore/assets/insert_right.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="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>
+<clipPath id="clip0_527_47406">
+<rect width="16" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/es/src/TagExplore/assets/left.svg

@@ -0,0 +1,11 @@
+<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_527_47371)">
+<path d="M1.57302 0H6.01747C6.31215 0 6.59477 0.144866 6.80314 0.402728C7.01152 0.660591 7.12858 1.01033 7.12858 1.375V9.625C7.12858 9.98967 7.01152 10.3394 6.80314 10.5973C6.59477 10.8551 6.31215 11 6.01747 11H1.57302C1.27834 11 0.995725 10.8551 0.787351 10.5973C0.578977 10.3394 0.461914 9.98967 0.461914 9.625V1.375C0.461914 1.01033 0.578977 0.660591 0.787351 0.402728C0.995725 0.144866 1.27834 0 1.57302 0ZM1.57302 0.6875C1.42568 0.6875 1.28437 0.759933 1.18019 0.888864C1.076 1.0178 1.01747 1.19266 1.01747 1.375V9.625C1.01747 9.80734 1.076 9.98221 1.18019 10.1111C1.28437 10.2401 1.42568 10.3125 1.57302 10.3125H6.01747C6.16481 10.3125 6.30612 10.2401 6.41031 10.1111C6.51449 9.98221 6.57302 9.80734 6.57302 9.625V1.375C6.57302 1.19266 6.51449 1.0178 6.41031 0.888864C6.30612 0.759933 6.16481 0.6875 6.01747 0.6875H1.57302Z" fill="white"/>
+<path opacity="0.4" d="M8.90603 0H13.3505C13.6452 0 13.9278 0.144866 14.1362 0.402728C14.3445 0.660591 14.4616 1.01033 14.4616 1.375V9.625C14.4616 9.98967 14.3445 10.3394 14.1362 10.5973C13.9278 10.8551 13.6452 11 13.3505 11H8.90603C8.61135 11 8.32873 10.8551 8.12036 10.5973C7.91198 10.3394 7.79492 9.98967 7.79492 9.625V1.375C7.79492 1.01033 7.91198 0.660591 8.12036 0.402728C8.32873 0.144866 8.61135 0 8.90603 0ZM8.90603 0.6875C8.75869 0.6875 8.61738 0.759933 8.5132 0.888864C8.40901 1.0178 8.35048 1.19266 8.35048 1.375V9.625C8.35048 9.80734 8.40901 9.98221 8.5132 10.1111C8.61738 10.2401 8.75869 10.3125 8.90603 10.3125H13.3505C13.4978 10.3125 13.6391 10.2401 13.7433 10.1111C13.8475 9.98221 13.906 9.80734 13.906 9.625V1.375C13.906 1.19266 13.8475 1.0178 13.7433 0.888864C13.6391 0.759933 13.4978 0.6875 13.3505 0.6875H8.90603Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_527_47371">
+<rect width="14" height="11" fill="white" transform="translate(0.461914)"/>
+</clipPath>
+</defs>
+</svg>

package/dist/es/src/TagExplore/assets/right.svg

@@ -0,0 +1,11 @@
+<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_527_47381)">
+<path opacity="0.4" d="M1.11111 0H5.55555C5.85024 0 6.13285 0.144866 6.34123 0.402728C6.5496 0.660591 6.66667 1.01033 6.66667 1.375V9.625C6.66667 9.98967 6.5496 10.3394 6.34123 10.5973C6.13285 10.8551 5.85024 11 5.55555 11H1.11111C0.816426 11 0.533811 10.8551 0.325437 10.5973C0.117063 10.3394 0 9.98967 0 9.625V1.375C0 1.01033 0.117063 0.660591 0.325437 0.402728C0.533811 0.144866 0.816426 0 1.11111 0ZM1.11111 0.6875C0.963768 0.6875 0.822461 0.759933 0.718274 0.888864C0.614087 1.0178 0.555555 1.19266 0.555555 1.375V9.625C0.555555 9.80734 0.614087 9.98221 0.718274 10.1111C0.822461 10.2401 0.963768 10.3125 1.11111 10.3125H5.55555C5.7029 10.3125 5.8442 10.2401 5.94839 10.1111C6.05258 9.98221 6.11111 9.80734 6.11111 9.625V1.375C6.11111 1.19266 6.05258 1.0178 5.94839 0.888864C5.8442 0.759933 5.7029 0.6875 5.55555 0.6875H1.11111Z" fill="white"/>
+<path d="M8.44412 0H12.8886C13.1832 0 13.4659 0.144866 13.6742 0.402728C13.8826 0.660591 13.9997 1.01033 13.9997 1.375V9.625C13.9997 9.98967 13.8826 10.3394 13.6742 10.5973C13.4659 10.8551 13.1832 11 12.8886 11H8.44412C8.14943 11 7.86682 10.8551 7.65844 10.5973C7.45007 10.3394 7.33301 9.98967 7.33301 9.625V1.375C7.33301 1.01033 7.45007 0.660591 7.65844 0.402728C7.86682 0.144866 8.14943 0 8.44412 0ZM8.44412 0.6875C8.29678 0.6875 8.15547 0.759933 8.05128 0.888864C7.94709 1.0178 7.88856 1.19266 7.88856 1.375V9.625C7.88856 9.80734 7.94709 9.98221 8.05128 10.1111C8.15547 10.2401 8.29678 10.3125 8.44412 10.3125H12.8886C13.0359 10.3125 13.1772 10.2401 13.2814 10.1111C13.3856 9.98221 13.4441 9.80734 13.4441 9.625V1.375C13.4441 1.19266 13.3856 1.0178 13.2814 0.888864C13.1772 0.759933 13.0359 0.6875 12.8886 0.6875H8.44412Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_527_47381">
+<rect width="14" height="11" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,224 @@
+import { Accordion, AccordionDetails, AccordionSummary, Grid, Typography } from '@material-ui/core'
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+import { useEffect, useMemo } from 'react'
+import { getObjs } from '../../common/lib/sql'
+import InsertLeft from '../assets/InsertLeft'
+import InsertRight from '../assets/InsertRight'
+import Left from '../assets/Left'
+import Right from '../assets/Right'
+
+const MAX_THUMBNAIL_DIMENSION = 100
+
+function getData(db, docID, tags = []) {
+  const surfaceStmt = db.prepare(`
+      SELECT
+        surfaces.id AS id,
+        surfaces.name AS name,
+        surfaces.xml_id AS xml_id,
+        surfaces.width AS width,
+        surfaces.height AS height,
+        surfaces.image_type AS image_type,
+        surfaces.image_url AS image_url,
+        surfaces.position AS position,
+        taggings.tag_id
+      FROM
+        surfaces
+      LEFT JOIN
+        elements
+      ON
+        surfaces.id = elements.surface_id
+      LEFT JOIN
+        taggings
+      ON
+        elements.id = taggings.element_id
+      WHERE
+        document_id=${docID}${tags.length ? ` AND taggings.tag_id IN (${tags.join(',')})` : ''} 
+      ORDER BY
+        surfaces.id, position
+    `)
+
+  // add thumbnail URLs
+  const surfaces = getObjs(surfaceStmt)
+  for (const surface of surfaces) {
+    surface.thumbnail_url = getThumbnailURL(surface)
+  }
+
+  return surfaces
+}
+
+function getThumbnailURL(surface) {
+  const { image_url, width, height, image_type } = surface
+
+  const ratio = height !== 0 ? width / height : 0
+
+  let thumbnailDimensions = []
+  if (ratio > 1) {
+    thumbnailDimensions = [MAX_THUMBNAIL_DIMENSION, Math.round(MAX_THUMBNAIL_DIMENSION / ratio)]
+  }
+  else {
+    thumbnailDimensions = [Math.round(MAX_THUMBNAIL_DIMENSION * ratio), MAX_THUMBNAIL_DIMENSION]
+  }
+
+  const thumbnailURL = image_type === 'iiif'
+    ? `${image_url}/full/${thumbnailDimensions.join(',')}/0/default.jpg`
+    : image_url
+
+  return thumbnailURL
+}
+
+function Thumbnail(props) {
+  const { surfaceID, name, imageURL, thumbnailURL, onClick, selection, info } = props
+
+  const isLeft = useMemo(() => (selection && selection?.left?.localID === info?.localID && selection?.left?.surfaceID === info?.surfaceID), [selection, info])
+  const isRight = useMemo(() => (selection && selection?.right?.localID === info?.localID && selection?.right?.surfaceID === info?.surfaceID), [selection, info])
+
+  const onError = (currentTarget) => {
+    currentTarget.onerror = null
+    const fullImageURL = `${imageURL.slice(0, -9)}full/full/0/default.jpg`
+    if (currentTarget.src !== fullImageURL) {
+      currentTarget.src = fullImageURL
+    }
+  }
+
+  return (
+    <Grid className="surface-thumbnail">
+      <figure className="surface-thumbnail-figure">
+        {isLeft
+          ? (
+              <div className="surface-thumbnail-overlay-selected left">
+                <div>
+                  <Left />
+                  <Typography>Left</Typography>
+                </div>
+              </div>
+            )
+          : isRight
+            ? (
+                <div className="surface-thumbnail-overlay-selected right">
+                  <div>
+                    <Right />
+                    <Typography>Right</Typography>
+                  </div>
+                </div>
+              )
+            : (
+                <div className="surface-thumbnail-overlay">
+                  <div className="surface-thumbnail-overlay-content">
+                    <a onClick={onClick.left} title="Insert left"><InsertLeft /></a>
+                    <a onClick={onClick.right} title="Insert right"><InsertRight /></a>
+                  </div>
+                </div>
+              )}
+        <div id={surfaceID}>
+          <img
+            src={thumbnailURL}
+            alt={name}
+            style={{ maxWidth: `${MAX_THUMBNAIL_DIMENSION}px`, maxHeight: `${MAX_THUMBNAIL_DIMENSION}px` }}
+            onError={onError}
+          />
+        </div>
+      </figure>
+      <figcaption className="surface-thumbnail-caption">
+        {name}
+      </figcaption>
+    </Grid>
+  )
+}
+
+function ThumbnailGrid(props) {
+  const { surfaces, selection, navigateToSelection, documentLocalID } = props
+
+  return (
+    <Grid className="thumbnail-grid" container>
+      {
+        surfaces.map(surface => (
+          <Thumbnail
+            key={`doc-detail-thumb-${surface.id}`}
+            surfaceID={surface.id}
+            name={surface.name}
+            imageURL={surface.image_url}
+            thumbnailURL={surface.thumbnail_url}
+            selection={selection}
+            info={{
+              localID: documentLocalID,
+              surfaceID: surface.xml_id,
+            }}
+            onClick={{
+              left: (e) => {
+                e.preventDefault()
+                navigateToSelection({
+                  left: {
+                    localID: documentLocalID,
+                    surfaceID: surface.xml_id,
+                  },
+                  right: selection.right,
+                })
+              },
+              right: (e) => {
+                e.preventDefault()
+                navigateToSelection({
+                  left: selection.left,
+                  right: {
+                    localID: documentLocalID,
+                    surfaceID: surface.xml_id,
+                  },
+                })
+              },
+            }}
+          >
+          </Thumbnail>
+        ),
+        )
+      }
+    </Grid>
+  )
+}
+
+function DocumentDetail(props) {
+  const { db, documentName, documentID, documentLocalID, navigateToSelection, updatePageCount, selection, tags } = props
+  const surfaces = useMemo(() => {
+    const taggedSurfaces = getData(db, documentID, tags)
+    const data = []
+    for (const entry of taggedSurfaces) {
+      if (!data.find(d => (d.id === entry.id))) {
+        const tags = taggedSurfaces.filter(s => (s.id === entry.id)).map(s => (s.tag_id))
+        data.push({
+          ...entry,
+          tag_id: [...new Set(tags)],
+        })
+      }
+    }
+    return data.filter(s => (tags.every(t => s.tag_id.includes(t))))
+  }, [db, documentID, tags])
+
+  useEffect(() => {
+    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>
+  )
+}
+
+export default DocumentDetail