First attempt at displaying transform outputs

src/components/BuildingBlock.vue

@@ -202,6 +202,7 @@
                     </v-expansion-panel-title>
                     <v-expansion-panel-text>
                       <example-viewer
+                        :bblock="bblock"
                         :example="example"
                         :language="languageTabs.find(l => l.id === selectedLanguageTabs[exampleIdx])"
                         :source-files-url="bblock.sourceFiles"

src/components/bblock/ExampleTransformResults.vue

@@ -0,0 +1,101 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col>
+        <v-select
+          v-model="selectedOutput"
+          label="Select a transform"
+          :items="outputTransforms"
+          item-props="true"
+          return-object
+        >
+          <template #item="{ props, item }">
+            <v-list-item
+              v-bind="props"
+              :title="item.raw.transform.id"
+            >
+              <v-list-item-subtitle>
+                {{ item.raw.snippet.language.label }} &#8594; {{ item.raw.transform.outputs.mediaTypes[0].label }}
+              </v-list-item-subtitle>
+            </v-list-item>
+          </template>
+          <template #selection="{ item }">
+            {{ item.raw.transform.id }}
+            <span class="text-caption ml-2 align-self-end">{{ item.raw.snippet.language.label }} &#8594; {{ item.raw.transform.outputs.mediaTypes[0].label }}</span>
+          </template>
+        </v-select>
+        <div v-if="selectedOutput?.transform?.description">
+          {{ selectedOutput.transform.description }}
+        </div>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col lg="6">
+        <p class="text-h6">Input ({{ selectedOutput.snippet.language.label }})</p>
+        <div style="max-height: 30em; overflow-y: auto; font-size: 90%">
+          <code-viewer
+            :code="selectedOutput.snippet.code"
+            :language="selectedOutput.snippet.language.id"
+          >
+          </code-viewer>
+        </div>
+      </v-col>
+      <v-col lg="6">
+        <p class="text-h6">Output ({{ selectedOutput.transform.outputs.mediaTypes[0].label }})</p>
+        <div style="max-height: 30em; overflow-y: auto; font-size: 90%">
+          <div class="text-center" v-if="outputStatus.loading">
+            <v-progress-circular
+              indeterminate
+              color="primary"
+              size="64"
+            >
+            </v-progress-circular>
+          </div>
+          <code-viewer
+            v-if="!outputStatus.loading && !outputStatus.error && outputStatus.contents"
+            :code="outputStatus.contents"
+            :language="selectedOutput.transform.outputs.mediaTypes[0].id"
+          >
+          </code-viewer>
+          <v-alert v-if="outputStatus.error" type="error">Error loading transform output from {{ selectedOutput.result }}</v-alert>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+<script setup>
+import {computed, reactive, ref, watch, watchEffect} from "vue";
+import CodeViewer from "@/components/CodeViewer.vue";
+import {useFetchDocumentByUrl} from "@/composables/bblock";
+
+const props = defineProps({
+  bblock: {
+    type: Object,
+    required: true,
+  },
+  example: {
+    type: Object,
+    required: true,
+  },
+});
+
+const outputTransforms = ref([]);
+
+for (const transform of props.bblock.transforms) {
+  for (const snippet of props.example.snippets) {
+    const snippetResult = snippet?.transformResults?.[transform.id];
+    if (!snippetResult) {
+      continue;
+    }
+    outputTransforms.value.push({
+      transform,
+      snippet,
+      result: snippetResult,
+    });
+  }
+}
+
+const selectedOutput = outputTransforms.value[0];
+
+const outputStatus = reactive(useFetchDocumentByUrl(props.bblock, computed(() => selectedOutput?.result)));
+</script>

src/components/bblock/ExampleViewer.vue

@@ -25,7 +25,49 @@
             >
             </code-viewer>
           </div>
-          <div class="text-right mt-2">
+          <div class="d-flex mt-2">
+            <v-dialog>
+              <template #activator="{ props }">
+                <v-btn
+                  v-if="currentSnippet"
+                  prepend-icon="mdi-file-swap"
+                  class="mr-1"
+                  color="primary"
+                  variant="flat"
+                  v-bind="props"
+                >
+                  Transform results
+                </v-btn>
+              </template>
+
+              <template #default="{ isActive }">
+                <v-card>
+                  <v-card-title>
+                    <div class="d-flex">
+                      {{ example.title }} - Transform results
+                      <v-spacer/>
+                      <v-btn icon variant="flat" size="x-small" style="font-size: 1.3rem" @click="isActive.value = false">&times;</v-btn>
+                    </div>
+                  </v-card-title>
+                  <v-card-text>
+                    <example-transform-results
+                      :bblock="bblock"
+                      :example="example"
+                    >
+                    </example-transform-results>
+                  </v-card-text>
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+
+                    <v-btn
+                      text="Close"
+                      @click="isActive.value = false"
+                    ></v-btn>
+                  </v-card-actions>
+                </v-card>
+              </template>
+            </v-dialog>
+            <v-spacer></v-spacer>
             <v-btn
               v-if="currentSnippet"
               @click="fullscreen = true"
@@ -98,10 +140,15 @@
 import {interceptLinks, md2html} from "@/lib/utils";
 import CodeViewer from "@/components/CodeViewer.vue";
 import JsonLdIcon from '@/assets/json-ld-data-white.svg';
+import ExampleTransformResults from "@/components/bblock/ExampleTransformResults.vue";
 
 export default {
-  components: {CodeViewer, JsonLdIcon},
+  components: {ExampleTransformResults, CodeViewer, JsonLdIcon},
   props: {
+    bblock: {
+      type: Object,
+      required: true,
+    },
     example: Object,
     language: Object,
     sourceFilesUrl: String,

src/composables/bblock.js

@@ -0,0 +1,47 @@
+import {ref, toValue, watchEffect} from 'vue';
+import bblockService from "@/services/bblock.service";
+
+export function useFetchDocument(bblock, property) {
+  const loading = ref(false);
+  const contents = ref(null);
+  const error = ref(null);
+
+  watchEffect(() => {
+    contents.value = null;
+    error.value = null;
+
+    const propertyValue = toValue(property);
+    const bblockValue = toValue(bblock);
+    if (bblockValue && propertyValue) {
+      loading.value = true;
+      bblockService.fetchDocument(bblockValue, propertyValue)
+        .then(data => contents.value = data)
+        .catch(err => error.value = err)
+        .finally(() => loading.value = false);
+    }
+  });
+
+  return {contents, loading, error};
+}
+
+export function useFetchDocumentByUrl(bblock, url) {
+  const loading = ref(false);
+  const contents = ref(null);
+  const error = ref(null);
+
+  const urlValue = toValue(url);
+  const bblockValue = toValue(bblock);
+  watchEffect(() => {
+    contents.value = null;
+    error.value = null;
+    if (bblock && url) {
+      loading.value = true;
+      bblockService.fetchDocumentByUrl(bblockValue, urlValue)
+        .then(data => contents.value = data)
+        .catch(err => error.value = err)
+        .finally(() => loading.value = false);
+    }
+  });
+
+  return {contents, loading, error};
+}