From 5778f02509f46fc9f76fbb174edc0ffec7bf47f4 Mon Sep 17 00:00:00 2001
From: Sandra Densch <densch.sandra@gmail.com>
Date: Fri, 19 Apr 2024 18:27:13 +0200
Subject: [PATCH 01/27] Issue 259:  node size by number of spoken words -
 remove relative node size component - call characters endpoint to get number
 of spoken words -  interpolate node size between 15 and 30

---
 src/components/NetworkGraph.js   |  6 +-----
 src/components/Play.js           | 19 +++++++++++++------
 src/components/RelationsGraph.js |  6 +-----
 src/network.js                   | 19 ++++++++++++++++++-
 4 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/components/NetworkGraph.js b/src/components/NetworkGraph.js
index e60c40d7..c81616b7 100644
--- a/src/components/NetworkGraph.js
+++ b/src/components/NetworkGraph.js
@@ -6,7 +6,6 @@ import {
   EdgeShapes,
   NodeShapes,
   ForceAtlas2,
-  RelativeSize,
   RandomizeNodePositions,
 } from 'react-sigma/lib/';
 
@@ -51,10 +50,7 @@ class NetworkGraph extends Component {
         >
           <EdgeShapes default="line" />
           <NodeShapes default="circle" />
-          <RandomizeNodePositions>
-            {layout}
-            <RelativeSize initialSize={15} />
-          </RandomizeNodePositions>
+          <RandomizeNodePositions>{layout}</RandomizeNodePositions>
         </Sigma>
       );
     }
diff --git a/src/components/Play.js b/src/components/Play.js
index 2f891abf..decd5069 100644
--- a/src/components/Play.js
+++ b/src/components/Play.js
@@ -25,9 +25,10 @@ const edgeColor = '#61affe65';
 const nodeColor = '#61affe';
 
 const nodeProps = (node) => {
-  const {sex} = node;
-  const color = sex === 'MALE' || sex === 'FEMALE' ? '#1f2448' : '#61affe';
-  const type = sex === 'MALE' ? 'square' : 'circle';
+  const {gender} = node;
+  const color =
+    gender === 'MALE' || gender === 'FEMALE' ? '#1f2448' : '#61affe';
+  const type = gender === 'MALE' ? 'square' : 'circle';
   return {color, type};
 };
 
