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

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@galaxy-tool-util/gxwf-report-shell",
+  "version": "0.0.0",
+  "description": "Pre-built Vue 3 Galaxy workflow report components for CDN delivery",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./*.vue": "./src/*.vue"
+  },
+  "files": [
+    "src",
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@primevue/themes": "^4.3.0",
+    "primevue": "^4.3.0",
+    "vue": "^3.5.0",
+    "@galaxy-tool-util/schema": "0.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.0",
+    "vite": "^6.2.0",
+    "vue-tsc": "^2.2.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jmchilton/galaxy-tool-util-ts",
+    "directory": "packages/gxwf-report-shell"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "vite build --config vite.config.shell.ts",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint src/",
+    "format": "prettier --check 'src/**/*.{ts,vue}'",
+    "format-fix": "prettier --write 'src/**/*.{ts,vue}'"
+  }
+}

package/src/CleanReport.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="operation-report">
+    <div class="summary-row">
+      <Tag
+        :value="`${report.total_removed} key${report.total_removed !== 1 ? 's' : ''} removed`"
+        :severity="report.total_removed > 0 ? 'warn' : 'success'"
+      />
+      <Tag
+        :value="`${report.steps_with_removals} step${report.steps_with_removals !== 1 ? 's' : ''} affected`"
+        severity="secondary"
+      />
+    </div>
+
+    <DataTable :value="report.results" size="small">
+      <Column field="step" header="Step" />
+      <Column header="Tool">
+        <template #body="{ data }: { data: CleanStepResult }">
+          <ToolId :tool-id="data.tool_id" />
+        </template>
+      </Column>
+      <Column header="Removed Keys">
+        <template #body="{ data }: { data: CleanStepResult }">
+          <span v-if="data.skipped" class="skip-reason">{{ data.skip_reason || "skipped" }}</span>
+          <span v-else-if="data.removed_keys.length === 0" class="no-changes">—</span>
+          <ul v-else class="key-list">
+            <li v-for="(k, i) in data.removed_keys" :key="i">
+              <code>{{ k }}</code>
+            </li>
+          </ul>
+        </template>
+      </Column>
+    </DataTable>
+
+    <Panel
+      v-if="report.before_content != null || report.after_content != null"
+      header="Workflow content"
+      :toggleable="true"
+      :collapsed="true"
+    >
+      <Tabs value="before">
+        <TabList>
+          <Tab value="before">Before</Tab>
+          <Tab value="after">After</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel value="before">
+            <pre class="content-pre">{{ report.before_content ?? "(none)" }}</pre>
+          </TabPanel>
+          <TabPanel value="after">
+            <pre class="content-pre">{{ report.after_content ?? "(none)" }}</pre>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </Panel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DataTable from "primevue/datatable";
+import Panel from "primevue/panel";
+import Tab from "primevue/tab";
+import TabList from "primevue/tablist";
+import TabPanel from "primevue/tabpanel";
+import TabPanels from "primevue/tabpanels";
+import Tabs from "primevue/tabs";
+import type { SingleCleanReport, CleanStepResult } from "@galaxy-tool-util/schema";
+import Column from "primevue/column";
+import Tag from "primevue/tag";
+import ToolId from "./ToolId.vue";
+
+defineProps<{
+  report: SingleCleanReport;
+}>();
+</script>
+
+<style scoped>
+.operation-report {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.summary-row {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.key-list {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+
+.skip-reason,
+.no-changes {
+  color: var(--p-text-color-secondary, #6c757d);
+  font-style: italic;
+}
+
+.content-pre {
+  margin: 0;
+  padding: 0.5rem;
+  font-size: 0.75rem;
+  background: var(--p-content-background);
+  border: 1px solid var(--p-content-border-color);
+  border-radius: 4px;
+  color: var(--p-text-color);
+  overflow: auto;
+  max-height: 500px;
+  white-space: pre;
+}
+</style>

package/src/ExportReport.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="operation-report">
+    <div class="summary-row">
+      <Tag :value="`${sourceFormatLabel} → ${targetFormatLabel}`" severity="info" />
+      <Tag v-if="result.dry_run" value="Dry run" severity="warn" />
+      <Tag v-if="removedPath" :value="`Removes ${removedPath}`" severity="danger" />
+      <Tag :value="summaryLabel" :severity="allOk ? 'success' : 'warn'" />
+    </div>
+
+    <div class="path-row">
+      <div>
+        <span class="path-label">Source:</span> <code>{{ result.source_path }}</code>
+      </div>
+      <div>
+        <span class="path-label">Output:</span> <code>{{ result.output_path }}</code>
+      </div>
+      <div v-if="removedPath">
+        <span class="path-label">Removed:</span> <code>{{ removedPath }}</code>
+      </div>
+    </div>
+
+    <DataTable v-if="stepRows.length > 0" :value="stepRows" size="small">
+      <Column field="step_id" header="Step" />
+      <Column field="step_label" header="Label">
+        <template #body="{ data }: { data: ExportStepRow }">
+          <span v-if="data.step_label">{{ data.step_label }}</span>
+          <span v-else class="muted">—</span>
+        </template>
+      </Column>
+      <Column header="Tool">
+        <template #body="{ data }: { data: ExportStepRow }">
+          <ToolId v-if="data.tool_id" :tool-id="data.tool_id" />
+          <span v-else class="muted">—</span>
+        </template>
+      </Column>
+      <Column header="Status">
+        <template #body="{ data }: { data: ExportStepRow }">
+          <Tag
+            :value="data.ok ? 'OK' : (data.error ?? 'Failed')"
+            :severity="data.ok ? 'success' : 'danger'"
+          />
+        </template>
+      </Column>
+    </DataTable>
+
+    <Panel
+      v-if="result.content != null"
+      header="Converted content"
+      :toggleable="true"
+      :collapsed="true"
+    >
+      <pre class="content-pre">{{ result.content }}</pre>
+    </Panel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import Panel from "primevue/panel";
+import Tag from "primevue/tag";
+import type {
+  ExportResult,
+  ConvertResult,
+  SingleExportReport,
+  ToNativeResult,
+  StepEncodeStatus,
+} from "@galaxy-tool-util/schema";
+import ToolId from "./ToolId.vue";
+
+interface ExportStepRow {
+  step_id: string;
+  step_label: string | null;
+  tool_id: string | null;
+  ok: boolean;
+  error: string | null;
+}
+
+const props = defineProps<{
+  result: ExportResult | ConvertResult;
+}>();
+
+const removedPath = computed(() =>
+  "removed_path" in props.result ? props.result.removed_path : null,
+);
+
+const isToNative = computed(() => props.result.target_format === "native");
+
+const sourceFormatLabel = computed(() =>
+  props.result.source_format === "native" ? "Native (.ga)" : "Format2 (.gxwf.yml)",
+);
+const targetFormatLabel = computed(() =>
+  props.result.target_format === "native" ? "Native (.ga)" : "Format2 (.gxwf.yml)",
+);
+
+const stepRows = computed<ExportStepRow[]>(() => {
+  if (isToNative.value) {
+    const r = props.result.report as ToNativeResult;
+    return (r.steps ?? []).map((s: StepEncodeStatus) => ({
+      step_id: s.step_id,
+      step_label: s.step_label,
+      tool_id: s.tool_id,
+      ok: s.encoded,
+      error: s.error,
+    }));
+  }
+  // Native → format2 report (SingleExportReport) carries counts but no per-step list.
+  return [];
+});
+
+const allOk = computed(() => {
+  if (isToNative.value) {
+    return (props.result.report as ToNativeResult).all_encoded;
+  }
+  return (props.result.report as SingleExportReport).ok;
+});
+
+const summaryLabel = computed(() => {
+  if (isToNative.value) {
+    return (props.result.report as ToNativeResult).summary;
+  }
+  const r = props.result.report as SingleExportReport;
+  const total = r.steps_converted + r.steps_fallback;
+  return `${r.steps_converted}/${total} step${total !== 1 ? "s" : ""} converted`;
+});
+</script>
+
+<style scoped>
+.operation-report {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.summary-row {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.path-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.9rem;
+}
+
+.path-label {
+  color: var(--p-text-color-secondary, #6c757d);
+  margin-right: 0.25rem;
+}
+
+.muted {
+  color: var(--p-text-color-secondary, #6c757d);
+  font-style: italic;
+}
+
+.content-pre {
+  margin: 0;
+  padding: 0.5rem;
+  font-size: 0.75rem;
+  background: var(--p-content-background);
+  border: 1px solid var(--p-content-border-color);
+  border-radius: 4px;
+  color: var(--p-text-color);
+  overflow: auto;
+  max-height: 500px;
+  white-space: pre;
+}
+</style>

package/src/LintReport.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="operation-report">
+    <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>
+
+    <div class="summary-row">
+      <Tag
+        :value="`${report.lint_errors} error${report.lint_errors !== 1 ? 's' : ''}`"
+        :severity="report.lint_errors > 0 ? 'danger' : 'success'"
+      />
+      <Tag
+        :value="`${report.lint_warnings} warning${report.lint_warnings !== 1 ? 's' : ''}`"
+        :severity="report.lint_warnings > 0 ? 'warn' : '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 { SingleLintReport, ValidationStepResult } from "@galaxy-tool-util/schema";
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import Tag from "primevue/tag";
+import Message from "primevue/message";
+import ToolId from "./ToolId.vue";
+
+const props = defineProps<{
+  report: SingleLintReport;
+}>();
+
+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/RawJsonView.vue

@@ -0,0 +1,28 @@
+<template>
+  <pre class="raw-json"><code>{{ formatted }}</code></pre>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{ data: unknown }>();
+
+const formatted = computed(() => JSON.stringify(props.data, null, 2));
+</script>
+
+<style scoped>
+.raw-json {
+  margin: 0;
+  padding: 1rem;
+  overflow: auto;
+  background: var(--p-content-background);
+  border: 1px solid var(--p-content-border-color);
+  border-radius: 6px;
+  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
+  font-size: 0.85rem;
+  line-height: 1.5;
+  color: var(--p-text-color);
+  white-space: pre;
+  max-height: 70vh;
+}
+</style>

package/src/ReportShell.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="gxwf-report-shell">
+    <header class="report-header">
+      <span class="report-type">{{ typeLabel }}</span>
+      <span v-if="workflowPath" class="report-path">{{ workflowPath }}</span>
+    </header>
+    <ValidationReport
+      v-if="report.type === 'validate'"
+      :report="report.data as SingleValidationReport"
+    />
+    <LintReport v-else-if="report.type === 'lint'" :report="report.data as SingleLintReport" />
+    <CleanReport v-else-if="report.type === 'clean'" :report="report.data as SingleCleanReport" />
+    <RoundtripReport
+      v-else-if="report.type === 'roundtrip'"
+      :report="report.data as SingleRoundTripReport"
+    />
+    <ExportReport
+      v-else-if="report.type === 'export' || report.type === 'convert'"
+      :result="report.data as ExportResult | ConvertResult"
+    />
+    <TreeValidationReport
+      v-else-if="report.type === 'validate-tree'"
+      :report="report.data as TreeValidationReportData"
+    />
+    <TreeLintReport
+      v-else-if="report.type === 'lint-tree'"
+      :report="report.data as LintTreeReportData"
+    />
+    <TreeCleanReport
+      v-else-if="report.type === 'clean-tree'"
+      :report="report.data as TreeCleanReportData"
+    />
+    <TreeRoundtripReport
+      v-else-if="report.type === 'roundtrip-tree'"
+      :report="report.data as RoundTripTreeReportData"
+    />
+    <p v-else class="unknown-type">Unknown report type: {{ report.type }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type {
+  SingleValidationReport,
+  SingleLintReport,
+  SingleCleanReport,
+  SingleRoundTripReport,
+  ExportResult,
+  ConvertResult,
+  TreeValidationReport as TreeValidationReportData,
+  LintTreeReport as LintTreeReportData,
+  TreeCleanReport as TreeCleanReportData,
+  RoundTripTreeReport as RoundTripTreeReportData,
+} from "@galaxy-tool-util/schema";
+import ValidationReport from "./ValidationReport.vue";
+import LintReport from "./LintReport.vue";
+import CleanReport from "./CleanReport.vue";
+import RoundtripReport from "./RoundtripReport.vue";
+import ExportReport from "./ExportReport.vue";
+import TreeValidationReport from "./TreeValidationReport.vue";
+import TreeLintReport from "./TreeLintReport.vue";
+import TreeCleanReport from "./TreeCleanReport.vue";
+import TreeRoundtripReport from "./TreeRoundtripReport.vue";
+
+interface ReportPayload {
+  type:
+    | "validate"
+    | "lint"
+    | "clean"
+    | "roundtrip"
+    | "export"
+    | "convert"
+    | "validate-tree"
+    | "lint-tree"
+    | "clean-tree"
+    | "roundtrip-tree";
+  data: unknown;
+}
+
+const props = defineProps<{ report: ReportPayload }>();
+
+const typeLabel = computed(() => {
+  const labels: Record<ReportPayload["type"], string> = {
+    validate: "Validate",
+    lint: "Lint",
+    clean: "Clean",
+    roundtrip: "Roundtrip",
+    export: "Export",
+    convert: "Convert",
+    "validate-tree": "Validate Tree",
+    "lint-tree": "Lint Tree",
+    "clean-tree": "Clean Tree",
+    "roundtrip-tree": "Roundtrip Tree",
+  };
+  return labels[props.report.type] ?? props.report.type;
+});
+
+const workflowPath = computed(() => {
+  const d = props.report.data as Record<string, unknown> | null;
+  if (typeof d?.workflow === "string") return d.workflow;
+  if (typeof d?.source_path === "string") return d.source_path;
+  if (typeof d?.root === "string") return d.root;
+  return null;
+});
+</script>
+
+<style scoped>
+.gxwf-report-shell {
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+  padding: 1.5rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.report-header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--p-content-border-color, #dee2e6);
+}
+
+.report-type {
+  font-size: 1.25rem;
+  font-weight: 600;
+  text-transform: capitalize;
+  color: var(--p-text-color, #212529);
+}
+
+.report-path {
+  font-family: monospace;
+  font-size: 0.9rem;
+  color: var(--p-text-color-secondary, #6c757d);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.unknown-type {
+  color: var(--p-text-color-secondary, #6c757d);
+  font-style: italic;
+}
+</style>