New DataBlockUI displaying every Datablock: Add Comment and XRD block

Author: BenjaminCharmes

webapp/src/components/DataBlockUI.vue

@@ -0,0 +1,112 @@
+<template>
+  <DataBlockBase :item_id="item_id" :block_id="block_id">
+    <FileSelectDropdown
+      v-show="blockInfo.attributes.accepted_file_extensions.length > 0"
+      v-model="file_id"
+      :item_id="item_id"
+      :block_id="block_id"
+      :extensions="blockInfo.attributes.accepted_file_extensions"
+      update-block-on-change
+    />
+    <div v-if="file_id && properties.wavelength">
+      <div class="form-row col-md-6 col-lg-4 mt-2 mb-2 pl-0">
+        <div class="input-group form-inline">
+          <label class="mr-2"
+            ><b>{{ properties.wavelength.label }}</b></label
+          >
+          <input
+            v-model="wavelength"
+            type="text"
+            class="form-control"
+            :class="{ 'is-invalid': wavelengthParseError }"
+            @keydown.enter="
+              parseWavelength();
+              updateBlock();
+            "
+            @blur="
+              parseWavelength();
+              updateBlock();
+            "
+          />
+          <div v-if="wavelengthParseError" class="alert alert-danger mt-2 mx-auto">
+            {{ wavelengthParseError }}
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div id="bokehPlotContainer" class="col-xl-9 col-lg-10 col-md-11 mx-auto">
+          <BokehPlot :bokeh-plot-data="bokehPlotData" />
+        </div>
+      </div>
+    </div>
+  </DataBlockBase>
+</template>
+
+<script>
+import DataBlockBase from "@/components/datablocks/DataBlockBase";
+import FileSelectDropdown from "@/components/FileSelectDropdown";
+import BokehPlot from "@/components/BokehPlot";
+
+import { blockTypes } from "@/resources.js";
+import { createComputedSetterForBlockField } from "@/field_utils.js";
+import { updateBlockFromServer } from "@/server_fetch_utils.js";
+
+export default {
+  components: {
+    DataBlockBase,
+    FileSelectDropdown,
+    BokehPlot,
+  },
+  props: {
+    item_id: {
+      type: String,
+      required: true,
+    },
+    block_id: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      wavelengthParseError: "",
+    };
+  },
+  computed: {
+    block() {
+      return this.$store.state.all_item_data[this.item_id]["blocks_obj"][this.block_id];
+    },
+    blockInfo() {
+      return this.$store.state.blocksInfos[this.block.blocktype];
+    },
+    properties() {
+      return blockTypes[this.block.blocktype].properties;
+    },
+    bokehPlotData() {
+      return this.$store.state.all_item_data[this.item_id]["blocks_obj"][this.block_id]
+        .bokeh_plot_data;
+    },
+    file_id: createComputedSetterForBlockField("file_id"),
+    wavelength: createComputedSetterForBlockField("wavelength"),
+  },
+  methods: {
+    parseWavelength() {
+      if (isNaN(this.wavelength) || isNaN(parseFloat(this.wavelength))) {
+        this.wavelengthParseError = "Please provide a valid number";
+      } else {
+        this.wavelengthParseError = "";
+      }
+    },
+    updateBlock() {
+      updateBlockFromServer(
+        this.item_id,
+        this.block_id,
+        this.$store.state.all_item_data[this.item_id]["blocks_obj"][this.block_id],
+      );
+    },
+  },
+};
+</script>
+
+<style scoped></style>

webapp/src/components/GenericDataBlock.vue

@@ -9,7 +9,7 @@
 // import NMRBlock from "@/components/datablocks/NMRBlock";
 // import EISBlock from "@/components/datablocks/EISBlock";
 // import MassSpecBlock from "@/components/datablocks/MassSpecBlock";
-import GenericDataBlock from "@/components/GenericDataBlock";
+import DataBlockUI from "@/components/DataBlockUI";
 
 import SampleInformation from "@/components/SampleInformation";
 import StartingMaterialInformation from "@/components/StartingMaterialInformation";
@@ -60,26 +60,33 @@ export const UPPY_MAX_NUMBER_OF_FILES =
 export const debounceTime = 250; // time after user stops typing before request is sent
 
 export const blockTypes = {
-  comment: { description: "Comment", component: GenericDataBlock, name: "Comment" },
-  media: { description: "Media", component: GenericDataBlock, name: "Media" },
-  tabular: { description: "Tabular Data", component: GenericDataBlock, name: "Tabular data" },
-  xrd: { description: "Powder XRD", component: GenericDataBlock, name: "Powder XRD" },
-  raman: { description: "Raman", component: GenericDataBlock, name: "Raman" },
-  cycle: { description: "Electrochemistry", component: GenericDataBlock, name: "Electrochemistry" },
+  comment: { description: "Comment", component: DataBlockUI, name: "Comment" },
+  media: { description: "Media", component: DataBlockUI, name: "Media" },
+  tabular: { description: "Tabular Data", component: DataBlockUI, name: "Tabular data" },
+  xrd: {
+    description: "Powder XRD",
+    component: DataBlockUI,
+    properties: {
+      wavelength: { label: "Wavelength (Å):" },
+    },
+    name: "Powder XRD",
+  },
+  raman: { description: "Raman", component: DataBlockUI, name: "Raman" },
+  cycle: { description: "Electrochemistry", component: DataBlockUI, name: "Electrochemistry" },
   eis: {
     description: "Electrochemical Impedance Spectroscopy",
-    component: GenericDataBlock,
+    component: DataBlockUI,
     name: "EIS",
   },
   nmr: {
     description: "Nuclear Magnetic Resonance Spectroscopy",
-    component: GenericDataBlock,
+    component: DataBlockUI,
     name: "NMR",
   },
-  ms: { description: "Mass Spectrometry", component: GenericDataBlock, name: "Mass Spectrometry" },
+  ms: { description: "Mass Spectrometry", component: DataBlockUI, name: "Mass Spectrometry" },
   chat: {
     description: "Virtual assistant",
-    component: GenericDataBlock,
+    component: DataBlockUI,
     name: "Virtual Assistant",
   },
 };