@galaxy-tool-util/gxwf-report-shell 0.0.0

package/src/ValidationReport.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="operation-report">
+    <Message v-if="report.skipped_reason" severity="warn" :closable="false">
+      Skipped: {{ report.skipped_reason }}
+    </Message>
+
+    <template v-if="structureErrors.length || encodingErrors.length">
+      <Message severity="error" :closable="false">
+        <ul class="error-list">
+          <li v-for="(e, i) in structureErrors" :key="'s' + i">{{ e }}</li>
+          <li v-for="(e, i) in encodingErrors" :key="'e' + i">{{ e }}</li>
+        </ul>
+      </Message>
+    </template>
+
+    <Panel
+      v-if="report.clean_report != null"
+      header="Pre-validation clean"
+      :toggleable="true"
+      :collapsed="true"
+    >
+      <CleanReport :report="report.clean_report" />
+    </Panel>
+
+    <div class="summary-row">
+      <Tag
+        v-for="(count, key) in report.summary"
+        :key="key"
+        :value="`${key}: ${count}`"
+        :severity="key === 'ok' ? 'success' : key === 'fail' ? 'danger' : 'secondary'"
+      />
+    </div>
+
+    <DataTable :value="report.results" size="small" class="results-table">
+      <Column field="step" header="Step" />
+      <Column header="Tool">
+        <template #body="{ data }: { data: ValidationStepResult }">
+          <ToolId :tool-id="data.tool_id" />
+        </template>
+      </Column>
+      <Column header="Status">
+        <template #body="{ data }: { data: ValidationStepResult }">
+          <Tag :value="data.status" :severity="statusSeverity(data.status)" />
+        </template>
+      </Column>
+      <Column header="Errors">
+        <template #body="{ data }: { data: ValidationStepResult }">
+          <ul v-if="data.errors.length" class="error-list">
+            <li v-for="(e, i) in data.errors" :key="i">{{ e }}</li>
+          </ul>
+        </template>
+      </Column>
+    </DataTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { SingleValidationReport, ValidationStepResult } from "@galaxy-tool-util/schema";
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import Panel from "primevue/panel";
+import Tag from "primevue/tag";
+import Message from "primevue/message";
+import CleanReport from "./CleanReport.vue";
+import ToolId from "./ToolId.vue";
+
+const props = defineProps<{
+  report: SingleValidationReport;
+}>();
+
+const structureErrors = computed(() => props.report.structure_errors ?? []);
+const encodingErrors = computed(() => props.report.encoding_errors ?? []);
+
+function statusSeverity(status: ValidationStepResult["status"]) {
+  if (status === "ok") return "success";
+  if (status === "fail") return "danger";
+  return "secondary";
+}
+</script>
+
+<style scoped>
+.operation-report {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.summary-row {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.results-table {
+  margin-top: 0.5rem;
+}
+
+.error-list {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+</style>

package/src/index.ts

@@ -0,0 +1,14 @@
+export { default as ValidationReport } from "./ValidationReport.vue";
+export { default as LintReport } from "./LintReport.vue";
+export { default as CleanReport } from "./CleanReport.vue";
+export { default as RoundtripReport } from "./RoundtripReport.vue";
+export { default as ExportReport } from "./ExportReport.vue";
+export { default as TreeValidationReport } from "./TreeValidationReport.vue";
+export { default as TreeLintReport } from "./TreeLintReport.vue";
+export { default as TreeCleanReport } from "./TreeCleanReport.vue";
+export { default as TreeRoundtripReport } from "./TreeRoundtripReport.vue";
+export { default as ReportShell } from "./ReportShell.vue";
+export { default as RawJsonView } from "./RawJsonView.vue";
+export { default as ToolId } from "./ToolId.vue";
+export { parseToolId, formatToolId } from "./toolId.js";
+export type { ParsedToolId } from "./toolId.js";

package/src/shell.ts

@@ -0,0 +1,42 @@
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+import Aura from "@primevue/themes/aura";
+import ReportShell from "./ReportShell.vue";
+
+interface ReportPayload {
+  type:
+    | "validate"
+    | "lint"
+    | "clean"
+    | "roundtrip"
+    | "validate-tree"
+    | "lint-tree"
+    | "clean-tree"
+    | "roundtrip-tree";
+  data: unknown;
+}
+
+function mount(payload: ReportPayload) {
+  const app = createApp(ReportShell, { report: payload });
+  app.use(PrimeVue, { theme: { preset: Aura } });
+  app.mount("#gxwf-report");
+}
+
+// Support two data injection patterns:
+// 1. Static HTML: window.__GXWF_REPORT__ set before this script tag
+// 2. VSCode webview / dynamic: postMessage after load
+const initial = (window as unknown as Record<string, unknown>).__GXWF_REPORT__ as
+  | ReportPayload
+  | undefined;
+if (initial) {
+  mount(initial);
+} else {
+  // postMessage-based injection for VSCode webview or other dynamic hosts.
+  // Host sends: { command: "render", type: "validate", data: {...} }
+  window.addEventListener("message", (event: MessageEvent) => {
+    const msg = event.data as { command?: string; type?: string; data?: unknown };
+    if (msg.command === "render" && msg.type && msg.data) {
+      mount({ type: msg.type as ReportPayload["type"], data: msg.data });
+    }
+  });
+}

package/src/toolId.ts

@@ -0,0 +1,30 @@
+/**
+ * Parse a Galaxy ToolShed tool ID into display parts.
+ *
+ * ToolShed format: {host}/repos/{owner}/{repo}/{tool_name}/{version}
+ * Example: toolshed.g2.bx.psu.edu/repos/iuc/query_tabular/query_tabular/3.3.2
+ *   → { toolName: "query_tabular", version: "3.3.2", owner: "iuc", repo: "query_tabular" }
+ *
+ * Non-toolshed IDs (built-ins like "__DATA_FETCH__") are returned as-is via `formatToolId`.
+ */
+export interface ParsedToolId {
+  toolName: string;
+  version: string;
+  owner: string;
+  repo: string;
+}
+
+export function parseToolId(id: string): ParsedToolId | null {
+  const match = id.match(/\/repos\/([^/]+)\/([^/]+)\/([^/]+)\/([^/]+)$/);
+  if (!match) return null;
+  const [, owner, repo, toolName, version] = match;
+  return { owner, repo, toolName, version };
+}
+
+/** Format a raw tool_id (possibly null) as a short human-readable string. */
+export function formatToolId(id: string | null): string {
+  if (!id) return "—";
+  const parsed = parseToolId(id);
+  if (!parsed) return id;
+  return `${parsed.toolName}@${parsed.version} (${parsed.owner}/${parsed.repo})`;
+}