Issue 259: nodesize by words

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;

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;

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;

src/components/Play.js

@@ -3,15 +3,14 @@ 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';
 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';
@@ -21,16 +20,6 @@ import './Play.scss';
 
 const apiUrl = api.getBaseURL();
 
-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';
-  return {color, type};
-};
-
 const navItems = [
   {name: 'network', label: 'Network'},
   {name: 'relations', label: 'Relations'},
@@ -43,7 +32,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');
 
@@ -55,10 +44,7 @@ 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);
           setPlay(response.data);
-          setGraph(graph);
         } else if (response.status === 404) {
           setError(new Error('not found'));
         } else {
@@ -72,6 +58,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>;
   }
@@ -81,16 +88,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))
@@ -109,7 +111,7 @@ const PlayInfo = ({corpusId, playId}) => {
 
   let tabContent = null;
   let description = null;
-  let characters = null;
+  let cast = null;
   let metrics = null;
   let segments = null;
 
@@ -143,8 +145,8 @@ const PlayInfo = ({corpusId, playId}) => {
     );
     segments = <Segments play={play} />;
   } else if (tab === 'relations') {
-    tabContent = <RelationsGraph {...{play, nodeColor, edgeColor}} />;
-    characters = castList;
+    tabContent = <RelationsGraph {...{characters, play}} />;
+    cast = castList;
     description = (
       <p>
         This tab visualises kinship and other relationship data, following the
@@ -156,8 +158,8 @@ const PlayInfo = ({corpusId, playId}) => {
       </p>
     );
   } else {
-    tabContent = <NetworkGraph {...{graph, nodeColor, edgeColor, play}} />;
-    characters = castList;
+    tabContent = <NetworkGraph {...{characters, play}} />;
+    cast = castList;
     metrics = playMetrics;
     description = (
       <p>
@@ -184,7 +186,7 @@ const PlayInfo = ({corpusId, playId}) => {
       </PlayDetailsHeader>
       <Container fluid>
         <PlayDetailsTab
-          characters={characters}
+          characters={cast}
           description={description}
           metrics={metrics}
           segments={segments}