Develop (#1)

* Redirect unknown to main

* Add GitHub link

* Api icon

* Start lift (WIP)

src/App.vue

@@ -8,6 +8,21 @@
           <router-link to="/" class="title-link">LUMC Mutalyzer 3</router-link>
           <span class="alpha">Alpha</span></v-toolbar-title
         >
+        <v-spacer></v-spacer>
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              icon
+              v-bind="attrs"
+              v-on="on"
+              href="https://github.com/mutalyzer/normalizer/"
+              target="_blank"
+            >
+              <v-icon>mdi-github</v-icon>
+            </v-btn>
+          </template>
+          <span>Source Code</span>
+        </v-tooltip>
       </v-app-bar>
 
       <v-navigation-drawer v-model="drawer" absolute temporary>
@@ -43,7 +58,7 @@
 
             <v-list-item :href="apiBaseUrl">
               <v-list-item-icon>
-                <v-icon>mdi-description</v-icon>
+                <v-icon>mdi-cog</v-icon>
               </v-list-item-icon>
               <v-list-item-title>API</v-list-item-title>
             </v-list-item>

src/assets/main.css

@@ -104,6 +104,22 @@ li {
   cursor: pointer;
 }
 
+.other-description-link {
+  text-decoration: none;
+  margin-top: 2px;
+  padding: 5px 10px;
+  font-family: monospace;
+  display: inline-block;
+  color: #1e90ff;
+  background-color: #ffffff;
+}
+
+.other-description-link:hover {
+  color: #ffffff;
+  background-color: #1e90ff;
+  cursor: pointer;
+}
+
 .code {
   background-color: #ffffff;
   color: #b71c1c;

src/components/LiftOver.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <v-alert v-if="updated_accession" tile color="white">
+      <div class="overline">New Reference Id Available</div>
+      <div>
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on, attrs }">
+            <div
+              v-show="!show"
+              v-bind="attrs"
+              v-on="on"
+              class="example-item"
+              @click="lift()"
+            >
+              {{ updated_accession }}
+            </div>
+          </template>
+          <span>Lift to the new reference ID!</span>
+        </v-tooltip>
+        <v-expand-transition>
+          <div v-if="show">
+            <router-link
+              class="ok-description-link"
+              :to="{
+                name: 'NameChecker',
+                params: {
+                  descriptionRouter: lifted_description,
+                },
+              }"
+              >{{ lifted_description }}</router-link
+            >
+          </div>
+        </v-expand-transition>
+      </div>
+    </v-alert>
+    <v-expansion-panels focusable hover flat class="mb-3" v-if="response">
+      <v-expansion-panel>
+        <v-expansion-panel-header
+          >View NCBI response as a tree</v-expansion-panel-header
+        >
+        <v-expansion-panel-content>
+          <JsonPretty :summary="response" />
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+    <div v-if="!accession">Work in progress.</div>
+  </div>
+</template>
+
+<script>
+import MutalyzerService from "../services/MutalyzerService.js";
+import NcbiDatasetsApi from "../services/NcbiDatasetsApi";
+import JsonPretty from "./JsonPretty.vue";
+
+export default {
+  name: "LiftOver",
+  components: {
+    JsonPretty,
+  },
+  props: {
+    model: null,
+    description: null,
+  },
+  data() {
+    return {
+      response: null,
+      accession: null,
+      updated_accession: null,
+      connectionError: null,
+      show: false,
+      lifted_description: null,
+    };
+  },
+  mounted: function () {
+    this.get_accession();
+    this.get_response();
+  },
+  methods: {
+    get_accession() {
+      if (
+        ["c", "n"].includes(this.model.coordinate_system) &&
+        !this.model.reference.selector
+      ) {
+        this.accession = this.model.reference.id;
+      }
+    },
+    get_response() {
+      if (this.accession) {
+        NcbiDatasetsApi.gene_accession(this.accession).then((response) => {
+          if (response.data) {
+            this.response = response.data;
+            this.process_response(response.data);
+          }
+        });
+      }
+    },
+    process_response(response) {
+      if (
+        response &&
+        response.genes &&
+        response.genes.length == 1 &&
+        response.genes[0].warnings &&
+        response.genes[0].warnings.length == 1 &&
+        response.genes[0].warnings[0].gene_warning_code ==
+          "ACCESSION_VERSION_MISMATCH"
+      ) {
+        this.updated_accession =
+          response.genes[0].warnings[0].replaced_id.returned;
+      }
+    },
+    lift() {
+      if (this.description && this.updated_accession) {
+        const params = {
+          description: this.description,
+          reference_id: this.updated_accession,
+        };
+        MutalyzerService.lift(params)
+          .then((response) => {
+            if (response.data) {
+              this.lifted_description = response.data;
+              this.show = !this.show;
+            }
+          })
+          .catch((error) => {
+            console.log(error);
+            if (error.response) {
+              this.connectionErrors = {
+                details: "Some response error occured.",
+              };
+            } else if (error.request) {
+              this.connectionErrors = {
+                details: "Some connection or server error occured.",
+              };
+            } else {
+              this.connectionErrors = { details: "Some error occured." };
+            }
+          });
+      }
+    },
+  },
+};
+</script>
+
+<style scoped src="../assets/main.css"></style>

