frontend: Support linking to a specific line, fixes #189 (#203)

Author: La0

frontend/src/base.html

@@ -62,8 +62,8 @@ <h2>
   <table>
     <tbody>
       {{#lines}}
-      <tr class="{{covered}}">
-        <td>{{ nb }}</td>
+      <tr class="{{ css_class }}" id="l{{ nb }}">
+        <td><a class="scroll" href="{{ route }}">{{ nb }}</a></td>
         <td>
           <pre class="language-{{ language }}"><code>{{ line }}</code></pre>
         </td>

frontend/src/common.js

@@ -1,5 +1,5 @@
 import Mustache from "mustache";
-import { buildRoute, readRoute, updateRoute } from "./route.js";
+import { buildRoute, readRoute } from "./route.js";
 import { ZERO_COVERAGE_FILTERS } from "./zero_coverage_report.js";
 
 export const REV_LATEST = "latest";
@@ -18,14 +18,12 @@ export async function main(load, display) {
   // Wait for DOM to be ready before displaying
   await DOM_READY;
   await display(data);
-  monitorOptions();
 
   // Full workflow, loading then displaying data
   // used for following updates
   const full = async function() {
     const data = await load();
     await display(data);
-    monitorOptions();
   };
 
   // React to url changes
@@ -176,34 +174,6 @@ export function isEnabled(opt) {
   return value === "on";
 }
 
-function monitorOptions() {
-  // Monitor input & select changes
-  const fields = document.querySelectorAll("input, select");
-  for (const field of fields) {
-    if (field.type === "text") {
-      // React on enter
-      field.onkeydown = async evt => {
-        if (evt.keyCode === 13) {
-          const params = {};
-          params[evt.target.name] = evt.target.value;
-          updateRoute(params);
-        }
-      };
-    } else {
-      // React on change
-      field.onchange = async evt => {
-        let value = evt.target.value;
-        if (evt.target.type === "checkbox") {
-          value = evt.target.checked ? "on" : "off";
-        }
-        const params = {};
-        params[evt.target.name] = value;
-        updateRoute(params);
-      };
-    }
-  }
-}
-
 // hgmo.
 const sourceCache = {};
 export async function getSource(file, revision) {

frontend/src/index.js

@@ -13,7 +13,7 @@ import {
   getSource,
   getFilters
 } from "./common.js";
-import { buildRoute, readRoute, updateRoute } from "./route.js";
+import { buildRoute, monitorOptions, readRoute, updateRoute } from "./route.js";
 import {
   zeroCoverageDisplay,
   zeroCoverageMenu
@@ -25,7 +25,8 @@ import Chartist from "chartist";
 import "chartist/dist/chartist.css";
 
 const VIEW_ZERO_COVERAGE = "zero";
-const VIEW_BROWSER = "browser";
+const VIEW_DIRECTORY = "directory";
+const VIEW_FILE = "file";
 
 function browserMenu(revision, filters, route) {
   const context = {
@@ -111,7 +112,8 @@ async function showDirectory(dir, revision, files) {
     navbar: buildNavbar(dir, revision),
     files: files.map(file => {
       file.route = buildRoute({
-        path: file.path
+        path: file.path,
+        view: file.type
       });
 
       // Calc decimal range to make a nice coloration
@@ -128,8 +130,8 @@ async function showDirectory(dir, revision, files) {
   render("file_browser", context, "output");
 }
 
-async function showFile(file, revision) {
-  const source = await getSource(file.path, revision);
+async function showFile(source, file, revision, selectedLine) {
+  selectedLine = selectedLine !== undefined ? parseInt(selectedLine) : -1;
 
   let language;
   if (file.path.endsWith("cpp") || file.path.endsWith("h")) {
@@ -148,7 +150,6 @@ async function showFile(file, revision) {
 
   const context = {
     navbar: buildNavbar(file.path, revision),
-    revision: revision || REV_LATEST,
     language,
     lines: source.map((line, nb) => {
       const coverage = file.coverage[nb];
@@ -175,12 +176,18 @@ async function showFile(file, revision) {
           };
         }
       }
+
+      // Override css class when selected
+      if (nb === selectedLine) {
+        cssClass = "selected";
+      }
       return {
         nb,
         hits,
         coverage,
         line: line || " ",
-        covered: cssClass
+        css_class: cssClass,
+        route: buildRoute({ line: nb })
       };
     })
   };
@@ -189,6 +196,15 @@ async function showFile(file, revision) {
   hide("history");
   const output = render("file_coverage", context, "output");
 
+  // Scroll to line
+  if (selectedLine > 0) {
+    const line = output.querySelector("#l" + selectedLine);
+    line.scrollIntoView({
+      behavior: "smooth",
+      block: "center"
+    });
+  }
+
   // Highlight source code once displayed
   Prism.highlightAll(output);
 }
@@ -218,49 +234,61 @@ async function load() {
     };
   }
 
+  // Default to directory view on home
+  if (!route.view) {
+    route.view = VIEW_DIRECTORY;
+  }
+
   try {
-    var [coverage, history, filters] = await Promise.all([
+    const viewContent =
+      route.view === VIEW_DIRECTORY
+        ? getHistory(route.path, route.platform, route.suite)
+        : getSource(route.path, route.revision);
+    var [coverage, filters, viewData] = await Promise.all([
       getPathCoverage(route.path, route.revision, route.platform, route.suite),
-      getHistory(route.path, route.platform, route.suite),
-      getFilters()
+      getFilters(),
+      viewContent
     ]);
   } catch (err) {
     console.warn("Failed to load coverage", err);
     await DOM_READY; // We want to always display this message
     message("error", "Failed to load coverage: " + err.message);
     throw err;
   }
-
   return {
-    view: VIEW_BROWSER,
+    view: route.view,
     path: route.path,
     revision: route.revision,
     route,
     coverage,
-    history,
-    filters
+    filters,
+    viewData
   };
 }
 
-async function display(data) {
+export async function display(data) {
   if (data.view === VIEW_ZERO_COVERAGE) {
     await zeroCoverageMenu(data.route);
     await zeroCoverageDisplay(data.zeroCoverage, data.path);
-  } else if (data.view === VIEW_BROWSER) {
+  } else if (data.view === VIEW_DIRECTORY) {
+    hide("message");
     browserMenu(data.revision, data.filters, data.route);
-
-    if (data.coverage.type === "directory") {
-      hide("message");
-      await graphHistory(data.history, data.path);
-      await showDirectory(data.path, data.revision, data.coverage.children);
-    } else if (data.coverage.type === "file") {
-      await showFile(data.coverage, data.revision);
-    } else {
-      message("error", "Invalid file type: " + data.coverate.type);
-    }
+    await graphHistory(data.viewData, data.path);
+    await showDirectory(data.path, data.revision, data.coverage.children);
+  } else if (data.view === VIEW_FILE) {
+    browserMenu(data.revision, data.filters, data.route);
+    await showFile(
+      data.viewData,
+      data.coverage,
+      data.revision,
+      data.route.line
+    );
   } else {
     message("error", "Invalid view : " + data.view);
   }
+
+  // Always monitor options on newly rendered output
+  monitorOptions(data);
 }
 
 main(load, display);

frontend/src/route.js

@@ -1,4 +1,5 @@
 import { REV_LATEST } from "./common.js";
+import { display } from "./index.js";
 
 export function readRoute() {
   // Reads all filters from current URL hash
@@ -42,5 +43,51 @@ export function buildRoute(params) {
 
 export function updateRoute(params) {
   // Update full hash with an updated url
+  // Will trigger full load + display update
   window.location.hash = buildRoute(params);
 }
+
+export async function updateRouteImmediate(hash, data) {
+  // Will trigger only a display update, no remote data will be fetched
+
+  // Update route without reloading content
+  history.pushState(null, null, hash);
+
+  // Update the route stored in data
+  data.route = readRoute();
+  await display(data);
+}
+
+export function monitorOptions(currentData) {
+  // Monitor input & select changes
+  const fields = document.querySelectorAll("input, select, a.scroll");
+  for (const field of fields) {
+    if (field.classList.contains("scroll")) {
+      // On a scroll event, update display without any data loading
+      field.onclick = async evt => {
+        evt.preventDefault();
+        updateRouteImmediate(evt.target.hash, currentData);
+      };
+    } else if (field.type === "text") {
+      // React on enter
+      field.onkeydown = async evt => {
+        if (evt.keyCode === 13) {
+          const params = {};
+          params[evt.target.name] = evt.target.value;
+          updateRoute(params);
+        }
+      };
+    } else {
+      // React on change
+      field.onchange = async evt => {
+        let value = evt.target.value;
+        if (evt.target.type === "checkbox") {
+          value = evt.target.checked ? "on" : "off";
+        }
+        const params = {};
+        params[evt.target.name] = value;
+        updateRoute(params);
+      };
+    }
+  }
+}

frontend/src/style.scss

@@ -8,6 +8,7 @@ $footer_height: 60px;
 $coverage_low: #d91a47;
 $coverage_warn: #ff9a36;
 $coverage_good: #438718;
+$highlighted: #f7f448;
 $small_screen: 1900px;
 
 body {
@@ -352,6 +353,17 @@ $samp_size: 20px;
           background: $uncovered_color;
         }
       }
+
+      &.selected {
+        font-weight: bold;
+        td {
+          background: $highlighted;
+        }
+
+        pre {
+          background: $highlighted;
+        }
+      }
     }
   }
 }