@harvard-lts/mirador-eda-plugin 0.1.1 → 0.1.3

package/src/plugins/EdaSideBarButtonsWrapper.js

@@ -1,51 +0,0 @@
-import React, { useMemo } from "react"
-import { useSelector, shallowEqual } from "react-redux"
-import { getEdaTranscription } from "./transcriptionUtils"
-import EdaTranscriptionButton from "./EdaTranscriptionButton"
-
-// /**
-//  * Wrapper for the WindowSideBarButtons component
-//  * Sets "EDA Transcriptions" for the tooltip text translations for EDA Transcriptions button
-//  * Hides the Annotation button when EDA transcriptions are available
-//  * @param {Object} props - Component props
-//  * @param {React.Component} props.TargetComponent - The component to wrap
-//  * @param {Object} props.targetProps - Other props passed to the component
-//  */
-
-const EdaSideBarButtonsWrapper = ({ TargetComponent, ...targetProps }) => {
-  // shallowEqual prevents re-renders unless transcriptions actually change
-  const transcriptions = useSelector(getEdaTranscription, shallowEqual)
-  const hasTranscriptions = Boolean(transcriptions && transcriptions.length > 0)
-
-  // sets the translation for the EDA Transcriptions button tooltip
-  const customTranslation = (key, opts) => {
-    if (key === "openCompanionWindow" &&
-      opts &&
-      opts.context === "edaTranscription") {
-      return "EDA Transcriptions"
-    }
-
-    const originalTranslation = targetProps.t || (key => key)
-    return originalTranslation(key, opts)
-  }
-
-  // if transcriptions exist, add EDA Transcriptions button and hide Annotations button
-  const plugin = hasTranscriptions
-    ? [...(targetProps.PluginComponents || []), EdaTranscriptionButton]
-    : targetProps.PluginComponents
-
-  return (
-    <TargetComponent
-      {...targetProps}
-      t={customTranslation}
-      panels={{ ...targetProps.panels, annotations: !hasTranscriptions }}
-      PluginComponents={plugin}
-    />
-  )
-}
-
-export default {
-  target: "WindowSideBarButtons",
-  mode: "wrap",
-  component: EdaSideBarButtonsWrapper
-}

package/src/plugins/EdaTranscriptionButton.js

@@ -1,19 +0,0 @@
-import React from "react"
-import TitleIcon from "@material-ui/icons/Title"
-
-/**
- * A button component that displays a T icon
- * The button triggers the opening of the EDA Transcriptions companion window 
- */
-
-const EdaTranscriptionButton = () => {
-  return (
-    <TitleIcon data-testid="eda-transcription-icon" />
-  )
-}
-
-// this needs to match the companionWindowKey in EdaTranscriptionPanel.js
-EdaTranscriptionButton.value = "edaTranscription"
-
-export default EdaTranscriptionButton
-

package/src/plugins/EdaTranscriptionPanel.js

