diff --git a/src/components/Play.jsx b/src/components/Play.jsx index cde819c..f9527f5 100644 --- a/src/components/Play.jsx +++ b/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}) => { .

); + } else if (tab === 'tools') { + tabContent = ; + description = ( +

+ This tab provides links to third-party tools. The selected text layer + will be loaded from the DraCor API for external analysis. +

+ ); } else { tabContent = ; characters = castList; diff --git a/src/components/ToolsTab.module.scss b/src/components/ToolsTab.module.scss new file mode 100644 index 0000000..af85799 --- /dev/null +++ b/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; + } + } +} diff --git a/src/components/ToolsTab.tsx b/src/components/ToolsTab.tsx new file mode 100644 index 0000000..5cda434 --- /dev/null +++ b/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 ( +
+

External Tools

+ + {!isAccessible && ( +

+ The connected DraCor API does not seem to + be publicly accessible. The external tools need to be able to access + the respective endpoints of the API. +

+ )} + + {isAccessible && ( + <> +

+ Text layer for analysis:{' '} + {' '} + {' '} + +

+ + + )} +
+ ); +}