@cu-mkp/editioncrafter 1.3.0-beta.1 → 1.3.0-beta.3

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

@@ -36,25 +36,27 @@ function DiploMatic(props) {
   const { fixedFrameMode } = props.diplomatic
   const fixedFrameModeClass = fixedFrameMode ? 'editioncrafter' : 'editioncrafter sticky'
 
+  const mainBody = (
+    <div id="diplomatic" className={fixedFrameModeClass} ref={containerRef} style={{ height: containerHeight }}>
+      <RouteListener />
+      <div id="content" style={{ height: '100%' }}>
+        <Routes>
+          <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+          <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+          <Route path="/ec/:folioID/:transcriptionType" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+          <Route path="/ec/:folioID" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+          <Route path="/ec" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
+          <Route path="/" element={<Navigate to="/ec" />} exact />
+        </Routes>
+      </div>
+    </div>
+  )
+
+  const topLevel = !(props.tagExplorerMode === true) ? <HashRouter><TagFilterProvider>{mainBody}</TagFilterProvider></HashRouter> : mainBody
+
   return (
     <Provider store={props.store}>
-      <HashRouter>
-        <TagFilterProvider>
-          <div id="diplomatic" className={fixedFrameModeClass} ref={containerRef} style={{ height: containerHeight }}>
-            <RouteListener />
-            <div id="content" style={{ height: '100%' }}>
-              <Routes>
-                <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2/:folioID3/:transcriptionType3" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
-                <Route path="/ec/:folioID/:transcriptionType/:folioID2/:transcriptionType2" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
-                <Route path="/ec/:folioID/:transcriptionType" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
-                <Route path="/ec/:folioID" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
-                <Route path="/ec" element={<DocumentView {...props} containerWidth={containerWidth} />} exact />
-                <Route path="/" element={<Navigate to="/ec" />} exact />
-              </Routes>
-            </div>
-          </div>
-        </TagFilterProvider>
-      </HashRouter>
+      { topLevel }
     </Provider>
   )
 }

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

@@ -7,10 +7,11 @@ import {
   useParams,
 } from 'react-router-dom'
 import { dispatchAction } from '../model/ReduxStore'
+import EmptyPaneView from './EmptyPaneView'
 import GlossaryView from './GlossaryView'
-import NotesView from './NotesView'
 import ImageGridView from './ImageGridView'
 import ImageView from './ImageView'
+import NotesView from './NotesView'
 import SinglePaneView from './SinglePaneView'
 import SplitPaneView from './SplitPaneView'
 import TranscriptionView from './TranscriptionView'
