Implement tools tab

src/components/Play.jsx

@@ -13,6 +13,7 @@ import NetworkGraph from './NetworkGraph';
 import RelationsGraph from './RelationsGraph';
 import SpeechDistribution, {SpeechDistributionNav} from './SpeechDistribution';
 import TEIPanel from './TEIPanel';
+import ToolsTab from './ToolsTab';
 import PlayMetrics from './PlayMetrics';
 import Segments from './Segments';
 
@@ -36,6 +37,7 @@ const navItems = [
   {name: 'speech', label: 'Speech distribution'},
   {name: 'text', label: 'Full text'},
   {name: 'downloads', label: 'Downloads'},
+  {name: 'tools', label: 'Tools'},
 ];
 
 const tabNames = new Set(navItems.map((item) => item.name));
@@ -155,6 +157,14 @@ const PlayInfo = ({corpusId, playId}) => {
         .
       </p>
     );
+  } else if (tab === 'tools') {
+    tabContent = <ToolsTab corpusId={corpusId} playId={playId} />;
+    description = (
+      <p>
+        This tab provides links to third-party tools. The selected text layer
+        will be loaded from the DraCor API for external analysis.
+      </p>
+    );
   } else {
     tabContent = <NetworkGraph {...{graph, nodeColor, edgeColor, play}} />;
     characters = castList;

src/components/ToolsTab.module.scss

@@ -0,0 +1,13 @@
+.main {
+  .select {
+    label {
+      display: inline-block;
+      margin-left: 0.6em;
+    }
+    input {
+      display: inline-block;
+      margin-right: 0.3em;
+      vertical-align: middle;
+    }
+  }
+}

src/components/ToolsTab.tsx

@@ -0,0 +1,76 @@
+import {useState} from 'react';
+import classnames from 'classnames/bind';
+import style from './ToolsTab.module.scss';
+import {apiUrl} from '../config';
+
+const cx = classnames.bind(style);
+
+interface Props {
+  corpusId: string;
+  playId: string;
+}
+
+export default function ToolsTab({corpusId, playId}: Props) {
+  const [textType, setTextType] = useState<
+    'tei' | 'spoken-text' | 'stage-directions'
+  >('tei');
+  const apiBase = new URL(apiUrl, window.location.href);
+
+  const endpoint = encodeURIComponent(
+    `${apiBase.href}/corpora/${corpusId}/plays/${playId}/${textType}`
+  );
+
+  const isAccessible = /dracor\.org/.test(apiBase.hostname);
+
+  return (
+    <div className={cx('main')}>
+      <h1>External Tools</h1>
+
+      {!isAccessible && (
+        <p>
+          The connected <a href={apiBase.href}>DraCor API</a> does not seem to
+          be publicly accessible. The external tools need to be able to access
+          the respective endpoints of the API.
+        </p>
+      )}
+
+      {isAccessible && (
+        <>
+          <p className={cx('select')}>
+            Text layer for analysis:{' '}
+            <label onClick={() => setTextType('tei')}>
+              <input type="radio" checked={textType === 'tei'} /> Full text
+              (TEI-encoded)
+            </label>{' '}
+            <label onClick={() => setTextType('spoken-text')}>
+              <input type="radio" checked={textType === 'spoken-text'} /> Spoken
+              text
+            </label>{' '}
+            <label onClick={() => setTextType('stage-directions')}>
+              <input type="radio" checked={textType === 'stage-directions'} />{' '}
+              Stage directions
+            </label>
+          </p>
+          <ul>
+            <li>
+              <a
+                href={`https://voyant-tools.org/?input=${endpoint}`}
+                target="_blank"
+              >
+                Voyant Tools
+              </a>
+            </li>
+            <li>
+              <a
+                href={`https://switchboard.clarin.eu/#/vlo/${endpoint}`}
+                target="_blank"
+              >
+                CLARIN Language Resource Switchboard
+              </a>
+            </li>
+          </ul>
+        </>
+      )}
+    </div>
+  );
+}