@@ -55,10 +56,16 @@ const PlayInfo = ({corpusId, playId}) => {
       try {
         const response = await api.get(url);
         if (response.ok) {
-          const {characters, segments} = response.data;
-          const graph = makeGraph(characters, segments, nodeProps, edgeColor);
+          const {segments} = response.data;
+          const response2 = await api.get(`${url}/characters`);
+          if (response2.ok) {
+            const characters = response2.data;
+            const graph = makeGraph(characters, segments, nodeProps, edgeColor);
+            setGraph(graph);
+          } else {
+            setError(response.originalError);
+          }
           setPlay(response.data);
-          setGraph(graph);
         } else if (response.status === 404) {
           setError(new Error('not found'));
         } else {
diff --git a/src/components/RelationsGraph.js b/src/components/RelationsGraph.js
index 2b818fc2..e6dac611 100644
--- a/src/components/RelationsGraph.js
+++ b/src/components/RelationsGraph.js
@@ -6,7 +6,6 @@ import {
   EdgeShapes,
   NodeShapes,
   ForceAtlas2,
-  RelativeSize,
   RandomizeNodePositions,
 } from 'react-sigma/lib/';
 
@@ -78,10 +77,7 @@ const RelationsGraph = ({play, nodeColor, edgeColor}) => {
       >
         <EdgeShapes default="curvedArrow" />
         <NodeShapes default="circle" />
-        <RandomizeNodePositions>
-          {layout}
-          <RelativeSize initialSize={15} />
-        </RandomizeNodePositions>
+        <RandomizeNodePositions>{layout}</RandomizeNodePositions>
       </Sigma>
     );
   }
diff --git a/src/network.js b/src/network.js
index 319d07b5..793f70a4 100644
--- a/src/network.js
+++ b/src/network.js
@@ -1,5 +1,14 @@
 // network graph utility functions
 
+function interpolateNodeSize(minWords, maxWords, numOfWords) {
+  const MAX_SIZE = 30;
+  const MIN_SIZE = 15;
+  return (
+    MIN_SIZE +
+    ((numOfWords - minWords) / (maxWords - minWords)) * (MAX_SIZE - MIN_SIZE)
+  );
+}
+
 function getCooccurrences(segments) {
   const map = {};
   segments.forEach((s) => {
@@ -41,10 +50,18 @@ export function makeGraph(
   nodeProps = {},
   edgeColor = 'black'
 ) {
+  const maxWords = Math.max(...characters.map((p) => p.numOfWords));
+  const minWords = Math.min(...characters.map((p) => p.numOfWords));
   const nodes = [];
   characters.forEach((p) => {
     const props = typeof nodeProps === 'function' ? nodeProps(p) : nodeProps;
-    const node = {id: p.id, label: p.name || `#${p.id}`, ...props};
+    const nodeSize = interpolateNodeSize(minWords, maxWords, p.numOfWords);
+    const node = {
+      id: p.id,
+      label: p.name,
+      size: nodeSize || `#${p.id}`,
+      ...props,
+    };
     nodes.push(node);
   });
   const cooccurrences = getCooccurrences(segments);

From b55442302120d1268222290539315e7ac9342a85 Mon Sep 17 00:00:00 2001
From: Sandra Densch <densch.sandra@gmail.com>
Date: Tue, 21 May 2024 18:23:26 +0200
Subject: [PATCH 02/27] 259: implemented node size interpolation for relations
 graph

---
 src/components/NetworkGraph.js   | 14 ++++--
 src/components/Play.js           | 62 ++++++++++++-------------
 src/components/RelationsGraph.js | 35 +++-----------
 src/network.js                   | 79 ++++++++++++++++++++++----------
 4 files changed, 104 insertions(+), 86 deletions(-)

diff --git a/src/components/NetworkGraph.js b/src/components/NetworkGraph.js
index c81616b7..79423303 100644
--- a/src/components/NetworkGraph.js
+++ b/src/components/NetworkGraph.js
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import {makeGraph} from '../network';
 // we need to require from react-sigma/lib/ to make build work
 import {
   Sigma,
@@ -11,7 +12,9 @@ import {
 
 class NetworkGraph extends Component {
   render() {
-    const {graph, nodeColor, edgeColor} = this.props;
+    const {characters, play, nodeColor, edgeColor} = this.props;
+
+    const graph = makeGraph(characters, play, edgeColor, 'cooccurence');
 
     const settings = {
       maxEdgeSize: 5,
@@ -60,9 +63,12 @@ class NetworkGraph extends Component {
 }
 
 NetworkGraph.propTypes = {
-  graph: PropTypes.shape({
-    nodes: PropTypes.array.isRequired,
-    edges: PropTypes.array.isRequired,
+  characters: PropTypes.array.isRequired,
+  play: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    corpus: PropTypes.string.isRequired,
+    relations: PropTypes.array.isRequired,
+    segments: PropTypes.array.isRequired,
   }).isRequired,
   nodeColor: PropTypes.string.isRequired,
   edgeColor: PropTypes.string.isRequired,
diff --git a/src/components/Play.js b/src/components/Play.js
index decd5069..bb006a69 100644
--- a/src/components/Play.js
+++ b/src/components/Play.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {Container} from 'reactstrap';
 import {Helmet} from 'react-helmet';
 import api from '../api';
-import {makeGraph} from '../network';
 import PlayDetailsHeader from './PlayDetailsHeader';
 import PlayDetailsNav from './PlayDetailsNav';
 import PlayDetailsTab from './PlayDetailsTab';
@@ -24,14 +23,6 @@ const apiUrl = api.getBaseURL();
 const edgeColor = '#61affe65';
 const nodeColor = '#61affe';
 
-const nodeProps = (node) => {
-  const {gender} = node;
-  const color =
-    gender === 'MALE' || gender === 'FEMALE' ? '#1f2448' : '#61affe';
-  const type = gender === 'MALE' ? 'square' : 'circle';
-  return {color, type};
-};
-
 const navItems = [
   {name: 'network', label: 'Network'},
   {name: 'relations', label: 'Relations'},
@@ -44,7 +35,7 @@ const tabNames = new Set(navItems.map((item) => item.name));
 
 const PlayInfo = ({corpusId, playId}) => {
   const [play, setPlay] = useState(null);
-  const [graph, setGraph] = useState(null);
+  const [characters, setCharacters] = useState(null);
   const [error, setError] = useState(null);
   const [chartType, setChartType] = useState('sapogov');
 
@@ -56,15 +47,6 @@ const PlayInfo = ({corpusId, playId}) => {
       try {
         const response = await api.get(url);
         if (response.ok) {
-          const {segments} = response.data;
-          const response2 = await api.get(`${url}/characters`);
-          if (response2.ok) {
-            const characters = response2.data;
-            const graph = makeGraph(characters, segments, nodeProps, edgeColor);
-            setGraph(graph);
-          } else {
-            setError(response.originalError);
-          }
           setPlay(response.data);
         } else if (response.status === 404) {
           setError(new Error('not found'));
@@ -79,6 +61,27 @@ const PlayInfo = ({corpusId, playId}) => {
     fetchPlay();
   }, [corpusId, playId]);
 
+  useEffect(() => {
+    async function fetchCharacters() {
+      setError(null);
+      const url = `/corpora/${corpusId}/plays/${playId}/characters`;
+      try {
+        const response = await api.get(url);
+        if (response.ok) {
+          setCharacters(response.data);
+        } else if (response.status === 404) {
+          setError(new Error('not found'));
+        } else {
+          setError(response.originalError);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
+    fetchCharacters();
+  }, [corpusId, playId]);
+
   if (error && error.message === 'not found') {
     return <p>No such play!</p>;
   }
@@ -88,16 +91,11 @@ const PlayInfo = ({corpusId, playId}) => {
     return <p>Error!</p>;
   }
 
-  if (!play) {
+  if (!play || !characters) {
     return <p className="loading">Loading...</p>;
   }
 
-  if (!graph) {
-    return <p>No Graph!</p>;
-  }
-
   console.log('PLAY', play);
-  console.log('GRAPH', graph);
 
   const groups = play.characters
     .filter((m) => Boolean(m.isGroup))
@@ -116,7 +114,7 @@ const PlayInfo = ({corpusId, playId}) => {
 
   let tabContent = null;
   let description = null;
-  let characters = null;
+  let cast = null;
   let metrics = null;
   let segments = null;
 
@@ -150,8 +148,10 @@ const PlayInfo = ({corpusId, playId}) => {
     );
     segments = <Segments play={play} />;
   } else if (tab === 'relations') {
-    tabContent = <RelationsGraph {...{play, nodeColor, edgeColor}} />;
-    characters = castList;
+    tabContent = (
+      <RelationsGraph {...{characters, play, nodeColor, edgeColor}} />
+    );
+    cast = castList;
     description = (
       <p>
         This tab visualises kinship and other relationship data, following the
@@ -163,8 +163,8 @@ const PlayInfo = ({corpusId, playId}) => {
       </p>
     );
   } else {
-    tabContent = <NetworkGraph {...{graph, nodeColor, edgeColor, play}} />;
-    characters = castList;
+    tabContent = <NetworkGraph {...{characters, play, nodeColor, edgeColor}} />;
+    cast = castList;
     metrics = playMetrics;
     description = (
       <p>
@@ -191,7 +191,7 @@ const PlayInfo = ({corpusId, playId}) => {
       </PlayDetailsHeader>
       <Container fluid>
         <PlayDetailsTab
-          characters={characters}
+          characters={cast}
           description={description}
           metrics={metrics}
           segments={segments}
diff --git a/src/components/RelationsGraph.js b/src/components/RelationsGraph.js
index e6dac611..8137035f 100644
--- a/src/components/RelationsGraph.js
+++ b/src/components/RelationsGraph.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {makeGraph} from '../network';
 // we need to require from react-sigma/lib/ to make build work
 import {
   Sigma,
@@ -9,32 +10,8 @@ import {
   RandomizeNodePositions,
 } from 'react-sigma/lib/';
 
-/* eslint-disable camelcase */
-const edgeColors = {
-  parent_of: '#6f42c1', // purple
-  lover_of: '#f93e3e', // red
-  related_with: '#fca130', // orange
-  associated_with: '#61affe', // blue
-  siblings: '#49cc90', // green
-  spouses: '#e83e8c', // pink
-  friends: '#1F2448', // navy
-};
-/* eslint-enable camelcase */
-
-const RelationsGraph = ({play, nodeColor, edgeColor}) => {
-  const nodes = play.characters.map((c) => ({
-    id: c.id,
-    label: c.name || `#${c.id}`,
-  }));
-  const edges = (play.relations || []).map((r, i) => ({
-    id: i,
-    source: r.source,
-    target: r.target,
-    label: r.type,
-    color: edgeColors[r.type] || edgeColor,
-    type: r.directed ? 'curvedArrow' : 'curve',
-  }));
-  const graph = {nodes, edges};
+const RelationsGraph = ({characters, play, nodeColor, edgeColor}) => {
+  const graph = makeGraph(characters, play, edgeColor, 'relation');
 
   const settings = {
     maxEdgeSize: 5,
@@ -48,7 +25,6 @@ const RelationsGraph = ({play, nodeColor, edgeColor}) => {
     drawEdges: true,
     drawEdgeLabels: true,
     edgeLabelSize: 'proportional',
-    minNodeSize: 2,
     minArrowSize: 10,
   };
 
@@ -86,9 +62,12 @@ const RelationsGraph = ({play, nodeColor, edgeColor}) => {
 };
 
 RelationsGraph.propTypes = {
+  characters: PropTypes.array.isRequired,
   play: PropTypes.shape({
-    characters: PropTypes.array.isRequired,
+    name: PropTypes.string.isRequired,
+    corpus: PropTypes.string.isRequired,
     relations: PropTypes.array.isRequired,
+    segments: PropTypes.array.isRequired,
   }).isRequired,
   nodeColor: PropTypes.string.isRequired,
   edgeColor: PropTypes.string.isRequired,
diff --git a/src/network.js b/src/network.js
index 793f70a4..531db801 100644
--- a/src/network.js
+++ b/src/network.js
@@ -1,5 +1,25 @@
 // network graph utility functions
 
+/* eslint-disable camelcase */
+const edgeColors = {
+  parent_of: '#6f42c1', // purple
+  lover_of: '#f93e3e', // red
+  related_with: '#fca130', // orange
+  associated_with: '#61affe', // blue
+  siblings: '#49cc90', // green
+  spouses: '#e83e8c', // pink
+  friends: '#1F2448', // navy
+};
+/* eslint-enable camelcase */
+
+const nodeProps = (node) => {
+  const {gender} = node;
+  const color =
+    gender === 'MALE' || gender === 'FEMALE' ? '#1f2448' : '#61affe';
+  const type = gender === 'MALE' ? 'square' : 'circle';
+  return {color, type};
+};
+
 function interpolateNodeSize(minWords, maxWords, numOfWords) {
   const MAX_SIZE = 30;
   const MIN_SIZE = 15;
@@ -46,36 +66,49 @@ function getCooccurrences(segments) {
 
 export function makeGraph(
   characters,
-  segments,
-  nodeProps = {},
-  edgeColor = 'black'
+  play,
+  edgeColor = 'black',
+  type = 'cooccurence'
 ) {
-  const maxWords = Math.max(...characters.map((p) => p.numOfWords));
-  const minWords = Math.min(...characters.map((p) => p.numOfWords));
+  const maxWords = Math.max(...characters.map((c) => c.numOfWords));
+  const minWords = Math.min(...characters.map((c) => c.numOfWords));
   const nodes = [];
-  characters.forEach((p) => {
-    const props = typeof nodeProps === 'function' ? nodeProps(p) : nodeProps;
-    const nodeSize = interpolateNodeSize(minWords, maxWords, p.numOfWords);
+  characters.forEach((c) => {
+    const props = nodeProps(c);
+    const nodeSize = interpolateNodeSize(minWords, maxWords, c.numOfWords);
     const node = {
-      id: p.id,
-      label: p.name,
-      size: nodeSize || `#${p.id}`,
+      id: c.id,
+      label: c.name,
+      size: nodeSize || `#${c.id}`,
       ...props,
     };
     nodes.push(node);
   });
-  const cooccurrences = getCooccurrences(segments);
-  const edges = [];
-  cooccurrences.forEach((cooc) => {
-    edges.push({
-      id: cooc[0] + '|' + cooc[1],
-      source: cooc[0],
-      target: cooc[1],
-      size: cooc[2],
-      // NB: we set the edge color here since the defaultEdgeColor in Sigma
-      // settings does not to have any effect
-      color: edgeColor,
+
+  let edges = [];
+  if (type === 'cooccurence') {
+    const cooccurrences = getCooccurrences(play.segments);
+    cooccurrences.forEach((cooc) => {
+      edges.push({
+        id: cooc[0] + '|' + cooc[1],
+        source: cooc[0],
+        target: cooc[1],
+        size: cooc[2],
+        // NB: we set the edge color here since the defaultEdgeColor in Sigma
+        // settings does not to have any effect
+        color: edgeColor,
+      });
     });
-  });
+  } else if (type === 'relation') {
+    edges = (play.relations || []).map((r, i) => ({
+      id: i,
+      source: r.source,
+      target: r.target,
+      label: r.type,
+      color: edgeColors[r.type] || edgeColor,
+      type: r.directed ? 'curvedArrow' : 'curve',
+    }));
+  }
+
   return {nodes, edges};
 }

From 34c94808d1ed323afd2ce9141a60ef42c1e97e49 Mon Sep 17 00:00:00 2001
From: Sandra Densch <densch.sandra@gmail.com>
Date: Tue, 21 May 2024 19:17:49 +0200
Subject: [PATCH 03/27] 259: unified implementation of RelationsGraph and
 NetworkGraph

---
 src/components/Graph/Graph.js          | 55 ++++++++++++++++++
 src/components/Graph/NetworkGraph.js   | 33 +++++++++++
 src/components/Graph/RelationsGraph.js | 35 ++++++++++++
 src/components/NetworkGraph.js         | 77 --------------------------
 src/components/Play.js                 | 13 ++---
 src/components/RelationsGraph.js       | 76 -------------------------
 src/network.js                         |  8 +--
 7 files changed, 129 insertions(+), 168 deletions(-)
 create mode 100644 src/components/Graph/Graph.js
 create mode 100644 src/components/Graph/NetworkGraph.js
 create mode 100644 src/components/Graph/RelationsGraph.js
 delete mode 100644 src/components/NetworkGraph.js
 delete mode 100644 src/components/RelationsGraph.js

diff --git a/src/components/Graph/Graph.js b/src/components/Graph/Graph.js
new file mode 100644
index 00000000..6e795f9a
--- /dev/null
+++ b/src/components/Graph/Graph.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+// we need to require from react-sigma/lib/ to make build work
+import {
+  Sigma,
+  EdgeShapes,
+  NodeShapes,
+  ForceAtlas2,
+  RandomizeNodePositions,
+} from 'react-sigma/lib/';
+
+const Graph = ({graph, settings, edgeShape}) => {
+  const layoutOptions = {
+    iterationsPerRender: 40,
+    edgeWeightInfluence: 0,
+    timeout: 2000,
+    adjustSizes: false,
+    gravity: 3,
+    slowDown: 5,
+    linLogMode: true,
+    outboundAttractionDistribution: false,
+    strongGravityMode: false,
+  };
+
+  const layout = <ForceAtlas2 {...layoutOptions} />;
+
+  let sigma = null;
+  if (graph && graph.nodes.length > 0) {
+    sigma = (
+      <Sigma
+        renderer="canvas"
+        graph={graph}
+        settings={settings}
+        style={{display: 'flex', flexGrow: 1}}
+      >
+        <EdgeShapes default={edgeShape} />
+        <NodeShapes default="circle" />
+        <RandomizeNodePositions>{layout}</RandomizeNodePositions>
+      </Sigma>
+    );
+  }
+
+  return sigma;
+};
+
+Graph.propTypes = {
+  graph: PropTypes.shape({
+    nodes: PropTypes.array.isRequired,
+    edges: PropTypes.array.isRequired,
+  }).isRequired,
+  settings: PropTypes.object.isRequired,
+  edgeShape: PropTypes.string.isRequired,
+};
+
+export default Graph;
diff --git a/src/components/Graph/NetworkGraph.js b/src/components/Graph/NetworkGraph.js
new file mode 100644
index 00000000..7a70d2b8
--- /dev/null
+++ b/src/components/Graph/NetworkGraph.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {makeGraph} from '../../network';
+
+import Graph from './Graph';
+
+const NetworkGraph = ({characters, play}) => {
+  const graph = makeGraph(characters, play, 'cooccurence');
+
+  const settings = {
+    maxEdgeSize: 5,
+    defaultLabelSize: 15,
+    defaultEdgeColor: '#61affe65', // FIXME: this does not seem to work
+    defaultNodeColor: '#61affe',
+    labelThreshold: 5,
+    labelSize: 'fixed',
+    drawLabels: true,
+    mouseWheelEnabled: false,
+    drawEdges: true,
+  };
+
+  return <Graph graph={graph} settings={settings} edgeShape="line" />;
+};
+
+NetworkGraph.propTypes = {
+  characters: PropTypes.array.isRequired,
+  play: PropTypes.shape({
+    relations: PropTypes.array.isRequired,
+    segments: PropTypes.array.isRequired,
+  }).isRequired,
+};
+
+export default NetworkGraph;
diff --git a/src/components/Graph/RelationsGraph.js b/src/components/Graph/RelationsGraph.js
new file mode 100644
index 00000000..296feebe
--- /dev/null
+++ b/src/components/Graph/RelationsGraph.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {makeGraph} from '../../network';
+import Graph from './Graph';
+
+const RelationsGraph = ({characters, play}) => {
+  const graph = makeGraph(characters, play, 'relation');
+
+  const settings = {
+    maxEdgeSize: 5,
+    defaultLabelSize: 14,
+    defaultEdgeColor: '#61affe65', // FIXME: this does not seem to work
+    defaultNodeColor: '#61affe',
+    edgeLabelColor: 'edge',
+    labelThreshold: 3,
+    labelSize: 'fixed',
+    drawLabels: true,
+    drawEdges: true,
+    drawEdgeLabels: true,
+    edgeLabelSize: 'proportional',
+    minArrowSize: 10,
+  };
+
+  return <Graph graph={graph} settings={settings} edgeShape="curvedArrow" />;
+};
+
+RelationsGraph.propTypes = {
+  characters: PropTypes.array.isRequired,
+  play: PropTypes.shape({
+    relations: PropTypes.array.isRequired,
+    segments: PropTypes.array.isRequired,
+  }).isRequired,
+};
+
+export default RelationsGraph;
diff --git a/src/components/NetworkGraph.js b/src/components/NetworkGraph.js
deleted file mode 100644
index 79423303..00000000
--- a/src/components/NetworkGraph.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {makeGraph} from '../network';
-// we need to require from react-sigma/lib/ to make build work
-import {
-  Sigma,
-  EdgeShapes,
-  NodeShapes,
-  ForceAtlas2,
-  RandomizeNodePositions,
-} from 'react-sigma/lib/';
-
-class NetworkGraph extends Component {
-  render() {
-    const {characters, play, nodeColor, edgeColor} = this.props;
-
-    const graph = makeGraph(characters, play, edgeColor, 'cooccurence');
-
-    const settings = {
-      maxEdgeSize: 5,
-      defaultLabelSize: 15,
-      defaultEdgeColor: edgeColor, // FIXME: this does not seem to work
-      defaultNodeColor: nodeColor,
-      labelThreshold: 5,
-      labelSize: 'fixed',
-      drawLabels: true,
-      mouseWheelEnabled: false,
-      drawEdges: true,
-    };
-
-    const layoutOptions = {
-      iterationsPerRender: 40,
-      edgeWeightInfluence: 0,
-      timeout: 2000,
-      adjustSizes: false,
-      gravity: 3,
-      slowDown: 5,
-      linLogMode: true,
-      outboundAttractionDistribution: false,
-      strongGravityMode: false,
-    };
-
-    const layout = <ForceAtlas2 {...layoutOptions} />;
-
-    let sigma = null;
-    if (graph && graph.nodes.length > 0) {
-      sigma = (
-        <Sigma
-          renderer="canvas"
-          graph={graph}
-          settings={settings}
-          style={{display: 'flex', flexGrow: 1}}
-        >
-          <EdgeShapes default="line" />
-          <NodeShapes default="circle" />
-          <RandomizeNodePositions>{layout}</RandomizeNodePositions>
-        </Sigma>
-      );
-    }
-
-    return sigma;
-  }
-}
-
-NetworkGraph.propTypes = {
-  characters: PropTypes.array.isRequired,
-  play: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    corpus: PropTypes.string.isRequired,
-    relations: PropTypes.array.isRequired,
-    segments: PropTypes.array.isRequired,
-  }).isRequired,
-  nodeColor: PropTypes.string.isRequired,
-  edgeColor: PropTypes.string.isRequired,
-};
-
-export default NetworkGraph;
diff --git a/src/components/Play.js b/src/components/Play.js
index bb006a69..11969d9c 100644
--- a/src/components/Play.js
+++ b/src/components/Play.js
@@ -9,8 +9,8 @@ import PlayDetailsTab from './PlayDetailsTab';
 import CastList from './CastList';
 import SourceInfo from './SourceInfo';
 import DownloadLinks from './DownloadLinks';
-import NetworkGraph from './NetworkGraph';
-import RelationsGraph from './RelationsGraph';
+import NetworkGraph from './Graph/NetworkGraph';
+import RelationsGraph from './Graph/RelationsGraph';
 import SpeechDistribution, {SpeechDistributionNav} from './SpeechDistribution';
 import TEIPanel from './TEIPanel';
 import PlayMetrics from './PlayMetrics';
@@ -20,9 +20,6 @@ import './Play.scss';
 
 const apiUrl = api.getBaseURL();
 
-const edgeColor = '#61affe65';
-const nodeColor = '#61affe';
-
 const navItems = [
   {name: 'network', label: 'Network'},
   {name: 'relations', label: 'Relations'},
@@ -148,9 +145,7 @@ const PlayInfo = ({corpusId, playId}) => {
     );
     segments = <Segments play={play} />;
   } else if (tab === 'relations') {
-    tabContent = (
-      <RelationsGraph {...{characters, play, nodeColor, edgeColor}} />
-    );
+    tabContent = <RelationsGraph {...{characters, play}} />;
     cast = castList;
     description = (
       <p>
@@ -163,7 +158,7 @@ const PlayInfo = ({corpusId, playId}) => {
       </p>
     );
   } else {
-    tabContent = <NetworkGraph {...{characters, play, nodeColor, edgeColor}} />;
+    tabContent = <NetworkGraph {...{characters, play}} />;
     cast = castList;
     metrics = playMetrics;
     description = (
diff --git a/src/components/RelationsGraph.js b/src/components/RelationsGraph.js
deleted file mode 100644
index 8137035f..00000000
--- a/src/components/RelationsGraph.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {makeGraph} from '../network';
-// we need to require from react-sigma/lib/ to make build work
-import {
-  Sigma,
-  EdgeShapes,
-  NodeShapes,
-  ForceAtlas2,
-  RandomizeNodePositions,
-} from 'react-sigma/lib/';
-
-const RelationsGraph = ({characters, play, nodeColor, edgeColor}) => {
-  const graph = makeGraph(characters, play, edgeColor, 'relation');
-
-  const settings = {
-    maxEdgeSize: 5,
-    defaultLabelSize: 14,
-    defaultEdgeColor: edgeColor, // FIXME: this does not seem to work
-    defaultNodeColor: nodeColor,
-    edgeLabelColor: 'edge',
-    labelThreshold: 3,
-    labelSize: 'fixed',
-    drawLabels: true,
-    drawEdges: true,
-    drawEdgeLabels: true,
-    edgeLabelSize: 'proportional',
-    minArrowSize: 10,
-  };
-
-  const layoutOptions = {
-    iterationsPerRender: 40,
-    edgeWeightInfluence: 0,
-    timeout: 2000,
-    adjustSizes: false,
-    gravity: 3,
-    slowDown: 5,
-    linLogMode: true,
-    outboundAttractionDistribution: false,
-    strongGravityMode: true,
-  };
-
-  const layout = <ForceAtlas2 {...layoutOptions} />;
-
-  let sigma = null;
-  if (graph && graph.nodes.length > 0) {
-    sigma = (
-      <Sigma
-        renderer="canvas"
-        graph={graph}
-        settings={settings}
-        style={{display: 'flex', flexGrow: 1}}
-      >
-        <EdgeShapes default="curvedArrow" />
-        <NodeShapes default="circle" />
-        <RandomizeNodePositions>{layout}</RandomizeNodePositions>
-      </Sigma>
-    );
-  }
-
-  return sigma;
-};
-
-RelationsGraph.propTypes = {
-  characters: PropTypes.array.isRequired,
-  play: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    corpus: PropTypes.string.isRequired,
-    relations: PropTypes.array.isRequired,
-    segments: PropTypes.array.isRequired,
-  }).isRequired,
-  nodeColor: PropTypes.string.isRequired,
-  edgeColor: PropTypes.string.isRequired,
-};
-
-export default RelationsGraph;
diff --git a/src/network.js b/src/network.js
index 531db801..759c7d61 100644
--- a/src/network.js
+++ b/src/network.js
@@ -64,12 +64,8 @@ function getCooccurrences(segments) {
   return cooccurrences;
 }
 
-export function makeGraph(
-  characters,
-  play,
-  edgeColor = 'black',
-  type = 'cooccurence'
-) {
+export function makeGraph(characters, play, type = 'cooccurence') {
+  const edgeColor = '#61affe65';
   const maxWords = Math.max(...characters.map((c) => c.numOfWords));
   const minWords = Math.min(...characters.map((c) => c.numOfWords));
   const nodes = [];

From 576a65fa68c1af30f6954cd9fbcc3a6d0e4aff3d Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 1 Apr 2024 15:51:18 +0000
Subject: [PATCH 04/27] Bump the github-actions group with 3 updates

Bumps the github-actions group with 3 updates: [actions/checkout](https://github.com/actions/checkout), [docker/login-action](https://github.com/docker/login-action) and [docker/build-push-action](https://github.com/docker/build-push-action).


Updates `actions/checkout` from 4.1.1 to 4.1.2
- [Release notes](https://github.com/actions/checkout/releases)
- [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md)
- [Commits](https://github.com/actions/checkout/compare/b4ffde65f46336ab88eb53be808477a3936bae11...9bb56186c3b09b4f86b1c65136769dd318469633)

Updates `docker/login-action` from 3.0.0 to 3.1.0
- [Release notes](https://github.com/docker/login-action/releases)
- [Commits](https://github.com/docker/login-action/compare/343f7c4344506bcbf9b4de18042ae17996df046d...e92390c5fb421da1463c202d546fed0ec5c39f20)

Updates `docker/build-push-action` from 5.1.0 to 5.3.0
- [Release notes](https://github.com/docker/build-push-action/releases)
- [Commits](https://github.com/docker/build-push-action/compare/4a13e500e55cf31b7a5d59a38ab2040ab0f42f56...2cdde995de11925a030ce8070c3d77a52ffcf1c0)

---
updated-dependencies:
- dependency-name: actions/checkout
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: github-actions
- dependency-name: docker/login-action
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: github-actions
- dependency-name: docker/build-push-action
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: github-actions
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .github/workflows/docker-publish.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
index 52411aaf..34c0bad8 100644
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -20,7 +20,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out the repo
-        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+        uses: actions/checkout@9bb56186c3b09b4f86b1c65136769dd318469633 # v4.1.2
 
       # - name: Set up QEMU
       #   uses: docker/setup-qemu-action@68827325e0b33c7199eb31dd4e31fbe9023e06e3 # v3.0.0
@@ -29,7 +29,7 @@ jobs:
       #   uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
 
       - name: Login to DockerHub
-        uses: docker/login-action@343f7c4344506bcbf9b4de18042ae17996df046d # v3.0.0
+        uses: docker/login-action@e92390c5fb421da1463c202d546fed0ec5c39f20 # v3.1.0
         with:
           username: ${{ secrets.DOCKERHUB_USER }}
           password: ${{ secrets.DOCKERHUB_PASSWORD }}
@@ -45,7 +45,7 @@ jobs:
             type=semver,pattern={{major}}.{{minor}}
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@4a13e500e55cf31b7a5d59a38ab2040ab0f42f56 # v5.1.0
+        uses: docker/build-push-action@2cdde995de11925a030ce8070c3d77a52ffcf1c0 # v5.3.0
         with:
           context: .
           push: true

From 896afc1b5786004369edb5f249d84a567a227fe4 Mon Sep 17 00:00:00 2001
From: Carsten Milling <cmil@hashtable.de>
Date: Fri, 5 Apr 2024 13:50:46 +0200
Subject: [PATCH 05/27] Add link to DraCor mailing list

---
 public/doc/what-is-dracor.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/public/doc/what-is-dracor.md b/public/doc/what-is-dracor.md
index 186573ac..24225226 100644
--- a/public/doc/what-is-dracor.md
+++ b/public/doc/what-is-dracor.md
@@ -19,7 +19,11 @@ powerful, direct access point is the [documented API](api).
 
 **DraCor's stability and sustainability** are key tasks for the near future. The project has come this far thanks to the enthusiasm of volunteers, without any direct third-party funding. While the platform will continue to evolve in parallel with new research questions, it should also become a stable infrastructure and reference point for (digital) literary studies and beyond. This will be a major focus of our ongoing work.
 
-**Ways to interact.** To keep discussions about DraCor on the spot, we use the GitHub Discussions feature (which is still in beta!) for the repositories [dracor-frontend](https://github.com/dracor-org/dracor-frontend/discussions) (everything concerning the website) and [dracor-api](https://github.com/dracor-org/dracor-api/discussions) (everything concerning our API functionality). If you want, ask questions or make suggestions directly there.
+**Ways to interact.** To keep discussions about DraCor on the spot, we use the GitHub Discussions feature (which is still in beta!) for the repositories [dracor-frontend](https://github.com/dracor-org/dracor-frontend/discussions) (everything concerning the website) and [dracor-api](https://github.com/dracor-org/dracor-api/discussions) (everything concerning our API functionality). If you want, ask questions or make suggestions directly there. There is also a
+[DraCor mailing list](https://www.listserv.dfn.de/sympa/info/dracormailinglist)
+you can
+[subscribe](https://www.listserv.dfn.de/sympa/subscribe/dracormailinglist) to.
+
 
 Preferred hashtags: **#DraCor** **#dracor_org** **#ProgrammableCorpora** **#DigitalHumanities**
 

From cb2e99496c834282ae8d91fea8e88b0546a78056 Mon Sep 17 00:00:00 2001
From: Frank Fischer <lehkost@users.noreply.github.com>
Date: Thu, 11 Apr 2024 11:38:44 +0200
Subject: [PATCH 06/27] add publications

---
 public/doc/research.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/public/doc/research.md b/public/doc/research.md
index 272c3e3a..0527560c 100644
--- a/public/doc/research.md
+++ b/public/doc/research.md
@@ -4,6 +4,11 @@ An (incomplete) collection of research articles on drama using data provided thr
 
 ## 2024
 
+* Julia Jennifer Beine, Frank Fischer, Viktor J. Illmer: Just the Type: Analysing Character Typology in Roman Comedy with RomDraCor. In: DH2024: »Reinvention & Responsibility«. 6--10 August 2024. Washington, DC. Book of Abstracts. (forthcoming)
+* Peer Trilcke, Evgeniya Ustinova, Ingo Börner, Frank Fischer, Carsten Milling: Detecting Small Worlds in a Corpus of Thousands of Theatre Plays: A DraCor Study in Comparative Literary Network Analysis. In: Melanie Andresen, Nils Reiter (eds.): [Computational Drama Analysis. Reflecting Methods and Interpretations.](https://www.degruyter.com/document/isbn/9783111071763/html) Berlin/Boston: De Gruyter 2024. (forthcoming)
+* Alexia Schneider, Pablo Ruiz Fabo: [Stage Direction Classification in French Theater: Transfer Learning Experiments.](https://aclanthology.org/2024.latechclfl-1.28) In: Proceedings of the 8th Joint SIGHUM Workshop on Computational Linguistics for Cultural Heritage, Social Sciences, Humanities and Literature (LaTeCH-CLfL 2024). St. Julians, Malta. Association for Computational Linguistics, pp. 278–286.
+* Marie Flüh, Mareike Schumacher: Macht versus Emotion. Handlungstreibende Muster in Günderrodes Dramen digital, distant und scalable gelesen. In: Frederike Middelhoff, Martina Wernli (eds.): Noch Zukunft haben. Neue Romantikforschung. Vol. 5. Berlin, Heidelberg: Metzler, pp. 165–202. ([doi:10.1007/978-3-662-67902-9_9](https://doi.org/10.1007/978-3-662-67902-9_9))
+* Jonah Lubin, Anke Detken, Frank Fischer: Das »ureigenste theatralische Element« – Automatische Extraktion von Requisiten aus deutschsprachigen Dramentexten. In: DHd2024: »DH Quo Vadis«. 26 February--1 March 2024. Book of Abstracts. University of Passau. ([doi:10.5281/zenodo.10698448](https://doi.org/10.5281/zenodo.10698448))
 * Benjamin Krautter: The Scales of (Computational) Literary Studies: Martin Mueller’s Concept of Scalable Reading in Theory and Practice. In: Florentina Armaselu, Andreas Fickers (eds.): Zoomland: Exploring Scale in Digital History and Humanities. Berlin, Boston: De Gruyter Oldenbourg 2024, pp. 261–286. ([doi:10.1515/9783111317779-011](https://doi.org/10.1515/9783111317779-011))
 * Melanie Andresen, Benjamin Krautter, Janis Pagel, Nils Reiter: Knowledge Distribution in German Drama. In: Journal of Open Humanities Data. Vol. 10 (2024), No. 1, pp. 1–7. ([doi:10.5334/johd.167](https://doi.org/10.5334/johd.167))
 

From 76131f6894b8a4d08ab3f22f5210978f719c4157 Mon Sep 17 00:00:00 2001
From: Frank Fischer <lehkost@users.noreply.github.com>
Date: Fri, 26 Apr 2024 13:49:50 +0200
Subject: [PATCH 07/27] add publications

---
 public/doc/research.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/public/doc/research.md b/public/doc/research.md
index 0527560c..03279f87 100644
--- a/public/doc/research.md
+++ b/public/doc/research.md
@@ -24,21 +24,26 @@ An (incomplete) collection of research articles on drama using data provided thr
 * Ingo Börner, Frank Fischer, Luca Giovannini, Christopher Lu, Carsten Milling, Daniil Skorinkin, Henny Sluyter-Gäthje, Peer Trilcke: Onboard onto DraCor: Prototyping Workflows to Homogenize Drama Corpora for an Open Infrastructure. In: DHd2023: »Open Humanities, Open Culture«. 13–17 March 2023. Book of Abstracts. University of Trier. ([doi:10.5281/zenodo.7715333](https://doi.org/10.5281/zenodo.7715333))
 * Ingo Börner, Peer Trilcke et al.: On Programmable Corpora. Report and Prototype (DraCor). CLS INFRA D7.1. Zenodo, 28 February 2023. ([doi:10.5281/zenodo.7664964](https://doi.org/10.5281/zenodo.7664964))
 * Peer Trilcke: Small Worlds, Beat Charts und die Netzwerkanalyse dramatischer Texte. Reflexionen aus dem Rabbit Hole. In: Fotis Jannidis (ed.): Digitale Literaturwissenschaft. Germanistische Symposien. Stuttgart: Metzler 2023, pp. 563–596. ([doi:10.1007/978-3-476-05886-7_23](https://doi.org/10.1007/978-3-476-05886-7_23))
+* María-Ángel Somalo Fernández: Las mujeres en Valle-Inclán. Las Comedias bárbaras, una perspectiva desde las humanidades digitales. In: Santiago Sevilla Vallejo (ed.): Didáctica e identidad en la literatura en español. Salamanca: Ediciones Universidad de Salamanca 2023, pp. 143–161. ([doi:10.14201/0AQ0346 ](https://doi.org/10.14201/0AQ0346 ))
 * María Teresa Santa María Fernández, Monika Dabrowska: Análisis comparativo del Coro como personaje en tres tragedias griega y tres dramas españoles del Corpus DraCor. In: Neophilologus (2023). ([doi:10.1007/s11061-023-09768-7](https://doi.org/10.1007/s11061-023-09768-7))
 * Katrin Dennerlein, Thomas Schmidt, Christian Wolff: Computational emotion classification for genre corpora of German tragedies and comedies from 17th to early 19th century. In: Digital Scholarship in the Humanities (2023). ([doi:10.1093/llc/fqad046](https://doi.org/10.1093/llc/fqad046))
 
 ## 2022
 
+* Kathrin Nühlen: Digitales Edieren von Drehbüchern mit den Richtlinien der Text Encoding Initiative. In: Jan Henschen, Florian Krauß, Alexandra Ksenofontova, Claus Tieber (eds.): Drehbuchforschung. Perspektiven auf Texte und Prozesse. Wiesbaden: Springer VS, pp. 201–224. ([doi:10.1007/978-3-658-38167-7_10](https://doi.org/10.1007/978-3-658-38167-7_10))
 * Melanie Andresen, Benjamin Krautter, Janis Pagel, Nils Reiter: Who Knows What in German Drama? A Composite Annotation Scheme for Knowledge Transfer. Annotation, Evaluation, and Analysis. In: Journal of Computational Literary Studies, vol. 1 (2022), issue 1. ([doi:10.48694/jcls.107](https://doi.org/10.48694/jcls.107))
 * Andrea Peverelli, Marieke van Erp, Jan Bloemendal: [The Process of Imitatio Through Stylometric Analysis: the Case of Terence’s Eunuchus.](https://ceur-ws.org/Vol-3290/long_paper988.pdf) In: Folgert Karsdorp, Alie Lassche, Kristoffer Nielbo (eds.): Proceedings of the Computational Humanities Research Conference 2022 (CHR2022). 12–14 December 2022. University of Antwerp. (= CEUR Workshop Proceedings, vol. 3290, pp. 337–354.)
 * Frank Fischer, Teresa Santa María Fernández, José Calvo Tello, Carsten Milling: Una perspectiva comparativa del teatro español: integración de la »Biblioteca Electrónica Textual del Teatro en Español« en la plataforma »DraCor«. In: Celis Sánchez, María Ángela (eds.): Las humanidades digitales como expresión y estudio del patrimonio digital. Cuenca: Ediciones de la Universidad de Castilla–La Mancha 2021 \[recte: 2022\], pp. 273–282. ([doi:10.17169/refubium-38797](https://doi.org/10.17169/refubium-38797))
 * Simon Kroll: [»Rhythmus und soziale Interaktion bei Calderón de la Barca«.](https://journals.univie.ac.at/index.php/adv/article/view/7525) In: Avisos de Viena. Viennese Cultural Studies. No. 4 (2022), pp. 60–72.
+* Botond Szemes, Bence Vida: [Tragikus és komikus hálózatok. Drámai műfajok csoportosítása szerkezeti tulajdonságok alapján.](https://real.mtak.hu/159929/) [Tragical and Comical Networks: Clustering Dramatic Genres by Structural Features.] In: Helikon Irodalomtudományi Szemle. [Helikon Review of Literary Studies.] Vol. 68 (2022), No. 2, pp. 345–368.
+* Botond Szemes, Tímea Bajzát, Zsófia Fellegi, Péter Kundráth, Péter Horváth, Balázs Indig, Anna Dióssy, Fanni Hegedüs, Natali Pantyelejev, Sarolta Sziráki, Bence Vida, Balázs Kalmár, Gábor Palkó: Az ELTE Drámakorpuszának létrehozása és lehetőségei. [The Creation and Potential of the ELTE Drama Corpus.] In: József Tick, Károly Kokas, András Holl (eds.): Valós térben – Az online térért. Networkshop 31: national conference. 20–22 April 2022. University of Debrecen. Budapest: HUNGARNET Association 2022, pp. 170–178. ([doi:10.31915/NWS.2022.21](https://doi.org/10.31915/NWS.2022.21))
 * Dîlan Canan Çakir, Frank Fischer: Dramatische Metadaten. Die Datenbank deutschsprachiger Einakter 1740–1850. In: DHd2022: »Kulturen des digitalen Gedächtnisses«. 7–11 March 2022. Book of Abstracts. University of Potsdam. ([doi:10.5281/zenodo.6327977](https://doi.org/10.5281/zenodo.6327977))
 * Ingo Börner, Frank Fischer, Carsten Milling, Henny Sluyter-Gäthje: Einführung in DraCor: Programmable Corpora für die digitale Dramenanalyse. In: DHd2022: »Kulturen des digitalen Gedächtnisses«. 7–11 March 2022. Book of Abstracts. University of Potsdam. ([doi:10.5281/zenodo.6327951](https://doi.org/10.5281/zenodo.6327951))
 
 ## 2021
 
 * David Merino Recalde: »FISCHER, Frank y MILLING, Carsten. Easy Linavis. Simple Network Visualization for Literary Texts, 2017.« \[Review of [ezlinavis](https://ezlinavis.dracor.org/).\] In: Revista de Humanidades Digitales, vol. 6 (2021), pp. 252–258. ([doi:10.5944/rhd.vol.6.2021.27371](https://doi.org/10.5944/rhd.vol.6.2021.27371))
+* Janis Pagel, Nidhi Sihag, Nils Reiter: [Predicting Structural Elements in German Drama.](https://ceur-ws.org/Vol-2989/short_paper34.pdf) In: Maud Ehrmann et al. (eds.): Proceedings of the Second Conference on Computational Humanities Research 2021 (CHR2021). 17–19 November 2021. Amsterdam. (= CEUR Workshop Proceedings, vol. 2989, pp. 217–227.)
 * Felix Schneider, Björn Barz, Phillip Brandes, Sophie Marshall, Joachim Denzler: Data-Driven Detection of General Chiasmi Using Lexical and Semantic Features. In: Proceedings of the 5th Joint SIGHUM Workshop on Computational Linguistics for Cultural Heritage, Social Sciences, Humanities and Literature, pp. 96–100. Punta Cana, Dominican Republic (online). Association for Computational Linguistics. ([doi:10.18653/v1/2021.latechclfl-1.11](http://doi.org/10.18653/v1/2021.latechclfl-1.11))
 * Inna Wendell: [A Statistical Analysis of Genre Dynamics: Evolution of the Russian Five-Act Comedy in Verse in the Eighteenth and Nineteenth Centuries.](https://escholarship.org/uc/item/9rr5k9p7) Dissertation, University of California, Los Angeles, 2021.
 * Margarita Berseneva, Aleksandr Dyuldenko, Frank Fischer, Anna Oskina: Parents and Children in Russian Drama. Research Scenarios Based on the Annotation of Kinship and Social Relations. In: EADH2021: »Interdisciplinary Perspectives on Data«. 21–25 September 2021. Siberian Federal University, Krasnoyarsk. (forthcoming)

From 89319d3c576bec9d345e52fcaee0d2b406a330dc Mon Sep 17 00:00:00 2001
From: Frank Fischer <lehkost@users.noreply.github.com>
Date: Fri, 26 Apr 2024 15:54:54 +0200
Subject: [PATCH 08/27] improve bibl. record

---
 public/doc/research.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/doc/research.md b/public/doc/research.md
index 03279f87..0fcc9d70 100644
--- a/public/doc/research.md
+++ b/public/doc/research.md
@@ -26,7 +26,7 @@ An (incomplete) collection of research articles on drama using data provided thr
 * Peer Trilcke: Small Worlds, Beat Charts und die Netzwerkanalyse dramatischer Texte. Reflexionen aus dem Rabbit Hole. In: Fotis Jannidis (ed.): Digitale Literaturwissenschaft. Germanistische Symposien. Stuttgart: Metzler 2023, pp. 563–596. ([doi:10.1007/978-3-476-05886-7_23](https://doi.org/10.1007/978-3-476-05886-7_23))
 * María-Ángel Somalo Fernández: Las mujeres en Valle-Inclán. Las Comedias bárbaras, una perspectiva desde las humanidades digitales. In: Santiago Sevilla Vallejo (ed.): Didáctica e identidad en la literatura en español. Salamanca: Ediciones Universidad de Salamanca 2023, pp. 143–161. ([doi:10.14201/0AQ0346 ](https://doi.org/10.14201/0AQ0346 ))
 * María Teresa Santa María Fernández, Monika Dabrowska: Análisis comparativo del Coro como personaje en tres tragedias griega y tres dramas españoles del Corpus DraCor. In: Neophilologus (2023). ([doi:10.1007/s11061-023-09768-7](https://doi.org/10.1007/s11061-023-09768-7))
-* Katrin Dennerlein, Thomas Schmidt, Christian Wolff: Computational emotion classification for genre corpora of German tragedies and comedies from 17th to early 19th century. In: Digital Scholarship in the Humanities (2023). ([doi:10.1093/llc/fqad046](https://doi.org/10.1093/llc/fqad046))
+* Katrin Dennerlein, Thomas Schmidt, Christian Wolff: Computational emotion classification for genre corpora of German tragedies and comedies from 17th to early 19th century. In: Digital Scholarship in the Humanities. Vol. 38, Issue 4 (December 2023), pp. 1466–1481. ([doi:10.1093/llc/fqad046](https://doi.org/10.1093/llc/fqad046))
 
 ## 2022
 

From 3972f1b6c8c5306ea9419fd2239e50301735b508 Mon Sep 17 00:00:00 2001
From: Carsten Milling <cmil@hashtable.de>
Date: Sat, 27 Apr 2024 13:23:10 +0200
Subject: [PATCH 09/27] Adjust alignment and direction of full text view for
 rtl scripts

#287
---
 src/CETEIcean.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/CETEIcean.css b/src/CETEIcean.css
index 5fc73b31..9ee998bc 100644
--- a/src/CETEIcean.css
+++ b/src/CETEIcean.css
@@ -1,4 +1,10 @@
-
+tei-tei[lang="ara"],
+tei-tei[lang="heb"],
+tei-tei[lang="yid"]
+{
+  direction: rtl;
+  text-align: right;
+}
 
 /* Choice elements */
 tei-choice tei-abbr + tei-expan:before,

From 31374ed846a1aa3803426e1d02bb20757e3e4a7f Mon Sep 17 00:00:00 2001
From: Carsten Milling <cmil@hashtable.de>
Date: Sat, 27 Apr 2024 13:29:10 +0200
Subject: [PATCH 10/27] 2.2.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bc12bd05..097a6731 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dracor-frontend",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "1.2.32",

From afb5e5ca416aa2a7092cd4e2dac406aede4b75c9 Mon Sep 17 00:00:00 2001
From: Frank Fischer <lehkost@users.noreply.github.com>
Date: Mon, 29 Apr 2024 12:52:28 +0200
Subject: [PATCH 11/27] adjust dashes

---
 public/doc/research.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/doc/research.md b/public/doc/research.md
index 0fcc9d70..c0a3c91d 100644
--- a/public/doc/research.md
+++ b/public/doc/research.md
@@ -4,11 +4,11 @@ An (incomplete) collection of research articles on drama using data provided thr
 
 ## 2024
 
-* Julia Jennifer Beine, Frank Fischer, Viktor J. Illmer: Just the Type: Analysing Character Typology in Roman Comedy with RomDraCor. In: DH2024: »Reinvention & Responsibility«. 6--10 August 2024. Washington, DC. Book of Abstracts. (forthcoming)
+* Julia Jennifer Beine, Frank Fischer, Viktor J. Illmer: Just the Type: Analysing Character Typology in Roman Comedy with RomDraCor. In: DH2024: »Reinvention & Responsibility«. 6–10 August 2024. Washington, DC. Book of Abstracts. (forthcoming)
 * Peer Trilcke, Evgeniya Ustinova, Ingo Börner, Frank Fischer, Carsten Milling: Detecting Small Worlds in a Corpus of Thousands of Theatre Plays: A DraCor Study in Comparative Literary Network Analysis. In: Melanie Andresen, Nils Reiter (eds.): [Computational Drama Analysis. Reflecting Methods and Interpretations.](https://www.degruyter.com/document/isbn/9783111071763/html) Berlin/Boston: De Gruyter 2024. (forthcoming)
 * Alexia Schneider, Pablo Ruiz Fabo: [Stage Direction Classification in French Theater: Transfer Learning Experiments.](https://aclanthology.org/2024.latechclfl-1.28) In: Proceedings of the 8th Joint SIGHUM Workshop on Computational Linguistics for Cultural Heritage, Social Sciences, Humanities and Literature (LaTeCH-CLfL 2024). St. Julians, Malta. Association for Computational Linguistics, pp. 278–286.
 * Marie Flüh, Mareike Schumacher: Macht versus Emotion. Handlungstreibende Muster in Günderrodes Dramen digital, distant und scalable gelesen. In: Frederike Middelhoff, Martina Wernli (eds.): Noch Zukunft haben. Neue Romantikforschung. Vol. 5. Berlin, Heidelberg: Metzler, pp. 165–202. ([doi:10.1007/978-3-662-67902-9_9](https://doi.org/10.1007/978-3-662-67902-9_9))
-* Jonah Lubin, Anke Detken, Frank Fischer: Das »ureigenste theatralische Element« – Automatische Extraktion von Requisiten aus deutschsprachigen Dramentexten. In: DHd2024: »DH Quo Vadis«. 26 February--1 March 2024. Book of Abstracts. University of Passau. ([doi:10.5281/zenodo.10698448](https://doi.org/10.5281/zenodo.10698448))
+* Jonah Lubin, Anke Detken, Frank Fischer: Das »ureigenste theatralische Element« – Automatische Extraktion von Requisiten aus deutschsprachigen Dramentexten. In: DHd2024: »DH Quo Vadis«. 26 February–1 March 2024. Book of Abstracts. University of Passau. ([doi:10.5281/zenodo.10698448](https://doi.org/10.5281/zenodo.10698448))
 * Benjamin Krautter: The Scales of (Computational) Literary Studies: Martin Mueller’s Concept of Scalable Reading in Theory and Practice. In: Florentina Armaselu, Andreas Fickers (eds.): Zoomland: Exploring Scale in Digital History and Humanities. Berlin, Boston: De Gruyter Oldenbourg 2024, pp. 261–286. ([doi:10.1515/9783111317779-011](https://doi.org/10.1515/9783111317779-011))
 * Melanie Andresen, Benjamin Krautter, Janis Pagel, Nils Reiter: Knowledge Distribution in German Drama. In: Journal of Open Humanities Data. Vol. 10 (2024), No. 1, pp. 1–7. ([doi:10.5334/johd.167](https://doi.org/10.5334/johd.167))
 

From dc46da34f8a385fa0bb5255c22b5b241be486162 Mon Sep 17 00:00:00 2001
From: Frank Fischer <lehkost@users.noreply.github.com>
Date: Tue, 30 Apr 2024 12:49:35 +0200
Subject: [PATCH 12/27] add 2 research papers

---
 public/doc/research.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/public/doc/research.md b/public/doc/research.md
index c0a3c91d..1b90397c 100644
--- a/public/doc/research.md
+++ b/public/doc/research.md
@@ -5,8 +5,10 @@ An (incomplete) collection of research articles on drama using data provided thr
 ## 2024
 
 * Julia Jennifer Beine, Frank Fischer, Viktor J. Illmer: Just the Type: Analysing Character Typology in Roman Comedy with RomDraCor. In: DH2024: »Reinvention & Responsibility«. 6–10 August 2024. Washington, DC. Book of Abstracts. (forthcoming)
+* Julia Jennifer Beine: The Schemer Unmasked. Sketching a Digital Profile of the Scheming Slave in Roman Comedy. In: Journal of Computational Literary Studies. Vol. 3 (2024), issue 1. ([doi:10.48694/jcls.3670](https://doi.org/10.48694/jcls.3670)) (forthcoming)
 * Peer Trilcke, Evgeniya Ustinova, Ingo Börner, Frank Fischer, Carsten Milling: Detecting Small Worlds in a Corpus of Thousands of Theatre Plays: A DraCor Study in Comparative Literary Network Analysis. In: Melanie Andresen, Nils Reiter (eds.): [Computational Drama Analysis. Reflecting Methods and Interpretations.](https://www.degruyter.com/document/isbn/9783111071763/html) Berlin/Boston: De Gruyter 2024. (forthcoming)
 * Alexia Schneider, Pablo Ruiz Fabo: [Stage Direction Classification in French Theater: Transfer Learning Experiments.](https://aclanthology.org/2024.latechclfl-1.28) In: Proceedings of the 8th Joint SIGHUM Workshop on Computational Linguistics for Cultural Heritage, Social Sciences, Humanities and Literature (LaTeCH-CLfL 2024). St. Julians, Malta. Association for Computational Linguistics, pp. 278–286.
+* Janis Pagel, Axel Pichler, Nils Reiter: [Evaluating In-Context Learning for Computational Literary Studies: A Case Study Based on the Automatic Recognition of Knowledge Transfer in German Drama.](https://aclanthology.org/2024.latechclfl-1.1) In: Proceedings of the 8th Joint SIGHUM Workshop on Computational Linguistics for Cultural Heritage, Social Sciences, Humanities and Literature (LaTeCH-CLfL 2024). St. Julians, Malta. Association for Computational Linguistics, pp. 1–10.
 * Marie Flüh, Mareike Schumacher: Macht versus Emotion. Handlungstreibende Muster in Günderrodes Dramen digital, distant und scalable gelesen. In: Frederike Middelhoff, Martina Wernli (eds.): Noch Zukunft haben. Neue Romantikforschung. Vol. 5. Berlin, Heidelberg: Metzler, pp. 165–202. ([doi:10.1007/978-3-662-67902-9_9](https://doi.org/10.1007/978-3-662-67902-9_9))
 * Jonah Lubin, Anke Detken, Frank Fischer: Das »ureigenste theatralische Element« – Automatische Extraktion von Requisiten aus deutschsprachigen Dramentexten. In: DHd2024: »DH Quo Vadis«. 26 February–1 March 2024. Book of Abstracts. University of Passau. ([doi:10.5281/zenodo.10698448](https://doi.org/10.5281/zenodo.10698448))
 * Benjamin Krautter: The Scales of (Computational) Literary Studies: Martin Mueller’s Concept of Scalable Reading in Theory and Practice. In: Florentina Armaselu, Andreas Fickers (eds.): Zoomland: Exploring Scale in Digital History and Humanities. Berlin, Boston: De Gruyter Oldenbourg 2024, pp. 261–286. ([doi:10.1515/9783111317779-011](https://doi.org/10.1515/9783111317779-011))
@@ -31,7 +33,7 @@ An (incomplete) collection of research articles on drama using data provided thr
 ## 2022
 
 * Kathrin Nühlen: Digitales Edieren von Drehbüchern mit den Richtlinien der Text Encoding Initiative. In: Jan Henschen, Florian Krauß, Alexandra Ksenofontova, Claus Tieber (eds.): Drehbuchforschung. Perspektiven auf Texte und Prozesse. Wiesbaden: Springer VS, pp. 201–224. ([doi:10.1007/978-3-658-38167-7_10](https://doi.org/10.1007/978-3-658-38167-7_10))
-* Melanie Andresen, Benjamin Krautter, Janis Pagel, Nils Reiter: Who Knows What in German Drama? A Composite Annotation Scheme for Knowledge Transfer. Annotation, Evaluation, and Analysis. In: Journal of Computational Literary Studies, vol. 1 (2022), issue 1. ([doi:10.48694/jcls.107](https://doi.org/10.48694/jcls.107))
+* Melanie Andresen, Benjamin Krautter, Janis Pagel, Nils Reiter: Who Knows What in German Drama? A Composite Annotation Scheme for Knowledge Transfer. Annotation, Evaluation, and Analysis. In: Journal of Computational Literary Studies. Vol. 1 (2022), issue 1. ([doi:10.48694/jcls.107](https://doi.org/10.48694/jcls.107))
 * Andrea Peverelli, Marieke van Erp, Jan Bloemendal: [The Process of Imitatio Through Stylometric Analysis: the Case of Terence’s Eunuchus.](https://ceur-ws.org/Vol-3290/long_paper988.pdf) In: Folgert Karsdorp, Alie Lassche, Kristoffer Nielbo (eds.): Proceedings of the Computational Humanities Research Conference 2022 (CHR2022). 12–14 December 2022. University of Antwerp. (= CEUR Workshop Proceedings, vol. 3290, pp. 337–354.)
 * Frank Fischer, Teresa Santa María Fernández, José Calvo Tello, Carsten Milling: Una perspectiva comparativa del teatro español: integración de la »Biblioteca Electrónica Textual del Teatro en Español« en la plataforma »DraCor«. In: Celis Sánchez, María Ángela (eds.): Las humanidades digitales como expresión y estudio del patrimonio digital. Cuenca: Ediciones de la Universidad de Castilla–La Mancha 2021 \[recte: 2022\], pp. 273–282. ([doi:10.17169/refubium-38797](https://doi.org/10.17169/refubium-38797))
 * Simon Kroll: [»Rhythmus und soziale Interaktion bei Calderón de la Barca«.](https://journals.univie.ac.at/index.php/adv/article/view/7525) In: Avisos de Viena. Viennese Cultural Studies. No. 4 (2022), pp. 60–72.

From 60e54bdcb4ef946a37485f5b893196caf04349c1 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 2 May 2024 00:42:01 +0000
Subject: [PATCH 13/27] Bump ejs from 3.1.7 to 3.1.10

Bumps [ejs](https://github.com/mde/ejs) from 3.1.7 to 3.1.10.
- [Release notes](https://github.com/mde/ejs/releases)
- [Commits](https://github.com/mde/ejs/compare/v3.1.7...v3.1.10)

---
updated-dependencies:
- dependency-name: ejs
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 9a80cd06..64254dc7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4517,9 +4517,9 @@ ee-first@1.1.1:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 ejs@^3.1.6:
-  version "3.1.7"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.7.tgz#c544d9c7f715783dd92f0bddcf73a59e6962d006"
-  integrity sha512-BIar7R6abbUxDA3bfXrO4DSgwo8I+fB5/1zgujl3HLLjwd6+9iOnrT+t3grn2qbk9vOgBubXOFwX2m9axoFaGw==
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.10.tgz#69ab8358b14e896f80cc39e62087b88500c3ac3b"
+  integrity sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==
   dependencies:
     jake "^10.8.5"
 

From b51b796651b0d52cbcaf30f98d72da5f416f7386 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 3 May 2024 11:56:28 +0000
Subject: [PATCH 14/27] Bump node from 21 to 22

Bumps node from 21 to 22.

---
updated-dependencies:
- dependency-name: node
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 4483e0ca..eeb65444 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:21 as build
+FROM node:22 as build
 
 WORKDIR /app
 ENV PATH /app/node_modules/.bin:$PATH

From 83fccbae59e2aed993ed8e02f5ca5adcdb08bd2e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 3 May 2024 11:57:38 +0000
Subject: [PATCH 15/27] Bump axios from 1.6.0 to 1.6.1

Bumps [axios](https://github.com/axios/axios) from 1.6.0 to 1.6.1.
- [Release notes](https://github.com/axios/axios/releases)
- [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md)
- [Commits](https://github.com/axios/axios/compare/v1.6.0...v1.6.1)

---
updated-dependencies:
- dependency-name: axios
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 097a6731..87bff0dd 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "@types/react-router-dom": "^5.1.8",
     "CETEIcean": "^1.3.0",
     "apisauce": "^2.0.0",
-    "axios": "^1.6.0",
+    "axios": "^1.6.1",
     "bootstrap": "^4.5.3",
     "chart.js": "^2.9.4",
     "classnames": "^2.2.6",
diff --git a/yarn.lock b/yarn.lock
index 64254dc7..17723473 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3021,10 +3021,10 @@ axios@^0.21.4:
   dependencies:
     follow-redirects "^1.14.0"
 
-axios@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.0.tgz#f1e5292f26b2fd5c2e66876adc5b06cdbd7d2102"
-  integrity sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==
+axios@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.1.tgz#76550d644bf0a2d469a01f9244db6753208397d7"
+  integrity sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==
   dependencies:
     follow-redirects "^1.15.0"
     form-data "^4.0.0"

From a3cd9609a2a0120fcc888a79bc0580742031bf19 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 3 May 2024 11:59:53 +0000
Subject: [PATCH 16/27] Bump actions/checkout from 4.1.2 to 4.1.4 in the
 github-actions group

Bumps the github-actions group with 1 update: [actions/checkout](https://github.com/actions/checkout).


Updates `actions/checkout` from 4.1.2 to 4.1.4
- [Release notes](https://github.com/actions/checkout/releases)
- [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md)
- [Commits](https://github.com/actions/checkout/compare/9bb56186c3b09b4f86b1c65136769dd318469633...0ad4b8fadaa221de15dcec353f45205ec38ea70b)

---
updated-dependencies:
- dependency-name: actions/checkout
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: github-actions
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 .github/workflows/docker-publish.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
index 34c0bad8..14f170b7 100644
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -20,7 +20,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out the repo
-        uses: actions/checkout@9bb56186c3b09b4f86b1c65136769dd318469633 # v4.1.2
+        uses: actions/checkout@0ad4b8fadaa221de15dcec353f45205ec38ea70b # v4.1.4
 
       # - name: Set up QEMU
       #   uses: docker/setup-qemu-action@68827325e0b33c7199eb31dd4e31fbe9023e06e3 # v3.0.0

From c5240638e890fad37d3c5bfcd5795cbb035ad003 Mon Sep 17 00:00:00 2001
From: Carsten Milling <cmil@hashtable.de>
Date: Fri, 3 May 2024 17:21:49 +0200
Subject: [PATCH 17/27] Update Docker section in README

---
 README.md | 39 ++++++++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 1e52df6f..bdfabe75 100644
--- a/README.md
+++ b/README.md
@@ -44,24 +44,33 @@ best performance. The build is minified and the filenames include the hashes.
 ## Docker
 
 We provide a `Dockerfile` that allows to build and run the DraCor Frontend in a
-Docker container. The DraCor API to connect the frontend to can be adjusted with
-the environment variable `DRACOR_API_HOST` (default: https://dracor.org).
+Docker container. You can either use a pre-built image from
+[DockerHub](https://hub.docker.com/r/dracor/frontend) or build an image yourself
+from the sources:
 
 ```sh
-# build the container
-docker build -t dracor-frontend .
-# run the container
-docker run -it --rm -p 8088:80 dracor-frontend
+# use the latest pre-build image
+docker pull dracor/frontend
+# or build the image yourself
+docker build -t dracor/frontend .
+```
+
+To start the frontend container and make it available at port 8088 of the local
+machine run:
+
+```sh
+docker run -it --rm -p 8088:80 dracor/frontend
 # now open http://localhost:8088 in a browser
 ```
 
-To connect the frontend to another DraCor API instance specify the environment
+By default the frontend is connected to the DraCor API at https://dracor.org. To
+connect the frontend to another API instance specify the environment
 variable `DRACOR_API_HOST` like this:
 
 ```sh
 docker run -it --rm -p 8088:80 \
   -e DRACOR_API_HOST=https://staging.dracor.org \
-  dracor-frontend
+  dracor/frontend
 ```
 
 This implies that the base URL for the API is
@@ -73,7 +82,19 @@ e.g. in a local development environment, it can be overridden with the
 docker run -it --rm -p 8088:80 \
   -e DRACOR_API_HOST=https://192.168.0.10:8080 \
   -e DRACOR_API_PREFIX=/exist/restxq/v1 \
-  dracor-frontend
+  dracor/frontend
+```
+
+If you want to use local domain names or encounter "502 Bad Gateway" errors you
+may need to specify a DNS server that can resolve the domain name of your API
+host:
+
+```sh
+docker run -it --rm -p 8088:80 \
+  -e DRACOR_API_HOST=https://exist:8080 \
+  -e DRACOR_API_PREFIX=/exist/restxq/v1 \
+  -e NGINX_RESOLVER=192.168.0.1 \
+  dracor/frontend
 ```
 
 ## License

From c9e9731c8ce70173824214306c9020b5ee77d125 Mon Sep 17 00:00:00 2001
From: Frank Fischer <lehkost@users.noreply.github.com>
Date: Wed, 8 May 2024 14:24:58 +0200
Subject: [PATCH 18/27] add paper

---
 public/doc/research.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/doc/research.md b/public/doc/research.md
index 1b90397c..f9f2a09c 100644
--- a/public/doc/research.md
+++ b/public/doc/research.md
@@ -7,6 +7,7 @@ An (incomplete) collection of research articles on drama using data provided thr
 * Julia Jennifer Beine, Frank Fischer, Viktor J. Illmer: Just the Type: Analysing Character Typology in Roman Comedy with RomDraCor. In: DH2024: »Reinvention & Responsibility«. 6–10 August 2024. Washington, DC. Book of Abstracts. (forthcoming)
 * Julia Jennifer Beine: The Schemer Unmasked. Sketching a Digital Profile of the Scheming Slave in Roman Comedy. In: Journal of Computational Literary Studies. Vol. 3 (2024), issue 1. ([doi:10.48694/jcls.3670](https://doi.org/10.48694/jcls.3670)) (forthcoming)
 * Peer Trilcke, Evgeniya Ustinova, Ingo Börner, Frank Fischer, Carsten Milling: Detecting Small Worlds in a Corpus of Thousands of Theatre Plays: A DraCor Study in Comparative Literary Network Analysis. In: Melanie Andresen, Nils Reiter (eds.): [Computational Drama Analysis. Reflecting Methods and Interpretations.](https://www.degruyter.com/document/isbn/9783111071763/html) Berlin/Boston: De Gruyter 2024. (forthcoming)
+* Monika Dabrowska, María Teresa Santa María Fernández: Gender relations in Spanish theatre during the Silver Age: a quantitative comparison of works in the Spanish Drama Corpus. In: Digital Scholarship in the Humanities. Published:  26 February 2024. ([doi:10.1093/llc/fqae007](https://doi.org/10.1093/llc/fqae007))
 * Alexia Schneider, Pablo Ruiz Fabo: [Stage Direction Classification in French Theater: Transfer Learning Experiments.](https://aclanthology.org/2024.latechclfl-1.28) In: Proceedings of the 8th Joint SIGHUM Workshop on Computational Linguistics for Cultural Heritage, Social Sciences, Humanities and Literature (LaTeCH-CLfL 2024). St. Julians, Malta. Association for Computational Linguistics, pp. 278–286.
 * Janis Pagel, Axel Pichler, Nils Reiter: [Evaluating In-Context Learning for Computational Literary Studies: A Case Study Based on the Automatic Recognition of Knowledge Transfer in German Drama.](https://aclanthology.org/2024.latechclfl-1.1) In: Proceedings of the 8th Joint SIGHUM Workshop on Computational Linguistics for Cultural Heritage, Social Sciences, Humanities and Literature (LaTeCH-CLfL 2024). St. Julians, Malta. Association for Computational Linguistics, pp. 1–10.
 * Marie Flüh, Mareike Schumacher: Macht versus Emotion. Handlungstreibende Muster in Günderrodes Dramen digital, distant und scalable gelesen. In: Frederike Middelhoff, Martina Wernli (eds.): Noch Zukunft haben. Neue Romantikforschung. Vol. 5. Berlin, Heidelberg: Metzler, pp. 165–202. ([doi:10.1007/978-3-662-67902-9_9](https://doi.org/10.1007/978-3-662-67902-9_9))

From 1c2ded33787886aa50ea6bbd4055247d418109cd Mon Sep 17 00:00:00 2001
From: Frank Fischer <lehkost@users.noreply.github.com>
Date: Sat, 25 May 2024 17:19:41 +0200
Subject: [PATCH 19/27] add research papers and a monograph

---
 public/doc/research.md | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/public/doc/research.md b/public/doc/research.md
index f9f2a09c..68f54d8b 100644
--- a/public/doc/research.md
+++ b/public/doc/research.md
@@ -7,17 +7,20 @@ An (incomplete) collection of research articles on drama using data provided thr
 * Julia Jennifer Beine, Frank Fischer, Viktor J. Illmer: Just the Type: Analysing Character Typology in Roman Comedy with RomDraCor. In: DH2024: »Reinvention & Responsibility«. 6–10 August 2024. Washington, DC. Book of Abstracts. (forthcoming)
 * Julia Jennifer Beine: The Schemer Unmasked. Sketching a Digital Profile of the Scheming Slave in Roman Comedy. In: Journal of Computational Literary Studies. Vol. 3 (2024), issue 1. ([doi:10.48694/jcls.3670](https://doi.org/10.48694/jcls.3670)) (forthcoming)
 * Peer Trilcke, Evgeniya Ustinova, Ingo Börner, Frank Fischer, Carsten Milling: Detecting Small Worlds in a Corpus of Thousands of Theatre Plays: A DraCor Study in Comparative Literary Network Analysis. In: Melanie Andresen, Nils Reiter (eds.): [Computational Drama Analysis. Reflecting Methods and Interpretations.](https://www.degruyter.com/document/isbn/9783111071763/html) Berlin/Boston: De Gruyter 2024. (forthcoming)
+* Dîlan Canan Çakir: Poetische Ökonomie im Drama. Einakter im 18. und frühen 19. Jahrhundert. Berlin, Boston: De Gruyter 2024. (= Studien und Texte zur Sozialgeschichte der Literatur. Vol. 164.) ([doi:10.1515/9783111334059](https://doi.org/10.1515/9783111334059))
 * Monika Dabrowska, María Teresa Santa María Fernández: Gender relations in Spanish theatre during the Silver Age: a quantitative comparison of works in the Spanish Drama Corpus. In: Digital Scholarship in the Humanities. Published:  26 February 2024. ([doi:10.1093/llc/fqae007](https://doi.org/10.1093/llc/fqae007))
 * Alexia Schneider, Pablo Ruiz Fabo: [Stage Direction Classification in French Theater: Transfer Learning Experiments.](https://aclanthology.org/2024.latechclfl-1.28) In: Proceedings of the 8th Joint SIGHUM Workshop on Computational Linguistics for Cultural Heritage, Social Sciences, Humanities and Literature (LaTeCH-CLfL 2024). St. Julians, Malta. Association for Computational Linguistics, pp. 278–286.
 * Janis Pagel, Axel Pichler, Nils Reiter: [Evaluating In-Context Learning for Computational Literary Studies: A Case Study Based on the Automatic Recognition of Knowledge Transfer in German Drama.](https://aclanthology.org/2024.latechclfl-1.1) In: Proceedings of the 8th Joint SIGHUM Workshop on Computational Linguistics for Cultural Heritage, Social Sciences, Humanities and Literature (LaTeCH-CLfL 2024). St. Julians, Malta. Association for Computational Linguistics, pp. 1–10.
 * Marie Flüh, Mareike Schumacher: Macht versus Emotion. Handlungstreibende Muster in Günderrodes Dramen digital, distant und scalable gelesen. In: Frederike Middelhoff, Martina Wernli (eds.): Noch Zukunft haben. Neue Romantikforschung. Vol. 5. Berlin, Heidelberg: Metzler, pp. 165–202. ([doi:10.1007/978-3-662-67902-9_9](https://doi.org/10.1007/978-3-662-67902-9_9))
 * Jonah Lubin, Anke Detken, Frank Fischer: Das »ureigenste theatralische Element« – Automatische Extraktion von Requisiten aus deutschsprachigen Dramentexten. In: DHd2024: »DH Quo Vadis«. 26 February–1 March 2024. Book of Abstracts. University of Passau. ([doi:10.5281/zenodo.10698448](https://doi.org/10.5281/zenodo.10698448))
 * Benjamin Krautter: The Scales of (Computational) Literary Studies: Martin Mueller’s Concept of Scalable Reading in Theory and Practice. In: Florentina Armaselu, Andreas Fickers (eds.): Zoomland: Exploring Scale in Digital History and Humanities. Berlin, Boston: De Gruyter Oldenbourg 2024, pp. 261–286. ([doi:10.1515/9783111317779-011](https://doi.org/10.1515/9783111317779-011))
-* Melanie Andresen, Benjamin Krautter, Janis Pagel, Nils Reiter: Knowledge Distribution in German Drama. In: Journal of Open Humanities Data. Vol. 10 (2024), No. 1, pp. 1–7. ([doi:10.5334/johd.167](https://doi.org/10.5334/johd.167))
+* Melanie Andresen, Benjamin Krautter, Janis Pagel, Nils Reiter: Knowledge Distribution in German Drama. In: Journal of Open Humanities Data. Vol. 10 (2024), no. 1, pp. 1–7. ([doi:10.5334/johd.167](https://doi.org/10.5334/johd.167))
 
 ## 2023
 
-* Petr Pořízka: CapekDraCor: A New Contribution to the European Programmable Drama Corpora. In: Jazykovedný časopis. Vol. 74 (2023), No. 1, pp. 244–253. ([doi:10.2478/jazcas-2023-0042](https://doi.org/10.2478/jazcas-2023-0042))
+* Janis Pagel, Benjamin Krautter, Melanie Andresen, Marcus Willand, Nils Reiter: On Designing Collaboration in a Mixed-Methods Scenario. Reflecting Quantitative Drama Analytics (QuaDrama). In: Birgit Schneider, Beate Löffler, Tino Mager, Carola Hein (eds.): Mixing Methods. Practical Insights from the Humanities in the Digital Age. Bielefeld: transcript 2023, pp. 81–102. ([doi:10.14361/9783839469132-010](https://doi.org/10.14361/9783839469132-010))
+* Benjamin Krautter: Kopräsenz-, Koreferenz- und Wissens-Netzwerke. Kantenkriterien in dramatischen Figurennetzwerken am Beispiel von Kleists *Die Familie Schroffenstein* (1803). In: Journal of Literary Theory. Vol. 17 (2023), no. 2, pp. 261–289. ([doi:10.1515/jlt-2023-2012](https://doi.org/10.1515/jlt-2023-2012))
+* Petr Pořízka: CapekDraCor: A New Contribution to the European Programmable Drama Corpora. In: Jazykovedný časopis. Vol. 74 (2023), no. 1, pp. 244–253. ([doi:10.2478/jazcas-2023-0042](https://doi.org/10.2478/jazcas-2023-0042))
 * Katrin Dennerlein, Thomas Schmidt, Christian Wolff: EmoDrama. Ein Korpus mit Emotionsinformationen in Dramen von 1650–1815. In: Zeitschrift für digitale Geisteswissenschaften 8 (2023). ([doi:10.17175/2023_010](https://doi.org/10.17175/2023_010))
 * Florian Cafiero, Simon Gabay: Dating the Stylistic Turn: The Strength of the Auctorial Signal in Early Modern French Plays. In: CHR2023. 6–8 December 2023. Paris. ([hal-04343340](https://hal.science/hal-04343340))
 * Ingo Börner, Peer Trilcke, Carsten Milling, Frank Fischer, Henny Sluyter-Gäthje: Dockerizing DraCor – A Container-Based Approach to Reproducibility in Computational Literary Studies. In: DH2023: »Collaboration as Opportunity«. 10–14 July 2023. Book of Abstracts. University of Graz, pp. 293–295. ([doi:10.5281/zenodo.8107836](https://doi.org/10.5281/zenodo.8107836))
@@ -38,7 +41,7 @@ An (incomplete) collection of research articles on drama using data provided thr
 * Andrea Peverelli, Marieke van Erp, Jan Bloemendal: [The Process of Imitatio Through Stylometric Analysis: the Case of Terence’s Eunuchus.](https://ceur-ws.org/Vol-3290/long_paper988.pdf) In: Folgert Karsdorp, Alie Lassche, Kristoffer Nielbo (eds.): Proceedings of the Computational Humanities Research Conference 2022 (CHR2022). 12–14 December 2022. University of Antwerp. (= CEUR Workshop Proceedings, vol. 3290, pp. 337–354.)
 * Frank Fischer, Teresa Santa María Fernández, José Calvo Tello, Carsten Milling: Una perspectiva comparativa del teatro español: integración de la »Biblioteca Electrónica Textual del Teatro en Español« en la plataforma »DraCor«. In: Celis Sánchez, María Ángela (eds.): Las humanidades digitales como expresión y estudio del patrimonio digital. Cuenca: Ediciones de la Universidad de Castilla–La Mancha 2021 \[recte: 2022\], pp. 273–282. ([doi:10.17169/refubium-38797](https://doi.org/10.17169/refubium-38797))
 * Simon Kroll: [»Rhythmus und soziale Interaktion bei Calderón de la Barca«.](https://journals.univie.ac.at/index.php/adv/article/view/7525) In: Avisos de Viena. Viennese Cultural Studies. No. 4 (2022), pp. 60–72.
-* Botond Szemes, Bence Vida: [Tragikus és komikus hálózatok. Drámai műfajok csoportosítása szerkezeti tulajdonságok alapján.](https://real.mtak.hu/159929/) [Tragical and Comical Networks: Clustering Dramatic Genres by Structural Features.] In: Helikon Irodalomtudományi Szemle. [Helikon Review of Literary Studies.] Vol. 68 (2022), No. 2, pp. 345–368.
+* Botond Szemes, Bence Vida: [Tragikus és komikus hálózatok. Drámai műfajok csoportosítása szerkezeti tulajdonságok alapján.](https://real.mtak.hu/159929/) [Tragical and Comical Networks: Clustering Dramatic Genres by Structural Features.] In: Helikon Irodalomtudományi Szemle. [Helikon Review of Literary Studies.] Vol. 68 (2022), no. 2, pp. 345–368.
 * Botond Szemes, Tímea Bajzát, Zsófia Fellegi, Péter Kundráth, Péter Horváth, Balázs Indig, Anna Dióssy, Fanni Hegedüs, Natali Pantyelejev, Sarolta Sziráki, Bence Vida, Balázs Kalmár, Gábor Palkó: Az ELTE Drámakorpuszának létrehozása és lehetőségei. [The Creation and Potential of the ELTE Drama Corpus.] In: József Tick, Károly Kokas, András Holl (eds.): Valós térben – Az online térért. Networkshop 31: national conference. 20–22 April 2022. University of Debrecen. Budapest: HUNGARNET Association 2022, pp. 170–178. ([doi:10.31915/NWS.2022.21](https://doi.org/10.31915/NWS.2022.21))
 * Dîlan Canan Çakir, Frank Fischer: Dramatische Metadaten. Die Datenbank deutschsprachiger Einakter 1740–1850. In: DHd2022: »Kulturen des digitalen Gedächtnisses«. 7–11 March 2022. Book of Abstracts. University of Potsdam. ([doi:10.5281/zenodo.6327977](https://doi.org/10.5281/zenodo.6327977))
 * Ingo Börner, Frank Fischer, Carsten Milling, Henny Sluyter-Gäthje: Einführung in DraCor: Programmable Corpora für die digitale Dramenanalyse. In: DHd2022: »Kulturen des digitalen Gedächtnisses«. 7–11 March 2022. Book of Abstracts. University of Potsdam. ([doi:10.5281/zenodo.6327951](https://doi.org/10.5281/zenodo.6327951))
@@ -56,7 +59,7 @@ An (incomplete) collection of research articles on drama using data provided thr
 
 * Peer Trilcke, Christopher Kittel, Nils Reiter, Daria Maximova, Frank Fischer: [Opening the Stage: A Quantitative Look at Stage Directions in German Drama.](https://dh2020.adho.org/wp-content/uploads/2020/07/337_OpeningtheStageAQuantitativeLookatStageDirectionsinGermanDrama.html) In: DH2020: »carrefours/intersections«. 22–24 July 2020. Book of Abstracts. University of Ottawa.
 * Teresa Santa María Fernández, Monika Dabrowska: [Análisis del coro como personaje en la dramaturgia grecolatina y española incluida en DraCor.](https://dh2020.adho.org/wp-content/uploads/2020/07/194_AnlisisdelcorocomopersonajeenladramaturgiagrecolatinayespaolaincluidasenDraCor.html) In: DH2020: »carrefours/intersections«. 22–24 July 2020. Book of Abstracts. University of Ottawa.
-* Hanno Ehrlicher, Jörg Lehmann, Nils Reiter, Marcus Willand: [A Quantitative View of Genre Poetics. Calderón de la Barca’s oeuvre and the contemporaneous poetics of drama.](https://www.digitalhumanitiescooperation.de/pamphlet-9-gattungspoetik-in-quantitativer-sicht/) In: LitLab Pamphlets, No. 9 (April 2020).
+* Hanno Ehrlicher, Jörg Lehmann, Nils Reiter, Marcus Willand: [A Quantitative View of Genre Poetics. Calderón de la Barca’s oeuvre and the contemporaneous poetics of drama.](https://www.digitalhumanitiescooperation.de/pamphlet-9-gattungspoetik-in-quantitativer-sicht/) In: LitLab Pamphlets, no. 9 (April 2020).
 * Jan Horstmann, Marie Flüh, Mareike Schumacher, Frank Fischer, Peer Trilcke, Jan Christoph Meister: Netzwerkanalyse spielerisch vermitteln mit DraCor und forTEXT: Zur nicht-digitalen Dissemination einer digitalen Methode in Form des Kartenspiels »Dramenquartett«. In: DHd2020: »Spielräume«. 2–6 March 2020. Book of Abstracts. Paderborn University, pp. 167–171. ([doi:10.5281/zenodo.4621906](https://doi.org/10.5281/zenodo.4621906))
 * Nathalie Wiedmer, Janis Pagel, Nils Reiter: Romeo, Freund des Mercutio: Semi-Automatische Extraktion von Beziehungen zwischen dramatischen Figuren. In: DHd2020: »Spielräume«. 2–6 March 2020. Book of Abstracts. Paderborn University, pp. 194–200. ([doi:10.5281/zenodo.4621778](https://doi.org/10.5281/zenodo.4621778))
 

From 54f91ce33770c0cc38af507bbf1269fc4ed2f593 Mon Sep 17 00:00:00 2001
From: Frank Fischer <lehkost@users.noreply.github.com>
Date: Tue, 28 May 2024 11:49:36 +0200
Subject: [PATCH 20/27] update one record

---
 public/doc/research.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/doc/research.md b/public/doc/research.md
index 68f54d8b..c5e8425e 100644
--- a/public/doc/research.md
+++ b/public/doc/research.md
@@ -5,8 +5,8 @@ An (incomplete) collection of research articles on drama using data provided thr
 ## 2024
 
 * Julia Jennifer Beine, Frank Fischer, Viktor J. Illmer: Just the Type: Analysing Character Typology in Roman Comedy with RomDraCor. In: DH2024: »Reinvention & Responsibility«. 6–10 August 2024. Washington, DC. Book of Abstracts. (forthcoming)
-* Julia Jennifer Beine: The Schemer Unmasked. Sketching a Digital Profile of the Scheming Slave in Roman Comedy. In: Journal of Computational Literary Studies. Vol. 3 (2024), issue 1. ([doi:10.48694/jcls.3670](https://doi.org/10.48694/jcls.3670)) (forthcoming)
 * Peer Trilcke, Evgeniya Ustinova, Ingo Börner, Frank Fischer, Carsten Milling: Detecting Small Worlds in a Corpus of Thousands of Theatre Plays: A DraCor Study in Comparative Literary Network Analysis. In: Melanie Andresen, Nils Reiter (eds.): [Computational Drama Analysis. Reflecting Methods and Interpretations.](https://www.degruyter.com/document/isbn/9783111071763/html) Berlin/Boston: De Gruyter 2024. (forthcoming)
+* Julia Jennifer Beine: The Schemer Unmasked. Sketching a Digital Profile of the Scheming Slave in Roman Comedy. In: Journal of Computational Literary Studies. Vol. 3 (2024), issue 1, pp. 1–29. ([doi:10.48694/jcls.3670](https://doi.org/10.48694/jcls.3670))
 * Dîlan Canan Çakir: Poetische Ökonomie im Drama. Einakter im 18. und frühen 19. Jahrhundert. Berlin, Boston: De Gruyter 2024. (= Studien und Texte zur Sozialgeschichte der Literatur. Vol. 164.) ([doi:10.1515/9783111334059](https://doi.org/10.1515/9783111334059))
 * Monika Dabrowska, María Teresa Santa María Fernández: Gender relations in Spanish theatre during the Silver Age: a quantitative comparison of works in the Spanish Drama Corpus. In: Digital Scholarship in the Humanities. Published:  26 February 2024. ([doi:10.1093/llc/fqae007](https://doi.org/10.1093/llc/fqae007))
 * Alexia Schneider, Pablo Ruiz Fabo: [Stage Direction Classification in French Theater: Transfer Learning Experiments.](https://aclanthology.org/2024.latechclfl-1.28) In: Proceedings of the 8th Joint SIGHUM Workshop on Computational Linguistics for Cultural Heritage, Social Sciences, Humanities and Literature (LaTeCH-CLfL 2024). St. Julians, Malta. Association for Computational Linguistics, pp. 278–286.

From 3cec78aa2417c6b2bb653fa0c4888c33edf1bb51 Mon Sep 17 00:00:00 2001
From: Frank Fischer <lehkost@users.noreply.github.com>
Date: Fri, 31 May 2024 09:54:35 +0200
Subject: [PATCH 21/27] add research articles

---
 public/doc/research.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/doc/research.md b/public/doc/research.md
index c5e8425e..9fcdaea5 100644
--- a/public/doc/research.md
+++ b/public/doc/research.md
@@ -6,6 +6,8 @@ An (incomplete) collection of research articles on drama using data provided thr
 
 * Julia Jennifer Beine, Frank Fischer, Viktor J. Illmer: Just the Type: Analysing Character Typology in Roman Comedy with RomDraCor. In: DH2024: »Reinvention & Responsibility«. 6–10 August 2024. Washington, DC. Book of Abstracts. (forthcoming)
 * Peer Trilcke, Evgeniya Ustinova, Ingo Börner, Frank Fischer, Carsten Milling: Detecting Small Worlds in a Corpus of Thousands of Theatre Plays: A DraCor Study in Comparative Literary Network Analysis. In: Melanie Andresen, Nils Reiter (eds.): [Computational Drama Analysis. Reflecting Methods and Interpretations.](https://www.degruyter.com/document/isbn/9783111071763/html) Berlin/Boston: De Gruyter 2024. (forthcoming)
+* Michael Falk: Drama: Inner Seas in the Tragedies of Baillie and Harpur. In: Romanticism and the Contingent Self. The Challenge of Representation. Cham: Palgrave Macmillan 2024, pp. 183–228. ([doi:10.1007/978-3-031-49959-3_5](https://doi.org/10.1007/978-3-031-49959-3_5))
+* Ingo Börner, Peer Trilcke et al.: On Versioning Living and Programmable Corpora (v1.0.0). CLS INFRA D7.3. Zenodo, 27 February 2024. ([doi:10.5281/zenodo.11081934](https://doi.org/10.5281/zenodo.11081934))
 * Julia Jennifer Beine: The Schemer Unmasked. Sketching a Digital Profile of the Scheming Slave in Roman Comedy. In: Journal of Computational Literary Studies. Vol. 3 (2024), issue 1, pp. 1–29. ([doi:10.48694/jcls.3670](https://doi.org/10.48694/jcls.3670))
 * Dîlan Canan Çakir: Poetische Ökonomie im Drama. Einakter im 18. und frühen 19. Jahrhundert. Berlin, Boston: De Gruyter 2024. (= Studien und Texte zur Sozialgeschichte der Literatur. Vol. 164.) ([doi:10.1515/9783111334059](https://doi.org/10.1515/9783111334059))
 * Monika Dabrowska, María Teresa Santa María Fernández: Gender relations in Spanish theatre during the Silver Age: a quantitative comparison of works in the Spanish Drama Corpus. In: Digital Scholarship in the Humanities. Published:  26 February 2024. ([doi:10.1093/llc/fqae007](https://doi.org/10.1093/llc/fqae007))

From 1e7d792539d71ea5c66892b69e993b0baea48673 Mon Sep 17 00:00:00 2001
From: Carsten Milling <cmil@hashtable.de>
Date: Fri, 31 May 2024 23:17:47 +0200
Subject: [PATCH 22/27] Use `git describe` to determine the frontend version to
 display

---
 package.json             | 4 ++--
 src/components/Footer.js | 9 ++++-----
 src/config.js            | 3 +++
 version.sh               | 2 ++
 4 files changed, 11 insertions(+), 7 deletions(-)
 create mode 100755 version.sh

diff --git a/package.json b/package.json
index 87bff0dd..99d5771b 100644
--- a/package.json
+++ b/package.json
@@ -53,8 +53,8 @@
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "REACT_APP_VERSION=`./version.sh` react-scripts start",
+    "build": "REACT_APP_VERSION=`./version.sh` react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 0f6ef1b1..344687a8 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,14 +1,13 @@
 import React, {useContext} from 'react';
 import {Col, Row} from 'reactstrap';
 import classnames from 'classnames/bind';
+import {version} from '../config';
 import {DracorContext} from '../context';
 import svgBibTex from '../images/bibtex.svg';
 import svgRIS from '../images/ris.svg';
 import svgCC0 from '../images/cc0.svg';
 import style from './Footer.module.scss';
 
-import pkg from '../../package.json';
-
 const cx = classnames.bind(style);
 
 const Footer = () => {
@@ -21,8 +20,8 @@ const Footer = () => {
 
   let frontendVersionUrl =
     'https://github.com/dracor-org/dracor-frontend/releases/';
-  if (/^\d+\.\d+\.\d+(-(alpha|beta)(\.\d+)?)?$/.test(pkg.version)) {
-    frontendVersionUrl += `tag/v${pkg.version}`;
+  if (/^\d+\.\d+\.\d+(-(alpha|beta)(\.\d+)?)?$/.test(version)) {
+    frontendVersionUrl += `tag/v${version}`;
   }
 
   return (
@@ -88,7 +87,7 @@ const Footer = () => {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                {pkg.version}
+                {version}
               </a>
             </span>{' '}
             <span className="version-pill">
diff --git a/src/config.js b/src/config.js
index 1a45fa7c..43c391d6 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,3 +1,6 @@
+import pkg from '../package.json';
+
+export const version = process.env.REACT_APP_VERSION || pkg.version;
 export const apiUrl = process.env.REACT_APP_DRACOR_API;
 export const sparqlUrl = process.env.REACT_APP_SPARQL_URL;
 export const ezlinavisUrl = process.env.REACT_APP_EZLINAVIS_URL;
diff --git a/version.sh b/version.sh
new file mode 100755
index 00000000..8823cd5b
--- /dev/null
+++ b/version.sh
@@ -0,0 +1,2 @@
+#!/bin/sh
+git describe --tags --dirty --always | sed s/^v// | sed s/-g/-/

From 2e12e03524bef9a572673e5c70cfb2b60d121fca Mon Sep 17 00:00:00 2001
From: Sandra Densch <densch.sandra@gmail.com>
Date: Fri, 19 Apr 2024 18:27:13 +0200
Subject: [PATCH 23/27] Issue 259:  node size by number of spoken words -
 remove relative node size component - call characters endpoint to get number
 of spoken words -  interpolate node size between 15 and 30

---
 src/components/NetworkGraph.js   |  6 +-----
 src/components/Play.js           | 19 +++++++++++++------
 src/components/RelationsGraph.js |  6 +-----
 src/network.js                   | 19 ++++++++++++++++++-
 4 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/components/NetworkGraph.js b/src/components/NetworkGraph.js
index e60c40d7..c81616b7 100644
--- a/src/components/NetworkGraph.js
+++ b/src/components/NetworkGraph.js
@@ -6,7 +6,6 @@ import {
   EdgeShapes,
   NodeShapes,
   ForceAtlas2,
-  RelativeSize,
   RandomizeNodePositions,
 } from 'react-sigma/lib/';
 
@@ -51,10 +50,7 @@ class NetworkGraph extends Component {
         >
           <EdgeShapes default="line" />
           <NodeShapes default="circle" />
-          <RandomizeNodePositions>
-            {layout}
-            <RelativeSize initialSize={15} />
-          </RandomizeNodePositions>
+          <RandomizeNodePositions>{layout}</RandomizeNodePositions>
         </Sigma>
       );
     }
diff --git a/src/components/Play.js b/src/components/Play.js
index 2f891abf..decd5069 100644
--- a/src/components/Play.js
+++ b/src/components/Play.js
@@ -25,9 +25,10 @@ const edgeColor = '#61affe65';
 const nodeColor = '#61affe';
 
 const nodeProps = (node) => {
-  const {sex} = node;
-  const color = sex === 'MALE' || sex === 'FEMALE' ? '#1f2448' : '#61affe';
-  const type = sex === 'MALE' ? 'square' : 'circle';
+  const {gender} = node;
+  const color =
+    gender === 'MALE' || gender === 'FEMALE' ? '#1f2448' : '#61affe';
+  const type = gender === 'MALE' ? 'square' : 'circle';
   return {color, type};
 };
 
@@ -55,10 +56,16 @@ const PlayInfo = ({corpusId, playId}) => {
       try {
         const response = await api.get(url);
         if (response.ok) {
-          const {characters, segments} = response.data;
-          const graph = makeGraph(characters, segments, nodeProps, edgeColor);
+          const {segments} = response.data;
+          const response2 = await api.get(`${url}/characters`);
+          if (response2.ok) {
+            const characters = response2.data;
+            const graph = makeGraph(characters, segments, nodeProps, edgeColor);
+            setGraph(graph);
+          } else {
+            setError(response.originalError);
+          }
           setPlay(response.data);
-          setGraph(graph);
         } else if (response.status === 404) {
           setError(new Error('not found'));
         } else {
diff --git a/src/components/RelationsGraph.js b/src/components/RelationsGraph.js
index 2b818fc2..e6dac611 100644
--- a/src/components/RelationsGraph.js
+++ b/src/components/RelationsGraph.js
@@ -6,7 +6,6 @@ import {
   EdgeShapes,
   NodeShapes,
   ForceAtlas2,
-  RelativeSize,
   RandomizeNodePositions,
 } from 'react-sigma/lib/';
 
@@ -78,10 +77,7 @@ const RelationsGraph = ({play, nodeColor, edgeColor}) => {
       >
         <EdgeShapes default="curvedArrow" />
         <NodeShapes default="circle" />
-        <RandomizeNodePositions>
-          {layout}
-          <RelativeSize initialSize={15} />
-        </RandomizeNodePositions>
+        <RandomizeNodePositions>{layout}</RandomizeNodePositions>
       </Sigma>
     );
   }
diff --git a/src/network.js b/src/network.js
index 319d07b5..793f70a4 100644
--- a/src/network.js
+++ b/src/network.js
@@ -1,5 +1,14 @@
 // network graph utility functions
 
+function interpolateNodeSize(minWords, maxWords, numOfWords) {
+  const MAX_SIZE = 30;
+  const MIN_SIZE = 15;
+  return (
+    MIN_SIZE +
+    ((numOfWords - minWords) / (maxWords - minWords)) * (MAX_SIZE - MIN_SIZE)
+  );
+}
+
 function getCooccurrences(segments) {
   const map = {};
   segments.forEach((s) => {
@@ -41,10 +50,18 @@ export function makeGraph(
   nodeProps = {},
   edgeColor = 'black'
 ) {
+  const maxWords = Math.max(...characters.map((p) => p.numOfWords));
+  const minWords = Math.min(...characters.map((p) => p.numOfWords));
   const nodes = [];
   characters.forEach((p) => {
     const props = typeof nodeProps === 'function' ? nodeProps(p) : nodeProps;
-    const node = {id: p.id, label: p.name || `#${p.id}`, ...props};
+    const nodeSize = interpolateNodeSize(minWords, maxWords, p.numOfWords);
+    const node = {
+      id: p.id,
+      label: p.name,
+      size: nodeSize || `#${p.id}`,
+      ...props,
+    };
     nodes.push(node);
   });
   const cooccurrences = getCooccurrences(segments);

From 87163caeeb94d7346039aa0bbbfd7c113a79f2b2 Mon Sep 17 00:00:00 2001
From: Sandra Densch <densch.sandra@gmail.com>
Date: Tue, 21 May 2024 18:23:26 +0200
Subject: [PATCH 24/27] 259: implemented node size interpolation for relations
 graph

---
 src/components/NetworkGraph.js   | 14 ++++--
 src/components/Play.js           | 62 ++++++++++++-------------
 src/components/RelationsGraph.js | 35 +++-----------
 src/network.js                   | 79 ++++++++++++++++++++++----------
 4 files changed, 104 insertions(+), 86 deletions(-)

diff --git a/src/components/NetworkGraph.js b/src/components/NetworkGraph.js
index c81616b7..79423303 100644
--- a/src/components/NetworkGraph.js
+++ b/src/components/NetworkGraph.js
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import {makeGraph} from '../network';
 // we need to require from react-sigma/lib/ to make build work
 import {
   Sigma,
@@ -11,7 +12,9 @@ import {
 
 class NetworkGraph extends Component {
   render() {
-    const {graph, nodeColor, edgeColor} = this.props;
+    const {characters, play, nodeColor, edgeColor} = this.props;
+
+    const graph = makeGraph(characters, play, edgeColor, 'cooccurence');
 
     const settings = {
       maxEdgeSize: 5,
@@ -60,9 +63,12 @@ class NetworkGraph extends Component {
 }
 
 NetworkGraph.propTypes = {
-  graph: PropTypes.shape({
-    nodes: PropTypes.array.isRequired,
-    edges: PropTypes.array.isRequired,
+  characters: PropTypes.array.isRequired,
+  play: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    corpus: PropTypes.string.isRequired,
+    relations: PropTypes.array.isRequired,
+    segments: PropTypes.array.isRequired,
   }).isRequired,
   nodeColor: PropTypes.string.isRequired,
   edgeColor: PropTypes.string.isRequired,
diff --git a/src/components/Play.js b/src/components/Play.js
index decd5069..bb006a69 100644
--- a/src/components/Play.js
+++ b/src/components/Play.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {Container} from 'reactstrap';
 import {Helmet} from 'react-helmet';
 import api from '../api';
-import {makeGraph} from '../network';
 import PlayDetailsHeader from './PlayDetailsHeader';
 import PlayDetailsNav from './PlayDetailsNav';
 import PlayDetailsTab from './PlayDetailsTab';
@@ -24,14 +23,6 @@ const apiUrl = api.getBaseURL();
 const edgeColor = '#61affe65';
 const nodeColor = '#61affe';
 
-const nodeProps = (node) => {
-  const {gender} = node;
-  const color =
-    gender === 'MALE' || gender === 'FEMALE' ? '#1f2448' : '#61affe';
-  const type = gender === 'MALE' ? 'square' : 'circle';
-  return {color, type};
-};
-
 const navItems = [
   {name: 'network', label: 'Network'},
   {name: 'relations', label: 'Relations'},
@@ -44,7 +35,7 @@ const tabNames = new Set(navItems.map((item) => item.name));
 
 const PlayInfo = ({corpusId, playId}) => {
   const [play, setPlay] = useState(null);
-  const [graph, setGraph] = useState(null);
+  const [characters, setCharacters] = useState(null);
   const [error, setError] = useState(null);
   const [chartType, setChartType] = useState('sapogov');
 
@@ -56,15 +47,6 @@ const PlayInfo = ({corpusId, playId}) => {
       try {
         const response = await api.get(url);
         if (response.ok) {
-          const {segments} = response.data;
-          const response2 = await api.get(`${url}/characters`);
-          if (response2.ok) {
-            const characters = response2.data;
-            const graph = makeGraph(characters, segments, nodeProps, edgeColor);
-            setGraph(graph);
-          } else {
-            setError(response.originalError);
-          }
           setPlay(response.data);
         } else if (response.status === 404) {
           setError(new Error('not found'));
@@ -79,6 +61,27 @@ const PlayInfo = ({corpusId, playId}) => {
     fetchPlay();
   }, [corpusId, playId]);
 
+  useEffect(() => {
+    async function fetchCharacters() {
+      setError(null);
+      const url = `/corpora/${corpusId}/plays/${playId}/characters`;
+      try {
+        const response = await api.get(url);
+        if (response.ok) {
+          setCharacters(response.data);
+        } else if (response.status === 404) {
+          setError(new Error('not found'));
+        } else {
+          setError(response.originalError);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
+    fetchCharacters();
+  }, [corpusId, playId]);
+
   if (error && error.message === 'not found') {
     return <p>No such play!</p>;
   }
@@ -88,16 +91,11 @@ const PlayInfo = ({corpusId, playId}) => {
     return <p>Error!</p>;
   }
 
-  if (!play) {
+  if (!play || !characters) {
     return <p className="loading">Loading...</p>;
   }
 
-  if (!graph) {
-    return <p>No Graph!</p>;
-  }
-
   console.log('PLAY', play);
-  console.log('GRAPH', graph);
 
   const groups = play.characters
     .filter((m) => Boolean(m.isGroup))
@@ -116,7 +114,7 @@ const PlayInfo = ({corpusId, playId}) => {
 
   let tabContent = null;
   let description = null;
-  let characters = null;
+  let cast = null;
   let metrics = null;
   let segments = null;
 
@@ -150,8 +148,10 @@ const PlayInfo = ({corpusId, playId}) => {
     );
     segments = <Segments play={play} />;
   } else if (tab === 'relations') {
-    tabContent = <RelationsGraph {...{play, nodeColor, edgeColor}} />;
-    characters = castList;
+    tabContent = (
+      <RelationsGraph {...{characters, play, nodeColor, edgeColor}} />
+    );
+    cast = castList;
     description = (
       <p>
         This tab visualises kinship and other relationship data, following the
@@ -163,8 +163,8 @@ const PlayInfo = ({corpusId, playId}) => {
       </p>
     );
   } else {
-    tabContent = <NetworkGraph {...{graph, nodeColor, edgeColor, play}} />;
-    characters = castList;
+    tabContent = <NetworkGraph {...{characters, play, nodeColor, edgeColor}} />;
+    cast = castList;
     metrics = playMetrics;
     description = (
       <p>
@@ -191,7 +191,7 @@ const PlayInfo = ({corpusId, playId}) => {
       </PlayDetailsHeader>
       <Container fluid>
         <PlayDetailsTab
-          characters={characters}
+          characters={cast}
           description={description}
           metrics={metrics}
           segments={segments}
diff --git a/src/components/RelationsGraph.js b/src/components/RelationsGraph.js
index e6dac611..8137035f 100644
--- a/src/components/RelationsGraph.js
+++ b/src/components/RelationsGraph.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {makeGraph} from '../network';
 // we need to require from react-sigma/lib/ to make build work
 import {
   Sigma,
@@ -9,32 +10,8 @@ import {
   RandomizeNodePositions,
 } from 'react-sigma/lib/';
 
-/* eslint-disable camelcase */
-const edgeColors = {
-  parent_of: '#6f42c1', // purple
-  lover_of: '#f93e3e', // red
-  related_with: '#fca130', // orange
-  associated_with: '#61affe', // blue
-  siblings: '#49cc90', // green
-  spouses: '#e83e8c', // pink
-  friends: '#1F2448', // navy
-};
-/* eslint-enable camelcase */
-
-const RelationsGraph = ({play, nodeColor, edgeColor}) => {
-  const nodes = play.characters.map((c) => ({
-    id: c.id,
-    label: c.name || `#${c.id}`,
-  }));
-  const edges = (play.relations || []).map((r, i) => ({
-    id: i,
-    source: r.source,
-    target: r.target,
-    label: r.type,
-    color: edgeColors[r.type] || edgeColor,
-    type: r.directed ? 'curvedArrow' : 'curve',
-  }));
-  const graph = {nodes, edges};
+const RelationsGraph = ({characters, play, nodeColor, edgeColor}) => {
+  const graph = makeGraph(characters, play, edgeColor, 'relation');
 
   const settings = {
     maxEdgeSize: 5,
@@ -48,7 +25,6 @@ const RelationsGraph = ({play, nodeColor, edgeColor}) => {
     drawEdges: true,
     drawEdgeLabels: true,
     edgeLabelSize: 'proportional',
-    minNodeSize: 2,
     minArrowSize: 10,
   };
 
@@ -86,9 +62,12 @@ const RelationsGraph = ({play, nodeColor, edgeColor}) => {
 };
 
 RelationsGraph.propTypes = {
+  characters: PropTypes.array.isRequired,
   play: PropTypes.shape({
-    characters: PropTypes.array.isRequired,
+    name: PropTypes.string.isRequired,
+    corpus: PropTypes.string.isRequired,
     relations: PropTypes.array.isRequired,
+    segments: PropTypes.array.isRequired,
   }).isRequired,
   nodeColor: PropTypes.string.isRequired,
   edgeColor: PropTypes.string.isRequired,
diff --git a/src/network.js b/src/network.js
index 793f70a4..531db801 100644
--- a/src/network.js
+++ b/src/network.js
@@ -1,5 +1,25 @@
 // network graph utility functions
 
+/* eslint-disable camelcase */
+const edgeColors = {
+  parent_of: '#6f42c1', // purple
+  lover_of: '#f93e3e', // red
+  related_with: '#fca130', // orange
+  associated_with: '#61affe', // blue
+  siblings: '#49cc90', // green
+  spouses: '#e83e8c', // pink
+  friends: '#1F2448', // navy
+};
+/* eslint-enable camelcase */
+
+const nodeProps = (node) => {
+  const {gender} = node;
+  const color =
+    gender === 'MALE' || gender === 'FEMALE' ? '#1f2448' : '#61affe';
+  const type = gender === 'MALE' ? 'square' : 'circle';
+  return {color, type};
+};
+
 function interpolateNodeSize(minWords, maxWords, numOfWords) {
   const MAX_SIZE = 30;
   const MIN_SIZE = 15;
@@ -46,36 +66,49 @@ function getCooccurrences(segments) {
 
 export function makeGraph(
   characters,
-  segments,
-  nodeProps = {},
-  edgeColor = 'black'
+  play,
+  edgeColor = 'black',
+  type = 'cooccurence'
 ) {
-  const maxWords = Math.max(...characters.map((p) => p.numOfWords));
-  const minWords = Math.min(...characters.map((p) => p.numOfWords));
+  const maxWords = Math.max(...characters.map((c) => c.numOfWords));
+  const minWords = Math.min(...characters.map((c) => c.numOfWords));
   const nodes = [];
-  characters.forEach((p) => {
-    const props = typeof nodeProps === 'function' ? nodeProps(p) : nodeProps;
-    const nodeSize = interpolateNodeSize(minWords, maxWords, p.numOfWords);
+  characters.forEach((c) => {
+    const props = nodeProps(c);
+    const nodeSize = interpolateNodeSize(minWords, maxWords, c.numOfWords);
     const node = {
-      id: p.id,
-      label: p.name,
-      size: nodeSize || `#${p.id}`,
+      id: c.id,
+      label: c.name,
+      size: nodeSize || `#${c.id}`,
       ...props,
     };
     nodes.push(node);
   });
-  const cooccurrences = getCooccurrences(segments);
-  const edges = [];
-  cooccurrences.forEach((cooc) => {
-    edges.push({
-      id: cooc[0] + '|' + cooc[1],
-      source: cooc[0],
-      target: cooc[1],
-      size: cooc[2],
-      // NB: we set the edge color here since the defaultEdgeColor in Sigma
-      // settings does not to have any effect
-      color: edgeColor,
+
+  let edges = [];
+  if (type === 'cooccurence') {
+    const cooccurrences = getCooccurrences(play.segments);
+    cooccurrences.forEach((cooc) => {
+      edges.push({
+        id: cooc[0] + '|' + cooc[1],
+        source: cooc[0],
+        target: cooc[1],
+        size: cooc[2],
+        // NB: we set the edge color here since the defaultEdgeColor in Sigma
+        // settings does not to have any effect
+        color: edgeColor,
+      });
     });
-  });
+  } else if (type === 'relation') {
+    edges = (play.relations || []).map((r, i) => ({
+      id: i,
+      source: r.source,
+      target: r.target,
+      label: r.type,
+      color: edgeColors[r.type] || edgeColor,
+      type: r.directed ? 'curvedArrow' : 'curve',
+    }));
+  }
+
   return {nodes, edges};
 }

From 4f681bec84e654f14458560ff085e4f2b44a8c43 Mon Sep 17 00:00:00 2001
From: Sandra Densch <densch.sandra@gmail.com>
Date: Tue, 21 May 2024 19:17:49 +0200
Subject: [PATCH 25/27] 259: unified implementation of RelationsGraph and
 NetworkGraph

---
 src/components/Graph/Graph.js          | 55 ++++++++++++++++++
 src/components/Graph/NetworkGraph.js   | 33 +++++++++++
 src/components/Graph/RelationsGraph.js | 35 ++++++++++++
 src/components/NetworkGraph.js         | 77 --------------------------
 src/components/Play.js                 | 13 ++---
 src/components/RelationsGraph.js       | 76 -------------------------
 src/network.js                         |  8 +--
 7 files changed, 129 insertions(+), 168 deletions(-)
 create mode 100644 src/components/Graph/Graph.js
 create mode 100644 src/components/Graph/NetworkGraph.js
 create mode 100644 src/components/Graph/RelationsGraph.js
 delete mode 100644 src/components/NetworkGraph.js
 delete mode 100644 src/components/RelationsGraph.js

diff --git a/src/components/Graph/Graph.js b/src/components/Graph/Graph.js
new file mode 100644
index 00000000..6e795f9a
--- /dev/null
+++ b/src/components/Graph/Graph.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+// we need to require from react-sigma/lib/ to make build work
+import {
+  Sigma,
+  EdgeShapes,
+  NodeShapes,
+  ForceAtlas2,
+  RandomizeNodePositions,
+} from 'react-sigma/lib/';
+
+const Graph = ({graph, settings, edgeShape}) => {
+  const layoutOptions = {
+    iterationsPerRender: 40,
+    edgeWeightInfluence: 0,
+    timeout: 2000,
+    adjustSizes: false,
+    gravity: 3,
+    slowDown: 5,
+    linLogMode: true,
+    outboundAttractionDistribution: false,
+    strongGravityMode: false,
+  };
+
+  const layout = <ForceAtlas2 {...layoutOptions} />;
+
+  let sigma = null;
+  if (graph && graph.nodes.length > 0) {
+    sigma = (
+      <Sigma
+        renderer="canvas"
+        graph={graph}
+        settings={settings}
+        style={{display: 'flex', flexGrow: 1}}
+      >
+        <EdgeShapes default={edgeShape} />
+        <NodeShapes default="circle" />
+        <RandomizeNodePositions>{layout}</RandomizeNodePositions>
+      </Sigma>
+    );
+  }
+
+  return sigma;
+};
+
+Graph.propTypes = {
+  graph: PropTypes.shape({
+    nodes: PropTypes.array.isRequired,
+    edges: PropTypes.array.isRequired,
+  }).isRequired,
+  settings: PropTypes.object.isRequired,
+  edgeShape: PropTypes.string.isRequired,
+};
+
+export default Graph;
diff --git a/src/components/Graph/NetworkGraph.js b/src/components/Graph/NetworkGraph.js
new file mode 100644
index 00000000..7a70d2b8
--- /dev/null
+++ b/src/components/Graph/NetworkGraph.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {makeGraph} from '../../network';
+
+import Graph from './Graph';
+
+const NetworkGraph = ({characters, play}) => {
+  const graph = makeGraph(characters, play, 'cooccurence');
+
+  const settings = {
+    maxEdgeSize: 5,
+    defaultLabelSize: 15,
+    defaultEdgeColor: '#61affe65', // FIXME: this does not seem to work
+    defaultNodeColor: '#61affe',
+    labelThreshold: 5,
+    labelSize: 'fixed',
+    drawLabels: true,
+    mouseWheelEnabled: false,
+    drawEdges: true,
+  };
+
+  return <Graph graph={graph} settings={settings} edgeShape="line" />;
+};
+
+NetworkGraph.propTypes = {
+  characters: PropTypes.array.isRequired,
+  play: PropTypes.shape({
+    relations: PropTypes.array.isRequired,
+    segments: PropTypes.array.isRequired,
+  }).isRequired,
+};
+
+export default NetworkGraph;
diff --git a/src/components/Graph/RelationsGraph.js b/src/components/Graph/RelationsGraph.js
new file mode 100644
index 00000000..296feebe
--- /dev/null
+++ b/src/components/Graph/RelationsGraph.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {makeGraph} from '../../network';
+import Graph from './Graph';
+
+const RelationsGraph = ({characters, play}) => {
+  const graph = makeGraph(characters, play, 'relation');
+
+  const settings = {
+    maxEdgeSize: 5,
+    defaultLabelSize: 14,
+    defaultEdgeColor: '#61affe65', // FIXME: this does not seem to work
+    defaultNodeColor: '#61affe',
+    edgeLabelColor: 'edge',
+    labelThreshold: 3,
+    labelSize: 'fixed',
+    drawLabels: true,
+    drawEdges: true,
+    drawEdgeLabels: true,
+    edgeLabelSize: 'proportional',
+    minArrowSize: 10,
+  };
+
+  return <Graph graph={graph} settings={settings} edgeShape="curvedArrow" />;
+};
+
+RelationsGraph.propTypes = {
+  characters: PropTypes.array.isRequired,
+  play: PropTypes.shape({
+    relations: PropTypes.array.isRequired,
+    segments: PropTypes.array.isRequired,
+  }).isRequired,
+};
+
+export default RelationsGraph;
diff --git a/src/components/NetworkGraph.js b/src/components/NetworkGraph.js
deleted file mode 100644
index 79423303..00000000
--- a/src/components/NetworkGraph.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {makeGraph} from '../network';
-// we need to require from react-sigma/lib/ to make build work
-import {
-  Sigma,
-  EdgeShapes,
-  NodeShapes,
-  ForceAtlas2,
-  RandomizeNodePositions,
-} from 'react-sigma/lib/';
-
-class NetworkGraph extends Component {
-  render() {
-    const {characters, play, nodeColor, edgeColor} = this.props;
-
-    const graph = makeGraph(characters, play, edgeColor, 'cooccurence');
-
-    const settings = {
-      maxEdgeSize: 5,
-      defaultLabelSize: 15,
-      defaultEdgeColor: edgeColor, // FIXME: this does not seem to work
-      defaultNodeColor: nodeColor,
-      labelThreshold: 5,
-      labelSize: 'fixed',
-      drawLabels: true,
-      mouseWheelEnabled: false,
-      drawEdges: true,
-    };
-
-    const layoutOptions = {
-      iterationsPerRender: 40,
-      edgeWeightInfluence: 0,
-      timeout: 2000,
-      adjustSizes: false,
-      gravity: 3,
-      slowDown: 5,
-      linLogMode: true,
-      outboundAttractionDistribution: false,
-      strongGravityMode: false,
-    };
-
-    const layout = <ForceAtlas2 {...layoutOptions} />;
-
-    let sigma = null;
-    if (graph && graph.nodes.length > 0) {
-      sigma = (
-        <Sigma
-          renderer="canvas"
-          graph={graph}
-          settings={settings}
-          style={{display: 'flex', flexGrow: 1}}
-        >
-          <EdgeShapes default="line" />
-          <NodeShapes default="circle" />
-          <RandomizeNodePositions>{layout}</RandomizeNodePositions>
-        </Sigma>
-      );
-    }
-
-    return sigma;
-  }
-}
-
-NetworkGraph.propTypes = {
-  characters: PropTypes.array.isRequired,
-  play: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    corpus: PropTypes.string.isRequired,
-    relations: PropTypes.array.isRequired,
-    segments: PropTypes.array.isRequired,
-  }).isRequired,
-  nodeColor: PropTypes.string.isRequired,
-  edgeColor: PropTypes.string.isRequired,
-};
-
-export default NetworkGraph;
diff --git a/src/components/Play.js b/src/components/Play.js
index bb006a69..11969d9c 100644
--- a/src/components/Play.js
+++ b/src/components/Play.js
@@ -9,8 +9,8 @@ import PlayDetailsTab from './PlayDetailsTab';
 import CastList from './CastList';
 import SourceInfo from './SourceInfo';
 import DownloadLinks from './DownloadLinks';
-import NetworkGraph from './NetworkGraph';
-import RelationsGraph from './RelationsGraph';
+import NetworkGraph from './Graph/NetworkGraph';
+import RelationsGraph from './Graph/RelationsGraph';
 import SpeechDistribution, {SpeechDistributionNav} from './SpeechDistribution';
 import TEIPanel from './TEIPanel';
 import PlayMetrics from './PlayMetrics';
@@ -20,9 +20,6 @@ import './Play.scss';
 
 const apiUrl = api.getBaseURL();
 
-const edgeColor = '#61affe65';
-const nodeColor = '#61affe';
-
 const navItems = [
   {name: 'network', label: 'Network'},
   {name: 'relations', label: 'Relations'},
@@ -148,9 +145,7 @@ const PlayInfo = ({corpusId, playId}) => {
     );
     segments = <Segments play={play} />;
   } else if (tab === 'relations') {
-    tabContent = (
-      <RelationsGraph {...{characters, play, nodeColor, edgeColor}} />
-    );
+    tabContent = <RelationsGraph {...{characters, play}} />;
     cast = castList;
     description = (
       <p>
@@ -163,7 +158,7 @@ const PlayInfo = ({corpusId, playId}) => {
       </p>
     );
   } else {
-    tabContent = <NetworkGraph {...{characters, play, nodeColor, edgeColor}} />;
+    tabContent = <NetworkGraph {...{characters, play}} />;
     cast = castList;
     metrics = playMetrics;
     description = (
diff --git a/src/components/RelationsGraph.js b/src/components/RelationsGraph.js
deleted file mode 100644
index 8137035f..00000000
--- a/src/components/RelationsGraph.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {makeGraph} from '../network';
-// we need to require from react-sigma/lib/ to make build work
-import {
-  Sigma,
-  EdgeShapes,
-  NodeShapes,
-  ForceAtlas2,
-  RandomizeNodePositions,
-} from 'react-sigma/lib/';
-
-const RelationsGraph = ({characters, play, nodeColor, edgeColor}) => {
-  const graph = makeGraph(characters, play, edgeColor, 'relation');
-
-  const settings = {
-    maxEdgeSize: 5,
-    defaultLabelSize: 14,
-    defaultEdgeColor: edgeColor, // FIXME: this does not seem to work
-    defaultNodeColor: nodeColor,
-    edgeLabelColor: 'edge',
-    labelThreshold: 3,
-    labelSize: 'fixed',
-    drawLabels: true,
-    drawEdges: true,
-    drawEdgeLabels: true,
-    edgeLabelSize: 'proportional',
-    minArrowSize: 10,
-  };
-
-  const layoutOptions = {
-    iterationsPerRender: 40,
-    edgeWeightInfluence: 0,
-    timeout: 2000,
-    adjustSizes: false,
-    gravity: 3,
-    slowDown: 5,
-    linLogMode: true,
-    outboundAttractionDistribution: false,
-    strongGravityMode: true,
-  };
-
-  const layout = <ForceAtlas2 {...layoutOptions} />;
-
-  let sigma = null;
-  if (graph && graph.nodes.length > 0) {
-    sigma = (
-      <Sigma
-        renderer="canvas"
-        graph={graph}
-        settings={settings}
-        style={{display: 'flex', flexGrow: 1}}
-      >
-        <EdgeShapes default="curvedArrow" />
-        <NodeShapes default="circle" />
-        <RandomizeNodePositions>{layout}</RandomizeNodePositions>
-      </Sigma>
-    );
-  }
-
-  return sigma;
-};
-
-RelationsGraph.propTypes = {
-  characters: PropTypes.array.isRequired,
-  play: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    corpus: PropTypes.string.isRequired,
-    relations: PropTypes.array.isRequired,
-    segments: PropTypes.array.isRequired,
-  }).isRequired,
-  nodeColor: PropTypes.string.isRequired,
-  edgeColor: PropTypes.string.isRequired,
-};
-
-export default RelationsGraph;
diff --git a/src/network.js b/src/network.js
index 531db801..759c7d61 100644
--- a/src/network.js
+++ b/src/network.js
@@ -64,12 +64,8 @@ function getCooccurrences(segments) {
   return cooccurrences;
 }
 
-export function makeGraph(
-  characters,
-  play,
-  edgeColor = 'black',
-  type = 'cooccurence'
-) {
+export function makeGraph(characters, play, type = 'cooccurence') {
+  const edgeColor = '#61affe65';
   const maxWords = Math.max(...characters.map((c) => c.numOfWords));
   const minWords = Math.min(...characters.map((c) => c.numOfWords));
   const nodes = [];

From c37496347a3b8baf269e4335ff746d6927e5f417 Mon Sep 17 00:00:00 2001
From: Frank Fischer <lehkost@users.noreply.github.com>
Date: Tue, 30 Apr 2024 12:49:35 +0200
Subject: [PATCH 26/27] add 2 research papers

---
 public/doc/research.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/doc/research.md b/public/doc/research.md
index 9fcdaea5..0dc43800 100644
--- a/public/doc/research.md
+++ b/public/doc/research.md
@@ -5,6 +5,7 @@ An (incomplete) collection of research articles on drama using data provided thr
 ## 2024
 
 * Julia Jennifer Beine, Frank Fischer, Viktor J. Illmer: Just the Type: Analysing Character Typology in Roman Comedy with RomDraCor. In: DH2024: »Reinvention & Responsibility«. 6–10 August 2024. Washington, DC. Book of Abstracts. (forthcoming)
+* Julia Jennifer Beine: The Schemer Unmasked. Sketching a Digital Profile of the Scheming Slave in Roman Comedy. In: Journal of Computational Literary Studies. Vol. 3 (2024), issue 1. ([doi:10.48694/jcls.3670](https://doi.org/10.48694/jcls.3670)) (forthcoming)
 * Peer Trilcke, Evgeniya Ustinova, Ingo Börner, Frank Fischer, Carsten Milling: Detecting Small Worlds in a Corpus of Thousands of Theatre Plays: A DraCor Study in Comparative Literary Network Analysis. In: Melanie Andresen, Nils Reiter (eds.): [Computational Drama Analysis. Reflecting Methods and Interpretations.](https://www.degruyter.com/document/isbn/9783111071763/html) Berlin/Boston: De Gruyter 2024. (forthcoming)
 * Michael Falk: Drama: Inner Seas in the Tragedies of Baillie and Harpur. In: Romanticism and the Contingent Self. The Challenge of Representation. Cham: Palgrave Macmillan 2024, pp. 183–228. ([doi:10.1007/978-3-031-49959-3_5](https://doi.org/10.1007/978-3-031-49959-3_5))
 * Ingo Börner, Peer Trilcke et al.: On Versioning Living and Programmable Corpora (v1.0.0). CLS INFRA D7.3. Zenodo, 27 February 2024. ([doi:10.5281/zenodo.11081934](https://doi.org/10.5281/zenodo.11081934))

From fcc04281fa813560432ebe14c95528bb069478da Mon Sep 17 00:00:00 2001
From: Frank Fischer <lehkost@users.noreply.github.com>
Date: Tue, 28 May 2024 11:49:36 +0200
Subject: [PATCH 27/27] update one record

---
 public/doc/research.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/public/doc/research.md b/public/doc/research.md
index 0dc43800..9fcdaea5 100644
--- a/public/doc/research.md
+++ b/public/doc/research.md
@@ -5,7 +5,6 @@ An (incomplete) collection of research articles on drama using data provided thr
 ## 2024
 
 * Julia Jennifer Beine, Frank Fischer, Viktor J. Illmer: Just the Type: Analysing Character Typology in Roman Comedy with RomDraCor. In: DH2024: »Reinvention & Responsibility«. 6–10 August 2024. Washington, DC. Book of Abstracts. (forthcoming)
-* Julia Jennifer Beine: The Schemer Unmasked. Sketching a Digital Profile of the Scheming Slave in Roman Comedy. In: Journal of Computational Literary Studies. Vol. 3 (2024), issue 1. ([doi:10.48694/jcls.3670](https://doi.org/10.48694/jcls.3670)) (forthcoming)
 * Peer Trilcke, Evgeniya Ustinova, Ingo Börner, Frank Fischer, Carsten Milling: Detecting Small Worlds in a Corpus of Thousands of Theatre Plays: A DraCor Study in Comparative Literary Network Analysis. In: Melanie Andresen, Nils Reiter (eds.): [Computational Drama Analysis. Reflecting Methods and Interpretations.](https://www.degruyter.com/document/isbn/9783111071763/html) Berlin/Boston: De Gruyter 2024. (forthcoming)
 * Michael Falk: Drama: Inner Seas in the Tragedies of Baillie and Harpur. In: Romanticism and the Contingent Self. The Challenge of Representation. Cham: Palgrave Macmillan 2024, pp. 183–228. ([doi:10.1007/978-3-031-49959-3_5](https://doi.org/10.1007/978-3-031-49959-3_5))
 * Ingo Börner, Peer Trilcke et al.: On Versioning Living and Programmable Corpora (v1.0.0). CLS INFRA D7.3. Zenodo, 27 February 2024. ([doi:10.5281/zenodo.11081934](https://doi.org/10.5281/zenodo.11081934))