Skip to content

Commit 5a5628c

Browse files
katharina-schulzekatharina-schulze
committed
Fix bugs
1 parent 9701e79 commit 5a5628c

File tree

6 files changed

+88
-110
lines changed

6 files changed

+88
-110
lines changed

‎viplab-standalone-frontend-vue/.env

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
VUE_APP_FILENAME = case_1.computation-template
1+
VUE_APP_FILENAME = hello-world.docker-container-example
22
#leap-year.computation-template
33
#case_1.computation-template
44
#viplab-computation-template

‎viplab-standalone-frontend-vue/package-lock.json

Lines changed: 0 additions & 26 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎viplab-standalone-frontend-vue/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@
4343
"vue-easy-dnd": "^1.19.0",
4444
"vue-plotly": "^1.1.0",
4545
"vue-prism-editor": "^1.2.2",
46-
"vue-promised": "^2.1.0",
4746
"vue-router": "^3.5.2",
4847
"vue-simple-alert": "^1.1.1",
4948
"vue-slider-component": "^3.2.11",

‎viplab-standalone-frontend-vue/src/components/vtk-plots/VtkComponent.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -275,8 +275,9 @@ export default {
275275
async renderNewFile() {
276276
var inputFileUrl = this.files[this.fileIndex];
277277
278-
var lastIndex = inputFileUrl.lastIndexOf('/');
279-
let inputFile = inputFileUrl.substr(lastIndex + 1);
278+
let url = new URL(inputFileUrl).pathname
279+
var lastIndex = url.lastIndexOf('/');
280+
let inputFile = url.substr(lastIndex + 1);
280281
281282
// initialize buffer for the ITK reader
282283
vtkITKPolyDataReader.setReadPolyDataArrayBufferFromITK(

‎viplab-standalone-frontend-vue/src/pages/teacher/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -798,7 +798,7 @@
798798
</div>
799799
<!-- tooltip -->
800800
<div class="tooltip-icon pl-2">
801-
<b-icon-info-circle v-tooltip.top-center="'Absolute path to file. It is not allowed to start with /.'"></b-icon-info-circle>
801+
<b-icon-info-circle v-tooltip.top-center="'Relative path to file. It is not allowed to start with /. The path is relative to the path you entered in the configurtion under resources.volume.'"></b-icon-info-circle>
802802
</div>
803803
</div>
804804
</div>

‎viplab-standalone-frontend-vue/src/pages/viplab/App.vue

Lines changed: 83 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -397,32 +397,27 @@
397397
ref="outPartcontent"
398398
class="outPartcontent"
399399
>
400-
<Promised :promise="getContentFromS3(artifact.url, false)">
401-
<!-- Use the "pending" slot to display a loading message -->
402-
<template v-slot:pending>
403-
<p>Loading...</p>
404-
</template>
405-
<!-- The default scoped slot will be used as the result -->
406-
<template v-slot="data">
407-
<div>
400+
<div v-if="promiseError.get(artifact.url)">
401+
Error: {{ promiseError.get(artifact.url).message }}
402+
</div>
403+
<div v-else-if="isLoading.get(artifact.url)">
404+
Loading...
405+
</div>
406+
<div v-else-if="!isLoading.get(artifact.url)">
408407
<ace-editor-component
409408
:isParameter="false"
410409
:isMustache="false"
411410
:readonly="true"
412411
:lang="(artifact.MIMEtype == 'application/json') ? 'json' : 'text'"
413412
:item='{
414413
"identifier" : "Editor" + artifact.identifier,
415-
"content" : base64url(data),
414+
"content" : s3Contents.get(artifact.url),
416415
"path" : artifact.path
417416
}'
418417
:ref="artifact.path"
419418
></ace-editor-component>
420-
</div>
421-
</template>
422-
<template v-slot:rejected="error">
423-
<p>Error: {{ error.message }}</p>
424-
</template>
425-
</Promised>
419+
</div>
420+
426421
</div>
427422
<div v-else-if="artifact.MIMEtype == 'text/csv'">
428423
<div v-if="artifact.plots">
@@ -445,55 +440,38 @@
445440
</div>
446441
</div>
447442
<div v-else-if="artifact.MIMEtype == 'image/png' || artifact.MIMEtype == 'image/jpeg'">
448-
<Promised :promise="getContentFromS3(artifact.url, true)">
449-
<!-- Use the "pending" slot to display a loading message -->
450-
<template v-slot:pending>
451-
<p>Loading...</p>
452-
</template>
453-
<!-- The default scoped slot will be used as the result -->
454-
<template v-slot="data">
455-
<img
456-
:src="data"
457-
:ref="artifact.path"/>
458-
</template>
459-
<template v-slot:rejected="error">
460-
<p>Error: {{ error.message }}</p>
461-
</template>
462-
</Promised>
443+
<img
444+
:src="artifact.url"
445+
:ref="artifact.path"/>
463446
</div>
464447
<div v-else>
465-
<Promised :promise="getContentFromS3(artifact.url, false)">
466-
<!-- Use the "pending" slot to display a loading message -->
467-
<template v-slot:pending>
468-
<p>Loading...</p>
469-
</template>
470-
<!-- The default scoped slot will be used as the result -->
471-
<template v-slot="data">
472-
<!-- Render ViPLabGraphics whose files need to be downloaded from S3 -->
473-
<!-- show viplab grid plot -->
474-
<div>
448+
449+
<div v-if="promiseError.get(artifact.url)">
450+
Error: {{ promiseError.get(artifact.url).message }}
451+
</div>
452+
<div v-else-if="isLoading.get(artifact.url)">
453+
Loading...
454+
</div>
455+
<div v-else-if="!isLoading.get(artifact.url)">
456+
<div>
475457
<div
476458
v-if="artifact.MIMEtype === 'application/x-vgfc'"
477459
ref="outPartcontent"
478460
class="outPartcontent"
479461
>
480-
481-
<grid-plot :plotData="data"></grid-plot>
462+
<grid-plot :plotData="s3Contents.get(artifact.url)"></grid-plot>
482463
</div>
483464
<!-- show viplab 2d plot -->
484465
<div
485466
v-if="artifact.MIMEtype === 'application/x-vgf'"
486467
ref="outPartcontent"
487468
class="outPartcontent"
488469
>
489-
<plot-2d :plotData="data"></plot-2d>
470+
<plot-2d :plotData="s3Contents.get(artifact.url)"></plot-2d>
490471
</div>
491472
</div>
492-
</template>
493-
<template v-slot:rejected="error">
494-
<p>Error: {{ error.message }}</p>
495-
</template>
496-
</Promised>
473+
</div>
474+
497475
</div>
498476
</div>
499477
</b-tab>
@@ -559,8 +537,6 @@ import CsvPlot from '../../components/csv-plots/CsvPlot.vue';
559537
560538
import AnsiOutput from "../../components/AnsiOutput.vue";
561539
562-
import {Promised} from "vue-promised";
563-
564540
const Handlebars = require('handlebars');
565541
566542
import {ValidationObserver} from "vee-validate";
@@ -578,7 +554,6 @@ export default {
578554
VtkComponent,
579555
Plot2d,
580556
CsvPlot,
581-
Promised,
582557
ValidationObserver,
583558
AceEditorComponent,
584559
AnsiOutput
@@ -597,7 +572,10 @@ export default {
597572
asForm: true,
598573
isPartParameters: 0,
599574
waitingResponse: false,
600-
statusMessage: { "timestamp" : "2022-04-21T06:30+01:00", "message" : "Waiting..."}
575+
statusMessage: { "timestamp" : "2022-04-21T06:30+01:00", "message" : "Waiting..."},
576+
s3Contents: new Map(),
577+
isLoading: new Map(),
578+
promiseError: new Map(),
601579
};
602580
},
603581
watch: {
@@ -666,7 +644,7 @@ export default {
666644
}
667645
}
668646
return false;
669-
}
647+
},
670648
},
671649
methods: {
672650
// Make the function wait until the connection is made...
@@ -707,8 +685,13 @@ export default {
707685
this.$store.commit("updateDataTemplate", data);
708686
} else if (Object.keys(this.$store.state.jsonTemplate).length > 0) {
709687
console.log("2")
710-
this.json = this.$store.state.jsonTemplate;
711-
this.dataTemplate = this.$store.state.dataTemplate;
688+
if (data && (data === "{{ data }}" || data === "")) {
689+
this.json = this.$store.state.jsonTemplate;
690+
this.dataTemplate = this.$store.state.dataTemplate;
691+
} else {
692+
this.json = JSON.parse(base64url.decode(data));
693+
this.$store.commit("updateDataTemplate", data);
694+
}
712695
} else {
713696
console.log("3")
714697
this.json = {};
@@ -718,7 +701,11 @@ export default {
718701
if (token && token !== "{{ token }}" && token !== "" && this.$store.state.token.length === 0) {
719702
this.$store.commit("updateToken", appDiv.getAttribute("data-token"));
720703
} else if (this.$store.state.token.length > 0) {
721-
this.token = this.$store.state.token;
704+
if (token && (token === "{{ token }}" || token === "")) {
705+
this.token = this.$store.state.token;
706+
} else {
707+
this.$store.commit("updateToken", appDiv.getAttribute("data-token"));
708+
}
722709
} else {
723710
this.token = "";
724711
}
@@ -933,8 +920,6 @@ export default {
933920
document.getElementById("submit").disabled = false;
934921
}
935922
936-
console.log("displayResult " + this.returnedOutputJson)
937-
938923
// if the first result came back, set the whole object, else, only add the new artifacts to the existing object
939924
// use JSON.parse(JSON.stringify(...)) to make sure a copy of the data is made, such that not only a reference is used
940925
if (this.returnedOutputJson === "") {
@@ -1116,32 +1101,51 @@ export default {
11161101
return value;
11171102
}
11181103
});
1104+
1105+
for(let a in this.returnedOutputJson.artifacts) {
1106+
let currentArtifact = this.returnedOutputJson.artifacts[a]
1107+
if (currentArtifact.type === "s3file") {
1108+
if (currentArtifact.MIMEtype === "text/plain" || currentArtifact.MIMEtype === "application/json") {
1109+
this.getContentFromS3(currentArtifact.url)
1110+
} else if (currentArtifact.MIMEtype === "application/x-vgf" || currentArtifact.MIMEtype === "application/x-vgf3" || currentArtifact.MIMEtype === "application/x-vgfc") {
1111+
this.getContentFromS3(currentArtifact.url, true)
1112+
}
1113+
}
1114+
}
11191115
11201116
//TODO: Vars nicht überschreiben, sondern ergänzen für intermediate
11211117
this.outputFiles = base64url.decode(result.result.output.stdout);
11221118
this.errorFiles = base64url.decode(result.result.output.stderr);
11231119
},
1124-
/** get content from s3 if it is an image, process differently */
1125-
async getContentFromS3(url, image) {
1126-
const response = await fetch(url, {
1127-
method: 'GET',
1128-
});
1129-
var test = null;
1130-
if (image) {
1131-
test = await response.blob().then(imageBlob => {
1132-
let imagesrc = URL.createObjectURL(imageBlob);
1133-
return imagesrc;
1134-
});
1135-
} else {
1136-
test = await response.text();
1137-
}
1138-
1139-
if (response.status >= 200 && response.status < 300) {
1140-
return Promise.resolve(test);
1141-
} else {
1142-
return Promise.reject(new Error("Unable to complete request for: " + url));
1143-
}
1120+
/** get content from s3 */
1121+
async getContentFromS3(url, isViPLabGraphics = false) {
1122+
this.isLoading.set(url, true)
1123+
this.promiseError.set(url, null)
11441124
1125+
fetch(url, { method: 'GET'})
1126+
.then((response) => {
1127+
if (response.ok) {
1128+
return response.text();
1129+
}
1130+
throw new Error('Something went wrong');
1131+
})
1132+
.then((responseText) => {
1133+
if (!isViPLabGraphics) {
1134+
this.s3Contents.set(url, base64url(responseText));
1135+
} else {
1136+
this.s3Contents.set(url, responseText);
1137+
}
1138+
})
1139+
.catch((error) => {
1140+
console.log("catch")
1141+
this.promiseError.set(url, error);
1142+
1143+
})
1144+
.finally(() => {
1145+
this.isLoading.set(url, false);
1146+
this.$forceUpdate();
1147+
});
1148+
11451149
},
11461150
/** return base64 image src for img-tag*/
11471151
imagesrc: function (base64Image, mimetype) {
@@ -1433,7 +1437,7 @@ export default {
14331437
let availableMIMEtypes = ["text/plain", "text/uri-list", "application/json", "image/png", "image/jpeg", "application/x-vgf", "application/x-vgf3", "application/x-vgfc", "text/csv", "application/vnd.kitware"]
14341438
let filtered = artifactsArray.filter(artifact => (availableMIMEtypes.indexOf(artifact.MIMEtype) > -1));
14351439
return filtered;
1436-
}
1440+
},
14371441
},
14381442
created() {
14391443
this.loadJsonFromFile();

0 commit comments

Comments
 (0)