@@ -462,14 +463,17 @@ function DocumentView(props) {
     }
 
     if (viewType === 'ImageGridView') {
-      return (
-        <ImageGridView
-          key={key}
-          documentView={docView}
-          documentViewActions={documentViewActions}
-          side={side}
-          selectedDoc={document || props.document.variorum && Object.keys(props.document.derivativeNames)[side === 'left' ? 0 : side === 'right' ? 1 : Object.keys(props.document.derivativeNames).length > 2 ? 2 : 1]}
-        />
+      return (props.tagExplorerMode
+        ? <EmptyPaneView side={side} documentView={docView} />
+        : (
+            <ImageGridView
+              key={key}
+              documentView={docView}
+              documentViewActions={documentViewActions}
+              side={side}
+              selectedDoc={document || props.document.variorum && Object.keys(props.document.derivativeNames)[side === 'left' ? 0 : side === 'right' ? 1 : Object.keys(props.document.derivativeNames).length > 2 ? 2 : 1]}
+            />
+          )
       )
     }
 

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

@@ -0,0 +1,22 @@
+import { Typography } from '@material-ui/core'
+import Left from '../../TagExplore/assets/Left'
+import Right from '../../TagExplore/assets/Right'
+
+function EmptyPaneView(props) {
+  return (
+    <div style={{ backgroundColor: 'black', display: 'flex', justifyContent: 'center', alignItems: 'center', color: 'white' }}>
+      <div style={{ display: 'flex', flexDirection: 'row', gap: '12px', alignItems: 'center' }}>
+        { props.side === 'left' ? <Left /> : <Right /> }
+        <Typography>
+          Select
+          {' '}
+          {props.side}
+          {' '}
+          page
+        </Typography>
+      </div>
+    </div>
+  )
+}
+
+export default EmptyPaneView

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

@@ -1,6 +1,6 @@
 import Annotorious from '@recogito/annotorious-openseadragon'
 import OpenSeadragon from 'openseadragon'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { connect } from 'react-redux'
 
 import {
@@ -9,10 +9,11 @@ import {
   useNavigate,
   useSearchParams,
 } from 'react-router-dom'
+import TagFilterContext from '../context/TagFilterContext'
 import ImageZoomControl from './ImageZoomControl'
 import Navigation from './Navigation'
-import { BigRingSpinner } from './RingSpinner'
 
+import { BigRingSpinner } from './RingSpinner'
 import SeaDragonComponent from './SeaDragonComponent'
 import '@recogito/annotorious-openseadragon/dist/annotorious.min.css'
 
@@ -20,41 +21,68 @@ function ImageView(props) {
   const [viewer, setViewer] = useState(null)
   const [anno, setAnno] = useState(null)
 
+  const { tagsLeft, tagsRight } = useContext(TagFilterContext)
+
+  const tags = useMemo(() => (props.side === 'right' ? tagsRight : tagsLeft), [props.side, tagsLeft, tagsRight])
+
   const location = useLocation()
   const navigate = useNavigate()
 
   const [searchParams] = useSearchParams()
-  const [loading, setLoading] = useState(false)
 
-  useEffect(() => {
-    if (anno && searchParams.get('zone')) {
-      // TODO: Figure out why annotations are an empty list
-      // unless I wait for > 20 ms.
-      setTimeout(() => anno.selectAnnotation(searchParams.get('zone')), 50)
+  const imageViewRef = useRef(null)
+
+  const folio = props.document.folioIndex[props.folioID]
+
+  const updateHighlightedZones = useCallback(() => {
+    if (folio.zoneTagIndex && imageViewRef.current) {
+      const annotationEls = imageViewRef.current.querySelectorAll('.a9s-annotation')
+      const zonesToHighlight = Object.keys(folio.zoneTagIndex)
+        .filter(zoneId => folio.zoneTagIndex[zoneId].some(tag => tags.includes(tag)))
+
+      const manualSelection = searchParams.get('zone')
+
+      if (manualSelection && !zonesToHighlight.includes(manualSelection)) {
+        zonesToHighlight.push(manualSelection)
+      }
+
+      annotationEls.forEach((annoEl) => {
+        const annoId = annoEl.getAttribute('data-id')
+        if (zonesToHighlight.includes(annoId)) {
+          annoEl.classList.add('selected')
+        }
+        else {
+          annoEl.classList.remove('selected')
+        }
+      })
     }
-  }, [anno])
+  }, [folio, tags, imageViewRef, searchParams])
+
+  useEffect(() => {
+    setTimeout(() => updateHighlightedZones(), 50)
+  }, [updateHighlightedZones])
 
-  const onZoomGrid = (e) => {
+  const onZoomGrid = () => {
     props.documentViewActions.changeTranscriptionType(props.side, 'g')
   }
 
-  const onZoomFixed_1 = (e) => {
+  const onZoomFixed_1 = () => {
     viewer.viewport.zoomTo(viewer.viewport.getMaxZoom())
   }
 
-  const onZoomFixed_2 = (e) => {
+  const onZoomFixed_2 = () => {
     viewer.viewport.zoomTo((viewer.viewport.getMaxZoom() / 2))
   }
 
-  const onZoomFixed_3 = (e) => {
+  const onZoomFixed_3 = () => {
     viewer.viewport.fitVertically()
   }
 
-  const onZoomIn = (e) => {
+  const onZoomIn = () => {
     viewer.viewport.zoomBy(2)
   }
 
-  const onZoomOut = (e) => {
+  const onZoomOut = () => {
     viewer.viewport.zoomBy(0.5)
   }
 
@@ -74,14 +102,25 @@ function ImageView(props) {
       // every time it changes!
       anno.on('selectAnnotation', (annotation) => {
         searchParams.set('zone', annotation.id)
+        updateHighlightedZones()
         navigate(`${location.pathname}?${createSearchParams(searchParams.toString())}`)
       })
 
       anno.on('cancelSelected', () => {
-        navigate(location.pathname)
+        searchParams.delete('zone')
+        navigate(`${location.pathname}?${createSearchParams(searchParams.toString())}`)
       })
     }
-  }, [location.pathname, anno])
+  }, [searchParams, anno, updateHighlightedZones, folio, navigate, location.pathname])
+
+  useEffect(() => {
+    if (folio.tileSource && viewer) {
+      viewer.open(folio.tileSource)
+      if (folio.annotations && anno) {
+        anno.setAnnotations(folio.annotations)
+      }
+    }
+  }, [anno, viewer, folio, props.document.folioIndex])
 
   const initViewer = async (el, tileSource) => {
     if (!el) {
@@ -117,29 +156,11 @@ function ImageView(props) {
     if (viewer) {
       viewer.destroy()
     }
-  }, [])
-
-  const { tileSource } = props.document.folioIndex[props.folioID]
-
-  useEffect(() => {
-    const folio = props.document.folioIndex[props.folioID]
-    if (folio.loading) {
-      setLoading(true)
-    }
-    if (folio.tileSource && viewer) {
-      viewer.open(folio.tileSource)
-      if (folio.annotations && anno) {
-        anno.setAnnotations(folio.annotations)
-      }
-    }
-    if (!folio.loading) {
-      setLoading(false)
-    }
-  }, [anno, viewer, props.folioID, props.document.folioIndex])
+  }, [viewer])
 
   return (
-    <div>
-      { tileSource
+    <div ref={imageViewRef}>
+      { folio.tileSource
         ? (
             <div className={`image-view imageViewComponent ${props.side}`} style={{ position: 'relative' }}>
               <Navigation
@@ -162,9 +183,9 @@ function ImageView(props) {
               <SeaDragonComponent
                 key={props.folioID}
                 side={props.side}
-                tileSource={tileSource}
+                tileSource={folio.tileSource}
                 initViewer={initViewer}
-                loading={loading}
+                loading={folio.loading}
               />
             </div>
           )

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

@@ -367,6 +367,7 @@ function Navigation(props) {
           document={props.document}
           folio={folio}
           toggleTags={toggleTags}
+          side={side}
         />
       )}
       <div className="navigationComponentNarrow">

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

@@ -12,7 +12,8 @@ class SplitPaneView extends Component {
     this.splitFraction = props.threePanel ? 0.49 : 0.5
     this.splitFractionRight = props.threePanel ? 0.01 : 0
     this.dividerWidth = 16
-    const whole = window.innerWidth
+    this.ecComponent = document.querySelector('#diplomatic')
+    const whole = this.ecComponent.clientWidth
     const leftW = whole / 3
 
     const split_left = (leftW / whole)
@@ -37,12 +38,12 @@ class SplitPaneView extends Component {
   // On drag, update the UI continuously
   onDrag = (e) => {
     if (this.dragging) {
-      const whole = window.innerWidth - 2 * this.dividerWidth
+      const whole = this.ecComponent.clientWidth - 2 * this.dividerWidth
       let left_viewWidth
       let right_viewWidth
       let third_viewWidth
       if (this.activeDivider === 1) {
-        left_viewWidth = e.clientX - this.dividerWidth / 2
+        left_viewWidth = (e.clientX - this.ecComponent.offsetLeft) - this.dividerWidth / 2
         third_viewWidth = whole * this.splitFractionRight
         right_viewWidth = whole - left_viewWidth - third_viewWidth
       }
@@ -98,9 +99,9 @@ class SplitPaneView extends Component {
   // Update the sizes of the panes
   updatePaneSize() {
     // Record state change
-    const left_px = Math.floor(Math.abs(window.innerWidth * this.splitFraction))
-    const third_px = Math.floor(Math.abs(window.innerWidth * this.splitFractionRight))
-    const right_px = Math.floor(window.innerWidth * (1.0 - this.splitFraction - this.splitFractionRight))
+    const left_px = Math.floor(Math.abs(this.ecComponent.clientWidth * this.splitFraction))
+    const third_px = Math.floor(Math.abs(this.ecComponent.clientWidth * this.splitFractionRight))
+    const right_px = Math.floor(this.ecComponent.clientWidth * (1.0 - this.splitFraction - this.splitFractionRight))
     if (this.props.onWidth && left_px >= this.leftPaneMinWidth && right_px >= this.rightPaneMinWidth && third_px >= this.thirdPaneMinWidth) {
       this.props.onWidth(left_px, right_px, third_px)
     }
@@ -113,9 +114,9 @@ class SplitPaneView extends Component {
     window.addEventListener('resize', this.onResize)
     // Set the default width on mount
     if (this.props.onWidth) {
-      const left_px = Math.floor(Math.abs(window.innerWidth * this.splitFraction))
-      const right_px = Math.floor(window.innerWidth * (1.0 - this.splitFraction))
-      const third_px = Math.floor(window.innerWidth * (1.0 - this.splitFraction))
+      const left_px = Math.floor(Math.abs(this.ecComponent.clientWidth * this.splitFraction))
+      const right_px = Math.floor(this.ecComponent.clientWidth * (1.0 - this.splitFraction))
+      const third_px = Math.floor(this.ecComponent.clientWidth * (1.0 - this.splitFraction))
       this.props.onWidth(left_px, right_px, third_px)
     }
   }

package/dist/es/src/EditionCrafter/component/TagToolbar.jsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useMemo } from 'react'
 import { BsCheck, BsX } from 'react-icons/bs'
 import { GoTag } from 'react-icons/go'
 import TagFilterContext from '../context/TagFilterContext'
@@ -17,7 +17,8 @@ function TagPill(props) {
 }
 
 function TagToolbar(props) {
-  const { tags, toggleTag } = useContext(TagFilterContext)
+  const { tagsLeft, tagsRight, toggleTag } = useContext(TagFilterContext)
+  const tags = useMemo(() => (props.side === 'right' ? tagsRight : tagsLeft), [props.side, tagsRight, tagsLeft])
 
   return (
     <div className="tag-bar">
@@ -27,7 +28,16 @@ function TagToolbar(props) {
           Tags
         </span>
         {props.folio.tagIds.map((xmlId) => {
-          const name = props.document.tags[xmlId]
+          let name
+
+          if (props.document.variorum) {
+            name = props.document.tags[props.folio.doc_id]
+              ? props.document.tags[props.folio.doc_id][xmlId]
+              : undefined
+          }
+          else {
+            name = props.document.tags[xmlId]
+          }
 
           if (name) {
             return (
@@ -35,7 +45,7 @@ function TagToolbar(props) {
                 isActive={tags.includes(xmlId)}
                 key={xmlId}
                 name={name}
-                onClick={() => toggleTag(xmlId)}
+                onClick={() => toggleTag(xmlId, props.side)}
               />
             )
           }

package/dist/es/src/EditionCrafter/context/TagFilter.jsx

@@ -8,7 +8,7 @@ import {
 import TagFilterContext from './TagFilterContext'
 
 function getTagsFromParams(val) {
-  if (val) {
+  if (val && val !== 'null') {
     return val.split(',')
   }
 
@@ -20,36 +20,47 @@ function TagFilterProvider(props) {
   const location = useLocation()
   const navigate = useNavigate()
 
-  const [tags, setTags] = useState(getTagsFromParams(searchParams.get('tags')))
+  const [tagsLeft, setTagsLeft] = useState(getTagsFromParams(searchParams.get('tagsLeft')))
+  const [tagsRight, setTagsRight] = useState(getTagsFromParams(searchParams.get('tagsRight')))
 
-  const tagParams = searchParams.get('tags')
+  const tagParamsLeft = searchParams.get('tagsLeft')
+  const tagParamsRight = searchParams.get('tagsRight')
 
   useEffect(() => {
-    const newTags = getTagsFromParams(tagParams)
-    setTags(newTags)
-  }, [tagParams])
+    const newTags = getTagsFromParams(tagParamsLeft)
+    setTagsLeft(newTags)
+  }, [tagParamsLeft])
+
+  useEffect(() => {
+    const newTags = getTagsFromParams(tagParamsRight)
+    setTagsRight(newTags)
+  }, [tagParamsRight])
 
   const ctxValue = useMemo(() => {
-    const toggleTag = (xmlId) => {
+    const toggleTag = (xmlId, side) => {
+      const tags = side === 'right' ? tagsRight : tagsLeft
+      const tagParams = side === 'right' ? tagParamsRight : tagParamsLeft
+      const setTags = side === 'right' ? setTagsRight : setTagsLeft
       if (tags.includes(xmlId)) {
         const oldTags = getTagsFromParams(tagParams)
         const newTags = oldTags.filter(t => t !== xmlId)
-        searchParams.set('tags', newTags.join(','))
+        searchParams.set(`tags${side === 'right' ? 'Right' : 'Left'}`, newTags.join(','))
         setTags(newTags)
         navigate(`${location.pathname}?${createSearchParams(searchParams.toString())}`)
       }
       else {
-        searchParams.set('tags', `${tagParams},${xmlId}`)
+        searchParams.set(`tags${side === 'right' ? 'Right' : 'Left'}`, `${tagParams},${xmlId}`)
         setTags([...tags, xmlId])
         navigate(`${location.pathname}?${createSearchParams(searchParams.toString())}`)
       }
     }
 
     return {
-      tags,
+      tagsLeft,
+      tagsRight,
       toggleTag,
     }
-  }, [location.pathname, navigate, searchParams, tagParams, tags])
+  }, [location.pathname, navigate, searchParams, tagParamsLeft, tagParamsRight, tagsLeft, tagsRight])
 
   return (
     <TagFilterContext.Provider value={ctxValue}>

package/dist/es/src/EditionCrafter/context/TagFilterContext.js

@@ -1,7 +1,8 @@
 import { createContext } from 'react'
 
 const TagFilterContext = createContext({
-  tags: [],
+  tagsLeft: [],
+  tagsRight: [],
   toggleTag: () => null,
 })
 

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

@@ -0,0 +1,31 @@
+import { createTheme, ThemeProvider } from '@material-ui/core/styles'
+import React from 'react'
+import DiploMatic from './component/DiploMatic'
+import { createReduxStore } from './model/ReduxStore'
+import './scss/editioncrafter.scss'
+
+/**
+ * Default instantiation
+ */
+function EditionCrafter(props) {
+  const theme = createTheme({
+    palette: {
+      primary: {
+        main: '#792421',
+      },
+      secondary: {
+        main: '#EBE3DD',
+      },
+    },
+  })
+
+  const tagExplorerMode = props.tagExplorerMode === true
+
+  return (
+    <ThemeProvider theme={theme}>
+      <DiploMatic config={props} store={createReduxStore(props)} tagExplorerMode={tagExplorerMode} />
+    </ThemeProvider>
+  )
+}
+
+export default EditionCrafter

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

@@ -7,13 +7,10 @@ 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
   }
 
@@ -23,6 +20,8 @@ function* parseTags(headerUrl) {
 
   const categoryEls = headerDoc.querySelectorAll('tei-category')
 
+  const documentTags = {}
+
   for (const categoryEl of categoryEls) {
     const xmlId = categoryEl.getAttribute('id')
 
@@ -30,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) {

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
 	 {