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

package/dist/es/src/EditionCrafter/action/NotesActions.js

@@ -0,0 +1,11 @@
+const NotesActions = {}
+
+NotesActions.loadNotes = function loadNotes(state, noteData) {
+  return {
+    ...state,
+    loaded: true,
+    notes: noteData,
+  }
+}
+
+export default NotesActions

package/dist/es/src/EditionCrafter/action/initialState/documentInitialState.js

@@ -3,12 +3,26 @@ function getHeaderUrlFromManifestUrl(manifestUrl) {
   return `${truncated}/html/index.html`
 }
 
+function getHeaderUrlsFromManifestUrls(data) {
+  if (typeof data === 'string') {
+    return getHeaderUrlFromManifestUrl(data)
+  }
+
+  const result = {}
+
+  Object.entries(data).forEach((ent) => {
+    result[ent[0]] = getHeaderUrlFromManifestUrl(ent[1])
+  })
+
+  return result
+}
+
 export default function documentInitalState(iiifManifest, documentName, transcriptionTypes, variorum = false, derivativeNames = null, threePanel = false) {
   return {
     documentName,
     derivativeNames,
     manifestURL: iiifManifest,
-    headerUrl: getHeaderUrlFromManifestUrl(iiifManifest),
+    headerUrl: getHeaderUrlsFromManifestUrls(iiifManifest),
     transcriptionTypes,
     variorum,
     threePanel,

package/dist/es/src/EditionCrafter/action/initialState/notesInitialState.js

@@ -0,0 +1,8 @@
+export default function notesInitialState(notesURL) {
+    return {
+      notes: '',
+      loaded: false,
+      URL: notesURL,
+    }
+  }
+  

package/dist/es/src/EditionCrafter/action/rootReducer.js

@@ -4,16 +4,19 @@ import { createReducer } from '../model/ReduxStore'
 import DiplomaticActions from './DiplomaticActions'
 import DocumentActions from './DocumentActions'
 import GlossaryActions from './GlossaryActions'
+import NotesActions from './NotesActions'
 
 import diplomaticInitialState from './initialState/diplomaticInitialState'
 import documentInitialState from './initialState/documentInitialState'
 import glossaryInitialState from './initialState/glossaryInitialState'
+import notesInitialState from './initialState/notesInitialState'
 
 export default function rootReducer(config) {
   const {
     documentName,
     documentInfo,
     glossaryURL,
+    notesURL,
     threePanel = false,
   } = config
   const variorum = documentInfo && Object.keys(documentInfo).length > 1
@@ -34,5 +37,6 @@ export default function rootReducer(config) {
     diplomatic: createReducer('DiplomaticActions', DiplomaticActions, diplomaticInitialState),
     document: createReducer('DocumentActions', DocumentActions, documentInitialState(iiifManifest, documentName, transcriptionTypes, variorum, derivativeNames, threePanel)),
     glossary: createReducer('GlossaryActions', GlossaryActions, glossaryInitialState(glossaryURL)),
+    notes: createReducer('NotesActions', NotesActions, notesInitialState(notesURL)),
   })
 }

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,9 +7,11 @@ import {
   useParams,
 } from 'react-router-dom'
 import { dispatchAction } from '../model/ReduxStore'
+import EmptyPaneView from './EmptyPaneView'
 import GlossaryView from './GlossaryView'
 import ImageGridView from './ImageGridView'
 import ImageView from './ImageView'
+import NotesView from './NotesView'
 import SinglePaneView from './SinglePaneView'
 import SplitPaneView from './SplitPaneView'
 import TranscriptionView from './TranscriptionView'
@@ -345,6 +347,9 @@ function DocumentView(props) {
     if (transcriptionType === 'glossary') {
       return 'GlossaryView'
     }
+    if (transcriptionType === 'notes') {
+      return 'NotesView'
+    }
     return xmlMode ? 'XMLView' : 'TranscriptionView'
   }
 
@@ -458,20 +463,33 @@ function DocumentView(props) {
     }
 
     if (viewType === 'ImageGridView') {
+      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]}
+            />
+          )
+      )
+    }
+
+    if (viewType === 'GlossaryView') {
       return (
-        <ImageGridView
+        <GlossaryView
           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]}
         />
       )
     }
-
-    if (viewType === 'GlossaryView') {
+    if (viewType === 'NotesView') {
       return (
-        <GlossaryView
+        <NotesView
           key={key}
           documentView={docView}
           documentViewActions={documentViewActions}

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

@@ -312,6 +312,11 @@ function Navigation(props) {
                         {DocumentHelper.transcriptionTypeLabels.glossary}
                       </MenuItem>
                     ) }
+                    { props.notes && (
+                      <MenuItem value="notes" key="notes">
+                        {DocumentHelper.transcriptionTypeLabels.notes}
+                      </MenuItem>
+                    )}
                   </Select>
                   {!imageViewActive && (
                     <ToggleButton
@@ -362,6 +367,7 @@ function Navigation(props) {
           document={props.document}
           folio={folio}
           toggleTags={toggleTags}
+          side={side}
         />
       )}
       <div className="navigationComponentNarrow">
@@ -440,6 +446,7 @@ function mapStateToProps(state) {
   return {
     document: state.document,
     glossary: !!state.glossary.URL,
+    notes: !!state.notes.URL,
   }
 }
 

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

@@ -0,0 +1,50 @@
+import { Typography } from '@material-ui/core'
+import React, { Component } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { connect } from 'react-redux'
+import Navigation from './Navigation'
+
+class NotesView extends Component {
+    constructor() {
+        super()
+        this.state = { filterTerm: '' }
+    }
+
+    onFilterChange = (event) => {
+        const filterTerm = event.target.value
+        this.setState({ ...this.state, filterTerm })
+    }
+    
+  render() {
+    if (!this.props.notes.loaded)
+      return null
+
+    return (
+      <div id="notesView" style={{ position: 'relative', overflow: 'auto' }}>
+        <Navigation
+          side={this.props.side}
+          onFilterChange={this.onFilterChange}
+          value={this.state.filterTerm}
+          documentView={this.props.documentView}
+          documentViewActions={this.props.documentViewActions}
+        />
+
+        <div id="notesViewInner">
+          <div id="notesContent">
+            <ReactMarkdown children={this.props.notes.notes} remarkPlugins={[remarkGfm]}/>
+          </div>
+        </div>
+
+      </div>
+    )
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    notes: state.notes,
+  }
+}
+
+export default connect(mapStateToProps)(NotesView)

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/DocumentHelper.js

@@ -3,6 +3,7 @@ const DocumentHelper = {}
 DocumentHelper.transcriptionTypeLabels = {
   f: 'Facsimile', // keep
   glossary: 'Glossary', // keep
+  notes: 'Notes', 
 }
 
 export default DocumentHelper