Extract useBBlockNavigation composable; show source bblock for snippet refs

- Add composables/bblock-navigation.js with openBBlock, canOpenBBlock,
  getBBlockUrl — shared logic previously duplicated across components
- Migrate MarkdownText and TransformInfo to use the composable
- ExampleViewer: watch currentSnippet.ref, resolve it via findResource,
  and display the source bblock (identifier + name, linked) when it
  differs from the current bblock
- ExampleViewer: annotate json-path snippets with the JSONPath expression
  and a link to jsonpath-ng

Author: avillar

src/components/MarkdownText.vue

@@ -2,43 +2,20 @@
 import {md2html} from "@/lib/utils";
 import bblockService from "@/services/bblock.service";
 import {reactive} from "vue";
-import { useRouter } from 'vue-router'
+import { useBBlockNavigation } from "@/composables/bblock-navigation";
 
 const props = defineProps({
   baseUrl: String,
   content: String,
 });
 
-const router = useRouter();
+const { openBBlock } = useBBlockNavigation();
 
 const errorMessage = reactive({
   visible: false,
   text: '',
 });
 
-const openBBlock = (bblock, newWindow = false) => {
-  if (bblockService.isShown(bblock)) {
-    const route = {
-      name: 'BuildingBlock',
-      params: {
-        id: bblock.itemIdentifier,
-      },
-    };
-    if (newWindow) {
-      window.open(router.resolve(route).href, '_blank')
-    } else {
-      router.push(route);
-    }
-  } else if (bblock.documentation?.['bblocks-viewer']) {
-    const url = bblock.documentation['bblocks-viewer'].url;
-    if (newWindow) {
-      window.open(url, '_blank');
-    } else {
-      window.location.href = url;
-    }
-  }
-};
-
 const interceptLinks = (e, newWindow = false) => {
   let url = null;
   if (e.target?.href) {

src/components/bblock/ExampleViewer.vue

@@ -151,7 +151,20 @@
       <v-col cols="12" :md="example.snippets?.length ? 6 : 12" v-if="showContentSidebar">
         <MarkdownText class="example-content" :content="example.content" :base-url="sourceFilesUrl"></MarkdownText>
         <div v-if="currentSnippetRemote">
-          This snippet was retrieved from <a :href="currentSnippet.ref" target="_blank">{{ currentSnippet.ref }}</a>.
+          <template v-if="currentSnippet['json-path']">
+            This snippet was extracted from <a :href="currentSnippet.ref" target="_blank">{{ currentSnippet.ref }}</a>
+            using the <a href="https://pypi.org/project/jsonpath-ng/" target="_blank">JSONPath</a>
+            expression <code>{{ currentSnippet['json-path'] }}</code>.
+          </template>
+          <template v-else>
+            This snippet was retrieved from <a :href="currentSnippet.ref" target="_blank">{{ currentSnippet.ref }}</a>.
+          </template>
+          <template v-if="refBBlock && refBBlock.itemIdentifier !== bblock.itemIdentifier">
+            <span v-if="canOpenBBlock(refBBlock)">
+              (from <a :href="getBBlockUrl(refBBlock)" @click.prevent="openBBlock(refBBlock)"><code>{{ refBBlock.itemIdentifier }}</code> - {{ refBBlock.name }}</a>)
+            </span>
+            <span v-else>(from <code>{{ refBBlock.itemIdentifier }}</code> - {{ refBBlock.name }})</span>
+          </template>
         </div>
       </v-col>
       <v-col cols="12" :md="showContentSidebar ? 6 : 12" v-if="example.snippets?.length">
@@ -242,7 +255,6 @@
 </template>
 <script setup>
 import { computed, reactive, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
 import CodeViewer from "@/components/CodeViewer.vue";
 import JsonLdIcon from '@/assets/json-ld-data-white.svg';
 import MarkdownText from "@/components/MarkdownText.vue";
@@ -251,6 +263,7 @@ import TransformInfo from "@/components/bblock/TransformInfo.vue";
 import { geoJsonLanguageIds } from "@/models/mime-types";
 import { getTypeColor } from "@/models/transforms";
 import { useFetchDocumentByUrl } from "@/composables/bblock";
+import { useBBlockNavigation } from "@/composables/bblock-navigation";
 import CopyToClipboardButton from "@/components/CopyToClipboardButton.vue";
 import bblockService from "@/services/bblock.service";
 
@@ -261,13 +274,14 @@ const props = defineProps({
   sourceFilesUrl: String,
 });
 
-const router = useRouter();
+const { openBBlock, canOpenBBlock, getBBlockUrl } = useBBlockNavigation();
 
 const fullscreen = ref(false);
 const showTransformDetails = ref(false);
 const transformOutputView = ref('code');
 const profilesMenuVisible = ref(false);
 const profileBBlocks = ref({});
+const refBBlock = ref(null);
 
 watch(() => props.language, () => {
   showTransformDetails.value = false;
@@ -305,6 +319,13 @@ const currentSnippetRemote = computed(() =>
   currentSnippet.value?.ref && /^https?:\/\//.test(currentSnippet.value.ref)
 );
 
+watch(currentSnippet, async (snippet) => {
+  refBBlock.value = null;
+  if (snippet?.ref) {
+    refBBlock.value = await bblockService.findResource(snippet.ref) ?? null;
+  }
+}, { immediate: true });
+
 const showContentSidebar = computed(() =>
   props.example.content?.trim() || currentSnippetRemote.value
 );

src/components/bblock/TransformInfo.vue

@@ -139,12 +139,12 @@
 </template>
 <script setup>
 import { ref, watch, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
 import CodeViewer from "@/components/CodeViewer.vue";
 import CopyToClipboardButton from "@/components/CopyToClipboardButton.vue";
 import MarkdownText from "@/components/MarkdownText.vue";
 import bblockService from "@/services/bblock.service";
 import { getTypeColor, getCodeLanguage } from "@/models/transforms";
+import { useBBlockNavigation } from "@/composables/bblock-navigation";
 
 const props = defineProps({
   transform: { type: Object, required: true },
@@ -153,7 +153,7 @@ const props = defineProps({
   sourceFilesUrl: { type: String, default: null },
 });
 
-const router = useRouter();
+const { openBBlock, canOpenBBlock, getBBlockUrl } = useBBlockNavigation();
 const toArray = v => !v ? [] : (Array.isArray(v) ? v : [v]);
 
 const pluginByType = ref({});
@@ -180,30 +180,9 @@ watch(() => props.transform?.outputs?.profiles, async (profiles) => {
   outputProfileBBlocks.value = result;
 }, { immediate: true });
 
-function canOpenOutputProfile(uri) {
-  const bblock = outputProfileBBlocks.value[uri];
-  if (!bblock) return false;
-  return bblockService.isShown(bblock) || !!bblock.documentation?.['bblocks-viewer'];
-}
-
-function getOutputProfileUrl(uri) {
-  const bblock = outputProfileBBlocks.value[uri];
-  if (!bblock) return undefined;
-  if (bblockService.isShown(bblock)) {
-    return router.resolve({ name: 'BuildingBlock', params: { id: bblock.itemIdentifier } }).href;
-  }
-  return bblock.documentation?.['bblocks-viewer']?.url;
-}
-
-function openOutputProfile(uri) {
-  const bblock = outputProfileBBlocks.value[uri];
-  if (!bblock) return;
-  if (bblockService.isShown(bblock)) {
-    router.push({ name: 'BuildingBlock', params: { id: bblock.itemIdentifier } });
-  } else if (bblock.documentation?.['bblocks-viewer']) {
-    window.open(bblock.documentation['bblocks-viewer'].url);
-  }
-}
+function canOpenOutputProfile(uri) { return canOpenBBlock(outputProfileBBlocks.value[uri]); }
+function getOutputProfileUrl(uri) { return getBBlockUrl(outputProfileBBlocks.value[uri]); }
+function openOutputProfile(uri) { openBBlock(outputProfileBBlocks.value[uri]); }
 </script>
 <style scoped lang="scss">
 .transform-header {

src/composables/bblock-navigation.js

@@ -0,0 +1,34 @@
+import { useRouter } from 'vue-router';
+import bblockService from '@/services/bblock.service';
+
+export function useBBlockNavigation() {
+  const router = useRouter();
+
+  function getBBlockUrl(bblock) {
+    if (bblockService.isShown(bblock)) {
+      return router.resolve({ name: 'BuildingBlock', params: { id: bblock.itemIdentifier } }).href;
+    } else if (bblock.documentation?.['bblocks-viewer']) {
+      return bblock.documentation['bblocks-viewer'].url;
+    }
+    return null;
+  }
+
+  function canOpenBBlock(bblock) {
+    return bblockService.isShown(bblock) || !!bblock.documentation?.['bblocks-viewer'];
+  }
+
+  function openBBlock(bblock, newWindow = false) {
+    if (bblockService.isShown(bblock)) {
+      const route = { name: 'BuildingBlock', params: { id: bblock.itemIdentifier } };
+      if (newWindow) {
+        window.open(router.resolve(route).href, '_blank');
+      } else {
+        router.push(route);
+      }
+    } else if (bblock.documentation?.['bblocks-viewer']) {
+      window.open(bblock.documentation['bblocks-viewer'].url, '_blank');
+    }
+  }
+
+  return { getBBlockUrl, canOpenBBlock, openBBlock };
+}