Update table visualization results for indicating header. (#927)

* Update table visualization results for indicating header.

* Set header for prebuilt invoice line items.

* Update test cases.

docs/manual_testing/manual-test-runbook.md

@@ -22,6 +22,8 @@ Test Runbook
     * [Prebuilt analyze](#prebuilt-analyze)
     * [Table "Items" field](#table-items)
     * [Compose API request](#compose-api-request)
+  * Layout analyze
+    * [Layout analyze](#layout-analyze)
 
 * Backword Compatibility
   * [Update schema URI](#update-schema-uri)
@@ -847,5 +849,33 @@ ___
 **When**  I click the "Run analysis" button.  
 **Then**   I can see the request URI in the browser inspector is equal to "/formrecognizer/v2.1/prebuilt/businessCard/analyze?pages=1&locale=en-CA".  
 
+------------
+## <h2 id="layout-analyze">Layout analyze</h2>
 
+#### Scenario One ####
+
+**Given** I opened the layout-analyze page.
+**When** I click the "Run Layout" button.
+**Then** No reaction.
+
+#### Scenario Two ####
+
+**Given** I opened the layout-analyze page.
+**When** I click the "Browse for a file..." button and select a supported file.
+**Then** The text "Browse for a file..." change into the uploaded file name.
+
+#### Scenario Three ####
+
+**Given** I opened the layout-analyze page and uploaded a file.
+**When** I type in the "Form recognizer service endpoint" field and "API key" fields.
+**When** I click the "Run analysis" button.
+**Then** I can see "analyzing in progress..." then see the analyze result.
+
+#### Scenario Four ####
+
+**Given** I saw the analyze result on the layout-analyza page.
+**When** I click the "Table" icon on the UI.
+**Then** I can see a table visulization popped up on the UI, when table styles, 1) merged cells, 2) collumn or row headers.
+
+---------
 

src/react/components/pages/editorPage/tableView.scss

@@ -15,6 +15,10 @@
         td:empty::after {
             content: "\00a0";
         }
+        td.table-header {
+            font-weight: bold;
+            background-color: #272b30;
+        }
     }
 }
 

src/react/components/pages/editorPage/tableView.tsx

@@ -59,11 +59,11 @@ export const TableView: React.FunctionComponent<ITableViewProps> = ({ handleTabl
                 const tableRow = [];
                 tableBody.push(<tr key={i}>{tableRow}</tr>);
             }
-            table["cells"].forEach(({ rowIndex, columnIndex, rowSpan, columnSpan, text, confidence }) => {
+            table["cells"].forEach(({ rowIndex, columnIndex, rowSpan, columnSpan, text, confidence, isHeader }) => {
                 const content = { confidence: confidence || null };
                 const hasContentValue = Object.values(content).reduce((hasValue, value) => value || hasValue, false);
                 tableBody[rowIndex]["props"]["children"][columnIndex] = (
-                    <td key={columnIndex} colSpan={columnSpan} rowSpan={rowSpan}>
+                    <td key={columnIndex} colSpan={columnSpan} rowSpan={rowSpan} className={ isHeader ? "table-header" : ""}>
                         {showToolTips && hasContentValue ? (
                             <Tooltip content={content}>
                                 {text}

src/react/components/pages/prebuiltPredict/prebuiltPredictPage.tsx

@@ -1035,11 +1035,12 @@ export class PrebuiltPredictPage extends React.Component<IPrebuiltPredictPagePro
 
     private onTablePredictionClick = (predictedItem: ITableResultItem, tagColor: string) => {
         const makeTable = (clickedFieldName) => {
-            function Cell(rowIndex, columnIndex, text = null, confidence = null) {
+            function Cell(rowIndex, columnIndex, text = null, confidence = null, isHeader = false) {
                 this.rowIndex = rowIndex;
                 this.columnIndex = columnIndex;
                 this.text = text;
                 this.confidence = confidence;
+                this.isHeader = isHeader;
             }
 
             const valueArray = clickedFieldName.valueArray || [];
@@ -1064,13 +1065,13 @@ export class PrebuiltPredictPage extends React.Component<IPrebuiltPredictPagePro
             const columnNames = reOrderColumnHeaders(collectHeaders(valueArray));
             const columnHeaders = function makeColumnHeaders() {
                 const indexColumn = new Cell(0, 0, "");
-                const contentColumns = columnNames.map((columnName, columnIndex) => new Cell(0, columnIndex + 1, columnName));
+                const contentColumns = columnNames.map((columnName, columnIndex) => new Cell(0, columnIndex + 1, columnName, null, true));
                 return [indexColumn, ...contentColumns];
             }()
             const matrix: any[] = [columnHeaders];
             for (let i = 0; i < valueArray.length; i++) {
                 const valueObject = valueArray[i].valueObject || {};
-                const indexColumn = new Cell(i + 1, 0, `#${i + 1}`);
+                const indexColumn = new Cell(i + 1, 0, `#${i + 1}`, null, true);
                 const contentColumns = columnNames.map((columnName, columnIndex) => {
                     const { text, confidence } = valueObject[columnName] || {};
                     return new Cell(i + 1, columnIndex + 1, text, confidence);