From ab7db07d582ae48ef13075967589235d113e9c1e Mon Sep 17 00:00:00 2001
From: Scott McCarley <jsmc@us.ibm.com>
Date: Sat, 7 Jan 2023 21:56:12 +0000
Subject: [PATCH 1/7] first working version

---
 src/applications/reading/index.js | 6 ++++--
 src/components/answers/index.js   | 8 ++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/applications/reading/index.js b/src/applications/reading/index.js
index 2b6c2b6..60684b6 100644
--- a/src/applications/reading/index.js
+++ b/src/applications/reading/index.js
@@ -32,7 +32,7 @@ import { addNotification } from "../../components/notifications/notificationsSli
 import "./styles.scss";
 
 const strings = {
-  PLACEHOLDER_QUESTION: "What would you like to know?",
+  PLACEHOLDER_QUESTION: "What would you like to know (placeholder)?",
 };
 
 async function read(
@@ -57,6 +57,8 @@ async function read(
           startCharOffset: answer.start_char_offset,
           endCharOffset: answer.end_char_offset,
           confidenceScore: answer.confidence_score,
+          question_type_prediction: answer.question_type_prediction,
+          boolean_answer_prediction: answer.boolean_answer_prediction
         });
       });
     }
@@ -124,7 +126,7 @@ function Reading({ application, showSettings }) {
           {application.description}
         </div>
         <div className="application__content">
-          <h4>What would you like to know?</h4>
+          <h4>What would you like to know (h4)?</h4>
           <div className="reading__input">
             <TextArea
               labelText="Context"
diff --git a/src/components/answers/index.js b/src/components/answers/index.js
index 30b2307..02482af 100644
--- a/src/components/answers/index.js
+++ b/src/components/answers/index.js
@@ -278,6 +278,14 @@ function Answers({ question, answers, loading, source }) {
           <div className="answers--details">
             <h6>
               Found {answersWithFeedback.length} answers matching your question.
+              Your question is a 
+              <b className="answers--item__context--highlight">
+                {answersWithFeedback[0].question_type_prediction}
+              </b>   question.
+              The answer is 
+              <b className="answers--item__context--highlight">
+                {answersWithFeedback[0].boolean_answer_prediction}
+              </b>.
             </h6>
           </div>
           <div className="answers--items">

From 80e08d1182dc9e1e93bc3f28cbddb998cd4ae0a6 Mon Sep 17 00:00:00 2001
From: Scott McCarley <jsmc@us.ibm.com>
Date: Fri, 13 Jan 2023 13:52:33 +0000
Subject: [PATCH 2/7] minimal changes for supporting end-to-end with boolean

---
 src/applications/reading/index.js |  7 +++--
 src/components/answers/index.js   | 46 ++++++++++++++++++++++++-------
 src/components/readers/index.js   |  2 +-
 3 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/applications/reading/index.js b/src/applications/reading/index.js
index 60684b6..f69d8d8 100644
--- a/src/applications/reading/index.js
+++ b/src/applications/reading/index.js
@@ -32,7 +32,7 @@ import { addNotification } from "../../components/notifications/notificationsSli
 import "./styles.scss";
 
 const strings = {
-  PLACEHOLDER_QUESTION: "What would you like to know (placeholder)?",
+  PLACEHOLDER_QUESTION: "What would you like to know?",
 };
 
 async function read(
@@ -58,7 +58,8 @@ async function read(
           endCharOffset: answer.end_char_offset,
           confidenceScore: answer.confidence_score,
           question_type_prediction: answer.question_type_prediction,
-          boolean_answer_prediction: answer.boolean_answer_prediction
+          boolean_answer_prediction: answer.boolean_answer_prediction,
+          display_each_boolean_answer: false
         });
       });
     }
