Validation Frontend: Summary Page (#31)

* Added summary page * Newline & Typo * Implemented requested changes * Added target blank as requested
google · Sep 1, 2020 · d29837a · d29837a
1 parent ff8419d
commit d29837a
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 28 deletions.
diff --git a/validation/src/lib/compare.ts b/validation/src/lib/compare.ts
@@ -8,23 +8,6 @@ import {writeTestcase, writeSnippetCase, writeUrlSummary} from './output';
 
 import axe from 'axe-core';
 
-// Hard coded initialisation function simulating calls from
-// backend Express server.
-(async () => {
-  // Compare on URL
-  /*
-  const USER_INPUT_URL =
-    'https://keep.google.com/u/0/#home';
-  await runURLComparison(USER_INPUT_URL);
-  */
-  // Compare on snippet
-  /*
-  const USER_INPUT_HTML_SNIPPET = `<div accnamecomparisontarget>Hello world</div>`;
-  const result = await runHTMLSnippetComparison(USER_INPUT_HTML_SNIPPET);
-  console.log(result);
-  */
-})();
-
 /**
  * Compares AccName implementations on a HTML snippet containing a target element
  * identified by the presence of an 'accnameComparisonTarget' attribute.
@@ -87,7 +70,7 @@ export async function runURLComparison(url: string): Promise<number> {
   // Associates each category encountered with the number
   // of occurrences of that category
   const categoryCount: {[categoryHash: string]: number} = {};
-  const cases: CasePreview[] = [];
+  const cases: number[] = [];
 
   const allNodes = await page.$$('body *');
   for (let i = 0; i < allNodes.length; i++) {
@@ -113,7 +96,7 @@ export async function runURLComparison(url: string): Promise<number> {
         categoryCount[categoryHash] += 1;
       } else {
         const casePreview = writeTestcase(comparisonResults, {url: url});
-        cases.push(casePreview);
+        cases.push(casePreview.caseId);
         categoryCount[categoryHash] = 1;
       }
     }
@@ -125,16 +108,16 @@ export async function runURLComparison(url: string): Promise<number> {
   }
 
   // All categories encountered duirng comparison and their associated counts.
-  const categoryStats = Object.entries(categoryCount).map(entry => ({
+  const categoryStats = Object.entries(categoryCount).map((entry, i) => ({
     category: JSON.parse(entry[0]) as Category,
     count: entry[1],
+    caseId: cases[i],
   }));
 
   const pageSummary: UrlSummary = {
     url: url,
     nodesOnPage: allNodes.length,
     stats: categoryStats,
-    cases: cases,
   };
   const pageSummaryId = writeUrlSummary(pageSummary);
 

diff --git a/validation/src/models.d.ts b/validation/src/models.d.ts
@@ -30,11 +30,17 @@ declare interface Preview {
 declare interface UrlSummary {
   url: string;
   nodesOnPage: number;
-  stats: {
-    category: Category;
-    count: number;
-  }[];
-  cases: CasePreview[];
+  stats: CategoryStat[];
+}
+
+/**
+ * The number of times a Category has occured on a given web-page
+ * and the caseId of a test-case representing this Category.
+ */
+declare interface CategoryStat {
+  category: Category;
+  count: number;
+  caseId: number;
 }
 
 /**

diff --git a/validation/src/server.ts b/validation/src/server.ts
@@ -22,6 +22,10 @@ app.get('/case/:id', (_req, res) => {
   res.sendFile(path.join(__dirname, 'static/case.html'));
 });
 
+app.get('/summary/:id', (_req, res) => {
+  res.sendFile(path.join(__dirname, 'static/summary.html'));
+});
+
 /**
  * Comparison API endpoints
  */

diff --git a/validation/src/static/index.html b/validation/src/static/index.html
@@ -18,7 +18,9 @@
     <div class="content">
       <!-- Title -->
       <heading class="titleContainer">
-        <h1 class="title">AccName Comparison</h1>
+        <h1 class="title">
+          AccName Comparison
+        </h1>
       </heading>
       <section class="introTextContainer">
         <h2 class="introText">

diff --git a/validation/src/static/scripts/case.ts b/validation/src/static/scripts/case.ts
@@ -51,7 +51,7 @@
   const inputSnippet = res.context.inputSnippet ?? null;
   if (inputSnippet) {
     contextHeading.innerText = 'Input HTML Snippet';
-    inputCode.innerHTML = inputSnippet.replace(/</g, '&lt;');;
+    inputCode.innerHTML = inputSnippet.replace(/</g, '&lt;');
   }
 
   const targetUrl = res.context.url ?? null;

diff --git a/validation/src/static/scripts/summary.ts b/validation/src/static/scripts/summary.ts
@@ -0,0 +1,65 @@
+(async () => {
+  const getElem = (id: string) => document.getElementById(id);
+
+  const urlString = window.location.href;
+  const summaryId = urlString.substr(urlString.lastIndexOf('/') + 1);
+  const rawResponse = await fetch(
+    `http://localhost:3000/api/summary/${summaryId}`
+  );
+  const summary: UrlSummary = await rawResponse.json();
+
+  const urlContainer = getElem('urlContainer');
+  const numNodesContainer = getElem('numNodes');
+  const categoryTable = getElem('categoryTable');
+  if (!urlContainer || !numNodesContainer || !categoryTable)
+    throw new ElemNotFound();
+
+  urlContainer.innerHTML = `<a href="${summary.url}" target="_blank">${summary.url}</a>`;
+  numNodesContainer.innerText = summary.nodesOnPage.toString();
+
+  const stats = summary.stats.sort((a, b) => b.count - a.count);
+
+  for (const stat of stats) {
+    const categoryString = getFormattedCategoryHTML(stat.category);
+
+    // Add a row of generated HTML to the category table.
+    categoryTable.innerHTML += `
+      <tr>
+        <td>${categoryString}</td>
+        <td style="text-align:center;">${stat.count}</td>
+        <td>
+          <a href="/case/${stat.caseId}" target="_blank" rel="noopener noreferrer" class="invisibleLink" aria-label="View case ${stat.caseId}">
+            <div class="previewCard" style="margin:0;">
+              Case ${stat.caseId}
+              <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" style="margin-left:auto;">
+                <path d="M0 0h24v24H0z" fill="none"/>
+                <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" fill="white"/>
+              </svg>
+            </div>
+          </a>
+        </td>
+      </tr>
+    `;
+  }
+})();
+
+/**
+ * Generates a string of HTML containing a formatted
+ * representation of the Category provided.
+ * @param category - The Category to be formatted
+ */
+function getFormattedCategoryHTML(category: Category): string {
+  let categoryString =
+    '<strong>Agreement:</strong> ' +
+    JSON.stringify(category.agreement) +
+    '<br/>';
+  if (category.role) {
+    categoryString +=
+      '<strong>Role:</strong> ' + '"' + category.role + '"' + '<br/>';
+  }
+  if (category.rules) {
+    categoryString +=
+      '<strong>Rules:</strong> ' + JSON.stringify(category.rules) + '<br/>';
+  }
+  return categoryString;
+}
diff --git a/validation/src/static/summary.html b/validation/src/static/summary.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>AccName Comparison</title>
+    <!-- External Dependencies -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
+    <!-- Local Dependencies -->
+    <link rel="stylesheet" href="/static/styles/index.css">
+    <script src="/static/scripts/util.js"></script>
+    <script src="/static/scripts/summary.js"></script>
+  </head>
+  <body>
+    <div class="content">
+      <header class="titleContainer" style="margin-bottom: 20px;">
+        <h1 class="title">Web-page Summary</h1>
+      </header>
+      <section class="section">
+        <h2 class="heading" id="urlContainer"></h2>
+        <div class="bluetext" style="margin-bottom: 10px;">Comparison run on <strong><span id="numNodes"></span></strong> Nodes in total</div>
+      </section>
+      <section class="section">
+        <table id="categoryTable">
+          <colgroup>
+            <col span="1" style="width: 65%;">
+            <col span="1" style="width: 15%;">
+            <col span="1" style="width: 20%;">
+          </colgroup>
+          <tr class="tableHeaderRow">
+            <th>Category</th>
+            <th>Frequency</th>
+            <th>Test-case</th>
+          </tr>
+        </table>
+      </section>
+    </div>
+  </body>
+</html>