@@ -1,245 +0,0 @@
-import React, { useState, createRef } from "react"
-import CompanionWindow from "mirador/dist/es/src/containers/CompanionWindow"
-import { compose } from "redux"
-import { connect } from "react-redux"
-import { getEdaTranscription } from "./transcriptionUtils"
-import { withStyles } from "@material-ui/core/styles"
-import {
-  FormControl,
-  Select,
-  MenuItem,
-  FormControlLabel,
-  Checkbox,
-  Typography,
-} from "@material-ui/core"
-
-/**
- * EDA Transcription Panel Component
- * Displays transcription options and the transcription content
- * Manages state for selected edition, editorial marks, and line breaks
- * @param {Object} props.classes - JSS classes for styling
- * @param {array} props.transcriptions - Array of transcription HTML strings
- * @param {string} props.windowId - ID of the current window
- * @param {string} props.id - ID for the companion window
- */
-
-const EdaTranscriptionPanel = ({ classes, transcriptions, windowId, id }) => {
-  const [selectedEdition, setSelectedEdition] = useState(0)
-  const [showPhysicalLinebreaks, setShowPhysicalLinebreaks] = useState(true)
-  const [hideEdits, setHideEdits] = useState(false)
-  const currentTranscription = transcriptions[selectedEdition] || ""
-  const contentRef = createRef()
-
-  const getEditionLabel = (html) => {
-    const parser = new DOMParser()
-    const doc = parser.parseFromString(html, "text/html")
-    const workBody = doc.querySelector(".work-body")
-    return workBody?.dataset?.edition || "Unknown Edition"
-  }
-
-  const handleEditionChange = (event) => {
-    setSelectedEdition(event.target.value)
-  }
-
-  const handleLinebreaksChange = (event) => {
-    setShowPhysicalLinebreaks(event.target.checked)
-  }
-
-  const handleEditsChange = (event) => {
-    setHideEdits(event.target.checked)
-  }
-
-  const sectionClasses = [
-    classes.section,
-    showPhysicalLinebreaks ? "show-linebreaks" : "",
-    hideEdits ? "hide-edits" : "",
-  ].filter(Boolean).join(" ")
-
-  // CompanionWindow pulls the resizing functionality from Mirador
-  // the paperClassName prop allows styles to the underlying container
-  return (
-    <CompanionWindow
-      title="EDA Transcription"
-      windowId={windowId}
-      id={id}
-      paperClassName={classes.paper}
-    >
-      {/* handle the case when the panel is opened but no transcriptions exist */}
-      {(!transcriptions || transcriptions.length === 0) && (
-        <div className={classes.root}>
-          <div className={classes.section}>
-            <Typography variant="body1" className={classes.noTranscriptionsMessage1}>
-              No Emily Dickinson Archive transcriptions are available for this manifest.
-            </Typography>
-            <Typography variant="body2" className={classes.noTranscriptionsMessage2}>
-              This feature is only available for items from the Emily Dickinson Archive.
-            </Typography>
-          </div>
-        </div>
-      )}
-
-      <div className={classes.root}>
-        <div className={classes.controls}>
-          {transcriptions.length > 0 && (
-            <FormControl className={classes.formControl}>
-              <Typography variant="body2" className={classes.editionLabel}>
-                Edition
-              </Typography>
-              <Select
-                value={selectedEdition}
-                onChange={handleEditionChange}
-                variant="outlined"
-                margin="dense"
-                className={classes.selectInput}
-                disabled={transcriptions.length === 1}
-              >
-                {transcriptions.map((transcription, index) => (
-                  <MenuItem key={index} value={index}>
-                    {getEditionLabel(transcription)}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          )}
-
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={hideEdits}
-                onChange={handleEditsChange}
-                name="edits"
-                color="primary"
-              />
-            }
-            label="Hide Edits"
-          />
-
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={showPhysicalLinebreaks}
-                onChange={handleLinebreaksChange}
-                name="linebreaks"
-                color="primary"
-              />
-            }
-            label="Physical Line Breaks"
-          />
-        </div>
-
-        <div
-          ref={contentRef}
-          className={sectionClasses}
-          dangerouslySetInnerHTML={{ __html: currentTranscription }}
-        />
-      </div>
-    </CompanionWindow>
-  )
-}
-
-const styles = (theme) => ({
-  "@global": {
-    ".react-draggable": {
-      minWidth: "350px !important", // this must match the paper minWidth
-    }
-  },
-  root: {
-    height: "100%",
-    overflow: "auto",
-    display: "flex",
-    flexDirection: "column",
-  },
-  paper: {
-    minWidth: "350px", // this must match the companion window minWidth
-  },
-  controls: {
-    padding: theme.spacing(2),
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    backgroundColor: theme.palette.background.paper,
-  },
-  formControl: {
-    marginBottom: theme.spacing(1),
-    width: "100%",
-  },
-  editionLabel: {
-    fontWeight: "bold",
-    marginBottom: theme.spacing(0.5),
-    fontSize: "0.875rem",
-  },
-  selectInput: {
-    width: 300
-  },
-  section: {
-    flex: 1,
-    fontSize: ".875em",
-    lineHeight: theme.typography.body2.lineHeight,
-    fontFamily: theme.typography.fontFamily,
-    backgroundColor: theme.palette.background.paper,
-    borderRight: `0.5px solid ${theme.palette.divider}`,
-    overflow: "auto",
-    color: theme.palette.text.primary,
-    padding: theme.spacing(2),
-    "& .line": {
-      display: "block",
-    },
-    "& ins:before": {
-      content: '"["',
-      fontWeight: theme.typography.fontWeightBold,
-    },
-    "& ins:after": {
-      content: '"]"',
-      fontWeight: theme.typography.fontWeightBold,
-    },
-    "& rt": {
-      fontSize: "0.833em",
-    },
-    "& .work-body": {
-      whiteSpace: "nowrap",
-      "& h3, & h4": {
-        fontWeight: theme.typography.fontWeightBold,
-        whiteSpace: "normal",
-      },
-      "& br": {
-        display: "none",
-      },
-    },
-    "&.show-linebreaks .work-body br": {
-      display: "block",
-    },
-    "&.hide-edits ins": {
-      display: "none",
-    },
-    "&.hide-edits rt": {
-      display: "none",
-    },
-    "& .stanza": {
-      marginBottom: theme.spacing(1.875)
-    },
-    "& .page-break": {
-      borderWidth: "1px 0 0 0",
-      borderStyle: "dotted",
-      display: "block !important",
-    },
-  },
-  noTranscriptionsMessage1: {
-    padding: "16px"
-  },
-  noTranscriptionsMessage2: {
-    padding: "0 16px 16px"
-  },
-})
-
-const mapStateToProps = (state, { windowId }) => ({
-  transcriptions: getEdaTranscription(state, windowId),
-})
-
-const enhance = compose(
-  withStyles(styles),
-  connect(mapStateToProps)
-)
-
-export default {
-  component: enhance(EdaTranscriptionPanel),
-  companionWindowKey: "edaTranscription"
-}
-

package/src/plugins/__tests__/EdaSideBarButtonsWrapper.spec.js

@@ -1,183 +0,0 @@
-/** @jest-environment jsdom */
-import React from "react"
-import { render, screen } from "@testing-library/react"
-import { Provider } from "react-redux"
-import EdaSideBarButtonsWrapper from "../EdaSideBarButtonsWrapper"
-import { getEdaTranscription } from "../transcriptionUtils"
-
-// Mock transcriptionUtils
-jest.mock("../transcriptionUtils", () => ({
-  getEdaTranscription: jest.fn()
-}))
-
-// Mock base components that would be provided by Mirador
-const MockButton = ({ value, onClick }) => (
-  <button onClick={onClick} data-value={value}>
-    {value}
-  </button>
-)
-
-const MockSidebarButtons = ({
-  PluginComponents = [],
-  panels = {},
-  t = (key) => key
-}) => {
-  return (
-    <div>
-      {/* Info button - always visible */}
-      <MockButton value="information" onClick={() => { }} />
-
-      {/* Rights button - always visible */}
-      <MockButton value="rights" onClick={() => { }} />
-
-      {/* Index button - always visible */}
-      <MockButton value="index" onClick={() => { }} />
-
-      {/* Annotations button - conditionally visible */}
-      {panels.annotations !== false && (
-        <MockButton value="annotations" onClick={() => { }} />
-      )}
-
-      {/* Plugin buttons */}
-      {PluginComponents.map((Component, index) => (
-        <Component key={index} />
-      ))}
-    </div>
-  )
-}
-
-describe("EdaSideBarButtonsWrapper", () => {
-  const createWrapper = (hasTranscriptions = false) => {
-    // Mock the transcription selector
-    getEdaTranscription.mockReturnValue(
-      hasTranscriptions ? ["some transcription"] : []
-    )
-
-    // Mock store
-    const store = {
-      getState: () => ({}),
-      subscribe: jest.fn(),
-      dispatch: jest.fn()
-    }
-
-    // Get the wrapped component from the plugin config
-    const { component: WrappedComponent } = EdaSideBarButtonsWrapper
-
-    return render(
-      <Provider store={store}>
-        <WrappedComponent
-          TargetComponent={MockSidebarButtons}
-          panels={{}}
-          t={(key, opts) => key}
-        />
-      </Provider>
-    )
-  }
-
-  describe("when translations are false (no transcriptions)", () => {
-    beforeEach(() => {
-      createWrapper(false)
-    })
-
-    it("should display the information button", () => {
-      const button = screen.getByText("information")
-      expect(button).toBeInTheDocument()
-    })
-
-    it("should display the rights button", () => {
-      const button = screen.getByText("rights")
-      expect(button).toBeInTheDocument()
-    })
-
-    it("should display the index button", () => {
-      const button = screen.getByText("index")
-      expect(button).toBeInTheDocument()
-    })
-
-    it("should display the annotations button", () => {
-      const button = screen.getByText("annotations")
-      expect(button).toBeInTheDocument()
-    })
-
-    it("should not render the EDA button", () => {
-      const button = screen.queryByAltText("EDA Transcriptions")
-      expect(button).not.toBeInTheDocument()
-    })
-  })
-
-  describe("when translations are true (has transcriptions)", () => {
-    beforeEach(() => {
-      createWrapper(true)
-    })
-
-    it("should display the information button", () => {
-      const button = screen.getByText("information")
-      expect(button).toBeInTheDocument()
-    })
-
-    it("should display the rights button", () => {
-      const button = screen.getByText("rights")
-      expect(button).toBeInTheDocument()
-    })
-
-    it("should display the index button", () => {
-      const button = screen.getByText("index")
-      expect(button).toBeInTheDocument()
-    })
-
-    it("should not display the annotations button", () => {
-      const button = screen.queryByText("annotations")
-      expect(button).not.toBeInTheDocument()
-    })
-
-    it("should display the EDA button", () => {
-      createWrapper(true)
-      const icons = screen.queryAllByTestId("eda-transcription-icon")
-      expect(icons.length).toBeGreaterThan(0)
-    })
-  })
-
-  describe("translations", () => {
-    it("should provide custom translation for EDA button tooltip", () => {
-      let capturedTranslation
-      const MockComponent = (props) => {
-        // Capture the translation for testing
-        capturedTranslation = props.t("openCompanionWindow", { context: "edaTranscription" })
-        return null
-      }
-
-      const { component: Wrapped } = EdaSideBarButtonsWrapper
-      render(
-        <Provider store={{ getState: () => ({}), subscribe: jest.fn(), dispatch: jest.fn() }}>
-          <Wrapped
-            TargetComponent={MockComponent}
-            t={(key) => key}
-          />
-        </Provider>
-      )
-
-      expect(capturedTranslation).toBe("EDA Transcriptions")
-    })
-
-    it("should pass through other translations", () => {
-      let capturedTranslation
-      const MockComponent = (props) => {
-        // Capture the translation for testing
-        capturedTranslation = props.t("someOtherKey", { context: "other" })
-        return null
-      }
-
-      const { component: Wrapped } = EdaSideBarButtonsWrapper
-      render(
-        <Provider store={{ getState: () => ({}), subscribe: jest.fn(), dispatch: jest.fn() }}>
-          <Wrapped
-            TargetComponent={MockComponent}
-            t={(key) => key}
-          />
-        </Provider>
-      )
-
-      expect(capturedTranslation).toBe("someOtherKey")
-    })
-  })
-})

package/src/plugins/__tests__/EdaTranscriptionButton.spec.js

@@ -1,17 +0,0 @@
-/** @jest-environment jsdom */
-import React from "react"
-import { render, screen } from "@testing-library/react"
-import EdaTranscriptionButton from "../EdaTranscriptionButton"
-
-describe("EdaTranscriptionButton", () => {
-  it("should render with a TitleIcon", () => {
-    render(<EdaTranscriptionButton />)
-    const icon = screen.getByTestId("eda-transcription-icon")
-    expect(icon).toBeInTheDocument()
-  })
-
-  it("should have the correct value property", () => {
-    expect(EdaTranscriptionButton.value).toBe("edaTranscription")
-  })
-})
-