Revises Markdown Pages and Reports

client/package.json

@@ -87,6 +87,7 @@
     "pinia": "^2.1.7",
     "popper.js": "^1.16.1",
     "pretty-bytes": "^6.1.1",
+    "prismjs": "^1.29.0",
     "pyre-to-regexp": "^0.0.6",
     "querystring-es3": "^0.2.1",
     "regenerator-runtime": "^0.14.0",

client/src/components/WorkflowInvocationState/VegaWrapper.vue → client/src/components/Common/VegaWrapper.vue

@@ -1,5 +1,10 @@
 <template>
-    <div ref="chartContainer" :style="style"></div>
+    <div>
+        <b-alert v-if="errorMessage" class="p-2" variant="danger" show>
+            {{ errorMessage }}
+        </b-alert>
+        <div ref="chartContainer" :style="style" />
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -24,21 +29,28 @@ const style = computed(() => {
 });
 
 const chartContainer = ref<HTMLDivElement | null>(null);
+const errorMessage = ref<string>("");
+
 let vegaView: any;
 
 async function embedChart() {
-    if (vegaView) {
-        vegaView.finalize();
-    }
-    if (chartContainer.value !== null) {
-        const result = await embed(chartContainer.value, props.spec, { renderer: "svg" });
-        vegaView = result.view;
+    try {
+        if (vegaView) {
+            vegaView.finalize();
+        }
+        if (chartContainer.value !== null) {
+            const result = await embed(chartContainer.value, props.spec, { renderer: "svg" });
+            vegaView = result.view;
+        }
+        errorMessage.value = "";
+    } catch (e: any) {
+        errorMessage.value = String(e);
     }
 }
 
 onMounted(embedChart);
 
-watch(props, embedChart, { immediate: true, deep: true });
+watch(props, embedChart, { deep: true });
 useResizeObserver(chartContainer, () => {
     if (vegaView) {
         vegaView.resize();

client/src/components/Markdown/Editor/CellAdd.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="cell-guide d-flex flex-column justify-content-between">
+        <CellButton ref="buttonRef" title="Insert Cell">
+            <FontAwesomeIcon :icon="faPlus" />
+        </CellButton>
+        <Popper v-if="buttonRef" :reference-el="buttonRef.$el" trigger="click" placement="right" mode="light">
+            <DelayedInput class="p-1" :delay="100" placeholder="Search" @change="query = $event" />
+            <div class="cell-add-categories overflow-auto">
+                <div v-if="filteredTemplates.length > 0">
+                    <div v-for="(category, categoryIndex) of filteredTemplates" :key="categoryIndex">
+                        <hr class="solid m-0" />
+                        <span class="d-flex justify-content-between">
+                            <small class="my-1 mx-3 text-info">{{ category.name }}</small>
+                        </span>
+                        <div v-if="category.templates.length > 0" class="cell-add-options">
+                            <CellOption
+                                v-for="(option, optionIndex) of category.templates"
+                                :key="optionIndex"
+                                :title="option.title"
+                                :description="option.description"
+                                @click="$emit('click', { ...option.cell, toggle: true })" />
+                        </div>
+                    </div>
+                </div>
+                <b-alert v-else class="m-1 p-1" variant="info" show> No results found for "{{ query }}". </b-alert>
+            </div>
+        </Popper>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { computed, ref } from "vue";
+
+import { cellTemplates } from "./templates";
+import type { CellType, TemplateCategory } from "./types";
+
+import CellButton from "./CellButton.vue";
+import CellOption from "./CellOption.vue";
+import DelayedInput from "@/components/Common/DelayedInput.vue";
+import Popper from "@/components/Popper/Popper.vue";
+
+defineEmits<{
+    (e: "click", cell: CellType): void;
+}>();
+
+const buttonRef = ref();
+const query = ref("");
+
+const filteredTemplates = computed(() => {
+    const filteredCategories: Array<TemplateCategory> = [];
+    cellTemplates.forEach((category) => {
+        const matchedTemplates = category.templates.filter(
+            (template) =>
+                category.name.toLowerCase().includes(query.value.toLowerCase()) ||
+                template.title.toLowerCase().includes(query.value.toLowerCase()) ||
+                template.description.toLowerCase().includes(query.value.toLowerCase())
+        );
+        if (matchedTemplates.length > 0) {
+            filteredCategories.push({
+                name: category.name,
+                templates: matchedTemplates,
+            });
+        }
+    });
+    return filteredCategories;
+});
+</script>
+
+<style>
+.cell-add-categories {
+    max-height: 20rem;
+    max-width: 15rem;
+    min-width: 15rem;
+}
+</style>

client/src/components/Markdown/Editor/CellButton.vue

@@ -0,0 +1,32 @@
+<template>
+    <BButton
+        v-b-tooltip.right
+        class="border-0 m-1 px-1 py-0"
+        :title="title"
+        variant="outline-primary"
+        @click="onClick()"
+        @mouseleave="onMouseLeave($event)">
+        <slot />
+    </BButton>
+</template>
+
+<script setup lang="ts">
+import { BButton } from "bootstrap-vue";
+
+defineProps<{
+    title: string;
+}>();
+
+const emit = defineEmits<{
+    (e: "click"): void;
+}>();
+
+function onMouseLeave(event: Event) {
+    const target = event.target as HTMLElement;
+    target.blur();
+}
+
+function onClick() {
+    emit("click");
+}
+</script>

client/src/components/Markdown/Editor/CellCode.vue

@@ -0,0 +1,98 @@
+<template>
+    <div ref="editor" class="mt-1 w-100" />
+</template>
+
+<script setup>
+import ace from "ace-builds";
+import { debounce } from "lodash";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+const DELAY = 300;
+
+const props = defineProps({
+    theme: {
+        type: String,
+        default: "github_light_default",
+    },
+    mode: {
+        type: String,
+        default: "json",
+    },
+    value: {
+        type: String,
+        required: true,
+    },
+});
+
+const emit = defineEmits(["change"]);
+
+const editor = ref(null);
+
+let aceEditor = null;
+
+const emitChange = debounce((newValue) => {
+    emit("change", newValue);
+}, DELAY);
+
+async function buildEditor() {
+    const modePath = `ace/mode/${props.mode}`;
+    const themePath = `ace/theme/${props.theme}`;
+    const modeUrl = await import(`ace-builds/src-noconflict/mode-${props.mode}?url`);
+    const themeUrl = await import(`ace-builds/src-noconflict/theme-${props.theme}?url`);
+    ace.config.setModuleUrl(modePath, modeUrl);
+    ace.config.setModuleUrl(themePath, themeUrl);
+    aceEditor = ace.edit(editor.value, {
+        highlightActiveLine: false,
+        highlightGutterLine: false,
+        maxLines: 30,
+        minLines: 1,
+        mode: modePath,
+        showPrintMargin: false,
+        theme: themePath,
+        useWorker: false,
+        value: props.value,
+        wrap: true,
+    });
+
+    aceEditor.on("blur", () => {
+        aceEditor.setOption("highlightActiveLine", false);
+        aceEditor.setOption("highlightGutterLine", false);
+        editor.value.classList.remove("cell-code-focus");
+    });
+
+    aceEditor.on("change", () => {
+        const newValue = aceEditor.getValue();
+        emitChange(newValue);
+    });
+
+    aceEditor.on("focus", () => {
+        aceEditor.setOption("highlightActiveLine", true);
+        aceEditor.setOption("highlightGutterLine", true);
+        editor.value.classList.add("cell-code-focus");
+    });
+}
+
+onBeforeUnmount(() => {
+    emitChange.cancel();
+});
+
+onMounted(() => {
+    buildEditor();
+});
+
+watch(
+    () => props.value,
+    (newValue) => {
+        if (aceEditor && newValue !== aceEditor.getValue()) {
+            aceEditor.setValue(newValue, -1);
+        }
+    }
+);
+</script>
+
+<style lang="scss">
+@import "theme/blue.scss";
+.cell-code-focus {
+    background-color: $gray-100;
+}
+</style>

client/src/components/Markdown/Editor/CellConfigure.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="p-4 bg-white mb-2">
+        <div class="d-flex justify-content-between align-items-center mb-3">
+            <div>
+                <div class="h2">Attach Data</div>
+                <div class="small">Fill in the fields below to map required inputs to this cell.</div>
+            </div>
+            <BButton variant="link" class="align-self-start"><FontAwesomeIcon :icon="faTimes" class="fa-lg" /></BButton>
+        </div>
+        <div class="mb-3">
+            <label class="form-label">Workflow</label>
+            <input type="text" class="form-control" />
+        </div>
+        <div class="mb-3">
+            <label class="form-label">History Dataset</label>
+            <input type="text" class="form-control" />
+        </div>
+        <div class="d-flex justify-content-end">
+            <BButton variant="outline-primary" class="mr-2">Cancel</BButton>
+            <BButton variant="outline-primary">OK</BButton>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+defineProps<{}>();
+
+defineEmits<{
+    (e: "click"): void;
+}>();
+</script>