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

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

@@ -0,0 +1,106 @@
+import { Checkbox, FormControlLabel, FormGroup, Typography } from '@material-ui/core'
+import { useContext, useEffect, useMemo, useState } from 'react'
+import { getObjs } from '../../common/lib/sql'
+import TagFilterContext from '../../EditionCrafter/context/TagFilterContext'
+
+function getData(db) {
+  const taxonomiesStmt = db.prepare(`
+    SELECT
+      *
+    FROM
+      taxonomies;
+  `)
+
+  const tagsStmt = db.prepare(`
+    SELECT
+      tags.id AS id,
+      tags.name AS name,
+      tags.xml_id AS xml_id,
+      taxonomies.name as taxonomy,
+      taxonomies.id as taxonomy_id
+    FROM
+      tags
+    LEFT JOIN taxonomies
+      ON tags.taxonomy_id = taxonomies.id
+    INNER JOIN taggings
+      ON taggings.tag_id = tags.id
+    INNER JOIN elements
+      ON elements.id = taggings.element_id
+    WHERE
+      elements.type = 'zone'
+    GROUP BY
+      tags.xml_id`)
+
+  return {
+    tags: getObjs(tagsStmt),
+    taxonomies: getObjs(taxonomiesStmt),
+  }
+}
+
+function TagFilters(props) {
+  const { onToggleSelected, filters } = props
+  const data = useMemo(() => getData(props.db), [props.db])
+  const [expanded, setExpanded] = useState(data.taxonomies?.map(() => (false)))
+  const [displayedTags, setDisplayedTags] = useState({})
+
+  const { toggleTag } = useContext(TagFilterContext)
+
+  useEffect(() => {
+    const tags = {}
+    for (let i = 0; i < data.taxonomies.length; i++) {
+      const tax = data.taxonomies[i]
+      const tagList = expanded[i] ? data.tags.filter(t => (t.taxonomy_id === tax.id)) : data.tags.filter(t => (t.taxonomy_id === tax.id))?.slice(0, 5)
+      tags[tax.id] = tagList
+    }
+    setDisplayedTags(tags)
+  }, [expanded, data])
+
+  return (
+    <div className="tag-filters">
+      <div className="tag-list">
+        <FormGroup>
+          { data.taxonomies.map((tax, idx) => {
+            const tagList = displayedTags[tax.id]
+            return (
+              <div key={tax.id}>
+                <Typography>{tax.name}</Typography>
+                <ul>
+                  { tagList?.map(tag => (
+                    <FormControlLabel
+                      as="li"
+                      control={(
+                        <Checkbox
+                          checked={filters.includes(tag.id)}
+                          onChange={() => {
+                            onToggleSelected(tag.id)
+                            toggleTag(tag.xml_id, 'left')
+                            toggleTag(tag.xml_id, 'right')
+                          }}
+                        />
+                      )}
+                      key={tag.id}
+                      label={tag.name}
+                    />
+                  ))}
+                </ul>
+                <button
+                  className="tag-filter-button"
+                  type="button"
+                  onClick={() => {
+                    const newState = [...expanded]
+                    newState[idx] = !expanded[idx]
+                    setExpanded(newState)
+                  }}
+                >
+                  { !data.tags.filter(t => (t.taxonomy_id === tax.id))?.length || data.tags.filter(t => (t.taxonomy_id === tax.id)).length < 6 ? null : expanded[idx] ? 'Show less' : 'Show more'}
+                </button>
+              </div>
+            )
+          })}
+        </FormGroup>
+      </div>
+    </div>
+  )
+}
+
+export default TagFilters

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

