Add Lookbook preview for lazy-loaded tab panels

app/assets/stylesheets/pathogen.tailwind.css

@@ -17,7 +17,7 @@
 @source "../../assets/javascripts/**/*.js";
 @source "../../../lib/**/*.rb";
 /* Anchor utilities so full @theme primary scale and `text-primary` emit for host overrides. */
-@source inline("text-primary bg-primary-950 text-red-300 text-red-700");
+@source inline("text-primary bg-primary-950 text-red-300 text-red-700 text-[length:var(--type-meta)] text-[length:var(--type-section)]");
 
 /*
  * Theme contract (host apps may override after @import):

app/components/pathogen/tabs/lazy_panel.html.erb

@@ -1,8 +1,7 @@
 <% if render_eager? %>
-  <%= helpers.turbo_frame_tag(@frame_id) { content } %>
+  <%= render_turbo_frame { content } %>
 <% else %>
-  <%= helpers.turbo_frame_tag(
-    @frame_id,
+  <%= render_turbo_frame(
     src: @src_path,
     loading: :lazy,
     refresh: @refresh,

app/components/pathogen/tabs/lazy_panel.rb

@@ -85,6 +85,17 @@ def validate_arguments!(frame_id:, src_path:, selected:)
       def render_eager?
         @selected
       end
+
+      # Renders a turbo-frame in environments with or without turbo-rails helpers.
+      def render_turbo_frame(**options, &)
+        frame_options = @system_arguments.except(:id).merge(options)
+
+        if helpers.respond_to?(:turbo_frame_tag)
+          helpers.turbo_frame_tag(@frame_id, **frame_options, &)
+        else
+          content_tag('turbo-frame', id: @frame_id, **frame_options, &)
+        end
+      end
     end
   end
 end

demo/Gemfile

@@ -9,6 +9,7 @@ gem 'puma', '>= 5.0'
 gem 'rails', '~> 8.1.1'
 gem 'rails_icons'
 gem 'tailwindcss-rails'
+gem 'turbo-rails'
 
 gem 'tzinfo-data', platforms: %i[windows jruby]
 

demo/Procfile.dev

@@ -1,3 +1,3 @@
-web: bin/rails server -p 3001
+web: bin/rails server -p $PORT -b 0.0.0.0
 pathogen-css: pnpm --dir .. run build:css:watch
 tailwindcss: bin/rails tailwindcss:watch

demo/app/javascript/lookbook_mocks/tabs_lazy_load.js

@@ -0,0 +1,97 @@
+import { delay, http, HttpResponse } from "msw";
+import { setupWorker } from "msw/browser";
+
+const LAZY_LOAD_ROUTE = "/lookbook-mocks/tabs/lazy-load/:panel";
+
+const frameResponses = {
+  metrics: {
+    frameId: "preview-metrics-frame",
+    title: "Quality Metrics",
+    body: `
+      <div class="grid gap-4 md:grid-cols-3">
+        <div class="rounded-lg border border-emerald-200 bg-emerald-50 p-4 dark:border-emerald-800 dark:bg-emerald-950/30">
+          <div class="text-sm font-medium text-emerald-800 dark:text-emerald-200">Pass rate</div>
+          <div class="mt-2 text-3xl font-semibold text-emerald-950 dark:text-emerald-50">98.4%</div>
+        </div>
+        <div class="rounded-lg border border-sky-200 bg-sky-50 p-4 dark:border-sky-800 dark:bg-sky-950/30">
+          <div class="text-sm font-medium text-sky-800 dark:text-sky-200">Samples reviewed</div>
+          <div class="mt-2 text-3xl font-semibold text-sky-950 dark:text-sky-50">1,284</div>
+        </div>
+        <div class="rounded-lg border border-violet-200 bg-violet-50 p-4 dark:border-violet-800 dark:bg-violet-950/30">
+          <div class="text-sm font-medium text-violet-800 dark:text-violet-200">Median turnaround</div>
+          <div class="mt-2 text-3xl font-semibold text-violet-950 dark:text-violet-50">18h</div>
+        </div>
+      </div>
+    `,
+  },
+  timeline: {
+    frameId: "preview-timeline-frame",
+    title: "Processing Timeline",
+    body: `
+      <ol class="space-y-3">
+        <li class="rounded-lg border border-neutral-200 bg-white p-4 dark:border-neutral-700 dark:bg-neutral-900">
+          <div class="font-medium text-neutral-950 dark:text-neutral-50">09:10 - Intake completed</div>
+          <p class="mt-1 text-sm text-neutral-600 dark:text-neutral-300">Metadata passed validation and entered the sequencing queue.</p>
+        </li>
+        <li class="rounded-lg border border-neutral-200 bg-white p-4 dark:border-neutral-700 dark:bg-neutral-900">
+          <div class="font-medium text-neutral-950 dark:text-neutral-50">11:45 - Quality control passed</div>
+          <p class="mt-1 text-sm text-neutral-600 dark:text-neutral-300">Coverage and contamination checks are within expected thresholds.</p>
+        </li>
+        <li class="rounded-lg border border-neutral-200 bg-white p-4 dark:border-neutral-700 dark:bg-neutral-900">
+          <div class="font-medium text-neutral-950 dark:text-neutral-50">14:30 - Report generated</div>
+          <p class="mt-1 text-sm text-neutral-600 dark:text-neutral-300">The summary is ready for review in the reporting workspace.</p>
+        </li>
+      </ol>
+    `,
+  },
+};
+
+let workerStart;
+
+function turboFrameResponse({ frameId, title, body }) {
+  return `
+    <turbo-frame id="${frameId}">
+      <section class="rounded-lg border border-neutral-200 bg-neutral-50 p-5 dark:border-neutral-700 dark:bg-neutral-950">
+        <div class="mb-4 flex items-center justify-between gap-3">
+          <h3 class="text-lg font-semibold text-neutral-950 dark:text-neutral-50">${title}</h3>
+          <span class="rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-800 dark:bg-emerald-900 dark:text-emerald-100">Loaded by MSW</span>
+        </div>
+        ${body}
+      </section>
+    </turbo-frame>
+  `;
+}
+
+const handlers = [
+  http.get(LAZY_LOAD_ROUTE, async ({ params }) => {
+    const response = frameResponses[params.panel];
+
+    if (!response) {
+      return HttpResponse.html(
+        '<turbo-frame id="unknown-frame"><p>Unknown lazy-load preview panel.</p></turbo-frame>',
+        { status: 404 },
+      );
+    }
+
+    await delay(800);
+
+    return HttpResponse.html(turboFrameResponse(response));
+  }),
+];
+
+const worker = setupWorker(...handlers);
+
+export function enableTabsLazyLoadMocks() {
+  if (!("serviceWorker" in navigator)) {
+    return Promise.resolve();
+  }
+
+  workerStart ??= worker.start({
+    serviceWorker: {
+      url: "/mockServiceWorker.js",
+    },
+    onUnhandledRequest: "bypass",
+  });
+
+  return workerStart;
+}

demo/app/javascript/lookbook_preview.js

@@ -0,0 +1,9 @@
+import { enableTabsLazyLoadMocks } from "lookbook_mocks/tabs_lazy_load";
+
+try {
+  await enableTabsLazyLoadMocks();
+} catch (error) {
+  console.warn("[pathogen lookbook] Lazy-load mocks are unavailable.", error);
+}
+
+await import("application");

demo/app/views/layouts/lookbook_preview.html.erb

@@ -8,7 +8,7 @@
     <%= stylesheet_link_tag "pathogen_view_components" %>
     <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "lookbook_preview" %>
-    <%= javascript_importmap_tags %>
+    <%= javascript_importmap_tags "lookbook_preview" %>
   </head>
 
   <body class="min-h-screen bg-[var(--pvc-color-surface-muted)] p-4 text-[var(--pvc-color-text)]">

demo/bin/dev

@@ -14,8 +14,8 @@ if ! gem list foreman -i --silent; then
   gem install foreman
 fi
 
-# Default to port 3000 if not specified
-export PORT="${PORT:-3000}"
+# Default to port 3001 if not specified
+export PORT="${PORT:-3001}"
 
 # Let the debug gem allow remote connections,
 # but avoid loading until `debugger` is called

demo/config/environments/development.rb

@@ -42,12 +42,8 @@
   # Annotate rendered view with file names.
   config.action_view.annotate_rendered_view_with_filenames = true
 
-  config.hosts << 'localhost'
-  config.hosts << '127.0.0.1'
-  config.hosts << '::1'
-  config.hosts.concat(
-    ENV.fetch('DEMO_ALLOWED_HOSTS', '').split(',').map(&:strip).compact_blank
-  )
+  # the following settings allow us to forward ports securely using vscode remote port forwarding
+  config.hosts.clear
 
   # Raise error when a before_action's only/except options reference missing actions.
   config.action_controller.raise_on_missing_callback_actions = true

demo/config/importmap.rb

@@ -1,5 +1,9 @@
 # frozen_string_literal: true
 
 pin 'application'
+pin 'lookbook_preview'
+pin 'lookbook_mocks/tabs_lazy_load'
 pin '@hotwired/turbo-rails', to: 'https://cdn.jsdelivr.net/npm/@hotwired/turbo-rails@8.0.23/+esm'
 pin '@hotwired/stimulus', to: 'https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3.2.2/dist/stimulus.js'
+pin 'msw', to: 'https://cdn.jsdelivr.net/npm/msw@2.14.6/+esm'
+pin 'msw/browser', to: 'https://cdn.jsdelivr.net/npm/msw@2.14.6/browser/+esm'