Merge pull request #218 from mrc-ide/mrc-5951

Mrc 5951 - Address misc comments

README.md

@@ -79,9 +79,7 @@ See the `/config` folder for example configuration, used in development.
 
 ## Development
 
-This codebase has been tested with Node version 16.16.0.
-If you have recently changed node version, you may see Node Sass binding errors - running `npm rebuild node-sass --prefix=app/static`
-should fix this issue. 
+This codebase has been tested with Node version 20.9.0.
 
 ## Frontend 
 
@@ -93,6 +91,15 @@ The entry point script is `app/static/src/wodin.ts`.
 ### Unit Tests
 Run unit tests from `app/static` using `npm run test:unit`. Run [eslint](https://eslint.org/) with `npm run lint` or `npm run lint:fix`.
 
+### Fontawesome
+We use fontawesome for some icons (e.g. glyph in Monaco editor when there's an error or a warning). We have only the icons we need from fontawesome in `app/static/src/assets/fontawesome.css` so if you would like to add a new one, you can define a custom class:
+```
+.<class-name> {
+    content: "\<unicode>"
+}
+```
+where you can define the `<class-name>` and the `<unicode>` for the icon can be found at [Fontawesome](https://fontawesome.com/search?o=r&s=solid&f=classic) (it is in the top right hand corner when you select an icon). Note: we only have the "solid" icons currently.
+
 ## Backend
 
 The back end handles requests for apps by reading the corresponding config files and rendering an html [Handlebars](https://handlebarsjs.com/) template
@@ -133,3 +140,9 @@ Use the `./scripts/run-version.sh` script setting the branch references for the
 ```
 ./scripts/run-version.sh --app mrc-1234 --api mrc-2345
 ```
+
+## Hot Reloading
+
+This repo has two main parts: `app/server` (Express server) and `app/static` (Vue frontend). The normal way to spin up the app without hot reloading is build frontend, copy build files into public folder in the server (`npm run build --prefix=app/static` builds the frontend and copies the files to the server) and run the server (`npm run serve --prefix=app/server`). The html file will then look for its javascript src `wodin.js` and css src `wodin.css` in the `app/server/public` directory and load the app from these.
+
+The hot reloading setup is different. The `server.js` file (from building the server) takes in a `--hot-reload` boolean option which tells it to instead look for the javascript src at `http://localhost:5173/src/wodin.ts` since `wodin.ts` is our entrypoint (`http://localhost:5173` is the default url for `vite` dev mode and it serves the files, after transpiling to javascript, based on your folder structure) and css src at `http://localhost:5173/src/scss/style.scss`. To run it this way we run `npm run dev --prefix=app/static` to start the vite dev server and then we run `npm run serve-hot --prefix=app/server`.

app/server/src/controllers/appsController.ts

@@ -43,13 +43,10 @@ export class AppsController {
                     shareNotFound: shareNotFound || "",
                     mathjaxSrc: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js",
                     enableI18n: wodinConfig.enableI18n ?? false, // if option not set then false by default
-                    defaultLanguage: wodinConfig?.defaultLanguage || "en"
+                    defaultLanguage: wodinConfig?.defaultLanguage || "en",
+                    hotReload
                 };
-                if (hotReload === "true") {
-                    res.render("app-hot-reload", viewOptions);
-                } else {
-                    res.render("app", viewOptions);
-                }
+                res.render("app", viewOptions);
             } else {
                 throw new WodinWebError(
                     `App not found: ${appName}`,

app/server/src/server/args.ts

@@ -25,14 +25,24 @@ const parseArgInteger = (arg: string | null, name: string): Perhaps<number> => {
     return parseInt(arg, 10);
 };
 
+const parseArgBoolean = (arg: string | null, name: string): Perhaps<boolean> => {
+    if (arg === null) {
+        return null;
+    }
+    if (arg.toLowerCase() !== "true" && arg.toLowerCase() !== "false") {
+        throw Error(`Expected a boolean for ${name}`);
+    }
+    return arg.toLowerCase() === "true";
+};
+
 export const processArgs = (argv: string[] = process.argv) => {
     const opts = docopt(doc, { argv: argv.slice(2), version, exit: false });
     const path = opts["<path>"] as string;
     const given = {
         baseUrl: opts["--base-url"] as Perhaps<string>,
         odinApi: opts["--odin-api"] as Perhaps<string>,
         redisUrl: opts["--redis-url"] as Perhaps<string>,
-        hotReload: opts["--hot-reload"] as Perhaps<string>,
+        hotReload: parseArgBoolean(opts["--hot-reload"], "hot-reload"),
         port: parseArgInteger(opts["--port"], "port")
     };
     const { hotReload, ...prodGiven } = given;

app/server/src/types.ts

@@ -53,7 +53,7 @@ export interface AppLocals {
     wodinConfig: WodinConfig,
     wodinVersion: String,
     redis: Redis,
-    hotReload: String
+    hotReload: Boolean
 }
 
 export interface SessionMetadata {

app/server/views/app.hbs

@@ -18,7 +18,12 @@
         var loadSessionIdGlobal = "{{loadSessionId}}";
         var shareNotFoundGlobal = "{{shareNotFound}}";
     </script>
-    <script type="module" src="/wodin.js"></script>
-    <link rel="stylesheet" href="/wodin.css"/>
+    {{#if hotReload}}
+        <script type="module" src="http://localhost:5173/src/wodin.ts"></script>
+        <link rel="stylesheet" href="http://localhost:5173/src/scss/style.scss"/>
+    {{else}}
+        <script type="module" src="/wodin.js"></script>
+        <link rel="stylesheet" href="/wodin.css"/>
+    {{/if}}
     <script async src="{{mathjaxSrc}}"></script>
 </html>

app/static/package.json

@@ -17,7 +17,6 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.6.0",
     "@monaco-editor/loader": "^1.4.0",
     "axios": "^1.7.7",
     "bootstrap": "^5.3.3",

app/static/playwright.config.ts

@@ -62,7 +62,7 @@ export default defineConfig({
      * Use the preview server on CI for more realistic testing.
      * Playwright will re-use the local server if there is already a dev-server running.
      */
-    command: process.env.CI ? 'npm run preview' : 'npm run dev',
+    command: process.env.CI ? 'npm run build' : 'npm run dev',
     port: 5173,
     reuseExistingServer: !process.env.CI
   }

app/static/src/assets/fontawesome.css

@@ -31,12 +31,6 @@
 .fa-regular {
   font-family: 'Font Awesome 6 Free'; }
 
-.fa-triangle-exclamation::before {
-  content: "\f071"; }
-
-.fa-circle-xmark::before {
-  content: "\f057"; }
-
 :root, :host {
   --fa-style-family-classic: 'Font Awesome 6 Free';
   --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
@@ -51,3 +45,11 @@
 .fas,
 .fa-solid {
   font-weight: 900; }
+
+/* current icons that we use, to add more see Fontawesome section in the README */
+
+.fa-triangle-exclamation::before {
+  content: "\f071"; }
+
+.fa-circle-xmark::before {
+  content: "\f057"; }

app/static/src/components/DownloadOutput.vue

@@ -59,7 +59,7 @@
 import { computed, defineComponent, ref, watch } from "vue";
 import { useStore } from "vuex";
 import userMessages from "../userMessages";
-import { parseTime } from "@/utils";
+import { parseDateTime } from "@/utils";
 
 export default defineComponent({
     name: "DownloadOutput",
@@ -101,7 +101,7 @@ export default defineComponent({
 
         const generateDefaultFileName = () => {
             const now = new Date(Date.now());
-            const { year, month, day, hour, minute, second } = parseTime(now);
+            const { year, month, day, hour, minute, second } = parseDateTime(now);
             const timestamp = `${year}${month}${day}-${hour}${minute}${second}`
             const type = props.downloadType.toLowerCase().replace(" ", "-");
             return `${appName.value}-${type}-${timestamp}`;

app/static/src/components/WodinPanels.vue

@@ -48,7 +48,7 @@ export enum HidePanelContent {
     None
 }
 
-export enum DragStart {
+enum DragStart {
     Icon,
     Edge
 }

app/static/src/components/WodinPlot.vue

@@ -12,6 +12,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref, watch, onMounted, onUnmounted, PropType, Ref } from "vue";
 import { useStore } from "vuex";
+import EventEmitter from "events";
 import {
     newPlot,
     react,
@@ -226,7 +227,7 @@ export default defineComponent({
                     }
 
                     if (props.recalculateOnRelayout) {
-                        (el as any).on("plotly_relayout", relayout);
+                        (el as EventEmitter).on("plotly_relayout", relayout);
                     }
                     resizeObserver = new ResizeObserver(resize);
                     resizeObserver.observe(plot.value as HTMLElement);

app/static/src/components/WodinPlotDataSummary.vue

@@ -6,10 +6,10 @@
             :key="index"
             :name="series.name"
             :count="series.x?.length"
-            :x-min="Math.min(...series.x as any)"
-            :x-max="Math.max(...series.x as any)"
-            :y-min="Math.min(...series.y as any)"
-            :y-max="Math.max(...series.y as any)"
+            :x-min="Math.min(...series.x!)"
+            :x-max="Math.max(...series.x!)"
+            :y-min="Math.min(...series.y!)"
+            :y-max="Math.max(...series.y!)"
             :mode="series.mode"
             :line-color="series.line?.color"
             :line-dash="series.line?.dash"

app/static/src/components/help/DraggableDialog.vue

@@ -30,12 +30,12 @@
 import { computed, CSSProperties, defineComponent, onMounted, ref } from "vue";
 import VueFeather from "vue-feather";
 
-export interface Point {
+interface Point {
     x: number;
     y: number;
 }
 
-export interface Size {
+interface Size {
     width: number;
     height: number;
 }

app/static/src/components/help/MarkdownPanel.vue

@@ -6,13 +6,9 @@
 import { computed, defineComponent, onMounted } from "vue";
 import MarkdownItMathjax from "markdown-it-mathjax";
 import { useStore } from "vuex";
-import * as Token from "markdown-it/lib/token";
-import * as Renderer from "markdown-it/lib/renderer";
+import type { Token, Renderer } from "markdown-it/index.d.ts";
 import MarkdownIt from "./MarkdownItImport";
 
-type TokenType = typeof Token;
-type RendererType = typeof Renderer;
-
 interface MathJaxWindow {
     MathJax: {
         typeset: () => void;
@@ -39,11 +35,11 @@ export default defineComponent({
         const markdownIt = new MarkdownIt.default().use(mathjaxPlugin);
         // Adapt default rendering to fetch images from base help url
         markdownIt.renderer.rules.image = (
-            tokens: TokenType[],
+            tokens: Token[],
             idx: number,
             options: MarkdownIt.Options,
             env: unknown,
-            slf: RendererType
+            slf: Renderer
         ) => {
             const token = tokens[idx];
             const attrIdx = token.attrIndex("src");

app/static/src/components/sensitivity/SensitivityTracesPlot.vue

@@ -5,7 +5,7 @@
         :end-time="endTime"
         :plot-data="allPlotData"
         :redrawWatches="
-            solutions
+            result && solutions
                 ? [
                       ...solutions,
                       result,

app/static/src/components/sessions/SessionsPage.vue

@@ -182,7 +182,7 @@ import ErrorsAlert from "../ErrorsAlert.vue";
 import EditSessionLabel from "./EditSessionLabel.vue";
 import { SessionMetadata } from "../../types/responseTypes";
 import ConfirmModal from "../ConfirmModal.vue";
-import { parseTime } from "@/utils";
+import { parseDateTime } from "@/utils";
 
 export default defineComponent({
     name: "SessionsPage",
@@ -218,7 +218,7 @@ export default defineComponent({
 
         const formatDateTime = (isoUTCString: string) => {
             const date = new Date(isoUTCString);
-            const { year, month, day, hour, minute, second } = parseTime(date);
+            const { year, month, day, hour, minute, second } = parseDateTime(date);
             return `${day}/${month}/${year} ${hour}:${minute}:${second}`;
         };
 

app/static/src/plot.ts

@@ -5,7 +5,8 @@ import type { AllFitData, FitData, FitDataLink } from "./store/fitData/state";
 import { DiscreteSeriesSet, OdinSeriesSet, OdinSeriesSetValues, OdinUserTypeSeriesSet } from "./types/responseTypes";
 import { Dict } from "./types/utilTypes";
 
-export type WodinPlotData = Partial<PlotData>[];
+type NumberArrayPlotData = Omit<PlotData, "x" | "y"> & { x: number[], y: number[] }
+export type WodinPlotData = Partial<NumberArrayPlotData>[];
 
 export const fadePlotStyle = "opacity:0.5;";
 
@@ -61,7 +62,7 @@ export function odinToPlotly(s: OdinSeriesSet, palette: Palette, options: Partia
     };
 
     return s.values.map(
-        (el): Partial<PlotData> => ({
+        (el): Partial<NumberArrayPlotData> => ({
             mode: "lines",
             line: {
                 color: palette[el.name],

app/static/src/store/translations/codeTab.ts

@@ -1,6 +1,6 @@
 import { TranslationLocales } from "../../types/languageTypes";
 
-export interface CodeTabTranslations extends TranslationLocales {
+interface CodeTabTranslations extends TranslationLocales {
     codeTabExample: string;
 }
 

app/static/src/store/translations/dataTab.ts

@@ -1,6 +1,6 @@
 import { TranslationLocales } from "../../types/languageTypes";
 
-export interface DataTabTranslations extends TranslationLocales {
+interface DataTabTranslations extends TranslationLocales {
     dataTabExample: string;
 }
 

app/static/src/store/translations/fitTab.ts

@@ -1,6 +1,6 @@
 import { TranslationLocales } from "../../types/languageTypes";
 
-export interface FitTabTranslations extends TranslationLocales {
+interface FitTabTranslations extends TranslationLocales {
     fitTabExample: string;
 }
 

app/static/src/store/translations/genericHelp.ts

@@ -1,6 +1,6 @@
 import { TranslationLocales } from "../../types/languageTypes";
 
-export interface GenericHelpTranslations extends TranslationLocales {
+interface GenericHelpTranslations extends TranslationLocales {
     genericHelpExample: string;
 }
 

app/static/src/store/translations/header.ts

@@ -1,6 +1,6 @@
 import { TranslationLocales } from "../../types/languageTypes";
 
-export interface HeaderTranslations extends TranslationLocales {
+interface HeaderTranslations extends TranslationLocales {
     headerExample: string;
 }
 

app/static/src/store/translations/indexPage.ts

@@ -1,6 +1,6 @@
 import { TranslationLocales } from "../../types/languageTypes";
 
-export interface IndexPageTranslations extends TranslationLocales {
+interface IndexPageTranslations extends TranslationLocales {
     indexPageExample: string;
 }
 

app/static/src/store/translations/optionsTab.ts

@@ -1,6 +1,6 @@
 import { TranslationLocales } from "../../types/languageTypes";
 
-export interface OptionsTabTranslations extends TranslationLocales {
+interface OptionsTabTranslations extends TranslationLocales {
     optionsTabExample: string;
 }