it's done i think

dashboard/src/ui-components/AppUI.tsx

@@ -7,6 +7,10 @@ import MessageOverlay from "./MessageOverlay";
 import UIComponent from "./UIComponent";
 import SelectDisplayModeWidget from "./SelectDisplayModeWidget";
 import LegendWidget from "./LegendWidget";
+import HelpModal from "./HelpModal";
+import * as JSX from "../JSXFactory";
+import {AppStore} from "../StateStore";
+import HelpButtonImg from "../../assets/help-button.png";
 
 class AppUI extends UIComponent {
     private timezoneWidget: TimezoneWidget;
@@ -18,14 +22,21 @@ class AppUI extends UIComponent {
     private element: HTMLDivElement = document.createElement("div");
     private grid: HTMLDivElement = document.createElement("div");
     private messageOverlay: MessageOverlay = new MessageOverlay();
+    private helpModal: HelpModal = new HelpModal();
 
     constructor() {
         super();
         this.setupGrid({width: 5, height: 10});
         this.element.append(
-            Object.assign(document.createElement("h1"), { innerText: "Ledda's Room Climate" }),
+            <img
+                alt={"Help"}
+                src={HelpButtonImg}
+                className={"help-button button"}
+                onclick={() => AppStore().showHelp()}/>,
+            <h1>Ledda's Room Climate</h1>,
             this.grid,
             this.messageOverlay.current(),
+            this.helpModal.current(),
         );
         this.element.className = "center";
     }
@@ -33,8 +44,8 @@ class AppUI extends UIComponent {
     private setupGrid(size: GridSize) {
         this.setupWidgets();
         this.grid.append(
-            this.legendWidget.current(),
             this.chartWidget.current(),
+            this.legendWidget.current(),
             this.displayModeSettingsWidget.current(),
             this.selectModeWidget.current(),
             this.timerWidget.current(),
@@ -68,7 +79,6 @@ class AppUI extends UIComponent {
 
     bootstrap(rootNode: string) {
         document.getElementById(rootNode).append(this.element);
-        this.chartWidget.updateDimensions();
     }
 
     current(): HTMLElement {

dashboard/src/ui-components/ClimateChartWidget.ts

@@ -26,6 +26,8 @@ class ClimateChartWidget extends UIComponent {
     }
 
     updateDimensions() {
+        this.canvasElement.width = 0;
+        this.canvasElement.height = 0;
         const skelStyle = getComputedStyle(this.skeleton.current());
         this.canvasElement.height = this.skeleton.current().clientHeight
             - Number(skelStyle.paddingTop.slice(0, -2))
@@ -33,6 +35,7 @@ class ClimateChartWidget extends UIComponent {
         this.canvasElement.width = this.skeleton.current().clientWidth
             - Number(skelStyle.paddingLeft.slice(0, -2))
             - Number(skelStyle.paddingRight.slice(0, -2));
+        this.chart.updateLayout();
     }
 
     private setupListeners() {
@@ -41,18 +44,22 @@ class ClimateChartWidget extends UIComponent {
         AppStore().subscribeStoreVal("displayWindow", () => this.rerender());
         AppStore().on("timeseriesUpdated", () => this.rerender());
         AppStore().on("newTimeseries", (timeseries) => this.chart.addTimeseries(timeseries));
-        AppStore().subscribeStoreVal("documentReady", () => this.initChart());
+        AppStore().subscribeStoreVal("documentReady", async () => {
+            await this.initChart();
+            this.updateDimensions();
+            window.addEventListener("resize", () => {
+                this.updateDimensions();
+            });
+        });
         AppStore().subscribeStoreVal("utcOffset", () => this.updateTimezone());
         AppStore().subscribeStoreVal("highlightedTimeseries", (name) => this.chart.highlightTimeseries(name));
     }
 
     private handleScroll(direction: number, magnitude: number, index: number) {
-        let displayedWindow = getAppState().displayWindow;
         if (getAppState().displayMode === "pastMins") {
-            AppStore().setDisplayMode("window");
-            const now = new Date().getTime() / 1000;
-            displayedWindow = {start: now - getAppState().minutesDisplayed * 60, stop: now};
+            AppStore().emulateLastMinsWithWindow();
         }
+        const displayedWindow = getAppState().displayWindow;
         const beforeIndex = index - displayedWindow.start;
         const afterIndex = displayedWindow.stop - index;
         const factor = direction === 1 ? 1.1 : 0.9;
@@ -66,12 +73,12 @@ class ClimateChartWidget extends UIComponent {
 
     private handleDrag(deltaX: number, deltaY: number, deltaIndex: number) {
         if (getAppState().displayMode === "pastMins") {
-            AppStore().setDisplayMode("window");
+            AppStore().emulateLastMinsWithWindow();
         }
-        const displayWindow = getAppState().displayWindow;
+        const displayedWindow = getAppState().displayWindow;
         AppStore().setDisplayWindow({
-            start: displayWindow.start + deltaIndex,
-            stop: displayWindow.stop + deltaIndex,
+            start: displayedWindow.start + deltaIndex,
+            stop: displayedWindow.stop + deltaIndex,
         });
     }
 

dashboard/src/ui-components/HelpModal.tsx

@@ -0,0 +1,80 @@
+import {AppStore, getAppState} from "../StateStore";
+import UIComponent from "./UIComponent";
+import * as JSX from "../JSXFactory";
+import MovePic from "../../assets/move-example.gif";
+import ZoomPic from "../../assets/zoom-example.gif";
+import ScrollPic from "../../assets/scroll-date-example.gif";
+
+class HelpModal extends UIComponent {
+    private element: HTMLElement;
+    private visible = false;
+
+    constructor() {
+        super();
+        this.build();
+        AppStore().subscribeStoreVal("showingHelp", () => this.update());
+        this.update();
+    }
+
+    private build() {
+        this.element = (
+            <div className={"center"}>
+                <div
+                    className={"overlay center"}
+                    onclick={() => this.hide()}/>
+                <div className={"help-box"}>
+                    <div
+                        className={"x-button button"}
+                        onclick={() => this.hide()}/>
+                    <h1>Quick Help</h1>
+                    <div className={"image-advice"}>
+                        <img alt={"Animated example of scrolling over display timestamps"} src={ScrollPic}/>
+                        <div>
+                            Clicking the plus and minus buttons will adjust the time spans and minute spans by one minute.
+                            Try scrolling over the numbers or clicking on them for direct editing as well!
+                        </div>
+                    </div>
+                    <div className={"image-advice"}>
+                        <img alt={"Animated example of dragging back and forth on the chart"} src={MovePic}/>
+                        <div>
+                            Dragging over the chart will switch to time window mode and allow you to pan back and forth.
+                        </div>
+                    </div>
+                    <div className={"image-advice"}>
+                        <img alt={"Animated example of zooming in and out on the chart"} src={ZoomPic}/>
+                        <div>
+                            Try scrolling whilst hovering over the chart to zoom in and out.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    private show() {
+        this.visible = true;
+        this.element.classList.remove("hidden");
+        AppStore().showHelp();
+    }
+
+    private hide() {
+        this.visible = false;
+        this.element.classList.add("hidden");
+        AppStore().hideHelp();
+    }
+
+    update() {
+        this.visible = getAppState().showingHelp;
+        if (this.visible) {
+            this.element.classList.remove("hidden");
+        } else {
+            this.element.classList.add("hidden");
+        }
+    }
+
+    current() {
+        return this.element;
+    }
+}
+
+export default HelpModal;