Refine demo navigation

static/script.js

@@ -14,15 +14,7 @@ import { initClearButton, updateClearButtonState } from './reset.js';
 
 document.addEventListener('DOMContentLoaded', function () {
   // === CONFIGURATION CONSTANTS ===
-  const GRID_CONFIG = {
-    MOBILE_MIN_WIDTH: 120,
-    DESKTOP_MIN_WIDTH: 160,
-    MOBILE_BREAKPOINT: 768,
-    NARROW_BREAKPOINT: 360,
-    MAX_LABEL_LENGTH: 60,
-    BALANCE_DELAY: 100,
-    RESIZE_DEBOUNCE: 250,
-  };
+  const MAX_LABEL_LENGTH = 60;
 
   const UI_CONFIG = {
     SCROLL_SMOOTH_BEHAVIOR: 'smooth',
@@ -75,6 +67,7 @@ document.addEventListener('DOMContentLoaded', function () {
   const outputViewTabs = Array.from(
     document.querySelectorAll('[data-output-view]'),
   );
+  let preferredStructuredView = 'report';
   const instructionsEl = document.querySelector('.instructions');
   const loadingOverlay = document.getElementById('loading-overlay');
   let processingLoadingTimer = null;
@@ -322,10 +315,6 @@ document.addEventListener('DOMContentLoaded', function () {
       }
       loadSampleReport(defaultSample, { scroll: false });
     }
-
-    setTimeout(() => {
-      balanceByColumnCount();
-    }, GRID_CONFIG.BALANCE_DELAY);
   }
 
   /**
@@ -353,73 +342,6 @@ document.addEventListener('DOMContentLoaded', function () {
     buttons[nextIndex].scrollIntoView({ block: 'nearest', inline: 'center' });
   }
 
-  /**
-   * Balances sample button rows by calculating optimal column count for even distribution.
-   * Keeps row-wise reading order while achieving visual balance (e.g., 5+5 instead of 6+4).
-   * Uses responsive sizing for better mobile experience.
-   */
-  function balanceByColumnCount() {
-    const container = document.querySelector('.sample-buttons');
-    if (!container) {
-      console.warn('Sample buttons container not found');
-      return;
-    }
-
-    const cards = container.querySelectorAll('.sample-button').length;
-    const styles = getComputedStyle(container);
-    const gap = parseFloat(styles.columnGap) || 12;
-
-    const viewport = window.innerWidth;
-    const minWidth =
-      viewport <= GRID_CONFIG.MOBILE_BREAKPOINT
-        ? GRID_CONFIG.MOBILE_MIN_WIDTH
-        : GRID_CONFIG.DESKTOP_MIN_WIDTH;
-
-    const containerWidth = container.clientWidth;
-    const columnsFit = Math.max(
-      1,
-      Math.floor((containerWidth + gap) / (minWidth + gap)),
-    );
-
-    if (viewport <= GRID_CONFIG.NARROW_BREAKPOINT) {
-      return;
-    }
-
-    // Find the column count that provides the most even distribution
-    let bestCols = columnsFit;
-    let bestRem = cards % columnsFit;
-
-    for (let cols = columnsFit - 1; cols >= 1; cols--) {
-      const rem = cards % cols;
-      if (rem === 0) {
-        bestCols = cols;
-        break; // Perfect distribution found
-      }
-      if (rem > bestRem) continue; // Worse distribution, skip
-      bestCols = cols;
-      bestRem = rem;
-    }
-
-    // Mobile-specific logic: prefer 2-3 columns for better touch targets
-    if (viewport <= GRID_CONFIG.MOBILE_BREAKPOINT) {
-      if (bestCols === 1 && columnsFit >= 2) {
-        bestCols = 2; // Force at least 2 columns on mobile
-      } else if (bestCols > 3 && cards >= 6) {
-        // If we have many columns, prefer 2-3 for mobile UX
-        const cols2Rem = cards % 2;
-        const cols3Rem = cards % 3;
-        if (cols2Rem <= cols3Rem) {
-          bestCols = 2;
-        } else {
-          bestCols = 3;
-        }
-      }
-    }
-
-    // Always apply the balanced column count for optimal visual distribution
-    container.style.gridTemplateColumns = `repeat(${bestCols}, minmax(${minWidth}px, 1fr))`;
-  }
-
   /**
    * Loads a sample report into the input area and automatically processes it.
    * @param {Object} sample - The sample report data object
@@ -467,14 +389,6 @@ document.addEventListener('DOMContentLoaded', function () {
 
   loadSampleReports();
 
-  let resizeTimeout;
-  window.addEventListener('resize', () => {
-    clearTimeout(resizeTimeout);
-    resizeTimeout = setTimeout(() => {
-      balanceByColumnCount();
-    }, GRID_CONFIG.RESIZE_DEBOUNCE);
-  });
-
   /**
    * Updates the cache status display in the UI.
    * @returns {Promise<void>}
@@ -563,8 +477,8 @@ document.addEventListener('DOMContentLoaded', function () {
     }
     const mobilePromptToggle = document.getElementById('prompt-toggle-mobile');
     if (mobilePromptToggle) mobilePromptToggle.checked = false;
-    setOutputViewsAvailable(false);
     selectOutputView('cards');
+    setOutputViewsAvailable(false);
     updateLXToggleStates(); // Disable toggles when output is cleared
     updateCopyButtonState();
 
@@ -729,7 +643,7 @@ document.addEventListener('DOMContentLoaded', function () {
             showPromptView(false);
           }
 
-          selectOutputView('cards');
+          selectOutputView(preferredStructuredView);
 
           const hasIntervals = data.segments.some(
             (segment) => segment.intervals && segment.intervals.length > 0,
@@ -1171,8 +1085,7 @@ document.addEventListener('DOMContentLoaded', function () {
    */
   function extractLabelInfo(content) {
     const colonIndex = content.indexOf(':');
-    const hasLabel =
-      colonIndex > 0 && colonIndex < GRID_CONFIG.MAX_LABEL_LENGTH;
+    const hasLabel = colonIndex > 0 && colonIndex < MAX_LABEL_LENGTH;
 
     return {
       hasLabel,
@@ -1477,7 +1390,7 @@ document.addEventListener('DOMContentLoaded', function () {
    * Selects one of the three output representations.
    * @param {'cards'|'report'|'raw'} view - View to make visible
    */
-  function selectOutputView(view) {
+  function selectOutputView(view, { remember = false } = {}) {
     const requestedTab = outputViewTabs.find(
       (tab) => tab.dataset.outputView === view,
     );
@@ -1508,6 +1421,8 @@ document.addEventListener('DOMContentLoaded', function () {
       tab.setAttribute('aria-selected', String(selected));
       tab.tabIndex = selected ? 0 : -1;
     });
+
+    if (remember) preferredStructuredView = view;
   }
 
   /** Enables alternate representations only when structured output exists. */
@@ -1519,10 +1434,10 @@ document.addEventListener('DOMContentLoaded', function () {
     });
   }
 
-  outputViewTabs.forEach((tab, index) => {
-    tab.tabIndex = index === 0 ? 0 : -1;
+  outputViewTabs.forEach((tab) => {
+    tab.tabIndex = tab.getAttribute('aria-selected') === 'true' ? 0 : -1;
     tab.addEventListener('click', () =>
-      selectOutputView(tab.dataset.outputView),
+      selectOutputView(tab.dataset.outputView, { remember: true }),
     );
     tab.addEventListener('keydown', (event) => {
       if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
@@ -1543,7 +1458,9 @@ document.addEventListener('DOMContentLoaded', function () {
       if (event.key === 'Home') nextIndex = 0;
       if (event.key === 'End') nextIndex = enabledTabs.length - 1;
       enabledTabs[nextIndex].focus();
-      selectOutputView(enabledTabs[nextIndex].dataset.outputView);
+      selectOutputView(enabledTabs[nextIndex].dataset.outputView, {
+        remember: true,
+      });
     });
   });
 
@@ -1562,7 +1479,7 @@ document.addEventListener('DOMContentLoaded', function () {
   if (rawToggle) {
     rawToggle.addEventListener('change', () => {
       const showRaw = rawToggle.checked;
-      selectOutputView(showRaw ? 'raw' : 'cards');
+      selectOutputView(showRaw ? 'raw' : 'cards', { remember: true });
 
       const mobileRawToggle = document.getElementById('raw-toggle-mobile');
       if (mobileRawToggle) {

static/style.css

@@ -2378,6 +2378,24 @@ body.page-wrapper {
   text-decoration: none;
 }
 
+.hero-links {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 5px 13px;
+}
+
+.hero-attribution a:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.hero-attribution a:focus-visible {
+  border-radius: 4px;
+  outline: 3px solid rgba(26, 115, 232, 0.35);
+  outline-offset: 3px;
+}
+
 .hero-attribution .material-symbols-outlined {
   font-size: 14px;
 }
@@ -2442,40 +2460,29 @@ body.page-wrapper {
 }
 
 .sample-rail-shell::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 7px;
-  width: 34px;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.96));
-  content: '';
-  pointer-events: none;
+  content: none;
 }
 
 .sample-buttons {
-  display: flex;
-  justify-content: flex-start;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 8px;
   margin: 0;
-  padding: 2px 28px 7px 2px;
-  overflow-x: auto;
-  overscroll-behavior-inline: contain;
-  scrollbar-color: #c5d0e1 transparent;
-  scrollbar-width: thin;
+  padding: 2px;
 }
 
 .sample-button {
-  flex: 0 0 auto;
-  min-width: 136px;
+  min-width: 0;
   padding: 9px 11px;
   border-radius: 10px;
   box-shadow: none;
 }
 
 .sample-title {
+  min-height: 2.4em;
   margin-bottom: 4px;
   font-size: 13px;
-  white-space: nowrap;
+  line-height: 1.2;
 }
 
 .sample-modality {
@@ -2939,6 +2946,11 @@ body.page-wrapper {
     width: 130px;
   }
 
+  .hero-links {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
   .safety-strip {
     align-items: flex-start;
   }
@@ -2953,6 +2965,39 @@ body.page-wrapper {
     display: none;
   }
 
+  .sample-rail-shell::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 7px;
+    width: 34px;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.96));
+    content: '';
+    pointer-events: none;
+  }
+
+  .sample-buttons {
+    display: flex;
+    justify-content: flex-start;
+    padding: 2px 28px 7px 2px;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scrollbar-color: #c5d0e1 transparent;
+    scrollbar-width: thin;
+  }
+
+  .sample-button {
+    flex: 0 0 auto;
+    min-width: 136px;
+  }
+
+  .sample-title {
+    min-height: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .transformation-studio.text-area-container {
     display: flex !important;
     flex-direction: column;

templates/index.html

@@ -95,15 +95,26 @@
           width="174"
           height="25"
         />
-        <a
-          href="https://developers.googleblog.com/en/introducing-langextract-a-gemini-powered-information-extraction-library"
-          target="_blank"
-          rel="noopener noreferrer"
-          >Read the LangExtract story
-          <span class="material-symbols-outlined" aria-hidden="true"
-            >open_in_new</span
-          ></a
-        >
+        <div class="hero-links">
+          <a
+            href="https://github.com/google/langextract"
+            target="_blank"
+            rel="noopener noreferrer"
+            >LangExtract on GitHub
+            <span class="material-symbols-outlined" aria-hidden="true"
+              >open_in_new</span
+            ></a
+          >
+          <a
+            href="https://developers.googleblog.com/en/introducing-langextract-a-gemini-powered-information-extraction-library"
+            target="_blank"
+            rel="noopener noreferrer"
+            >LangExtract release blog
+            <span class="material-symbols-outlined" aria-hidden="true"
+              >open_in_new</span
+            ></a
+          >
+        </div>
       </div>
       <div class="safety-strip" role="note">
         <span class="material-symbols-outlined" aria-hidden="true"
@@ -121,11 +132,9 @@
       <div class="sample-heading-row">
         <div>
           <p class="section-kicker">Start with a study</p>
-          <h2 id="sample-heading">Explore a cached report</h2>
+          <h2 id="sample-heading">Explore sample reports</h2>
         </div>
-        <p>
-          Choose any modality. Results appear instantly from the demo cache.
-        </p>
+        <p>Choose a study. Built-in examples can use saved or live results.</p>
       </div>
       <div class="sample-rail-shell">
         <div class="sample-buttons" aria-label="Sample radiology reports"></div>
@@ -217,16 +226,6 @@
             <h2>Structured extraction</h2>
           </div>
           <div class="output-view-tabs" role="tablist" aria-label="Output view">
-            <button
-              class="output-view-tab active"
-              id="findings-tab"
-              data-output-view="cards"
-              role="tab"
-              aria-selected="true"
-              aria-controls="findings-cards"
-            >
-              Findings
-            </button>
             <button
               class="output-view-tab"
               id="report-tab"
@@ -239,6 +238,16 @@
             >
               Report
             </button>
+            <button
+              class="output-view-tab active"
+              id="findings-tab"
+              data-output-view="cards"
+              role="tab"
+              aria-selected="true"
+              aria-controls="findings-cards"
+            >
+              Findings
+            </button>
             <button
               class="output-view-tab"
               id="raw-tab"

test_app.py

@@ -494,6 +494,55 @@ class TestFrontendAndProjectConfiguration(unittest.TestCase):
         self.assertIn('data-output-view="raw"', template)
         self.assertIn('id="prompt-toggle"', template)
 
+    def test_langextract_links_and_sample_copy_are_professional(self):
+        template = Path('templates/index.html').read_text()
+        stylesheet = Path('static/style.css').read_text()
+
+        self.assertIn('href="https://github.com/google/langextract"', template)
+        self.assertIn('LangExtract on GitHub', template)
+        self.assertIn('LangExtract release blog', template)
+        self.assertGreaterEqual(template.count('rel="noopener noreferrer"'), 2)
+        self.assertIn('<h2 id="sample-heading">Explore sample reports</h2>', template)
+        self.assertIn('Choose a study.', template)
+        self.assertNotIn('Explore a cached report', template)
+        self.assertNotIn('Results appear instantly from the demo cache.', template)
+        self.assertIn('.hero-attribution a:focus-visible', stylesheet)
+
+    def test_sample_grid_and_report_default_preserve_responsive_fallbacks(self):
+        script = Path('static/script.js').read_text()
+        stylesheet = Path('static/style.css').read_text()
+        template = Path('templates/index.html').read_text()
+
+        self.assertIn('grid-template-columns: repeat(5, minmax(0, 1fr));', stylesheet)
+        mobile_rules = stylesheet[stylesheet.index('@media (max-width: 768px)') :]
+        self.assertIn('.sample-buttons {', mobile_rules)
+        self.assertIn('display: flex;', mobile_rules)
+        self.assertIn('overflow-x: auto;', mobile_rules)
+        self.assertLess(
+            template.index('id="report-tab"'), template.index('id="findings-tab"')
+        )
+        self.assertIn("let preferredStructuredView = 'report';", script)
+        self.assertIn('selectOutputView(preferredStructuredView);', script)
+        self.assertGreaterEqual(script.count('remember: true'), 3)
+        self.assertIn(
+            "selectOutputView(showRaw ? 'raw' : 'cards', { remember: true });",
+            script,
+        )
+        self.assertIn("tab.getAttribute('aria-selected') === 'true'", script)
+        self.assertLess(
+            script.index(
+                "selectOutputView('cards');",
+                script.index('predictButton.addEventListener'),
+            ),
+            script.index(
+                'setOutputViewsAvailable(false);',
+                script.index('predictButton.addEventListener'),
+            ),
+        )
+        self.assertNotIn('balanceByColumnCount', script)
+        self.assertNotIn('BALANCE_DELAY', script)
+        self.assertNotIn('RESIZE_DEBOUNCE', script)
+
     def test_mobile_and_reduced_motion_studio_rules_are_defined(self):
         script = Path('static/script.js').read_text()
         stylesheet = Path('static/style.css').read_text()