From a572a340a86dbd5f8683b313805f12d7b7a264b1 Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Thu, 2 May 2019 12:34:42 +0200
Subject: [PATCH 01/23] chore: add design component

---
 src/components/Design.vue | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 src/components/Design.vue

diff --git a/src/components/Design.vue b/src/components/Design.vue
new file mode 100644
index 00000000..a7ec9af9
--- /dev/null
+++ b/src/components/Design.vue
@@ -0,0 +1,9 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "Design"
+};
+</script>

From 1eb0c101845716f17aea770bc954276a54fc8252 Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Thu, 2 May 2019 18:00:05 +0200
Subject: [PATCH 02/23] feat: flesh out submission form

---
 src/components/Design.vue | 36 +++++++++++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/Design.vue b/src/components/Design.vue
index a7ec9af9..9dbf531c 100644
--- a/src/components/Design.vue
+++ b/src/components/Design.vue
@@ -3,7 +3,37 @@
 </template>
 
 <script lang="ts">
-export default {
-  name: "Design"
-};
+  export default {
+    name: "Design",
+    data: () => {
+      return {
+        species: "",
+        product: "",
+        project: "",
+        bigg: "",
+        rhea: "",
+        model: "",
+        maxPredictions: 3,
+        aerobic: false,
+        isSubmitted: false
+      };
+    },
+    methods: {
+      onSubmit() {
+        // trigger jobs polling
+        this.$router.push({ name: "jobs" });
+      }
+    },
+    validations: {},
+    beforeRouteLeave(to, from, next) {
+      if (!this.isSubmitted) {
+        const answer = window.confirm('Do you really want to leave? You have pending changes!')
+        if (answer) {
+          next();
+        } else {
+          next(false);
+        }
+      }
+    }
+  };
 </script>

From bd89f9831f38bdf2318600091a419379268f870e Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Fri, 3 May 2019 11:21:19 +0200
Subject: [PATCH 03/23] style: apply linting

---
 src/components/Design.vue | 64 ++++++++++++++++++++-------------------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/components/Design.vue b/src/components/Design.vue
index 9dbf531c..b37222ec 100644
--- a/src/components/Design.vue
+++ b/src/components/Design.vue
@@ -3,37 +3,39 @@
 </template>
 
 <script lang="ts">
