merge with main

app/static/src/app/components/WodinPlot.vue

@@ -43,6 +43,7 @@ export default defineComponent({
         // Only used as an indicator that redraw is required when this changes - the data to display is calculated by
         // plotData function using these solutions
         redrawWatches: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             type: Array as PropType<any[]>,
             required: true
         },
@@ -70,6 +71,7 @@ export default defineComponent({
         const yAxisRange = computed(() => store.state.graphSettings.yAxisRange as YAxisRange);
 
         const updateAxesRange = () => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const plotLayout = (plot.value as any).layout;
             const yRange = plotLayout.yaxis?.range;
             if (plotLayout) {

app/static/src/app/components/fit/FitTab.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import { computed } from "vue";
+import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
 import VueFeather from "vue-feather";
 import FitPlot from "./FitPlot.vue";
@@ -40,7 +40,7 @@ import { fitRequirementsExplanation, fitUpdateRequiredExplanation } from "./supp
 import { allTrue, anyTrue } from "../../utils";
 import LoadingButton from "../LoadingButton.vue";
 
-export default {
+export default defineComponent({
     name: "FitTab",
     components: {
         LoadingSpinner,
@@ -123,5 +123,5 @@ export default {
             iconClass
         };
     }
-};
+});
 </script>

app/static/src/app/components/header/AppHeader.vue

@@ -14,8 +14,14 @@
           <vue-feather class="grey inline-icon" type="edit-2" size="1.3rem"></vue-feather>
           Edit Label
         </li>
-        <hr/>
-        <li><router-link id="all-sessions-link" class="dropdown-item" to="/sessions">All Sessions</router-link></li>
+        <template v-if="sessionPersisted">
+          <hr/>
+          <li>
+            <router-link id="all-sessions-link" class="dropdown-item" to="/sessions">
+              All Sessions
+            </router-link>
+          </li>
+        </template>
       </ul>
     </span>
     <span v-if="initialised" style="display: flex; align-items: center;">
@@ -69,6 +75,7 @@ export default defineComponent({
 
         const sessionId = computed(() => store.state.sessionId);
         const sessionLabel = computed(() => store.state.sessionLabel);
+        const sessionPersisted = computed(() => store.state.persisted);
 
         const sessionMenuHeader = computed(() => {
             return sessionLabel.value ? `Session: ${sessionLabel.value}` : "Sessions";
@@ -87,6 +94,7 @@ export default defineComponent({
             sessionId,
             sessionLabel,
             sessionMenuHeader,
+            sessionPersisted,
             languagesKeys
         };
     }

app/static/src/app/components/mixins/includeConfiguredTabs.ts

@@ -1,8 +1,14 @@
 import { Store } from "vuex";
-import { computed } from "vue";
+import { computed, ComputedRef } from "vue";
 import { AppState, VisualisationTab } from "../../store/appState/state";
 
-export default (store: Store<AppState>, fixedTabNames: string[]) => {
+export interface IncludeConfiguredTabsMixin {
+    helpTabName: ComputedRef<string | null>,
+    multiSensitivityTabName: ComputedRef<string | null>,
+    rightTabNames: ComputedRef<string[]>
+}
+
+export default (store: Store<AppState>, fixedTabNames: string[]): IncludeConfiguredTabsMixin => {
     const helpTabName = computed(() => {
         if (store.state.config?.help?.markdown?.length) {
             return store.state.config.help.tabName || "Explanation"; // default if markdown but no tab name

app/static/src/app/components/options/OptionsTab.vue

@@ -14,7 +14,7 @@
     <vertical-collapse v-if="fitTabIsOpen" title="Optimisation" collapse-id="optimisation">
       <optimisation-options></optimisation-options>
     </vertical-collapse>
-    <vertical-collapse title="Graph Settings" collapse-id="graph-settings">
+    <vertical-collapse v-if="!multiSensitivityOpen" title="Graph Settings" collapse-id="graph-settings">
       <graph-settings></graph-settings>
     </vertical-collapse>
     <vertical-collapse v-if="!isStochastic"
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { computed } from "vue";
+import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
 import VerticalCollapse from "../VerticalCollapse.vue";
 import ParameterValues from "./ParameterValues.vue";
@@ -43,7 +43,7 @@ import GraphSettings from "./GraphSettings.vue";
 import ParameterSets from "./ParameterSets.vue";
 import AdvancedSettings from "./AdvancedSettings.vue";
 
-export default {
+export default defineComponent({
     name: "OptionsTab",
     components: {
         ParameterSets,
@@ -75,5 +75,5 @@ export default {
             fitTabIsOpen
         };
     }
-};
+});
 </script>

app/static/src/app/components/options/ParameterSetView.vue

@@ -159,7 +159,8 @@ export default defineComponent({
             }
         };
         const saveButton = ref<HTMLButtonElement | null>(null);
-        const cancelEditDisplayName = (event: any) => {
+        const cancelEditDisplayName = (event: FocusEvent) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (event.relatedTarget && event.relatedTarget === (saveButton.value as any).$el) return;
             store.commit(`run/${RunMutation.TurnOffDisplayNameError}`, props.parameterSet.name);
             newDisplayName.value = props.parameterSet.displayName;

app/static/src/app/components/run/RunPlot.vue

@@ -19,7 +19,7 @@ import {
 } from "../../plot";
 import WodinPlot from "../WodinPlot.vue";
 import { RunGetter } from "../../store/run/getters";
-import { OdinSolution } from "../../types/responseTypes";
+import { OdinSolution, Times } from "../../types/responseTypes";
 import { Dict } from "../../types/utilTypes";
 import { runPlaceholderMessage } from "../../utils";
 import { ParameterSet } from "../../store/run/state";
@@ -88,7 +88,7 @@ export default defineComponent({
 
             Object.keys(parameterSetSolutions.value).forEach((name) => {
                 const paramSetSln = parameterSetSolutions.value[name];
-                const paramSetResult = paramSetSln!(options as any);
+                const paramSetResult = paramSetSln!(options as Times);
 
                 const dash = lineStylesForParamSets.value[name];
                 if (paramSetResult) {

app/static/src/app/components/sensitivity/support.ts

@@ -22,7 +22,7 @@ export const sensitivityUpdateRequiredExplanation = (reasons: SensitivityUpdateR
     return `${prefix} ${joinStringsSentence(explanation)}. ${help.suffix(multiSens)}.`;
 };
 
-export const verifyValidPlotSettingsTime = (state: AppState, commit: Commit) => {
+export const verifyValidPlotSettingsTime = (state: AppState, commit: Commit): void => {
     // update plot settings' end time to be valid before we use it
     const { plotSettings } = state.sensitivity;
     let endTime = plotSettings.time;

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

@@ -4,20 +4,71 @@
       <errors-alert></errors-alert>
       <h2>Sessions</h2>
     </div>
-    <template v-if="sessionsMetadata">
-      <template v-if="sessionsMetadata.length">
-        <div class="row fw-bold py-2">
+    <div class="row mb-3" id="no-current-session" v-if="!currentSession">
+        <span>
+          <router-link to="/" class="brand-link">
+            Start a new session
+          </router-link>
+          <span v-if="previousSessions && previousSessions.length" id="load-previous-span">
+            or load a previous session.
+          </span>
+        </span>
+    </div>
+    <div class="row mb-3" id="current-session" v-else>
+      <p>
+        <router-link to="/" class="brand-link">
+          Return to the current session
+        </router-link>
+        or
+        <a class="brand-link" :href="sessionUrl(currentSessionId)">
+          make a copy of the current session.
+        </a>
+      </p>
+      <div>
+        <span class="session-copy-link clickable brand"
+              @click="copyLink(currentSession)"
+              @mouseleave="clearLastCopied">
+          <vue-feather class="inline-icon" type="copy"></vue-feather>
+          Copy link for current session
+        </span>
+        <span class="session-copy-code clickable brand ms-2"
+              @click="copyCode(currentSession)"
+              @mouseleave="clearLastCopied">
+          <vue-feather class="inline-icon" type="copy"></vue-feather>
+          Copy code for current session
+        </span>
+        <br/>
+        <div class="session-copy-confirm small text-muted text-nowrap float-start" style="height:0.8rem;">
+          {{getCopyMsg(currentSession)}}
+        </div>
+      </div>
+    </div>
+    <div class="mb-4">
+      <label for="session-code-input" class="">Load session from code:</label>
+      <input id="session-code-input"
+             v-model="sessionCode"
+             type="text"
+             placeholder="Session code"
+             class="form-control d-inline mx-2"
+             style="width: 20rem;"/>
+      <button id="load-session-from-code"
+              class="btn btn-primary"
+              @click="loadSessionFromCode"
+              :disabled="!sessionCode">Load</button>
+    </div>
+    <h3>Previous sessions</h3>
+    <template v-if="previousSessions && previousSessions.length">
+        <div class="row fw-bold py-2" id="previous-sessions-headers">
           <div class="col-2 session-col-header">Saved</div>
           <div class="col-2 session-col-header">Label</div>
           <div class="col-2 text-center session-col-header">Edit Label</div>
           <div class="col-1 text-center session-col-header">Load</div>
           <div class="col-1 text-center session-col-header">Delete</div>
           <div class="col-4 text-center session-col-header">Shareable Link</div>
         </div>
-        <div class="row py-2" v-for="session in sessionsMetadata" :key="session.id">
+        <div class="row py-2 previous-session-row" v-for="session in previousSessions" :key="session.id">
           <div class="col-2 session-col-value session-time">
             {{formatDateTime(session.time)}}
-            <div v-if="isCurrentSession(session.id)" class="small text-muted">(current session)</div>
           </div>
           <div class="col-2 session-col-value session-label" :class="session.label ? '' : 'text-muted'">
             {{session.label || "--no label--"}}
@@ -28,16 +79,12 @@
                          @click="editSessionLabel(session.id, session.label)"></vue-feather>
           </div>
           <div class="col-1 text-center session-col-value session-load">
-            <router-link v-if="isCurrentSession(session.id)" to="/" title="Return to session">
-              <vue-feather class="inline-icon brand" type="home"></vue-feather>
-            </router-link>
             <a class="ms-2" :href="sessionUrl(session.id)" title="Load as new session">
               <vue-feather class="inline-icon brand" type="upload"></vue-feather>
             </a>
           </div>
           <div class="col-1 text-center session-col-value session-delete">
-            <vue-feather v-if="!isCurrentSession(session.id)"
-                         class="inline-icon brand clickable"
+            <vue-feather class="inline-icon brand clickable"
                          type="trash-2"
                          @click="confirmDeleteSession(session.id)"></vue-feather>
           </div>
@@ -58,14 +105,11 @@
               </div>
           </div>
         </div>
-      </template>
-      <div id="empty-sessions" v-else>
-        {{ messages.noSavedYet }}
-        <router-link class="wodin-link" to="/">{{ messages.loadApplication.link }}</router-link>
-        {{ messages.loadApplication.suffix }}
-      </div>
     </template>
-    <div id="loading-sessions" v-else>
+    <p v-else id="previous-sessions-placeholder">
+      Saved sessions will appear here.
+    </p>
+    <div id="loading-sessions" v-if="!previousSessions">
       {{ messages.loading }}
     </div>
     <edit-session-label id="page-edit-session-label"
@@ -112,6 +156,7 @@ export default defineComponent({
     setup() {
         const store = useStore();
         const namespace = "sessions";
+        const sessionCode = ref("");
 
         const sessionsMetadata = computed(() => store.state.sessions.sessionsMetadata);
         const baseUrl = computed(() => store.state.baseUrl);
@@ -135,8 +180,16 @@ export default defineComponent({
         const appUrl = computed(() => `${baseUrl.value}/${appsPath.value}/${appName.value}/`);
 
         const sessionUrl = (sessionId: string) => `${appUrl.value}?sessionId=${sessionId}`;
+
         const isCurrentSession = (sessionId: string) => sessionId === currentSessionId.value;
 
+        const previousSessions = computed(() => {
+            return sessionsMetadata.value?.filter((s: SessionMetadata) => !isCurrentSession(s.id));
+        });
+        const currentSession = computed(() => {
+            return sessionsMetadata.value?.find((s: SessionMetadata) => isCurrentSession(s.id));
+        });
+
         const toggleEditSessionLabelOpen = (open: boolean) => {
             editSessionLabelOpen.value = open;
         };
@@ -167,10 +220,14 @@ export default defineComponent({
             lastCopyMsg.value = `Copied: ${text}`;
         };
 
+        const getShareSessionLink = (friendlyId: string) => {
+            return `${appUrl.value}?share=${friendlyId}`;
+        };
+
         const copyLink = async (session: SessionMetadata) => {
             const friendlyId = await ensureFriendlyId(session);
             if (friendlyId) {
-                const link = `${appUrl.value}?share=${friendlyId}`;
+                const link = getShareSessionLink(friendlyId);
                 copyText(link);
             }
         };
@@ -204,17 +261,23 @@ export default defineComponent({
             store.dispatch(`${namespace}/${SessionsAction.DeleteSession}`, sessionIdToDelete.value);
         };
 
+        const loadSessionFromCode = () => {
+            const link = getShareSessionLink(sessionCode.value);
+            window.location.assign(link);
+        };
+
         onMounted(() => {
             store.dispatch(`${namespace}/${SessionsAction.GetSessions}`);
         });
 
         const messages = userMessages.sessions;
 
         return {
-            sessionsMetadata,
+            previousSessions,
+            currentSession,
             formatDateTime,
             sessionUrl,
-            isCurrentSession,
+            currentSessionId,
             editSessionLabelOpen,
             selectedSessionId,
             selectedSessionLabel,
@@ -230,6 +293,8 @@ export default defineComponent({
             confirmDeleteSession,
             toggleConfirmDeleteSessionOpen,
             deleteSession,
+            sessionCode,
+            loadSessionFromCode,
             messages
         };
     }

app/static/src/app/directives/help.ts

@@ -11,13 +11,13 @@ const getHelpBinding = (binding: DirectiveBinding<string>) => {
 };
 
 export default {
-    mounted(el: HTMLElement, binding: DirectiveBinding<string>) {
+    mounted(el: HTMLElement, binding: DirectiveBinding<string>): void {
         tooltip.mounted(el, getHelpBinding(binding));
     },
-    beforeUpdate(el: HTMLElement, binding: DirectiveBinding<string>) {
+    beforeUpdate(el: HTMLElement, binding: DirectiveBinding<string>): void {
         tooltip.beforeUpdate(el, getHelpBinding(binding));
     },
-    beforeUnmount(el: HTMLElement) {
+    beforeUnmount(el: HTMLElement): void {
         tooltip.beforeUnmount(el);
     }
 };