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 and run the 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`.

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/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;
 }
 

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

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