@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react'
+import { HashRouter } from 'react-router-dom'
+import initSqlJs from 'sql.js'
+import Loading from '../common/components/Loading'
+import { getObjs } from '../common/lib/sql'
+import EditionCrafter from '../EditionCrafter'
+import TagFilterProvider from '../EditionCrafter/context/TagFilter'
+import TagExploreSidebar from './components/TagExploreSidebar'
+import './styles/base.css'
+
+const initialFilters = {
+  categories: [],
+  tags: [],
+}
+
+async function initDb(url) {
+  const file = await fetch(url)
+
+  if (!file.ok) {
+    throw new Error('Failed fetching SQLite file.')
+  }
+
+  const buf = await file.arrayBuffer()
+  const arr = new Uint8Array(buf)
+
+  const db = await initSqlJs({
+    locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.12.0/${file}`,
+  }).then((SQL) => {
+    const db = new SQL.Database(arr)
+    return db
+  })
+
+  return db
+}
+
+function getData(db) {
+  const documentStmt = db.prepare(`
+    SELECT
+      documents.name AS name,
+      documents.local_id AS local_id
+    FROM
+      documents
+  `)
+
+  return getObjs(documentStmt)
+}
+
+function generateECProps(props, db) {
+  const documents = getData(db)
+  const { documentName, baseURL, transcriptionTypes } = props
+  const documentInfo = {}
+
+  for (const document of documents) {
+    documentInfo[document.local_id] = {
+      documentName: document.name,
+      transcriptionTypes,
+      iiifManifest: `${baseURL}/${document.local_id}/iiif/manifest.json`,
+    }
+  }
+
+  return {
+    documentName,
+    documentInfo,
+    tagExplorerMode: true,
+  }
+}
+
+function TagExplore(props) {
+  const [db, setDb] = useState(null)
+  const [ecProps, setECProps] = useState(null)
+  const [filters, setFilters] = useState(initialFilters)
+
+  useEffect(() => {
+    const loadDb = async () => {
+      const db = await initDb(props.dbUrl)
+      const ecProps = generateECProps(props, db)
+      setDb(db)
+      setECProps(ecProps)
+    }
+
+    if (!db) {
+      loadDb()
+    }
+
+    return () => {
+      if (db) {
+        db.close()
+      }
+    }
+  }, [props.dbUrl, db])
+
+  if (!db || !ecProps) {
+    return <Loading />
+  }
+
+  return (
+    <div className="tag-explore">
+      <HashRouter>
+        <TagFilterProvider>
+          <TagExploreSidebar db={db} />
+          <EditionCrafter {...ecProps} />
+        </TagFilterProvider>
+      </HashRouter>
+    </div>
+  )
+}
+
+export default TagExplore

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

@@ -0,0 +1,192 @@
+.tag-explore {
+  display: grid;
+  max-height: 100vh;
+  grid-template-columns: 50px 1fr;
+}
+
+.tag-explore-sidebar {
+  position: relative;
+  z-index: 999;
+  height: 100%;
+  max-height: 100dvh;
+}
+
+.tag-explore .narrow-sidebar {
+  height: 100vh;
+  width: 48px;
+}
+
+.tag-explore-sidebar {
+  overflow-y: none;
+  height: 100%;
+  background-color: black;
+}
+
+.tag-explore .tag-filters {
+  overflow-y: auto;
+  position: absolute;
+  top: 48px;
+  left: 0;
+  background-color: #242629;
+  z-index: 10000;
+  padding: 12px 0 12px 12px;
+  width: 100%;
+  height: 100%;
+  max-height: 100dvh;
+}
+
+.tag-explore .tag-filter-button {
+  background-color: #242629;
+  padding: 12px;
+  color: white;
+  border: 1px solid white;
+  border-radius: 6px;
+  margin: 6px auto 12px auto;
+  cursor: pointer;
+}
+
+.tag-explore .tag-filter-button:hover {
+  background-color: white;
+  color: black;
+}
+
+.tag-explore .tag-filters ul {
+  display: flex;
+  flex-direction: column;
+}
+
+.tag-explore .surface-browser-close {
+  position: absolute;
+  top: 0;
+  right: -24px;
+  background-color: #242629;
+}
+
+.tag-explore .tag-filters .tag-list, .tag-explore-sidebar {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.surface-thumbnail-caption {
+  text-align: center;
+}
+
+.surface-thumbnail-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  background-color: #2426297d;
+  opacity: 0%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
+
+.surface-thumbnail-overlay-selected {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+.surface-thumbnail-overlay-selected.left {
+  border: 2px solid #008F81;
+}
+
+.surface-thumbnail-overlay-selected.right {
+  border: 2px solid #A31621;
+}
+
+.surface-thumbnail-overlay-selected > div {
+  color: white;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  gap: 6px;
+  align-items: center;
+  padding: 6px;
+  border-top-left-radius: 6px;
+  font-size: small;
+}
+
+.surface-thumbnail-overlay-selected.left > div {
+  background-color: #008F81;
+}
+
+.surface-thumbnail-overlay-selected.right > div {
+  background-color: #A31621;
+}
+
+.surface-thumbnail-overlay .surface-thumbnail-overlay-content {
+  opacity: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
+  padding: 8px;
+  background-color: #242629;
+}
+
+.surface-thumbnail-overlay:hover {
+  opacity: 100%;
+}
+
+.surface-thumbnail-overlay a {
+  cursor: pointer;
+}
+
+.surface-thumbnail-figure {
+  padding: 0;
+  margin: 16px;
+  position: relative;
+}
+
+.tag-explore .surface-browser {
+  position: absolute;
+  top: 0;
+  left: 48px;
+  height: 100vh;
+  min-width: 300px;
+  display: flex;
+  flex-direction: column;
+  background-color: #242629;
+  color: white;
+  padding: 12px;
+}
+
+.tag-explore .surface-browser-document-details {
+  overflow-y: auto;
+  position: relative;
+}
+
+.tag-explore .accordion-summary {
+  flex-direction: row-reverse;
+  background-color: #242629
+}
+
+.tag-explore .accordion-summary div {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+/* .tag-explore .accordion-summary .MuiAccordionSummary-expandIcon {
+  padding-left: 0;
+} */
+
+.tag-explore .accordion-summary .MuiAccordionSummary-content {
+  padding-left: 12px;
+  gap: 12px;
+}
+
+.tag-explore .accordion-detail {
+  background-color: #242629;
+}

package/dist/es/src/{RecordList/component → common/components}/Pill.jsx

@@ -1,3 +1,5 @@
+import './Pill.style.css'
+
 function Pill(props) {
   return (
     <button className={props.isActive ? 'active pill' : 'pill'} onClick={props.onClick} type="button">

package/dist/es/src/common/components/Pill.style.css

@@ -0,0 +1,16 @@
+.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/index.jsx

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cu-mkp/editioncrafter",
   "type": "module",
-  "version": "1.3.0-beta.1",
+  "version": "1.3.0-beta.2",
   "private": false,
   "description": "A simple digital critical edition publication tool",
   "license": "MIT",
@@ -51,42 +51,16 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.8.0",
-    "@chromatic-com/storybook": "^3.2.2",
     "@eslint-react/eslint-plugin": "^1.15.2",
-    "@storybook/addon-essentials": "^8.4.3",
-    "@storybook/addon-interactions": "^8.4.3",
-    "@storybook/addon-links": "^8.4.3",
-    "@storybook/blocks": "^8.4.3",
     "@storybook/builder-vite": "^8.4.3",
-    "@storybook/react": "^8.4.3",
     "@storybook/react-vite": "^8.4.3",
-    "@storybook/test": "^8.4.3",
     "@vitejs/plugin-react": "^4.3.3",
-    "bundlewatch": "^0.3.3",
-    "chalk": "^4.1.0",
-    "codecov": "^3.7.0",
-    "core-js": "^3.21.1",
-    "css-loader": "^6.7.3",
-    "enzyme": "^3.11.0",
     "eslint": "^9.14.0",
     "eslint-plugin-astro": "^1.3.0",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "glob": "^7.1.4",
-    "http-server": "^14.1.0",
-    "jsdom": "^19.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-refresh": "^0.14.0",
-    "redux-mock-store": "^1.5.1",
-    "redux-saga-test-plan": "^4.0.6",
-    "resolve-url-loader": "^5.0.0",
-    "sass": "^1.61.0",
-    "sass-loader": "^13.2.2",
     "storybook": "^8.4.2",
-    "style-loader": "^3.3.2",
-    "unfetch": "^4.1.0",
-    "url-polyfill": "^1.1.7",
     "vite": "^5.4.11",
     "vite-plugin-css-injected-by-js": "^3.5.2"
   },