fix(genes-table): Enhance reactivity in table updates post-curation

Resolved an issue in the Genes Table where individual entries were not being updated in real-time after curation or precuration. The solution involved improving the reactivity of the component by ensuring the `rawItems` state is correctly updated and reflects the latest gene data. This fix enhances user experience by displaying up-to-date curation statuses without needing to reload the entire table. Further testing has confirmed the effective real-time update of individual entries post-curation or precuration actions.

Closes #112

src/stores/geneStore.js

@@ -154,6 +154,32 @@ export const getGeneByHGNCIdOrSymbol = async (identifier) => {
 };
 
 
+/**
+ * Retrieves a specific gene document from the Firestore 'genes' collection by document ID.
+ *
+ * @async
+ * @function getGeneByDocId
+ * @param {string} docId - The document ID of the gene to retrieve.
+ * @returns {Promise<Object>} - A promise that resolves to an object containing the gene data.
+ * @throws {Error} - Throws an error if the document doesn't exist or the retrieval fails.
+ * @description This function retrieves a specific gene document from the Firestore 'genes' collection using the provided document ID.
+ */
+export const getGeneByDocId = async (docId) => {
+  try {
+    const geneRef = doc(db, 'genes', docId);
+    const docSnap = await getDoc(geneRef);
+
+    if (docSnap.exists()) {
+      return { docId: docSnap.id, ...docSnap.data() };
+    } else {
+      throw new Error("Gene document not found");
+    }
+  } catch (error) {
+    throw new Error(`Error retrieving gene by document ID: ${error.message}`);
+  }
+};
+
+
 /**
  * Parses a CSV string, checks against existing entries based on unique columns, 
  * and writes or updates each row as a document in the 'genes' collection with timestamps.

src/views/GenesTable.vue

@@ -39,7 +39,7 @@
 <script>
 import { ref, onMounted, computed } from 'vue';
 import DataDisplayTable from '@/components/DataDisplayTable.vue';
-import { getGenes } from '@/stores/geneStore';
+import { getGenes, getGeneByDocId } from '@/stores/geneStore';
 import { getAuth, onAuthStateChanged } from 'firebase/auth';
 import CurationModal from '@/components/CurationModal.vue';
 import DataExport from '@/components/DataExport.vue';
@@ -135,8 +135,26 @@ export default {
     };
 
     // Function to handle modal closure
-    const closeModal = () => {
-      selectedItem.value = ref({});
+    const closeModal = async () => {
+      if (selectedItem.value.docId) {
+        try {
+          // Fetch the latest data for the selected gene by its document ID
+          const updatedGeneData = await getGeneByDocId(selectedItem.value.docId);
+
+          // Create a new object for rawItems with the updated data
+          // This ensures reactivity by replacing the object rather than mutating it
+          rawItems.value = {
+            ...rawItems.value,
+            [[selectedItem.value.hgnc_id, selectedItem.value.cur_id].join('-')]: updatedGeneData
+          };
+        } catch (error) {
+          console.error(`Failed to fetch updated gene data: ${error.message}`);
+          // Handle the error appropriately, possibly with a user notification
+        }
+      }
+
+      // Reset selectedItem and close the modal
+      selectedItem.value = {};
       showModal.value = false;
     };