2017-08-17 22:00:37 +05:30
|
|
|
<script>
|
2019-03-02 22:35:43 +05:30
|
|
|
import CodeOutput from '../code/index.vue';
|
|
|
|
import HtmlOutput from './html.vue';
|
|
|
|
import ImageOutput from './image.vue';
|
2021-03-08 18:12:59 +05:30
|
|
|
import LatexOutput from './latex.vue';
|
2023-01-13 00:05:48 +05:30
|
|
|
import MarkdownOutput from './markdown.vue';
|
2023-05-27 22:25:52 +05:30
|
|
|
import ErrorOutput from './error.vue';
|
2023-01-13 00:05:48 +05:30
|
|
|
|
|
|
|
const TEXT_MARKDOWN = 'text/markdown';
|
2023-05-27 22:25:52 +05:30
|
|
|
const ERROR_OUTPUT_TYPE = 'error';
|
2017-08-17 22:00:37 +05:30
|
|
|
|
2018-12-13 13:39:08 +05:30
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
count: {
|
|
|
|
type: Number,
|
|
|
|
required: false,
|
|
|
|
default: 0,
|
2017-08-17 22:00:37 +05:30
|
|
|
},
|
2019-03-02 22:35:43 +05:30
|
|
|
outputs: {
|
|
|
|
type: Array,
|
2019-02-15 15:39:39 +05:30
|
|
|
required: true,
|
2018-12-13 13:39:08 +05:30
|
|
|
},
|
2019-12-21 20:55:43 +05:30
|
|
|
metadata: {
|
|
|
|
type: Object,
|
|
|
|
default: () => ({}),
|
2020-04-22 19:07:51 +05:30
|
|
|
required: false,
|
2019-12-21 20:55:43 +05:30
|
|
|
},
|
2018-12-13 13:39:08 +05:30
|
|
|
},
|
2019-03-02 22:35:43 +05:30
|
|
|
methods: {
|
2019-07-07 11:18:12 +05:30
|
|
|
outputType(output) {
|
|
|
|
if (output.text) {
|
|
|
|
return 'text/plain';
|
2023-05-27 22:25:52 +05:30
|
|
|
} else if (output.output_type === ERROR_OUTPUT_TYPE) {
|
|
|
|
return 'error';
|
2019-07-07 11:18:12 +05:30
|
|
|
} else if (output.data['image/png']) {
|
|
|
|
return 'image/png';
|
2021-02-22 17:27:13 +05:30
|
|
|
} else if (output.data['image/jpeg']) {
|
|
|
|
return 'image/jpeg';
|
2019-07-07 11:18:12 +05:30
|
|
|
} else if (output.data['text/html']) {
|
|
|
|
return 'text/html';
|
2021-03-08 18:12:59 +05:30
|
|
|
} else if (output.data['text/latex']) {
|
|
|
|
return 'text/latex';
|
2019-07-07 11:18:12 +05:30
|
|
|
} else if (output.data['image/svg+xml']) {
|
|
|
|
return 'image/svg+xml';
|
2023-01-13 00:05:48 +05:30
|
|
|
} else if (output.data[TEXT_MARKDOWN]) {
|
|
|
|
return TEXT_MARKDOWN;
|
2019-07-07 11:18:12 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
return 'text/plain';
|
|
|
|
},
|
2019-03-02 22:35:43 +05:30
|
|
|
dataForType(output, type) {
|
|
|
|
let data = output.data[type];
|
2017-08-17 22:00:37 +05:30
|
|
|
|
2023-01-13 00:05:48 +05:30
|
|
|
if (typeof data === 'object' && this.outputType(output) !== TEXT_MARKDOWN) {
|
2019-03-02 22:35:43 +05:30
|
|
|
data = data.join('');
|
2018-12-13 13:39:08 +05:30
|
|
|
}
|
|
|
|
|
2019-03-02 22:35:43 +05:30
|
|
|
return data;
|
2018-12-13 13:39:08 +05:30
|
|
|
},
|
2019-03-02 22:35:43 +05:30
|
|
|
getComponent(output) {
|
|
|
|
if (output.text) {
|
|
|
|
return CodeOutput;
|
2023-05-27 22:25:52 +05:30
|
|
|
} else if (output.output_type === ERROR_OUTPUT_TYPE) {
|
|
|
|
return ErrorOutput;
|
2019-03-02 22:35:43 +05:30
|
|
|
} else if (output.data['image/png']) {
|
|
|
|
return ImageOutput;
|
2021-02-22 17:27:13 +05:30
|
|
|
} else if (output.data['image/jpeg']) {
|
|
|
|
return ImageOutput;
|
2019-03-02 22:35:43 +05:30
|
|
|
} else if (output.data['text/html']) {
|
|
|
|
return HtmlOutput;
|
2021-03-08 18:12:59 +05:30
|
|
|
} else if (output.data['text/latex']) {
|
|
|
|
return LatexOutput;
|
2019-03-02 22:35:43 +05:30
|
|
|
} else if (output.data['image/svg+xml']) {
|
|
|
|
return HtmlOutput;
|
2023-01-13 00:05:48 +05:30
|
|
|
} else if (output.data[TEXT_MARKDOWN]) {
|
|
|
|
return MarkdownOutput;
|
2018-12-13 13:39:08 +05:30
|
|
|
}
|
2017-08-17 22:00:37 +05:30
|
|
|
|
2019-03-02 22:35:43 +05:30
|
|
|
return CodeOutput;
|
2017-08-17 22:00:37 +05:30
|
|
|
},
|
2019-03-02 22:35:43 +05:30
|
|
|
rawCode(output) {
|
|
|
|
if (output.text) {
|
2020-05-24 23:13:21 +05:30
|
|
|
if (typeof output.text === 'string') {
|
|
|
|
return output.text;
|
|
|
|
}
|
2019-03-02 22:35:43 +05:30
|
|
|
return output.text.join('');
|
2018-12-13 13:39:08 +05:30
|
|
|
}
|
2017-08-17 22:00:37 +05:30
|
|
|
|
2023-05-27 22:25:52 +05:30
|
|
|
if (output.output_type === ERROR_OUTPUT_TYPE) {
|
|
|
|
return output.traceback;
|
|
|
|
}
|
|
|
|
|
2019-07-07 11:18:12 +05:30
|
|
|
return this.dataForType(output, this.outputType(output));
|
2017-08-17 22:00:37 +05:30
|
|
|
},
|
2018-12-13 13:39:08 +05:30
|
|
|
},
|
|
|
|
};
|
2017-08-17 22:00:37 +05:30
|
|
|
</script>
|
2018-03-17 18:26:18 +05:30
|
|
|
|
|
|
|
<template>
|
2019-03-02 22:35:43 +05:30
|
|
|
<div>
|
|
|
|
<component
|
|
|
|
:is="getComponent(output)"
|
|
|
|
v-for="(output, index) in outputs"
|
|
|
|
:key="index"
|
|
|
|
type="output"
|
2019-07-07 11:18:12 +05:30
|
|
|
:output-type="outputType(output)"
|
2019-03-02 22:35:43 +05:30
|
|
|
:count="count"
|
|
|
|
:index="index"
|
|
|
|
:raw-code="rawCode(output)"
|
2019-12-21 20:55:43 +05:30
|
|
|
:metadata="metadata"
|
2019-03-02 22:35:43 +05:30
|
|
|
/>
|
|
|
|
</div>
|
2018-03-17 18:26:18 +05:30
|
|
|
</template>
|