Rework resources.js when blocks require/do not require custom components (#1154)

Author: ml-evs

webapp/cypress/e2e/editPage.cy.js

@@ -293,4 +293,20 @@ describe("Edit Page", () => {
     // Check that the img with id "media-block-img" is present
     cy.get('img[data-testid="media-block-img"]').should("exist");
   });
+
+  it("Uploads an Raman data file, makes a Raman block and checks that the plot is shown", () => {
+    cy.uploadFileViaAPI("editable_sample", "example_data/raman/labspec_raman_example.txt");
+
+    cy.get('[data-testid="search-input"]').type("editable_sample");
+    cy.findByText("editable_sample").click();
+
+    cy.findByText("Add a block").click();
+    cy.get('[data-testid="add-block-dropdown"]').findByText("Raman spectroscopy").click();
+    cy.findAllByText("Select a file:").eq(2).should("exist");
+    cy.get("select.file-select-dropdown")
+      .eq(2)
+      .select("example_data_raman_labspec_raman_example.txt");
+    cy.contains("label", "X axis").should("exist");
+    cy.contains("label", "Y axis").should("exist");
+  });
 });

webapp/src/components/datablocks/EISBlock.vue

@@ -1,14 +1,10 @@
 // Resources for the application
 import DataBlockBase from "@/components/datablocks/DataBlockBase";
-import BokehBlock from "@/components/datablocks/BokehBlock";
 import MediaBlock from "@/components/datablocks/MediaBlock";
 import XRDBlock from "@/components/datablocks/XRDBlock";
 import ChatBlock from "@/components/datablocks/ChatBlock";
-import RamanBlock from "@/components/datablocks/RamanBlock";
 import CycleBlock from "@/components/datablocks/CycleBlock";
 import NMRBlock from "@/components/datablocks/NMRBlock";
-import EISBlock from "@/components/datablocks/EISBlock";
-import MassSpecBlock from "@/components/datablocks/MassSpecBlock";
 import NMRInsituBlock from "@/components/datablocks/NMRInsituBlock";
 
 import SampleInformation from "@/components/SampleInformation";
@@ -59,18 +55,14 @@ export const UPPY_MAX_NUMBER_OF_FILES =
 
 export const debounceTime = 250; // time after user stops typing before request is sent
 
-export const blockTypes = {
+// A mapping for blocks that need custom Vue components
+export const customBlockTypes = {
   comment: { description: "Comment", component: DataBlockBase, name: "Comment" },
   media: { description: "Media", component: MediaBlock, name: "Media" },
-  tabular: { description: "Tabular Data", component: BokehBlock, name: "Tabular data" },
   xrd: { description: "Powder XRD", component: XRDBlock, name: "Powder XRD" },
-  raman: { description: "Raman", component: RamanBlock, name: "Raman" },
   cycle: { description: "Electrochemistry", component: CycleBlock, name: "Electrochemistry" },
-  eis: { description: "Electrochemical Impedance Spectroscopy", component: EISBlock, name: "EIS" },
   nmr: { description: "Nuclear Magnetic Resonance Spectroscopy", component: NMRBlock, name: "NMR" },
-  ms: { description: "Mass Spectrometry", component: MassSpecBlock, name: "Mass Spectrometry" },
   chat: { description: "Virtual assistant", component: ChatBlock, name: "Virtual Assistant" },
-  ftir: { description: "FTIR", component: BokehBlock, name: "FTIR" },
   "insitu-nmr": { description: "NMR insitu", component: NMRInsituBlock, name: "NMR insitu" },
 };
 

webapp/src/components/datablocks/MassSpecBlock.vue

@@ -342,6 +342,9 @@ export default createStore({
     getHasUnverifiedUser(state) {
       return state.hasUnverifiedUser;
     },
+    getBlocksInfos(state) {
+      return Object.values(state.blocksInfos);
+    },
   },
   actions: {},
   modules: {},

webapp/src/components/datablocks/RamanBlock.vue

@@ -113,9 +113,8 @@ import setupUppy from "@/file_upload.js";
 
 import tinymce from "tinymce/tinymce";
 
-import { blockTypes, itemTypes } from "@/resources.js";
-import NotImplementedBlock from "@/components/datablocks/NotImplementedBlock.vue";
-import { API_URL } from "@/resources.js";
+import { itemTypes, API_URL, customBlockTypes } from "@/resources.js";
+import BokehBlock from "@/components/datablocks/BokehBlock.vue";
 import { formatDistanceToNow } from "date-fns";
 
 import StyledBlockHelp from "@/components/StyledBlockHelp";
@@ -191,7 +190,13 @@ export default {
       return Object.fromEntries(this.files.map((file) => [file.immutable_id, file]));
     },
     blocksInfos() {
-      return this.$store.state.blocksInfos;
+      if (this.blockInfoLoaded) {
+        const blocksInfos = Array.from(this.$store.getters.getBlocksInfos.values());
+        return [...blocksInfos].sort((a, b) =>
+          a?.attributes?.name.localeCompare(b?.attributes?.name),
+        );
+      }
+      return [];
     },
     itemApiUrl() {
       return API_URL + "/items/" + this.refcode;
@@ -213,7 +218,7 @@ export default {
     this.interval = setInterval(() => this.setLastModified(), 30000);
   },
   beforeMount() {
-    this.blockTypes = blockTypes; // bind blockTypes as a NON-REACTIVE object to the this context so that it is accessible by the template.
+    this.customBlockTypes = customBlockTypes; // bind customBlockTypes as a NON-REACTIVE object to the this context so that it is accessible by the template.
   },
   mounted() {
     // overwrite ctrl-s and cmd-s to save the page
@@ -258,15 +263,14 @@ export default {
     },
     getBlockDisplayType(block_id) {
       var type = this.blocks[block_id].blocktype;
-      if (type in blockTypes) {
-        return blockTypes[type].component;
+      if (type in customBlockTypes) {
+        return customBlockTypes[type].component;
       } else {
-        return NotImplementedBlock;
+        return BokehBlock;
       }
     },
     saveSample() {
       // trigger the mce save so that they update the store with their content
-      console.log("save sample clicked!");
       tinymce.editors.forEach((editor) => {
         editor.isDirty() && editor.save();
       });