src/router/index.js

@@ -42,7 +42,7 @@ const routes = [
   {
     path: "*",
     name: "catchAll",
-    component: Home,
+    redirect: "/",
   },
 ];
 

src/services/MutalyzerService.js

@@ -27,4 +27,7 @@ export default {
   getSelectors(referenceId) {
     return apiClient.get("/get_selectors/" + encodeURIComponent(referenceId));
   },
+  lift(params) {
+    return apiClient.get("/lift/", { params });
+  },
 };

src/services/NcbiDatasetsApi.js

@@ -0,0 +1,18 @@
+import axios from "axios";
+
+const ncbiDatasetsBaseUrl = `https://api.ncbi.nlm.nih.gov/datasets/v1alpha/`;
+
+const apiClient = axios.create({
+  baseURL: ncbiDatasetsBaseUrl,
+  withCredentials: false, // This is the default
+  headers: {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+  },
+});
+
+export default {
+  gene_accession(id) {
+    return apiClient.get("/gene/accession/" + encodeURIComponent(id));
+  },
+};

src/views/NameChecker.vue

@@ -216,6 +216,32 @@
           </v-sheet>
         </v-expand-transition>
 
+        <v-expansion-panels
+          focusable
+          hover
+          class="mt-5 mb-5"
+          tile
+          v-if="
+            response &&
+            response.normalized_description &&
+            response.normalized_model &&
+            !response.normalized_model.reference.selector &&
+            ['c', 'n'].includes(response.normalized_model.coordinate_system)
+          "
+        >
+          <v-expansion-panel>
+            <v-expansion-panel-header class="overline"
+              >Lift Over</v-expansion-panel-header
+            >
+            <v-expansion-panel-content class="pt-5">
+              <LiftOver
+                :model="this.response.normalized_model"
+                :description="this.response.normalized_description"
+              />
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+        </v-expansion-panels>
+
         <v-expansion-panels
           focusable
           hover
@@ -329,6 +355,7 @@ import AffectedProtein from "../components/AffectedProtein.vue";
 import SelectorShort from "../components/SelectorShort.vue";
 import SyntaxError from "../components/SyntaxError.vue";
 import ReferenceInformation from "../components/ReferenceInformation.vue";
+import LiftOver from "../components/LiftOver.vue";
 
 export default {
   components: {
@@ -337,6 +364,7 @@ export default {
     AffectedProtein,
     SyntaxError,
     ReferenceInformation,
+    LiftOver,
   },
   props: ["descriptionRouter"],
   created: function () {