From c3e653ea7b84ac43bf73e4a9b5156dfbf00075c9 Mon Sep 17 00:00:00 2001
From: Kaz Baig <kazbaig@amazon.com>
Date: Mon, 15 Mar 2021 10:30:51 -0500
Subject: [PATCH] editable speaker labels

---
 app/src/components/TranscriptLine.js | 52 ++++++++++++++++------------
 app/src/components/TranscriptPane.js |  2 ++
 app/src/home.js                      | 14 ++++++++
 3 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/app/src/components/TranscriptLine.js b/app/src/components/TranscriptLine.js
index cb7af6c..2bc82e3 100755
--- a/app/src/components/TranscriptLine.js
+++ b/app/src/components/TranscriptLine.js
@@ -3,7 +3,7 @@ import s from './TranscriptLine.module.css';
 import cs from 'clsx';
 
 import classMap from '../transcriptHighlights';
-import { Editable, EditableInput, Box } from '@chakra-ui/react';
+import { Editable, EditablePreview, EditableInput, Box } from '@chakra-ui/react';
 
 // Reduces results down to a single set of non-overlapping ranges, each with a list of applicable results
 function combineSegments(results) {
@@ -89,6 +89,7 @@ export default function TranscriptLine({
   enableEditing,
 
   handleTranscriptChange,
+  onSpeakerChange,
 }) {
   const filteredResults = useMemo(() => results.filter((r) => enabledCategories.includes(r.Category)), [
     results,
@@ -101,30 +102,35 @@ export default function TranscriptLine({
   return (
     <React.Fragment>
       {enableEditing && (
-        <Editable
-          defaultValue={chunk.text}
-          onSubmit={(nextValue) => {
-            handleTranscriptChange(nextValue.trim());
-          }}
-          mb={8}
-        >
-          {({ isEditing, onEdit }) => (
-            <>
-              {chunk.speaker && <div>{chunk.speaker}</div>}
-
+        <Box mb={8}>
+          {chunk.speaker && (
+            <Editable defaultValue={chunk.speaker} onSubmit={(nextSpeaker) => onSpeakerChange(nextSpeaker.trim())}>
+              <EditablePreview width='100%' />
               <EditableInput />
-              {!isEditing && (
-                <p className={s.base} onClick={onEdit}>
-                  {ranges.map((r, i) => (
-                    <span key={i} className={cs(r.matches.map((x) => classMap[x.Category]))}>
-                      {r.text}
-                    </span>
-                  ))}
-                </p>
-              )}
-            </>
+            </Editable>
           )}
-        </Editable>
+
+          <Editable
+            defaultValue={chunk.text}
+            onSubmit={(nextTranscriptLine) => handleTranscriptChange(nextTranscriptLine.trim())}
+          >
+            {({ isEditing, onEdit }) => (
+              <>
+                <EditableInput />
+
+                {!isEditing && (
+                  <p className={s.base} onClick={onEdit}>
+                    {ranges.map((r, i) => (
+                      <span key={i} className={cs(r.matches.map((x) => classMap[x.Category]))}>
+                        {r.text}
+                      </span>
+                    ))}
+                  </p>
+                )}
+              </>
+            )}
+          </Editable>
+        </Box>
       )}
 
       {!enableEditing && (
diff --git a/app/src/components/TranscriptPane.js b/app/src/components/TranscriptPane.js
index ec6c0ed..80c4e8a 100755
--- a/app/src/components/TranscriptPane.js
+++ b/app/src/components/TranscriptPane.js
@@ -20,6 +20,7 @@ export default function TranscriptPane({
   inProgress,
   enableEditing,
   handleTranscriptChange,
+  onSpeakerChange,
 }) {
   const container = useRef();
 
@@ -41,6 +42,7 @@ export default function TranscriptPane({
               enabledCategories={CATEGORIES}
               enableEditing={enableEditing}
               handleTranscriptChange={(value) => handleTranscriptChange(i, value)}
+              onSpeakerChange={(value) => onSpeakerChange(i, value)}
             />
           ))}
 
diff --git a/app/src/home.js b/app/src/home.js
index 69a5f2d..57a549a 100644
--- a/app/src/home.js
+++ b/app/src/home.js
@@ -204,6 +204,19 @@ export default function Home() {
     });
   };
 
+  const onSpeakerChange = (i, value) => {
+    setTranscripts((t) => {
+      if (t[i].speaker === value) return t;
+
+      const newChunk = {
+        ...t[i],
+        speaker: value,
+      };
+
+      return [...t.slice(0, i), newChunk, ...t.slice(i + 1)];
+    });
+  };
+
   const addTranscriptChunk = useCallback(({ Alternatives, IsPartial, StartTime }) => {
     const items = Alternatives[0].Items;
 
@@ -726,6 +739,7 @@ export default function Home() {
           enableEditing={stage === STAGE_TRANSCRIBED || stage === STAGE_SOAP_REVIEW}
           visible={stage === STAGE_TRANSCRIBING || stage === STAGE_TRANSCRIBED}
           handleTranscriptChange={onTranscriptChange}
+          onSpeakerChange={onSpeakerChange}
         />
 
         <AnalysisPane