feat: implement gene API module for fetching symbols and gene details…

…, update theme configuration

src/api/geneApi.js

@@ -0,0 +1,24 @@
+// src/api/geneApi.js
+import axios from 'axios';
+import geneApiConfig from '@/config/geneApiConfig.json';
+
+/**
+ * Fetch the index of gene symbols.
+ * @returns {Promise<Array>} The symbols index.
+ */
+export async function fetchSymbolsIndex() {
+  const response = await axios.get(geneApiConfig.symbolsIndexUrl);
+  return response.data;
+}
+
+/**
+ * Fetch detailed gene data for a given symbol.
+ * @param {string} symbol - The gene symbol.
+ * @returns {Promise<Object>} The gene data.
+ */
+export async function fetchGeneDetails(symbol) {
+  // Construct the URL using the base URL from config and the symbol.
+  const url = `${geneApiConfig.geneDetailsBaseUrl}${symbol}.json`;
+  const response = await axios.get(url);
+  return response.data;
+}

src/components/SearchComponent.vue

@@ -1,5 +1,4 @@
-<!-- components/SearchComponent.vue -->
-
+<!-- src/components/SearchComponent.vue -->
 <template>
   <v-card class="search-card">
     <v-card-text>
@@ -27,6 +26,7 @@
 <script>
 import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
+import { fetchSymbolsIndex } from '@/api/geneApi.js'; // Use the new API module
 
 export default {
   name: 'SearchComponent',
@@ -40,13 +40,7 @@ export default {
     const loadSymbols = async () => {
       isLoading.value = true;
       try {
-        const response = await fetch(
-          'https://raw.githubusercontent.com/halbritter-lab/nephro_candidate_score/refs/heads/main/gene_score/predictions/results/json/symbols_index.json'
-        );
-        if (!response.ok) {
-          throw new Error('Failed to fetch symbols');
-        }
-        symbols.value = await response.json();
+        symbols.value = await fetchSymbolsIndex();
       } catch (err) {
         error.value = err;
       } finally {

src/config/geneApiConfig.json

@@ -0,0 +1,5 @@
+{
+    "symbolsIndexUrl": "https://raw.githubusercontent.com/halbritter-lab/nephro_candidate_score/refs/heads/main/gene_score/predictions/results/json/symbols_index.json",
+    "geneDetailsBaseUrl": "https://raw.githubusercontent.com/halbritter-lab/nephro_candidate_score/refs/heads/main/gene_score/predictions/results/json/symbols/"
+  }
+

src/config/themeConfig.json

@@ -0,0 +1,4 @@
+{
+    "defaultTheme": "dark"
+  }
+

src/main.js

@@ -1,27 +1,29 @@
-// main.js
-
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'; // Import the router
+// src/main.js
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
 
 // Vuetify
-import 'vuetify/styles'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
+import 'vuetify/styles';
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
 
 // Material Design Icons
 import "@mdi/font/css/materialdesignicons.css";
 
+// Import the theme configuration
+import themeConfig from '@/config/themeConfig.json';
+
 const vuetify = createVuetify({
   components,
   directives,
   theme: {
-    defaultTheme: 'dark'
+    defaultTheme: themeConfig.defaultTheme
   }
-})
+});
 
 createApp(App)
   .use(vuetify)
-  .use(router) // Use the router
-  .mount('#app')
+  .use(router)
+  .mount('#app');

src/views/GeneInfo.vue

@@ -1,5 +1,4 @@
-<!-- views/GeneInfo.vue -->
-
+<!-- src/views/GeneInfo.vue -->
 <template>
   <v-container>
     <v-table class="gene-info-table">
@@ -17,10 +16,7 @@
             <td>
               <v-chip
                 v-if="item.style === 'chip'"
-                :class="{
-                  'italic-font': item.font === 'italic',
-                  'bold-font': item.font === 'bold'
-                }"
+                :class="{'italic-font': item.font === 'italic', 'bold-font': item.font === 'bold'}"
                 :color="item.color"
               >
                 {{ item.value }}
@@ -37,9 +33,9 @@
 <script>
 import { ref, onMounted, computed } from 'vue';
 import { useRouter } from 'vue-router';
-import axios from 'axios';
 import { geneDetailsConfig } from '@/config/geneDetailsConfig.js';
-import { getColor, formatValue } from '@/utils/format.js'; // Ensure these are defined in src/utils/format.js
+import { getColor, formatValue } from '@/utils/format.js';
+import { fetchGeneDetails } from '@/api/geneApi.js'; // Use the new API module
 
 export default {
   name: 'GeneInfo',
@@ -53,7 +49,7 @@ export default {
     const geneData = ref({});
     const router = useRouter();
 
-    // Computed property to filter and format gene data based on configuration
+    // Compute the formatted gene data based on configuration.
     const filteredGeneData = computed(() => {
       const formattedData = {};
       if (geneData.value) {
@@ -77,10 +73,7 @@ export default {
     onMounted(async () => {
       if (props.symbol) {
         try {
-          const response = await axios.get(
-            `https://raw.githubusercontent.com/halbritter-lab/nephro_candidate_score/refs/heads/main/gene_score/predictions/results/json/symbols/${props.symbol}.json`
-          );
-          geneData.value = response.data;
+          geneData.value = await fetchGeneDetails(props.symbol);
         } catch (error) {
           // Redirect to the PageNotFound view if there is an error (e.g., file not found)
           router.push({ path: '/404' });