@@ -126,7 +127,7 @@ function Reading({ application, showSettings }) {
           {application.description}
         </div>
         <div className="application__content">
-          <h4>What would you like to know (h4)?</h4>
+          <h4>What would you like to know? (boolean or factoid question)</h4>
           <div className="reading__input">
             <TextArea
               labelText="Context"
diff --git a/src/components/answers/index.js b/src/components/answers/index.js
index 02482af..fac3e03 100644
--- a/src/components/answers/index.js
+++ b/src/components/answers/index.js
@@ -277,15 +277,28 @@ function Answers({ question, answers, loading, source }) {
         <React.Fragment>
           <div className="answers--details">
             <h6>
-              Found {answersWithFeedback.length} answers matching your question.
-              Your question is a 
-              <b className="answers--item__context--highlight">
-                {answersWithFeedback[0].question_type_prediction}
-              </b>   question.
-              The answer is 
-              <b className="answers--item__context--highlight">
-                {answersWithFeedback[0].boolean_answer_prediction}
-              </b>.
+            {answersWithFeedback[0].question_type_prediction==null && 
+              <p>Found {answersWithFeedback.length} answers matching your question.</p>                  
+            }
+            {answersWithFeedback[0].question_type_prediction!=null && 
+              <div>
+                <p> Your question is a <b className="answers--item__context--highlight">
+                  {answersWithFeedback[0].question_type_prediction}
+                  </b> question
+                </p>
+                {answersWithFeedback[0].question_type_prediction!='boolean' &&
+                  <p>Found {answersWithFeedback.length} answers matching your question.</p>
+                }                
+                {answersWithFeedback[0].question_type_prediction=='boolean' &&
+                  <div>
+                    <p>Found {answersWithFeedback.length} evidence spans answering your question.</p>
+                    <p>The best answer is <b className="answers--item__context--highlight">
+                      {answersWithFeedback[0].boolean_answer_prediction}</b>.
+                    </p>
+                  </div>               
+                }
+              </div>
+            }
             </h6>
           </div>
           <div className="answers--items">
@@ -296,7 +309,20 @@ function Answers({ question, answers, loading, source }) {
                   key={"answer--item-" + index}
                   className="answers--item"
                 >
-                  <h6>Answer</h6>
+                <h6>
+                  {answersWithFeedback[0].question_type_prediction=="boolean" && 
+                  <div>
+                    <p>Evidence span {answerWithFeedback.display_each_boolean_answer && 
+                      <div>
+                        {answerWithFeedback.boolean_answer_prediction}
+                      </div>
+                    }</p>
+                  </div>
+                  }
+                  {answersWithFeedback[0].question_type_prediction!="boolean" && <div><p>Answer</p></div>}
+                </h6>
+                  
+
                   <div className="answers--item__content">
                     <div className="answers--item__content--left">
                       <span>{answerWithFeedback.text}</span>
diff --git a/src/components/readers/index.js b/src/components/readers/index.js
index 867354c..e964281 100644
--- a/src/components/readers/index.js
+++ b/src/components/readers/index.js
@@ -143,7 +143,7 @@ function Readers({ disableParent }) {
                 : "placeholder-item"
             }
             onChange={(event) => {
-              dispatch({ reader_id: event.target.value });
+              dispatch(selectReader({ reader_id: event.target.value }));
             }}
           >
             <SelectItem

From 2aba3f9b9a0bf9bc0f6c581ba0e9bc1b2b1dd44e Mon Sep 17 00:00:00 2001
From: Scott McCarley <jsmc@us.ibm.com>
Date: Fri, 13 Jan 2023 16:46:23 +0000
Subject: [PATCH 3/7] refactoring display of boolean info into separate
 subroutines

---
 src/applications/qa/index.js    |  3 ++
 src/components/answers/index.js | 94 ++++++++++++++++++++++-----------
 2 files changed, 66 insertions(+), 31 deletions(-)

diff --git a/src/applications/qa/index.js b/src/applications/qa/index.js
index 797e07e..aa0704b 100644
--- a/src/applications/qa/index.js
+++ b/src/applications/qa/index.js
@@ -63,6 +63,9 @@ async function ask(
           title: entry.document.title,
           url: entry.document.url,
           confidenceScore: entry.answer.confidence_score,
+          question_type_prediction: entry.answer.question_type_prediction,
+          boolean_answer_prediction: entry.answer.boolean_answer_prediction,
+          display_each_boolean_answer: true
         });
       });
     }
