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

frontend/scenarios/link_document.feature

@@ -23,6 +23,8 @@ Scénario: pour le comparer avec un autre
   Et une session active avec mon compte
   Quand je réutilise mon document reconnaissable en tant que glose de citation et que je me focalise dessus
   Alors la colonne 1 contient "Il était une fois une veuve"
+  Et l'entête de la colonne 1 est "Les fées (Charles Perrault)"
+  Et l'entête de la colonne 2 est "A tündérek (Charles Perrault)"
   Et la colonne 2 contient "Volt egyszer egy özvegyasszony"
   Et la colonne 2 contient "MÁSIK TANULSÁG"
 

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>

frontend/tests/outcome.js

@@ -200,6 +200,10 @@ Alors("la colonne {int} contient {string}", (column, text) => {
   cy.contains(`.lectern .main .col .col:nth-child(${column})`, text);
 });
 
+Alors("l'entête de la colonne {int} est {string}", (column, text) => {
+  cy.contains(`.lectern .row .main .col .row .col:nth-child(${column}) span.work`, text);
+});
+
 Alors("la glose en mode édition contient {string}", (text) => {
   cy.click_on_text('content', '…');
   cy.get('textarea').should('contain', text);