FIX : Title of each glose that makes up a hexapla should be displayed (see #425).

Co-authored-by:Gabriel DOSNE gabriel.dosne@utt.fr

We, Gabriel DOSNE, Morgane VIALA, hereby grant to Hyperglosae maintainers the right to publish our contribution under the terms of any licenses the Free Software Foundation classifies as Free Software Licenses

Author: Lysakolie

frontend/src/components/OpenedDocuments.jsx

@@ -34,7 +34,7 @@ function OpenedDocuments({id, margin, metadata, parallelDocuments, rawEditMode,
       </Row>
       {parallelDocuments.passages.map(({rubric, source, scholia}, i) =>
         <Passage key={rubric || i}
-          {...{source, rubric, scholia, margin, sourceId: id, isComposite, rawEditMode, setRawEditMode, backend, setLastUpdate}}
+          {...{source, metadata, rubric, scholia, margin, sourceId: id, isComposite, rawEditMode, setRawEditMode, backend, setLastUpdate}}
         />)
       }
       <Row>

frontend/src/components/Passage.jsx

@@ -10,7 +10,7 @@ import EditableText from '../components/EditableText';
 import DiscreeteDropdown from './DiscreeteDropdown';
 import CommentFragmentAction from '../menu-items/CommentFragmentAction';
 
-function Passage({source, rubric, scholia, margin, sourceId, isComposite, rawEditMode, setRawEditMode, backend, setLastUpdate}) {
+function Passage({source, metadata, rubric, scholia, margin, sourceId, isComposite, rawEditMode, setRawEditMode, backend, setLastUpdate}) {
   const [selectedText, setSelectedText] = useState();
   const [highlightedText, setHighlightedText] = useState('');
   const [fragment, setFragment] = useState();
@@ -31,7 +31,7 @@ function Passage({source, rubric, scholia, margin, sourceId, isComposite, rawEdi
         {!isFromScratch &&
           <Container>
             <Row>
-              <PassageSource {...{isComposite, highlightedText, setHighlightedText, setFragment, selectedText, setSelectedText, margin}}>
+              <PassageSource {...{isComposite, metadata, highlightedText, setHighlightedText, setFragment, selectedText, setSelectedText, margin, rubric}}>
                 {source}
               </PassageSource>
               <Rubric id={rubric} />
@@ -44,13 +44,32 @@ function Passage({source, rubric, scholia, margin, sourceId, isComposite, rawEdi
   );
 }
 
-function PassageSource({children, isComposite, highlightedText, setHighlightedText, setFragment, selectedText, setSelectedText, margin}) {
+function PassageSource({children, metadata, isComposite, highlightedText, setHighlightedText, setFragment, selectedText, setSelectedText, margin, rubric}) {
+  const compositeTitleStyle = {color: 'crimson', textAlign: 'left'};
+  let format = (actors, prefix = '', suffix = '') =>
+    actors && (prefix + [actors].flat().join(' & ') + suffix);
+  let getCaption = (dc_title, dc_spatial, actors, prefix = '', suffix = '') => dc_title + (dc_spatial ? `, ${dc_spatial} ` : ' ') + (format(actors, prefix, suffix));
+  let documentsMetadata = metadata.forwardLinkedDocuments; // Can be undefined !
+  if (documentsMetadata !== undefined) {
+    documentsMetadata = documentsMetadata.filter(doc => 'dc_title' in doc);
+  }
+  console.log(JSON.stringify(documentsMetadata));
   return (
     <Col className="position-relative">
       {isComposite ? (
         <Row>
           {children.map((chunk, index) =>
             <Col key={index}>
+              {(rubric === '0' || rubric == null) && documentsMetadata !== undefined ? (
+                <div style={compositeTitleStyle}>
+                  <span className="work">
+                    {documentsMetadata[index] !== undefined ? (
+                      getCaption(documentsMetadata[index].dc_title, documentsMetadata[index].dc_spatial, documentsMetadata[index].dc_creator, '(', ')')
+                    ) : ('')}
+                  </span>
+                </div>
+              ) : (null)
+              }
               <SelectableFormattedText {...{highlightedText, setHighlightedText, setSelectedText}}>
                 {chunk}
               </SelectableFormattedText>