-  export default {
-    name: "Design",
-    data: () => {
-      return {
-        species: "",
-        product: "",
-        project: "",
-        bigg: "",
-        rhea: "",
-        model: "",
-        maxPredictions: 3,
-        aerobic: false,
-        isSubmitted: false
-      };
-    },
-    methods: {
-      onSubmit() {
-        // trigger jobs polling
-        this.$router.push({ name: "jobs" });
-      }
-    },
-    validations: {},
-    beforeRouteLeave(to, from, next) {
-      if (!this.isSubmitted) {
-        const answer = window.confirm('Do you really want to leave? You have pending changes!')
-        if (answer) {
-          next();
-        } else {
-          next(false);
-        }
+export default {
+  name: "Design",
+  data: () => {
+    return {
+      species: "",
+      product: "",
+      project: "",
+      bigg: "",
+      rhea: "",
+      model: "",
+      maxPredictions: 3,
+      aerobic: false,
+      isSubmitted: false
+    };
+  },
+  methods: {
+    onSubmit() {
+      // trigger jobs polling
+      this.$router.push({ name: "jobs" });
+    }
+  },
+  validations: {},
+  beforeRouteLeave(to, from, next) {
+    if (!this.isSubmitted) {
+      const answer = window.confirm(
+        "Do you really want to leave? You have pending changes!"
+      );
+      if (answer) {
+        next();
+      } else {
+        next(false);
       }
     }
-  };
+  }
+};
 </script>

From 18882cc5c734432dce0bfd9e1fbe98496673d1b7 Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Fri, 3 May 2019 16:50:50 +0200
Subject: [PATCH 04/23] feat: create design submission form

---
 .env                      |   1 +
 src/components/Design.vue |  41 -------
 src/router.ts             |   9 +-
 src/views/Design.vue      | 232 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 241 insertions(+), 42 deletions(-)
 delete mode 100644 src/components/Design.vue
 create mode 100644 src/views/Design.vue

diff --git a/.env b/.env
index e6f1575e..7379e489 100644
--- a/.env
+++ b/.env
@@ -11,3 +11,4 @@ VUE_APP_ID_MAPPER_API=$VUE_APP_API/id-mapper/query
 VUE_APP_BIGG_API=https://api.dd-decaf.eu/bigg
 # Other configuration values
 VUE_APP_TRUSTED_URLS=https://api-staging.dd-decaf.eu,http://localhost:4200
+VUE_APP_MAX_PREDICTIONS=10
diff --git a/src/components/Design.vue b/src/components/Design.vue
deleted file mode 100644
index b37222ec..00000000
--- a/src/components/Design.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script lang="ts">
-export default {
-  name: "Design",
-  data: () => {
-    return {
-      species: "",
-      product: "",
-      project: "",
-      bigg: "",
-      rhea: "",
-      model: "",
-      maxPredictions: 3,
-      aerobic: false,
-      isSubmitted: false
-    };
-  },
-  methods: {
-    onSubmit() {
-      // trigger jobs polling
-      this.$router.push({ name: "jobs" });
-    }
-  },
-  validations: {},
-  beforeRouteLeave(to, from, next) {
-    if (!this.isSubmitted) {
-      const answer = window.confirm(
-        "Do you really want to leave? You have pending changes!"
-      );
-      if (answer) {
-        next();
-      } else {
-        next(false);
-      }
-    }
-  }
-};
-</script>
diff --git a/src/router.ts b/src/router.ts
index 21baf649..7815eae5 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -3,6 +3,7 @@ import Router, { NavigationGuard } from "vue-router";
 import store from "@/store";
 import sessionStore from "@/store/modules/session";
 import Home from "./views/Home.vue";
+import Design from "./views/Design.vue";
 import Designs from "./views/Designs.vue";
 import InteractiveMap from "./views/InteractiveMap/InteractiveMap.vue";
 import Jobs from "./views/Jobs/Jobs.vue";
@@ -10,9 +11,9 @@ import JobDetails from "./views/Jobs/JobDetails.vue";
 import Maps from "./views/Maps.vue";
 import Models from "./views/Models.vue";
 import Projects from "./views/Projects.vue";
-import NotFound from "./views/NotFound.vue";
 import PrivacyPolicy from "./views/PrivacyPolicy.vue";
 import TermsOfService from "./views/TermsOfService.vue";
+import NotFound from "./views/NotFound.vue";
 
 Vue.use(Router);
 
@@ -38,6 +39,12 @@ export default new Router({
       name: "home",
       component: Home
     },
+    {
+      path: "/design",
+      name: "design",
+      component: Design,
+      beforeEnter: authGuard
+    },
     {
       path: "/designs",
       name: "designs",
diff --git a/src/views/Design.vue b/src/views/Design.vue
new file mode 100644
index 00000000..3bb6c650
--- /dev/null
+++ b/src/views/Design.vue
@@ -0,0 +1,232 @@
+<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+  <v-container>
+    <v-card>
+      <v-card-title></v-card-title>
+      <v-card-text>
+        <v-form v-model="isValid">
+          <v-autocomplete
+            label="Project"
+            v-model="project"
+            :items="projectOptions"
+            item-text="name"
+            item-value="id"
+            :rules="projectRules"
+            clearable
+          >
+            <template v-slot:prepend-item>
+              <v-btn
+                depressed
+                @click.stop="isProjectCreationDialogVisible = true"
+              >
+                <v-icon class="mr-4">add_circle</v-icon>
+                New project
+              </v-btn>
+              <v-divider></v-divider>
+            </template>
+          </v-autocomplete>
+          <v-autocomplete
+            label="Organism"
+            v-model="organism"
+            :items="organismOptions"
+            item-text="name"
+            item-value="id"
+            :rules="organismRules"
+            clearable
+            placeholder="e.g., Escherichia coli"
+            class="font-italic"
+          >
+            <template v-slot:prepend-item>
+              <v-btn
+                depressed
+                @click.stop="isOrganismCreationDialogVisible = true"
+              >
+                <v-icon class="mr-4">add_circle</v-icon>
+                New organism
+              </v-btn>
+              <v-divider></v-divider>
+            </template>
+            <template v-slot:item="data">
+              <v-list-tile-content
+                v-text="data.item.name"
+                class="font-italic"
+              ></v-list-tile-content>
+            </template>
+          </v-autocomplete>
+          <v-autocomplete
+            label="Product"
+            v-model="product"
+            :items="productOptions"
+            item-text="name"
+            item-value="id"
+            :rules="productRules"
+            clearable
+            placeholder="e.g., ethanol"
+          >
+          </v-autocomplete>
+          <v-switch
+            v-model="isAerobic"
+            label="Aerobic conditions"
+            color="primary"
+            inverse-label
+          >
+          </v-switch>
+          <v-card>
+            <v-card-actions @click="showAdvanced = !showAdvanced" class="clickable">
+              <v-card-title>Advanced</v-card-title>
+              <v-spacer></v-spacer>
+              <v-btn icon>
+                <v-icon>{{
+                  showAdvanced ? "keyboard_arrow_down" : "keyboard_arrow_up"
+                }}</v-icon>
+              </v-btn>
+            </v-card-actions>
+            <v-slide-y-transition>
+              <v-card-text v-show="showAdvanced">
+                <v-layout column>
+                  <v-flex xs4>Select a reaction source database</v-flex>
+                  <v-checkbox
+                    v-model="bigg"
+                    label="BiGG"
+                    color="primary"
+                  ></v-checkbox>
+                  <v-checkbox
+                    v-model="rhea"
+                    label="Rhea"
+                    color="primary"
+                  ></v-checkbox>
+                </v-layout>
+                <v-autocomplete
+                  label="Model"
+                  v-model="model"
+                  :items="modelOptions"
+                  item-text="name"
+                  item-value="id"
+                  :rules="modelRules"
+                  clearable
+                >
+                  <template v-slot:prepend-item>
+                    <v-btn
+                      depressed
+                      @click.stop="isModelCreationDialogVisible = true"
+                    >
+                      <v-icon class="mr-4">add_circle</v-icon>
+                      New model
+                    </v-btn>
+                    <v-divider></v-divider>
+                  </template>
+                </v-autocomplete>
+                <v-text-field
+                  label="Maximum number of pathway predictions"
+                  v-model="maxPredictions"
+                  class="mt-0"
+                  :rules="predictionRules"
+                  type="number"
+                ></v-text-field>
+              </v-card-text>
+            </v-slide-y-transition>
+          </v-card>
+          <v-btn class="primary" :disabled="!isValid">Submit</v-btn>
+        </v-form>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import axios, { AxiosResponse } from "axios";
+import * as settings from "@/settings";
+import { OrganismItem } from "@/store/modules/organisms";
+import { ProjectItem } from "@/store/modules/projects";
+import { ModelItem } from '@/store/modules/models';
+
+export interface Product {
+  name: string;
+}
+
+type Nullable<T> = T | null;
+type RuleOutcome = string | true;
+
+export default Vue.extend({
+  name: "Design",
+  data() {
+    return {
+      isValid: false,
+      organism: <Nullable<number>> null,
+      organismRules: [v => !!v || "Organism is required"],
+      product: "",
+      productRules: [v => !!v || "Product is required"],
+      productOptions: <Array<Product>> [],
+      project: <Nullable<number>> null,
+      projectRules: [v => !!v || "Project is required"],
+      bigg: false,
+      rhea: true,
+      model: null,
+      modelRules: [v => !!v || "Model is required"],
+      modelOptions: <Array<ModelItem>> [],
+      maxPredictions: 3,
+      isAerobic: false,
+      isSubmitted: false,
+      showAdvanced: false
+    };
+  },
+  computed: {
+    projectOptions(): <Array<ProjectItem>> {
+      return this.$store.state.projects.projects;
+    },
+    // TODO (Moritz Beber): Selection of organism in future should depend on the
+    //  selected project, i.e., you can only select public organisms and
+    //  organisms within that project.
+    organismOptions(): <Array<OrganismItem>> {
+      return this.$store.state.organisms.organisms;
+    },
+    predictionRules(): Array<(v: number) => RuleOutcome> {
+      const rules: Array<(v: number) => RuleOutcome> = [];
+      let rule: (v: number) => RuleOutcome = (v: number) => {
+        return (( v > 0 ) && ( v <= process.env.VUE_APP_MAX_PREDICTIONS )) ||
+          `Must be between 0 and ${process.env.VUE_APP_MAX_PREDICTIONS}.`;
+      };
+      rules.push(rule);
+      return rules;
+    }
+  },
+  methods: {
+    onSubmit() {
+      this.isSubmitted = true;
+      this.$store.dispatch("jobs/fetchJobs");
+      this.$router.push({ name: "jobs" });
+    },
+    fetchProducts() {
+      axios
+        .get(`${settings.apis.metabolicNinja}/products`)
+        .then((response: AxiosResponse<Product[]>) => {
+          this.productOptions = response.data;
+        })
+        .catch(error => {
+          this.$store.commit("setFetchError", error, { root: true });
+        });
+    }
+  },
+  created() {
+    this.fetchProducts();
+  },
+  beforeRouteLeave(to, from, next) {
+    if (!this.isSubmitted) {
+      const answer = window.confirm(
+        "Do you really want to leave? You have pending changes!"
+      );
+      if (answer) {
+        next();
+      } else {
+        next(false);
+      }
+    }
+  }
+});
+</script>
+
+<style scoped>
+.clickable {
+  cursor: pointer;
+}
+</style>

From a071526513f18ac3cc0df370244078230fb572c3 Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Tue, 7 May 2019 14:09:53 +0200
Subject: [PATCH 05/23] chore: type annotations

---
 src/views/Design.vue | 76 ++++++++++++++++++++++++++++----------------
 1 file changed, 49 insertions(+), 27 deletions(-)

diff --git a/src/views/Design.vue b/src/views/Design.vue
index 3bb6c650..c3b73665 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -71,7 +71,10 @@
           >
           </v-switch>
           <v-card>
-            <v-card-actions @click="showAdvanced = !showAdvanced" class="clickable">
+            <v-card-actions
+              @click="showAdvanced = !showAdvanced"
+              class="clickable"
+            >
               <v-card-title>Advanced</v-card-title>
               <v-spacer></v-spacer>
               <v-btn icon>
@@ -134,36 +137,44 @@
 
 <script lang="ts">
 import Vue from "vue";
+import { Route, RawLocation } from "vue-router";
 import axios, { AxiosResponse } from "axios";
 import * as settings from "@/settings";
 import { OrganismItem } from "@/store/modules/organisms";
 import { ProjectItem } from "@/store/modules/projects";
-import { ModelItem } from '@/store/modules/models';
+import { ModelItem } from "@/store/modules/models";
 
-export interface Product {
+interface Product {
   name: string;
 }
 
 type Nullable<T> = T | null;
 type RuleOutcome = string | true;
+type RuleHandler = (any) => RuleOutcome;
+type NextHandler = (to?: RawLocation | false | Function | void) => void;
 
 export default Vue.extend({
   name: "Design",
   data() {
     return {
       isValid: false,
-      organism: <Nullable<number>> null,
-      organismRules: [v => !!v || "Organism is required"],
-      product: "",
-      productRules: [v => !!v || "Product is required"],
-      productOptions: <Array<Product>> [],
-      project: <Nullable<number>> null,
-      projectRules: [v => !!v || "Project is required"],
+      organism: null as Nullable<OrganismItem>,
+      organismRules: [v => !!v || "Organism is required"] as ReadonlyArray<
+        RuleHandler
+      >,
+      product: null as Nullable<Product>,
+      productRules: [v => !!v || "Product is required"] as ReadonlyArray<
+        RuleHandler
+      >,
+      productOptions: [] as Product[],
+      project: null as Nullable<ProjectItem>,
+      projectRules: [v => !!v || "Project is required"] as ReadonlyArray<
+        RuleHandler
+      >,
       bigg: false,
       rhea: true,
-      model: null,
-      modelRules: [v => !!v || "Model is required"],
-      modelOptions: <Array<ModelItem>> [],
+      model: null as Nullable<ModelItem>,
+      modelOptions: [] as ModelItem[],
       maxPredictions: 3,
       isAerobic: false,
       isSubmitted: false,
@@ -171,38 +182,49 @@ export default Vue.extend({
     };
   },
   computed: {
-    projectOptions(): <Array<ProjectItem>> {
+    projectOptions(): ProjectItem[] {
       return this.$store.state.projects.projects;
     },
     // TODO (Moritz Beber): Selection of organism in future should depend on the
     //  selected project, i.e., you can only select public organisms and
     //  organisms within that project.
-    organismOptions(): <Array<OrganismItem>> {
+    organismOptions(): OrganismItem[] {
       return this.$store.state.organisms.organisms;
     },
-    predictionRules(): Array<(v: number) => RuleOutcome> {
-      const rules: Array<(v: number) => RuleOutcome> = [];
-      let rule: (v: number) => RuleOutcome = (v: number) => {
-        return (( v > 0 ) && ( v <= process.env.VUE_APP_MAX_PREDICTIONS )) ||
-          `Must be between 0 and ${process.env.VUE_APP_MAX_PREDICTIONS}.`;
-      };
-      rules.push(rule);
+    modelRules(): RuleHandler[] {
+      const rules: RuleHandler[] = [];
+      rules.push(
+        () =>
+          (this.project && this.organism) ||
+          "Please first select a project and organism"
+      );
+      rules.push(v => !!v || "Model is required");
+      return rules;
+    },
+    predictionRules(): RuleHandler[] {
+      const rules: RuleHandler[] = [];
+      rules.push((v: number) => {
+        return (
+          (v > 0 && v <= process.env.VUE_APP_MAX_PREDICTIONS) ||
+          `Must be between 0 and ${process.env.VUE_APP_MAX_PREDICTIONS}.`
+        );
+      });
       return rules;
     }
   },
   methods: {
-    onSubmit() {
+    onSubmit(): void {
       this.isSubmitted = true;
       this.$store.dispatch("jobs/fetchJobs");
       this.$router.push({ name: "jobs" });
     },
-    fetchProducts() {
+    fetchProducts(): void {
       axios
         .get(`${settings.apis.metabolicNinja}/products`)
         .then((response: AxiosResponse<Product[]>) => {
           this.productOptions = response.data;
         })
-        .catch(error => {
+        .catch((error: Error) => {
           this.$store.commit("setFetchError", error, { root: true });
         });
     }
@@ -210,10 +232,10 @@ export default Vue.extend({
   created() {
     this.fetchProducts();
   },
-  beforeRouteLeave(to, from, next) {
+  beforeRouteLeave(to: Route, from: Route, next: NextHandler) {
     if (!this.isSubmitted) {
       const answer = window.confirm(
-        "Do you really want to leave? You have pending changes!"
+        "Do you really want to leave? You have pending changes."
       );
       if (answer) {
         next();

From abc3e43e8215afeb62efb2e2c1a6dc7455ea253f Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Tue, 7 May 2019 19:42:12 +0200
Subject: [PATCH 06/23] chore: add dummy mapping

---
 src/store/modules/models.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/store/modules/models.ts b/src/store/modules/models.ts
index ed9efafe..c09731c9 100644
--- a/src/store/modules/models.ts
+++ b/src/store/modules/models.ts
@@ -13,6 +13,10 @@ export interface ModelItem {
   model_serialized?: object;
 }
 
+export const organism2ModelMapping = {
+  "1": 1
+};
+
 export default {
   namespaced: true,
   state: {

From 0f864a7898e2421755c91233a83f5f8ae8ccf395 Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Tue, 7 May 2019 19:43:31 +0200
Subject: [PATCH 07/23] refactor: complete selection and creation

---
 src/views/Design.vue | 119 +++++++++++++++++++++++++++++++++----------
 1 file changed, 91 insertions(+), 28 deletions(-)

diff --git a/src/views/Design.vue b/src/views/Design.vue
index c3b73665..5552d7be 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -1,15 +1,29 @@
 <template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
   <v-container>
+    <NewProject
+      v-model="isProjectCreationDialogVisible"
+      @return-object="onNewProject"
+    />
+    <NewOrganism
+      v-model="isOrganismCreationDialogVisible"
+      @return-object="onNewOrganism"
+    />
+    <NewModel
+      v-model="isModelCreationDialogVisible"
+      @return-object="onNewModel"
+    />
     <v-card>
       <v-card-title></v-card-title>
       <v-card-text>
         <v-form v-model="isValid">
           <v-autocomplete
+            name="project"
             label="Project"
             v-model="project"
             :items="projectOptions"
             item-text="name"
             item-value="id"
+            return-object
             :rules="projectRules"
             clearable
           >
@@ -25,11 +39,13 @@
             </template>
           </v-autocomplete>
           <v-autocomplete
+            name="organism"
             label="Organism"
             v-model="organism"
             :items="organismOptions"
             item-text="name"
             item-value="id"
+            return-object
             :rules="organismRules"
             clearable
             placeholder="e.g., Escherichia coli"
@@ -53,11 +69,13 @@
             </template>
           </v-autocomplete>
           <v-autocomplete
+            name="product"
             label="Product"
             v-model="product"
             :items="productOptions"
             item-text="name"
             item-value="id"
+            return-object
             :rules="productRules"
             clearable
             placeholder="e.g., ethanol"
@@ -104,7 +122,8 @@
                   :items="modelOptions"
                   item-text="name"
                   item-value="id"
-                  :rules="modelRules"
+                  return-object
+                  :rules="modelRules()"
                   clearable
                 >
                   <template v-slot:prepend-item>
@@ -128,7 +147,8 @@
               </v-card-text>
             </v-slide-y-transition>
           </v-card>
-          <v-btn class="primary" :disabled="!isValid">Submit</v-btn>
+          <v-btn class="primary" :disabled="!isValid" @click="onSubmit">Submit
+          </v-btn>
         </v-form>
       </v-card-text>
     </v-card>
@@ -142,43 +162,54 @@ import axios, { AxiosResponse } from "axios";
 import * as settings from "@/settings";
 import { OrganismItem } from "@/store/modules/organisms";
 import { ProjectItem } from "@/store/modules/projects";
-import { ModelItem } from "@/store/modules/models";
+import { ModelItem, organism2ModelMapping } from "@/store/modules/models";
+import NewProject from "./shared/NewProject.vue";
+import NewOrganism from "./shared/NewOrganism.vue";
+import NewModel from "./shared/NewModel.vue";
 
-interface Product {
+interface ProductItem {
   name: string;
 }
 
-type Nullable<T> = T | null;
+type Nullable<T> = T | null | undefined;
 type RuleOutcome = string | true;
 type RuleHandler = (any) => RuleOutcome;
 type NextHandler = (to?: RawLocation | false | Function | void) => void;
 
 export default Vue.extend({
   name: "Design",
+  components: {
+    NewProject,
+    NewOrganism,
+    NewModel
+  },
   data() {
     return {
       isValid: false,
+      project: null as Nullable<ProjectItem>,
+      projectRules: [v => !!v || "Project is required"] as ReadonlyArray<
+        RuleHandler
+      >,
+      isProjectCreationDialogVisible: false,
       organism: null as Nullable<OrganismItem>,
       organismRules: [v => !!v || "Organism is required"] as ReadonlyArray<
         RuleHandler
       >,
-      product: null as Nullable<Product>,
+      isOrganismCreationDialogVisible: false,
+      product: null as Nullable<ProductItem>,
       productRules: [v => !!v || "Product is required"] as ReadonlyArray<
         RuleHandler
       >,
-      productOptions: [] as Product[],
-      project: null as Nullable<ProjectItem>,
-      projectRules: [v => !!v || "Project is required"] as ReadonlyArray<
-        RuleHandler
-      >,
+      productOptions: [] as ProductItem[],
+      isAerobic: false,
+      showAdvanced: false,
       bigg: false,
       rhea: true,
       model: null as Nullable<ModelItem>,
       modelOptions: [] as ModelItem[],
+      isModelCreationDialogVisible: false,
       maxPredictions: 3,
-      isAerobic: false,
-      isSubmitted: false,
-      showAdvanced: false
+      isSubmitted: false
     };
   },
   computed: {
@@ -191,15 +222,8 @@ export default Vue.extend({
     organismOptions(): OrganismItem[] {
       return this.$store.state.organisms.organisms;
     },
-    modelRules(): RuleHandler[] {
-      const rules: RuleHandler[] = [];
-      rules.push(
-        () =>
-          (this.project && this.organism) ||
-          "Please first select a project and organism"
-      );
-      rules.push(v => !!v || "Model is required");
-      return rules;
+    allModels(): ModelItem[] {
+      return this.$store.state.models.models;
     },
     predictionRules(): RuleHandler[] {
       const rules: RuleHandler[] = [];
@@ -212,21 +236,60 @@ export default Vue.extend({
       return rules;
     }
   },
+  watch: {
+    project(project: ProjectItem): void {
+      this.selectModels(project, this.organism);
+    },
+    organism(organism: OrganismItem): void {
+      this.selectModels(this.project, organism);
+    }
+  },
   methods: {
-    onSubmit(): void {
-      this.isSubmitted = true;
-      this.$store.dispatch("jobs/fetchJobs");
-      this.$router.push({ name: "jobs" });
+    onNewProject(project: ProjectItem): void {
+      this.project = project;
+    },
+    onNewOrganism(organism: OrganismItem): void {
+      this.organism = organism;
     },
     fetchProducts(): void {
       axios
         .get(`${settings.apis.metabolicNinja}/products`)
-        .then((response: AxiosResponse<Product[]>) => {
+        .then((response: AxiosResponse<ProductItem[]>) => {
           this.productOptions = response.data;
         })
         .catch((error: Error) => {
           this.$store.commit("setFetchError", error, { root: true });
         });
+    },
+    selectModels(project: ProjectItem, organism: OrganismItem): void {
+      if (project == null || organism == null) {
+        this.modelOptions = [];
+        return;
+      }
+      this.modelOptions = this.allModels.filter(
+        (model: ModelItem) =>
+          model.organism_id === this.organism.id &&
+          (model.project_id === null || model.project_id === this.project.id)
+      );
+      this.model = organism2ModelMapping[this.organism.id];
+    },
+    modelRules(): RuleHandler[] {
+      const rules: RuleHandler[] = [];
+      rules.push(
+        () =>
+          (this.project != null && this.organism != null) ||
+          "Please first select a project and organism"
+      );
+      rules.push(v => !!v || "Model is required");
+      return rules;
+    },
+    onNewModel(model: ModelItem): void {
+      this.model = model;
+    },
+    onSubmit(): void {
+      this.isSubmitted = true;
+      this.$store.dispatch("jobs/fetchJobs");
+      this.$router.push({ name: "jobs" });
     }
   },
   created() {

From fa75fa42455fe8c88abbfe3e478b5a2c54db3563 Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Tue, 7 May 2019 20:06:50 +0200
Subject: [PATCH 08/23] feat: complete submission

---
 src/views/Design.vue | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/views/Design.vue b/src/views/Design.vue
index 5552d7be..a57e275f 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -147,11 +147,16 @@
               </v-card-text>
             </v-slide-y-transition>
           </v-card>
-          <v-btn class="primary" :disabled="!isValid" @click="onSubmit">Submit
+          <v-btn class="primary" :disabled="!isValid" @click="onSubmit"
+            >Submit
           </v-btn>
         </v-form>
       </v-card-text>
     </v-card>
+    <v-snackbar color="error" v-model="hasSubmissionError" :timeout="8000">
+      Sorry, submitting your design job failed. Please try again in a few
+      seconds or contact us if the problem persists.
+    </v-snackbar>
   </v-container>
 </template>
 
@@ -209,7 +214,8 @@ export default Vue.extend({
       modelOptions: [] as ModelItem[],
       isModelCreationDialogVisible: false,
       maxPredictions: 3,
-      isSubmitted: false
+      isSubmitted: false,
+      hasSubmissionError: false
     };
   },
   computed: {
@@ -288,8 +294,24 @@ export default Vue.extend({
     },
     onSubmit(): void {
       this.isSubmitted = true;
-      this.$store.dispatch("jobs/fetchJobs");
-      this.$router.push({ name: "jobs" });
+      axios
+        .post(`${settings.apis.metabolicNinja}/predictions`, {
+          aerobic: this.isAerobic,
+          bigg: this.bigg,
+          max_predictions: this.maxPredictions,
+          model_id: this.model.id,
+          organism_id: this.organism.id,
+          product_name: this.product.name,
+          project_id: this.project.id,
+          rhea: this.rhea
+        })
+        .then((response: AxiosResponse) => {
+          this.$store.dispatch("jobs/fetchJobs");
+          this.$router.push({ name: "jobs" });
+        })
+        .catch((error: Error) => {
+          this.hasSubmissionError = true;
+        });
     }
   },
   created() {
@@ -305,6 +327,8 @@ export default Vue.extend({
       } else {
         next(false);
       }
+    } else {
+      next();
     }
   }
 });

From 9340e383d7844a3456ffdf3453cdbca97de91e0f Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Tue, 14 May 2019 12:57:15 +0200
Subject: [PATCH 09/23] chore: create separate module for general types

---
 src/types/general.ts |  9 +++++++++
 src/views/Design.vue | 10 +++-------
 2 files changed, 12 insertions(+), 7 deletions(-)
 create mode 100644 src/types/general.ts

diff --git a/src/types/general.ts b/src/types/general.ts
new file mode 100644
index 00000000..2fe44c0c
--- /dev/null
+++ b/src/types/general.ts
@@ -0,0 +1,9 @@
+import { RawLocation } from "vue-router";
+
+export type Nullable<T> = T | null | undefined;
+// Vuetify does not seem to export types for form rules.
+export type RuleOutcome = string | true;
+export type RuleHandler = (any) => RuleOutcome;
+// FIXME (Moritz Beber): In future we would like to import this from vue-router.
+// See https://github.com/vuejs/vue-router/issues/2758
+export type NextHandler = (to?: RawLocation | false | Function | void) => void;
diff --git a/src/views/Design.vue b/src/views/Design.vue
index a57e275f..9fb39274 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -162,25 +162,21 @@
 
 <script lang="ts">
 import Vue from "vue";
-import { Route, RawLocation } from "vue-router";
+import { Route } from "vue-router";
 import axios, { AxiosResponse } from "axios";
-import * as settings from "@/settings";
+import * as settings from "@/utils/settings";
 import { OrganismItem } from "@/store/modules/organisms";
 import { ProjectItem } from "@/store/modules/projects";
 import { ModelItem, organism2ModelMapping } from "@/store/modules/models";
 import NewProject from "./shared/NewProject.vue";
 import NewOrganism from "./shared/NewOrganism.vue";
 import NewModel from "./shared/NewModel.vue";
+import { Nullable, RuleHandler, NextHandler } from "@/types/general";
 
 interface ProductItem {
   name: string;
 }
 
-type Nullable<T> = T | null | undefined;
-type RuleOutcome = string | true;
-type RuleHandler = (any) => RuleOutcome;
-type NextHandler = (to?: RawLocation | false | Function | void) => void;
-
 export default Vue.extend({
   name: "Design",
   components: {

From 146a3f1318b5ffa325e330189e10224eb3daa07d Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Tue, 14 May 2019 12:58:04 +0200
Subject: [PATCH 10/23] chore: remove XML declaration

---
 src/views/Design.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Design.vue b/src/views/Design.vue
index 9fb39274..1ce03c16 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -1,4 +1,4 @@
-<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+<template>
   <v-container>
     <NewProject
       v-model="isProjectCreationDialogVisible"

From e17d7b5e3f2980667654cc97606857e9272b011e Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Tue, 14 May 2019 13:08:59 +0200
Subject: [PATCH 11/23] chore: remove environment variable

---
 .env                 |  1 -
 src/views/Design.vue | 13 +++----------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/.env b/.env
index 7379e489..e6f1575e 100644
--- a/.env
+++ b/.env
@@ -11,4 +11,3 @@ VUE_APP_ID_MAPPER_API=$VUE_APP_API/id-mapper/query
 VUE_APP_BIGG_API=https://api.dd-decaf.eu/bigg
 # Other configuration values
 VUE_APP_TRUSTED_URLS=https://api-staging.dd-decaf.eu,http://localhost:4200
-VUE_APP_MAX_PREDICTIONS=10
diff --git a/src/views/Design.vue b/src/views/Design.vue
index 1ce03c16..a12c31e5 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -210,6 +210,9 @@ export default Vue.extend({
       modelOptions: [] as ModelItem[],
       isModelCreationDialogVisible: false,
       maxPredictions: 3,
+      predictionRules: [
+        (v: number) => (v > 0 && v <= 10) || "Must be between 1 and 10."
+      ],
       isSubmitted: false,
       hasSubmissionError: false
     };
@@ -226,16 +229,6 @@ export default Vue.extend({
     },
     allModels(): ModelItem[] {
       return this.$store.state.models.models;
-    },
-    predictionRules(): RuleHandler[] {
-      const rules: RuleHandler[] = [];
-      rules.push((v: number) => {
-        return (
-          (v > 0 && v <= process.env.VUE_APP_MAX_PREDICTIONS) ||
-          `Must be between 0 and ${process.env.VUE_APP_MAX_PREDICTIONS}.`
-        );
-      });
-      return rules;
     }
   },
   watch: {

From f3dee0b86c4d89c6ad89d3ccbb7ff475d69f5006 Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Tue, 14 May 2019 13:22:21 +0200
Subject: [PATCH 12/23] chore: fix import paths

---
 src/views/Design.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/Design.vue b/src/views/Design.vue
index a12c31e5..2e2277ab 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -168,9 +168,9 @@ import * as settings from "@/utils/settings";
 import { OrganismItem } from "@/store/modules/organisms";
 import { ProjectItem } from "@/store/modules/projects";
 import { ModelItem, organism2ModelMapping } from "@/store/modules/models";
-import NewProject from "./shared/NewProject.vue";
-import NewOrganism from "./shared/NewOrganism.vue";
-import NewModel from "./shared/NewModel.vue";
+import NewProject from "@/components/NewProject.vue";
+import NewOrganism from "@/components/NewOrganism.vue";
+import NewModel from "@/components/NewModel.vue";
 import { Nullable, RuleHandler, NextHandler } from "@/types/general";
 
 interface ProductItem {

From 4aac07c3f4d5c5a882f7ca4f2f719fce6ddbb527 Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Tue, 14 May 2019 14:00:49 +0200
Subject: [PATCH 13/23] chore: only make selection italic

---
 src/views/Design.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/Design.vue b/src/views/Design.vue
index 2e2277ab..6e57fcfa 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -49,7 +49,6 @@
             :rules="organismRules"
             clearable
             placeholder="e.g., Escherichia coli"
-            class="font-italic"
           >
             <template v-slot:prepend-item>
               <v-btn
@@ -61,6 +60,9 @@
               </v-btn>
               <v-divider></v-divider>
             </template>
+            <template v-slot:selection="{item}">
+              <span v-text="item.name" class="font-italic"></span>
+            </template>
             <template v-slot:item="data">
               <v-list-tile-content
                 v-text="data.item.name"

From 8d88f2bd69517de2f006ecfb9683a175e4c630c0 Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Tue, 14 May 2019 14:08:02 +0200
Subject: [PATCH 14/23] chore: introduce destructured slots

---
 src/views/Design.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/Design.vue b/src/views/Design.vue
index 6e57fcfa..43526e07 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -60,12 +60,12 @@
               </v-btn>
               <v-divider></v-divider>
             </template>
-            <template v-slot:selection="{item}">
-              <span v-text="item.name" class="font-italic"></span>
+            <template v-slot:selection="{ item: organism }">
+              <span v-text="organism.name" class="font-italic"></span>
             </template>
-            <template v-slot:item="data">
+            <template v-slot:item="{ item: organism }">
               <v-list-tile-content
-                v-text="data.item.name"
+                v-text="organism.name"
                 class="font-italic"
               ></v-list-tile-content>
             </template>

From b08857945524332211ec093c227514fc1131cd36 Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Tue, 14 May 2019 14:14:17 +0200
Subject: [PATCH 15/23] feat: provide visual feedback on loading

---
 src/views/Design.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/views/Design.vue b/src/views/Design.vue
index 43526e07..916ac9f5 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -79,6 +79,7 @@
             item-value="id"
             return-object
             :rules="productRules"
+            :loading="isLoadingProducts"
             clearable
             placeholder="e.g., ethanol"
           >
@@ -204,6 +205,7 @@ export default Vue.extend({
         RuleHandler
       >,
       productOptions: [] as ProductItem[],
+      isLoadingProducts: true,
       isAerobic: false,
       showAdvanced: false,
       bigg: false,
@@ -256,6 +258,9 @@ export default Vue.extend({
         })
         .catch((error: Error) => {
           this.$store.commit("setFetchError", error, { root: true });
+        })
+        .finally(() => {
+          this.isLoadingProducts = false;
         });
     },
     selectModels(project: ProjectItem, organism: OrganismItem): void {

From 6e1f4d96577461685f49bd736818ee8b2c41c093 Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Tue, 14 May 2019 14:16:31 +0200
Subject: [PATCH 16/23] fix: correct expansion icon

---
 src/views/Design.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Design.vue b/src/views/Design.vue
index 916ac9f5..d397f4e9 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -100,7 +100,7 @@
               <v-spacer></v-spacer>
               <v-btn icon>
                 <v-icon>{{
-                  showAdvanced ? "keyboard_arrow_down" : "keyboard_arrow_up"
+                  showAdvanced ? "expand_less" : "expand_more"
                 }}</v-icon>
               </v-btn>
             </v-card-actions>

From a6ba45b33b3f946144c53710d2a337788ce45b17 Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Tue, 14 May 2019 15:27:09 +0200
Subject: [PATCH 17/23] refactor: change form filling and validation

---
 src/store/modules/models.ts |  2 +-
 src/views/Design.vue        | 76 ++++++++++++++++++++-----------------
 2 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/src/store/modules/models.ts b/src/store/modules/models.ts
index c09731c9..5690c35a 100644
--- a/src/store/modules/models.ts
+++ b/src/store/modules/models.ts
@@ -14,7 +14,7 @@ export interface ModelItem {
 }
 
 export const organism2ModelMapping = {
-  "1": 1
+  "2": 10
 };
 
 export default {
diff --git a/src/views/Design.vue b/src/views/Design.vue
index d397f4e9..fc069a88 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -126,8 +126,7 @@
                   item-text="name"
                   item-value="id"
                   return-object
-                  :rules="modelRules()"
-                  clearable
+                  :rules="modelRules"
                 >
                   <template v-slot:prepend-item>
                     <v-btn
@@ -174,7 +173,12 @@ import { ModelItem, organism2ModelMapping } from "@/store/modules/models";
 import NewProject from "@/components/NewProject.vue";
 import NewOrganism from "@/components/NewOrganism.vue";
 import NewModel from "@/components/NewModel.vue";
-import { Nullable, RuleHandler, NextHandler } from "@/types/general";
+import {
+  Nullable,
+  RuleHandler,
+  NextHandler,
+  RuleOutcome
+} from "@/types/general";
 
 interface ProductItem {
   name: string;
@@ -211,11 +215,10 @@ export default Vue.extend({
       bigg: false,
       rhea: true,
       model: null as Nullable<ModelItem>,
-      modelOptions: [] as ModelItem[],
       isModelCreationDialogVisible: false,
       maxPredictions: 3,
       predictionRules: [
-        (v: number) => (v > 0 && v <= 10) || "Must be between 1 and 10."
+        (v: number) => (v > 0 && v <= 10) || "Must be between 1 and 10"
       ],
       isSubmitted: false,
       hasSubmissionError: false
@@ -233,14 +236,32 @@ export default Vue.extend({
     },
     allModels(): ModelItem[] {
       return this.$store.state.models.models;
+    },
+    modelOkay() {
+      return !!this.project && !!this.organism;
+    },
+    modelOptions(): ModelItem[] {
+      if (this.modelOkay) {
+        return this.allModels.filter(
+          (model: ModelItem) =>
+            model.organism_id === this.organism.id &&
+            (model.project_id === null || model.project_id === this.project.id)
+        );
+      } else {
+        return [];
+      }
+    },
+    modelRules(): RuleHandler[] {
+      return [this.modelOkayRule, v => !!v || "Model is required"];
     }
   },
   watch: {
-    project(project: ProjectItem): void {
-      this.selectModels(project, this.organism);
-    },
-    organism(organism: OrganismItem): void {
-      this.selectModels(this.project, organism);
+    modelOkay(isOkay: boolean): void {
+      if (isOkay) {
+        this.model = organism2ModelMapping[this.organism.id];
+      } else {
+        this.model = undefined;
+      }
     }
   },
   methods: {
@@ -250,6 +271,16 @@ export default Vue.extend({
     onNewOrganism(organism: OrganismItem): void {
       this.organism = organism;
     },
+    onNewModel(model: ModelItem): void {
+      this.model = model;
+    },
+    modelOkayRule(): RuleOutcome {
+      if (this.modelOkay) {
+        return true;
+      } else {
+        return "Please first select a project and organism";
+      }
+    },
     fetchProducts(): void {
       axios
         .get(`${settings.apis.metabolicNinja}/products`)
@@ -263,31 +294,6 @@ export default Vue.extend({
           this.isLoadingProducts = false;
         });
     },
-    selectModels(project: ProjectItem, organism: OrganismItem): void {
-      if (project == null || organism == null) {
-        this.modelOptions = [];
-        return;
-      }
-      this.modelOptions = this.allModels.filter(
-        (model: ModelItem) =>
-          model.organism_id === this.organism.id &&
-          (model.project_id === null || model.project_id === this.project.id)
-      );
-      this.model = organism2ModelMapping[this.organism.id];
-    },
-    modelRules(): RuleHandler[] {
-      const rules: RuleHandler[] = [];
-      rules.push(
-        () =>
-          (this.project != null && this.organism != null) ||
-          "Please first select a project and organism"
-      );
-      rules.push(v => !!v || "Model is required");
-      return rules;
-    },
-    onNewModel(model: ModelItem): void {
-      this.model = model;
-    },
     onSubmit(): void {
       this.isSubmitted = true;
       axios

From 0c636d4a72f4935d0d58ffe29840e890843710ee Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Tue, 14 May 2019 15:41:14 +0200
Subject: [PATCH 18/23] refactor: only ask confirmation upon edits

---
 src/views/Design.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/views/Design.vue b/src/views/Design.vue
index fc069a88..66872dfd 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -253,6 +253,11 @@ export default Vue.extend({
     },
     modelRules(): RuleHandler[] {
       return [this.modelOkayRule, v => !!v || "Model is required"];
+    },
+    hasEdits(): boolean {
+      return (
+        !!this.project || !!this.organism || !!this.product || !!this.model
+      );
     }
   },
   watch: {
@@ -320,7 +325,7 @@ export default Vue.extend({
     this.fetchProducts();
   },
   beforeRouteLeave(to: Route, from: Route, next: NextHandler) {
-    if (!this.isSubmitted) {
+    if (!this.isSubmitted && this.hasEdits) {
       const answer = window.confirm(
         "Do you really want to leave? You have pending changes."
       );

From cedc5e86d99be05ee649b8024ab972bc2c2f640e Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Tue, 14 May 2019 15:59:32 +0200
Subject: [PATCH 19/23] refactor: change typing definitions

---
 src/router.ts        |  6 ++++-
 src/types/forms.d.ts |  3 +++
 src/types/general.ts |  9 -------
 src/views/Design.vue | 58 +++++++++++++++++++++++++++-----------------
 4 files changed, 44 insertions(+), 32 deletions(-)
 create mode 100644 src/types/forms.d.ts
 delete mode 100644 src/types/general.ts

diff --git a/src/router.ts b/src/router.ts
index 7815eae5..bf7ee404 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,5 +1,5 @@
 import Vue from "vue";
-import Router, { NavigationGuard } from "vue-router";
+import Router, { NavigationGuard, RawLocation } from "vue-router";
 import store from "@/store";
 import sessionStore from "@/store/modules/session";
 import Home from "./views/Home.vue";
@@ -15,6 +15,10 @@ import PrivacyPolicy from "./views/PrivacyPolicy.vue";
 import TermsOfService from "./views/TermsOfService.vue";
 import NotFound from "./views/NotFound.vue";
 
+// FIXME (Moritz Beber): In future we would like to import this from vue-router.
+// See https://github.com/vuejs/vue-router/issues/2758
+export type NextHandler = (to?: RawLocation | false | Function | void) => void;
+
 Vue.use(Router);
 
 const authGuard: NavigationGuard = (to, from, next) => {
diff --git a/src/types/forms.d.ts b/src/types/forms.d.ts
new file mode 100644
index 00000000..3b0befb2
--- /dev/null
+++ b/src/types/forms.d.ts
@@ -0,0 +1,3 @@
+// Vuetify does not seem to export types for form rules.
+export type RuleOutcome = string | true;
+export type RuleHandler = (any) => RuleOutcome;
diff --git a/src/types/general.ts b/src/types/general.ts
deleted file mode 100644
index 2fe44c0c..00000000
--- a/src/types/general.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { RawLocation } from "vue-router";
-
-export type Nullable<T> = T | null | undefined;
-// Vuetify does not seem to export types for form rules.
-export type RuleOutcome = string | true;
-export type RuleHandler = (any) => RuleOutcome;
-// FIXME (Moritz Beber): In future we would like to import this from vue-router.
-// See https://github.com/vuejs/vue-router/issues/2758
-export type NextHandler = (to?: RawLocation | false | Function | void) => void;
diff --git a/src/views/Design.vue b/src/views/Design.vue
index 66872dfd..df2471d5 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -173,17 +173,37 @@ import { ModelItem, organism2ModelMapping } from "@/store/modules/models";
 import NewProject from "@/components/NewProject.vue";
 import NewOrganism from "@/components/NewOrganism.vue";
 import NewModel from "@/components/NewModel.vue";
-import {
-  Nullable,
-  RuleHandler,
-  NextHandler,
-  RuleOutcome
-} from "@/types/general";
+import { NextHandler } from "@/router";
+import { RuleHandler, RuleOutcome } from "@/types/forms";
 
 interface ProductItem {
   name: string;
 }
 
+interface DesignState {
+  isValid: boolean;
+  project?: ProjectItem;
+  projectRules: ReadonlyArray<RuleHandler>;
+  isProjectCreationDialogVisible: boolean;
+  organism?: OrganismItem;
+  organismRules: ReadonlyArray<RuleHandler>;
+  isOrganismCreationDialogVisible: boolean;
+  product?: ProductItem;
+  productRules: ReadonlyArray<RuleHandler>;
+  productOptions: ProductItem[];
+  isLoadingProducts: boolean;
+  isAerobic: boolean;
+  showAdvanced: boolean;
+  bigg: boolean;
+  rhea: boolean;
+  model?: ModelItem;
+  isModelCreationDialogVisible: boolean;
+  maxPredictions: number;
+  predictionRules: ReadonlyArray<RuleHandler>;
+  isSubmitted: boolean;
+  hasSubmissionError: boolean;
+}
+
 export default Vue.extend({
   name: "Design",
   components: {
@@ -191,30 +211,24 @@ export default Vue.extend({
     NewOrganism,
     NewModel
   },
-  data() {
+  data(): DesignState {
     return {
       isValid: false,
-      project: null as Nullable<ProjectItem>,
-      projectRules: [v => !!v || "Project is required"] as ReadonlyArray<
-        RuleHandler
-      >,
+      project: undefined,
+      projectRules: [v => !!v || "Project is required"],
       isProjectCreationDialogVisible: false,
-      organism: null as Nullable<OrganismItem>,
-      organismRules: [v => !!v || "Organism is required"] as ReadonlyArray<
-        RuleHandler
-      >,
+      organism: undefined,
+      organismRules: [v => !!v || "Organism is required"],
       isOrganismCreationDialogVisible: false,
-      product: null as Nullable<ProductItem>,
-      productRules: [v => !!v || "Product is required"] as ReadonlyArray<
-        RuleHandler
-      >,
-      productOptions: [] as ProductItem[],
+      product: undefined,
+      productRules: [v => !!v || "Product is required"],
+      productOptions: [],
       isLoadingProducts: true,
       isAerobic: false,
       showAdvanced: false,
       bigg: false,
       rhea: true,
-      model: null as Nullable<ModelItem>,
+      model: undefined,
       isModelCreationDialogVisible: false,
       maxPredictions: 3,
       predictionRules: [
@@ -245,7 +259,7 @@ export default Vue.extend({
         return this.allModels.filter(
           (model: ModelItem) =>
             model.organism_id === this.organism.id &&
-            (model.project_id === null || model.project_id === this.project.id)
+            (model.project_id == null || model.project_id === this.project.id)
         );
       } else {
         return [];

From 725965bbef09516ecf1da232865c5fe86ea2ac96 Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Wed, 15 May 2019 10:58:07 +0200
Subject: [PATCH 20/23] chore: add issues for todos

---
 src/router.ts               | 2 +-
 src/store/modules/models.ts | 2 ++
 src/views/Design.vue        | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/router.ts b/src/router.ts
index bf7ee404..db76e819 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -16,7 +16,7 @@ import TermsOfService from "./views/TermsOfService.vue";
 import NotFound from "./views/NotFound.vue";
 
 // FIXME (Moritz Beber): In future we would like to import this from vue-router.
-// See https://github.com/vuejs/vue-router/issues/2758
+// This is tracked in https://github.com/DD-DeCaF/caffeine-vue/issues/40
 export type NextHandler = (to?: RawLocation | false | Function | void) => void;
 
 Vue.use(Router);
diff --git a/src/store/modules/models.ts b/src/store/modules/models.ts
index 5690c35a..83d15ca9 100644
--- a/src/store/modules/models.ts
+++ b/src/store/modules/models.ts
@@ -13,6 +13,8 @@ export interface ModelItem {
   model_serialized?: object;
 }
 
+// TODO (Moritz Beber): This mapping needs to be expanded to all organisms.
+// See https://github.com/DD-DeCaF/caffeine-vue/issues/41
 export const organism2ModelMapping = {
   "2": 10
 };
diff --git a/src/views/Design.vue b/src/views/Design.vue
index df2471d5..5159b07c 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -245,6 +245,7 @@ export default Vue.extend({
     // TODO (Moritz Beber): Selection of organism in future should depend on the
     //  selected project, i.e., you can only select public organisms and
     //  organisms within that project.
+    // See https://github.com/DD-DeCaF/caffeine-vue/issues/42
     organismOptions(): OrganismItem[] {
       return this.$store.state.organisms.organisms;
     },

From 6e2c5373c0381c5bb6d663f512a5153e8273fa40 Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Thu, 16 May 2019 10:43:42 +0200
Subject: [PATCH 21/23] fix: set model object from store

---
 src/views/Design.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/Design.vue b/src/views/Design.vue
index 5159b07c..337d50a0 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -278,7 +278,9 @@ export default Vue.extend({
   watch: {
     modelOkay(isOkay: boolean): void {
       if (isOkay) {
-        this.model = organism2ModelMapping[this.organism.id];
+        this.model = this.$store.getters["models/getModelById"](
+          organism2ModelMapping[this.organism.id]
+        );
       } else {
         this.model = undefined;
       }

From a25bbc7b4b262698cd8ce1e6e7ad50ac77cb1c6e Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Thu, 16 May 2019 12:26:52 +0200
Subject: [PATCH 22/23] fix: address model validation

---
 src/views/Design.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/views/Design.vue b/src/views/Design.vue
index 337d50a0..6e1a8753 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -26,6 +26,7 @@
             return-object
             :rules="projectRules"
             clearable
+            required
           >
             <template v-slot:prepend-item>
               <v-btn
@@ -49,6 +50,7 @@
             :rules="organismRules"
             clearable
             placeholder="e.g., Escherichia coli"
+            required
           >
             <template v-slot:prepend-item>
               <v-btn
@@ -82,6 +84,7 @@
             :loading="isLoadingProducts"
             clearable
             placeholder="e.g., ethanol"
+            required
           >
           </v-autocomplete>
           <v-switch
@@ -127,6 +130,9 @@
                   item-value="id"
                   return-object
                   :rules="modelRules"
+                  :hint="modelHint"
+                  persistent-hint
+                  required
                 >
                   <template v-slot:prepend-item>
                     <v-btn
@@ -197,6 +203,7 @@ interface DesignState {
   bigg: boolean;
   rhea: boolean;
   model?: ModelItem;
+  modelRules: ReadonlyArray<RuleHandler>;
   isModelCreationDialogVisible: boolean;
   maxPredictions: number;
   predictionRules: ReadonlyArray<RuleHandler>;
@@ -229,6 +236,7 @@ export default Vue.extend({
       bigg: false,
       rhea: true,
       model: undefined,
+      modelRules: [v => !!v || "Model is required"],
       isModelCreationDialogVisible: false,
       maxPredictions: 3,
       predictionRules: [
@@ -252,6 +260,13 @@ export default Vue.extend({
     allModels(): ModelItem[] {
       return this.$store.state.models.models;
     },
+    modelHint() {
+      if (this.modelOkay) {
+        return "";
+      } else {
+        return "Please first select a project and organism";
+      }
+    },
     modelOkay() {
       return !!this.project && !!this.organism;
     },
@@ -266,9 +281,6 @@ export default Vue.extend({
         return [];
       }
     },
-    modelRules(): RuleHandler[] {
-      return [this.modelOkayRule, v => !!v || "Model is required"];
-    },
     hasEdits(): boolean {
       return (
         !!this.project || !!this.organism || !!this.product || !!this.model

From 5c976e07456dcfef288935420bffb02ba333f7bd Mon Sep 17 00:00:00 2001
From: "Moritz E. Beber" <morbeb@biosustain.dtu.dk>
Date: Thu, 16 May 2019 12:28:13 +0200
Subject: [PATCH 23/23] chore: remove next type annotation

---
 src/router.ts        | 4 ----
 src/views/Design.vue | 3 +--
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/router.ts b/src/router.ts
index db76e819..581cbce1 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -15,10 +15,6 @@ import PrivacyPolicy from "./views/PrivacyPolicy.vue";
 import TermsOfService from "./views/TermsOfService.vue";
 import NotFound from "./views/NotFound.vue";
 
-// FIXME (Moritz Beber): In future we would like to import this from vue-router.
-// This is tracked in https://github.com/DD-DeCaF/caffeine-vue/issues/40
-export type NextHandler = (to?: RawLocation | false | Function | void) => void;
-
 Vue.use(Router);
 
 const authGuard: NavigationGuard = (to, from, next) => {
diff --git a/src/views/Design.vue b/src/views/Design.vue
index 6e1a8753..1382df18 100644
--- a/src/views/Design.vue
+++ b/src/views/Design.vue
@@ -179,7 +179,6 @@ import { ModelItem, organism2ModelMapping } from "@/store/modules/models";
 import NewProject from "@/components/NewProject.vue";
 import NewOrganism from "@/components/NewOrganism.vue";
 import NewModel from "@/components/NewModel.vue";
-import { NextHandler } from "@/router";
 import { RuleHandler, RuleOutcome } from "@/types/forms";
 
 interface ProductItem {
@@ -353,7 +352,7 @@ export default Vue.extend({
   created() {
     this.fetchProducts();
   },
-  beforeRouteLeave(to: Route, from: Route, next: NextHandler) {
+  beforeRouteLeave(to: Route, from: Route, next) {
     if (!this.isSubmitted && this.hasEdits) {
       const answer = window.confirm(
         "Do you really want to leave? You have pending changes."