Enable users to change the view title color (#701)

docs/userManual.md

@@ -26,7 +26,7 @@ one row for an airline flight.  Columns in this dataset include: the date of the
 the origin and destination cities, the origin and destination states,
 the origin airport code, the distance flown, the departure and arrival delay.
 
-Updated on 2020 Sep 29.
+Updated on 2020 Oct 19.
 
 # Contents
   * 1 [Basic concepts](#1-basic-concepts)
@@ -855,6 +855,9 @@ with x.
 
 ![View heading](view-heading.png)
 
+The color picker rectangle allows you to change the color of the title
+to make it easier to visually navigate; the color of a view is inherited
+by all views that are spawned by it.
 The two black triangles in the view heading allow the view to be moved
 up and down on the web page.  The axis markers X, Y, and G can be
 dragged between some views; dropping them will "move" the

docs/userManual.src

@@ -776,6 +776,9 @@ with x.
 
 ![View heading](view-heading.png)
 
+The color picker rectangle allows you to change the color of the title
+to make it easier to visually navigate; the color of a view is inherited
+by all views that are spawned by it.
 The two black triangles in the view heading allow the view to be moved
 up and down on the web page.  The axis markers X, Y, and G can be
 dragged between some views; dropping them will "move" the

platform/src/test/java/org/hillview/test/table/RowSnapShotTest.java

@@ -31,7 +31,6 @@
 import org.junit.Test;
 
 import java.time.Instant;
-import java.time.temporal.TemporalUnit;
 import java.util.Collections;
 
 public class RowSnapShotTest extends BaseTest {

web/src/main/webapp/datasetView.ts

@@ -431,6 +431,8 @@ export class DatasetView implements IHtmlElement {
     public newPage(title: PageTitle, sourcePage: FullPage | null): FullPage {
         const num = this.pageCounter++;
         const page = new FullPage(num, title, sourcePage != null ? sourcePage.pageId : null, this);
+        if (sourcePage != null)
+            page.setTitleColor(sourcePage.getColor());
         this.insertAfter(page, sourcePage);
         return page;
     }

web/src/main/webapp/ui/fullPage.ts

@@ -179,6 +179,13 @@ export class FullPage implements IHtmlElement {
             h2.appendChild(refLink);
         }
 
+        const picker = document.createElement("input");
+        picker.type = "color";
+        picker.style.width = "20px";
+        picker.value = "#ffffff";
+        picker.oninput = () => { this.setTitleColor(picker.value); };
+        this.addCell(picker, true);
+
         if (this.dataset != null) {
             this.eBox = makeSpan(SpecialChars.epsilon);
             this.eBox.title = "Data is shown with differential privacy.";
@@ -259,6 +266,10 @@ export class FullPage implements IHtmlElement {
         this.bottomContainer.appendChild(this.console.getHTMLRepresentation());
     }
 
+    public getColor(): string {
+        return this.titleRow.style.background;
+    }
+
     public changeEpsilon(): void {
         if (this.epsilonColumns == null)
             return;
@@ -468,4 +479,8 @@ export class FullPage implements IHtmlElement {
     public scrollIntoView(): void {
         this.getHTMLRepresentation().scrollIntoView( { block: "end", behavior: "smooth" } );
     }
+
+    setTitleColor(color: string): void {
+        this.titleRow.style.background = color;
+    }
 }