diff --git a/src/components/answers/index.js b/src/components/answers/index.js
index fac3e03..2f6f0ad 100644
--- a/src/components/answers/index.js
+++ b/src/components/answers/index.js
@@ -252,6 +252,59 @@ async function postFeedback(
   }
 }
 
+/* allows us to control the highlighting of yes/no in both reading and qa
+   note that no_answer will be highlighted like no if it occurs */
+function YesNoAnswer({boolean_answer_prediction}) {
+  return (
+    <React.Fragment>
+      {boolean_answer_prediction.toLowerCase()=="yes" ? 
+        <b className="answers--item__context--yesanswer">
+          {boolean_answer_prediction}
+        </b> 
+        :
+        <b className="answers--item__context--noanswer">
+          {boolean_answer_prediction}
+        </b>
+      }
+    </React.Fragment> 
+  )
+}
+
+function AnswersSummary({answersWithFeedback}) {
+  return (
+    <React.Fragment>
+      <div className="answers--details">
+        <h6>
+        {answersWithFeedback[0].question_type_prediction==null && 
+          <p>Found {answersWithFeedback.length} answers matching your question..</p>                  
+        }
+        {answersWithFeedback[0].question_type_prediction!=null && 
+          <div>
+            <p> Your question is a <b className="answers--item__context--highlight">
+              {answersWithFeedback[0].question_type_prediction}
+              </b> question
+            </p>
+            {answersWithFeedback[0].question_type_prediction!='boolean' &&
+              <p>Found {answersWithFeedback.length} answers matching your question..</p>
+            }                
+            {answersWithFeedback[0].question_type_prediction=='boolean' &&
+              <div>
+                <p>Found {answersWithFeedback.length} evidence spans answering your question..</p>
+                <p>The best answer is {" "} 
+                  {(<YesNoAnswer boolean_answer_prediction={answersWithFeedback[0].boolean_answer_prediction}> 
+                  </YesNoAnswer>
+                  )} .
+                </p>
+              </div>               
+            }
+          </div>
+        }
+        </h6>
+      </div>
+    </React.Fragment>
+  )
+}
+
 function Answers({ question, answers, loading, source }) {
   const [answersWithFeedback, setAnswersWithFeedback] = useState([]);
 
@@ -275,32 +328,10 @@ function Answers({ question, answers, loading, source }) {
     <React.Fragment>
       {!loading && !_.isEmpty(answersWithFeedback) ? (
         <React.Fragment>
-          <div className="answers--details">
-            <h6>
-            {answersWithFeedback[0].question_type_prediction==null && 
-              <p>Found {answersWithFeedback.length} answers matching your question.</p>                  
-            }
-            {answersWithFeedback[0].question_type_prediction!=null && 
-              <div>
-                <p> Your question is a <b className="answers--item__context--highlight">
-                  {answersWithFeedback[0].question_type_prediction}
-                  </b> question
-                </p>
-                {answersWithFeedback[0].question_type_prediction!='boolean' &&
-                  <p>Found {answersWithFeedback.length} answers matching your question.</p>
-                }                
-                {answersWithFeedback[0].question_type_prediction=='boolean' &&
-                  <div>
-                    <p>Found {answersWithFeedback.length} evidence spans answering your question.</p>
-                    <p>The best answer is <b className="answers--item__context--highlight">
-                      {answersWithFeedback[0].boolean_answer_prediction}</b>.
-                    </p>
-                  </div>               
-                }
-              </div>
-            }
-            </h6>
-          </div>
+          {/* found 3 answers, your question is boolean etc */}
+          {(<AnswersSummary answersWithFeedback={answersWithFeedback}>
+          </AnswersSummary>
+          )}
           <div className="answers--items">
             {answersWithFeedback.map((answerWithFeedback, index) => {
               return (
@@ -312,9 +343,10 @@ function Answers({ question, answers, loading, source }) {
                 <h6>
                   {answersWithFeedback[0].question_type_prediction=="boolean" && 
                   <div>
-                    <p>Evidence span {answerWithFeedback.display_each_boolean_answer && 
-                      <div>
-                        {answerWithFeedback.boolean_answer_prediction}
+                    <p>Evidence span: {answerWithFeedback.display_each_boolean_answer && 
+                    <div>{(<YesNoAnswer boolean_answer_prediction={answerWithFeedback.boolean_answer_prediction}> 
+                          </YesNoAnswer>
+                        )}
                       </div>
                     }</p>
                   </div>
@@ -356,11 +388,11 @@ function Answers({ question, answers, loading, source }) {
                     <div className="answers--item__content--right">
                       {!_.isNil(answerWithFeedback.confidenceScore) ? (
                         <div className="answers--item__confidence">
-                          Score (out of 100):
+                          Score:
                           <span>
                             {Math.round(
                               answerWithFeedback.confidenceScore * 100
-                            )}
+                            )} / 100
                           </span>
                         </div>
                       ) : null}

From e3268268e31d3f78d648d7822eef3dc3144a4bc1 Mon Sep 17 00:00:00 2001
From: Scott McCarley <jsmc@us.ibm.com>
Date: Sat, 28 Jan 2023 19:43:25 +0000
Subject: [PATCH 4/7] merge from main

---
 src/components/answers/styles.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/answers/styles.scss b/src/components/answers/styles.scss
index c0236d8..09d1f43 100644
--- a/src/components/answers/styles.scss
+++ b/src/components/answers/styles.scss
@@ -126,6 +126,16 @@
         background-color: $blue-20;
       }
 
+      &--yesanswer {
+        font-weight: 600;
+        background-color: $green-20;        
+      }
+
+      &--noanswer {
+        font-weight: 600;
+        background-color: $yellow-20;        
+      }      
+
       .cds--accordion__item {
         border-top: none;
         margin-top: 10px;

From 0800ed24a36b4a3b9f480b54ea35ce876f63fd25 Mon Sep 17 00:00:00 2001
From: Scott McCarley <jsmc@us.ibm.com>
Date: Mon, 20 Feb 2023 16:34:36 +0000
Subject: [PATCH 5/7] trailing ws

---
 src/components/answers/styles.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/answers/styles.scss b/src/components/answers/styles.scss
index 09d1f43..1707749 100644
--- a/src/components/answers/styles.scss
+++ b/src/components/answers/styles.scss
@@ -128,14 +128,14 @@
 
       &--yesanswer {
         font-weight: 600;
-        background-color: $green-20;        
+        background-color: $green-20;
       }
 
       &--noanswer {
         font-weight: 600;
-        background-color: $yellow-20;        
-      }      
-
+        background-color: $yellow-20;
+      }
+      
       .cds--accordion__item {
         border-top: none;
         margin-top: 10px;

From 267287c5c34882c497273467c1b3cbcd249e0e23 Mon Sep 17 00:00:00 2001
From: Scott McCarley <jsmc@us.ibm.com>
Date: Mon, 20 Feb 2023 16:54:08 +0000
Subject: [PATCH 6/7] trailing ws

---
 src/components/answers/index.js    | 24 ++++++++++++------------
 src/components/answers/styles.scss |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/answers/index.js b/src/components/answers/index.js
index 2f6f0ad..575d1af 100644
--- a/src/components/answers/index.js
+++ b/src/components/answers/index.js
@@ -257,16 +257,16 @@ async function postFeedback(
 function YesNoAnswer({boolean_answer_prediction}) {
   return (
     <React.Fragment>
-      {boolean_answer_prediction.toLowerCase()=="yes" ? 
+      {boolean_answer_prediction.toLowerCase()=="yes" ?
         <b className="answers--item__context--yesanswer">
           {boolean_answer_prediction}
-        </b> 
+        </b>
         :
         <b className="answers--item__context--noanswer">
           {boolean_answer_prediction}
         </b>
       }
-    </React.Fragment> 
+    </React.Fragment>
   )
 }
 
@@ -275,10 +275,10 @@ function AnswersSummary({answersWithFeedback}) {
     <React.Fragment>
       <div className="answers--details">
         <h6>
-        {answersWithFeedback[0].question_type_prediction==null && 
-          <p>Found {answersWithFeedback.length} answers matching your question..</p>                  
+        {answersWithFeedback[0].question_type_prediction==null &&
+          <p>Found {answersWithFeedback.length} answers matching your question..</p>
         }
-        {answersWithFeedback[0].question_type_prediction!=null && 
+        {answersWithFeedback[0].question_type_prediction!=null &&
           <div>
             <p> Your question is a <b className="answers--item__context--highlight">
               {answersWithFeedback[0].question_type_prediction}
@@ -286,7 +286,7 @@ function AnswersSummary({answersWithFeedback}) {
             </p>
             {answersWithFeedback[0].question_type_prediction!='boolean' &&
               <p>Found {answersWithFeedback.length} answers matching your question..</p>
-            }                
+            }
             {answersWithFeedback[0].question_type_prediction=='boolean' &&
               <div>
                 <p>Found {answersWithFeedback.length} evidence spans answering your question..</p>
@@ -295,7 +295,7 @@ function AnswersSummary({answersWithFeedback}) {
                   </YesNoAnswer>
                   )} .
                 </p>
-              </div>               
+              </div>
             }
           </div>
         }
@@ -341,10 +341,10 @@ function Answers({ question, answers, loading, source }) {
                   className="answers--item"
                 >
                 <h6>
-                  {answersWithFeedback[0].question_type_prediction=="boolean" && 
+                  {answersWithFeedback[0].question_type_prediction=="boolean" &&
                   <div>
-                    <p>Evidence span: {answerWithFeedback.display_each_boolean_answer && 
-                    <div>{(<YesNoAnswer boolean_answer_prediction={answerWithFeedback.boolean_answer_prediction}> 
+                    <p>Evidence span: {answerWithFeedback.display_each_boolean_answer &&
+                    <div>{(<YesNoAnswer boolean_answer_prediction={answerWithFeedback.boolean_answer_prediction}>
                           </YesNoAnswer>
                         )}
                       </div>
@@ -353,7 +353,7 @@ function Answers({ question, answers, loading, source }) {
                   }
                   {answersWithFeedback[0].question_type_prediction!="boolean" && <div><p>Answer</p></div>}
                 </h6>
-                  
+
 
                   <div className="answers--item__content">
                     <div className="answers--item__content--left">
diff --git a/src/components/answers/styles.scss b/src/components/answers/styles.scss
index 1707749..0fea221 100644
--- a/src/components/answers/styles.scss
+++ b/src/components/answers/styles.scss
@@ -135,7 +135,7 @@
         font-weight: 600;
         background-color: $yellow-20;
       }
-      
+
       .cds--accordion__item {
         border-top: none;
         margin-top: 10px;

From 4f52e12f82862c14513b452410f85f3ed99cb0cf Mon Sep 17 00:00:00 2001
From: Scott McCarley <jsmc@us.ibm.com>
Date: Mon, 20 Feb 2023 16:55:09 +0000
Subject: [PATCH 7/7] trailing ws

---
 src/components/answers/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/answers/index.js b/src/components/answers/index.js
index 575d1af..f615b90 100644
--- a/src/components/answers/index.js
+++ b/src/components/answers/index.js
@@ -290,8 +290,8 @@ function AnswersSummary({answersWithFeedback}) {
             {answersWithFeedback[0].question_type_prediction=='boolean' &&
               <div>
                 <p>Found {answersWithFeedback.length} evidence spans answering your question..</p>
-                <p>The best answer is {" "} 
-                  {(<YesNoAnswer boolean_answer_prediction={answersWithFeedback[0].boolean_answer_prediction}> 
+                <p>The best answer is {" "}
+                  {(<YesNoAnswer boolean_answer_prediction={answersWithFeedback[0].boolean_answer_prediction}>
                   </YesNoAnswer>
                   )} .
                 </p>