Skip to content

Commit 91f3404

Browse files
be-smithml-evs
be-smith
authored and
ml-evs
committed
Added XRD insitu block
1 parent 2dfe80e commit 91f3404

File tree

2 files changed

+190
-0
lines changed

2 files changed

+190
-0
lines changed

‎webapp/src/components/datablocks/XRDInsituBlock.vue

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
<template>
2+
<DataBlockBase :item_id="item_id" :block_id="block_id">
3+
<FileSelectDropdown
4+
v-model="file_id"
5+
:item_id="item_id"
6+
:block_id="block_id"
7+
:extensions="blockInfo.attributes.accepted_file_extensions"
8+
update-block-on-change
9+
@change="onFileChange"
10+
/>
11+
<div v-show="file_id">
12+
<div class="form-inline">
13+
<div class="form-group mb-2">
14+
<label class="mr-2"><b>XRD folder name</b></label>
15+
<v-select
16+
v-model="xrd_folder_name"
17+
:options="availableFolders"
18+
:reduce="(folder) => folder"
19+
class="folder-select mr-2"
20+
placeholder="Select a folder"
21+
@update:model-value="onFolderSelected"
22+
/>
23+
<label class="mr-2"><b>Temperature or Echem folder name</b></label>
24+
<v-select
25+
v-model="time_series_folder_name"
26+
:options="availableFolders"
27+
:reduce="(folder) => folder"
28+
class="folder-select"
29+
placeholder="Select a folder"
30+
@update:model-value="onFolderSelected"
31+
/>
32+
</div>
33+
</div>
34+
<div v-if="folderNameError" class="alert alert-danger mt-2 mx-auto">
35+
{{ folderNameError }}
36+
</div>
37+
</div>
38+
<div class="form-inline mb-2">
39+
<label class="mr-2"><b>Data granularity</b></label>
40+
<input
41+
v-model="data_granularity_buffer"
42+
type="text"
43+
class="form-control mr-3"
44+
style="width: 100px; display: inline-block"
45+
/>
46+
<label class="mr-2"><b>Sample granularity</b></label>
47+
<input
48+
v-model="sample_granularity_buffer"
49+
type="text"
50+
class="form-control"
51+
style="width: 100px; display: inline-block"
52+
/>
53+
<button class="btn btn-primary ml-3" @click="onGranularitySubmit">Apply</button>
54+
</div>
55+
<div
56+
v-show="xrd_folder_name && time_series_folder_name"
57+
class="row mt-2 text-center justify-content-center"
58+
>
59+
<div
60+
id="bokehPlotContainer"
61+
class="col-xl-10 col-lg-11 col-md-12 d-flex justify-content-center overflow-auto"
62+
>
63+
<BokehPlot :bokeh-plot-data="bokehPlotData" class="mw-100" />
64+
</div>
65+
</div>
66+
</DataBlockBase>
67+
</template>
68+
69+
<script>
70+
import DataBlockBase from "@/components/datablocks/DataBlockBase";
71+
import FileSelectDropdown from "@/components/FileSelectDropdown";
72+
import BokehPlot from "@/components/BokehPlot";
73+
import vSelect from "vue-select";
74+
75+
import { createComputedSetterForBlockField } from "@/field_utils.js";
76+
import { updateBlockFromServer } from "@/server_fetch_utils.js";
77+
78+
export default {
79+
components: {
80+
DataBlockBase,
81+
FileSelectDropdown,
82+
BokehPlot,
83+
vSelect,
84+
},
85+
props: {
86+
item_id: {
87+
type: String,
88+
required: true,
89+
},
90+
block_id: {
91+
type: String,
92+
required: true,
93+
},
94+
},
95+
data() {
96+
return {
97+
folderNameError: "",
98+
isUpdating: false,
99+
scan_time_buffer: "",
100+
};
101+
},
102+
watch: {
103+
data_granularity: {
104+
immediate: true,
105+
handler(newVal) {
106+
this.data_granularity_buffer = newVal;
107+
},
108+
},
109+
sample_granularity: {
110+
immediate: true,
111+
handler(newVal) {
112+
this.sample_granularity_buffer = newVal;
113+
},
114+
},
115+
},
116+
computed: {
117+
bokehPlotData() {
118+
return this.$store.state.all_item_data[this.item_id]["blocks_obj"][this.block_id]
119+
.bokeh_plot_data;
120+
},
121+
blockInfo() {
122+
return this.$store.state.blocksInfos["insitu-xrd"];
123+
},
124+
all_files() {
125+
return this.$store.state.all_item_data[this.item_id].files;
126+
},
127+
currentBlock() {
128+
return this.$store.state.all_item_data[this.item_id]["blocks_obj"][this.block_id];
129+
},
130+
availableFolders() {
131+
return this.currentBlock.available_folders || [];
132+
},
133+
xrd_folder_name: createComputedSetterForBlockField("xrd_folder_name"),
134+
time_series_folder_name: createComputedSetterForBlockField("time_series_folder_name"),
135+
file_id: createComputedSetterForBlockField("file_id"),
136+
folder_name: createComputedSetterForBlockField("folder_name"),
137+
data_granularity: createComputedSetterForBlockField("data_granularity"),
138+
sample_granularity: createComputedSetterForBlockField("sample_granularity"),
139+
},
140+
methods: {
141+
onFileChange() {
142+
this.xrd_folder_name = "";
143+
this.time_series_folder_name = "";
144+
145+
this.updateBlock();
146+
},
147+
onFolderSelected() {
148+
if (this.xrd_folder_name && this.time_series_folder_name) {
149+
this.folderNameError = "";
150+
this.updateBlock();
151+
} else if (this.xrd_folder_name || this.time_series_folder_name) {
152+
this.folderNameError = "XRD and either an echem or temperature folder is required.";
153+
}
154+
},
155+
onGranularitySubmit() {
156+
const dataVal = parseFloat(this.data_granularity_buffer);
157+
const sampleVal = parseFloat(this.sample_granularity_buffer);
158+
159+
if (!isNaN(dataVal)) this.data_granularity = dataVal;
160+
if (!isNaN(sampleVal)) this.sample_granularity = sampleVal;
161+
162+
if (!isNaN(dataVal) || !isNaN(sampleVal)) {
163+
this.updateBlock();
164+
}
165+
},
166+
updateBlock() {
167+
this.isLoading = true;
168+
const foundFile = this.all_files.find((file) => file.immutable_id === this.file_id);
169+
this.folder_name = foundFile?.name || "Folder not found";
170+
171+
const blockToUpdate = {
172+
...this.$store.state.all_item_data[this.item_id]["blocks_obj"][this.block_id],
173+
};
174+
175+
updateBlockFromServer(this.item_id, this.block_id, blockToUpdate)
176+
.then(() => {
177+
this.isLoading = false;
178+
})
179+
.catch((error) => {
180+
this.isLoading = false;
181+
console.error("Error updating block:", error);
182+
});
183+
},
184+
},
185+
};
186+
</script>
187+
188+
<style scoped></style>

‎webapp/src/resources.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import DataBlockBase from "@/components/datablocks/DataBlockBase";
33
import MediaBlock from "@/components/datablocks/MediaBlock";
44
import XRDBlock from "@/components/datablocks/XRDBlock";
5+
import XRDInsituBlock from "@/components/datablocks/XRDInsituBlock.vue";
56
import ChatBlock from "@/components/datablocks/ChatBlock";
67
import CycleBlock from "@/components/datablocks/CycleBlock";
78
import NMRBlock from "@/components/datablocks/NMRBlock";
@@ -73,6 +74,7 @@ export const customBlockTypes = {
7374
component: UVVisInsituBlock,
7475
name: "UV-Vis insitu",
7576
},
77+
"insitu-xrd": { description: "XRD insitu", component: XRDInsituBlock, name: "XRD insitu" },
7678
};
7779

7880
export const itemTypes = {

0 commit comments

Comments
 (0)