Add branch URL parameter support with Copy Link button (#7465)

Unisay · web-flow · commit 637c5be10555 · 2025-11-28T13:42:08.000+01:00
- Add ?branch= URL parameter support for shareable links
- Add "Copy Link" button next to branch input field
- URL parameter takes precedence over localStorage
- Button shows "Copied!" feedback after copying

This enables sharing visualization links with specific branch configurations.
diff --git a/doc/cost-models/lookupcoin/index.html b/doc/cost-models/lookupcoin/index.html
@@ -30,7 +30,10 @@ <h3 id="data-source-toggle">Data Source Configuration</h3>
       <div class="controls-content">
         <div class="control-group-vertical">
           <label for="branch-name">Branch name:</label>
-          <input type="text" id="branch-name" placeholder="master" style="width: 100%; font-family: monospace;">
+          <div class="branch-input-row">
+            <input type="text" id="branch-name" placeholder="master">
+            <button id="copy-link" title="Copy shareable link">Copy Link</button>
+          </div>
         </div>
         <div class="control-group-vertical">
           <label for="csv-url">CSV file URL:</label>
diff --git a/doc/cost-models/lookupcoin/plot.js b/doc/cost-models/lookupcoin/plot.js
@@ -39,10 +39,11 @@ function getFileUrls(baseUrl) {
   };
 }
 
-// Load settings from localStorage
+// Load settings from localStorage (URL param takes precedence)
 function loadSettings() {
+  const urlBranch = getBranchFromUrl();
   return {
-    branch: localStorage.getItem(STORAGE_KEYS.BRANCH) || DEFAULT_BRANCH,
+    branch: urlBranch || localStorage.getItem(STORAGE_KEYS.BRANCH) || DEFAULT_BRANCH,
     csvUrl: localStorage.getItem(STORAGE_KEYS.CSV_URL) || '',
     jsonUrl: localStorage.getItem(STORAGE_KEYS.JSON_URL) || '',
     collapsed: localStorage.getItem(STORAGE_KEYS.DATA_SOURCE_COLLAPSED) === 'true'
@@ -136,6 +137,20 @@ async function init() {
   // Set up plot control event listeners (only once)
   setupControls();
 
+  // Set up copy link button
+  document.getElementById('copy-link').addEventListener('click', () => {
+    const branch = document.getElementById('branch-name').value.trim() || DEFAULT_BRANCH;
+    const url = new URL(window.location.href);
+    url.search = '';
+    url.searchParams.set('branch', branch);
+    navigator.clipboard.writeText(url.toString());
+    // Brief visual feedback
+    const btn = document.getElementById('copy-link');
+    const original = btn.textContent;
+    btn.textContent = 'Copied!';
+    setTimeout(() => btn.textContent = original, 1500);
+  });
+
   // Initial load
   await loadAndRenderData();
 }
diff --git a/doc/cost-models/shared/styles.css b/doc/cost-models/shared/styles.css
@@ -273,6 +273,22 @@ nav a.active {
   color: var(--academic-gray);
 }
 
+.branch-input-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.branch-input-row input {
+  flex: 1;
+  font-family: 'Monaco', 'Courier New', monospace;
+}
+
+.branch-input-row button {
+  padding: 6px 12px;
+  font-size: 0.85em;
+}
+
 button {
   background-color: var(--cardano-blue);
   color: white;
diff --git a/doc/cost-models/shared/utils.js b/doc/cost-models/shared/utils.js
@@ -381,3 +381,12 @@ async function loadData(csvUrl, jsonUrl) {
     throw error;
   }
 }
+
+/**
+ * Get branch name from URL query parameter
+ * @returns {string|null} Branch name or null if not specified
+ */
+function getBranchFromUrl() {
+  const params = new URLSearchParams(window.location.search);
+  return params.get('branch');
+}
diff --git a/doc/cost-models/unvaluedata/index.html b/doc/cost-models/unvaluedata/index.html
@@ -30,7 +30,10 @@ <h3 id="data-source-toggle">Data Source Configuration</h3>
       <div class="controls-content">
         <div class="control-group-vertical">
           <label for="branch-name">Branch name:</label>
-          <input type="text" id="branch-name" placeholder="master" style="width: 100%; font-family: monospace;">
+          <div class="branch-input-row">
+            <input type="text" id="branch-name" placeholder="master">
+            <button id="copy-link" title="Copy shareable link">Copy Link</button>
+          </div>
         </div>
         <div class="control-group-vertical">
           <label for="csv-url">CSV file URL:</label>
diff --git a/doc/cost-models/unvaluedata/plot.js b/doc/cost-models/unvaluedata/plot.js
@@ -39,10 +39,11 @@ function getFileUrls(baseUrl) {
   };
 }
 
-// Load settings from localStorage
+// Load settings from localStorage (URL param takes precedence)
 function loadSettings() {
+  const urlBranch = getBranchFromUrl();
   return {
-    branch: localStorage.getItem(STORAGE_KEYS.BRANCH) || DEFAULT_BRANCH,
+    branch: urlBranch || localStorage.getItem(STORAGE_KEYS.BRANCH) || DEFAULT_BRANCH,
     csvUrl: localStorage.getItem(STORAGE_KEYS.CSV_URL) || '',
     jsonUrl: localStorage.getItem(STORAGE_KEYS.JSON_URL) || '',
     collapsed: localStorage.getItem(STORAGE_KEYS.DATA_SOURCE_COLLAPSED) === 'true'
@@ -136,6 +137,20 @@ async function init() {
   // Set up plot control event listeners (only once)
   setupControls();
 
+  // Set up copy link button
+  document.getElementById('copy-link').addEventListener('click', () => {
+    const branch = document.getElementById('branch-name').value.trim() || DEFAULT_BRANCH;
+    const url = new URL(window.location.href);
+    url.search = '';
+    url.searchParams.set('branch', branch);
+    navigator.clipboard.writeText(url.toString());
+    // Brief visual feedback
+    const btn = document.getElementById('copy-link');
+    const original = btn.textContent;
+    btn.textContent = 'Copied!';
+    setTimeout(() => btn.textContent = original, 1500);
+  });
+
   // Initial load
   await loadAndRenderData();
 }
diff --git a/doc/cost-models/valuecontains/index.html b/doc/cost-models/valuecontains/index.html
@@ -30,7 +30,10 @@ <h3 id="data-source-toggle">Data Source Configuration</h3>
       <div class="controls-content">
         <div class="control-group-vertical">
           <label for="branch-name">Branch name:</label>
-          <input type="text" id="branch-name" placeholder="master" style="width: 100%; font-family: monospace;">
+          <div class="branch-input-row">
+            <input type="text" id="branch-name" placeholder="master">
+            <button id="copy-link" title="Copy shareable link">Copy Link</button>
+          </div>
         </div>
         <div class="control-group-vertical">
           <label for="csv-url">CSV file URL:</label>
diff --git a/doc/cost-models/valuecontains/plot.js b/doc/cost-models/valuecontains/plot.js
@@ -39,10 +39,11 @@ function getFileUrls(baseUrl) {
   };
 }
 
-// Load settings from localStorage
+// Load settings from localStorage (URL param takes precedence)
 function loadSettings() {
+  const urlBranch = getBranchFromUrl();
   return {
-    branch: localStorage.getItem(STORAGE_KEYS.BRANCH) || DEFAULT_BRANCH,
+    branch: urlBranch || localStorage.getItem(STORAGE_KEYS.BRANCH) || DEFAULT_BRANCH,
     csvUrl: localStorage.getItem(STORAGE_KEYS.CSV_URL) || '',
     jsonUrl: localStorage.getItem(STORAGE_KEYS.JSON_URL) || '',
     collapsed: localStorage.getItem(STORAGE_KEYS.DATA_SOURCE_COLLAPSED) === 'true'
@@ -136,6 +137,20 @@ async function init() {
   // Set up plot control event listeners (only once)
   setupControls();
 
+  // Set up copy link button
+  document.getElementById('copy-link').addEventListener('click', () => {
+    const branch = document.getElementById('branch-name').value.trim() || DEFAULT_BRANCH;
+    const url = new URL(window.location.href);
+    url.search = '';
+    url.searchParams.set('branch', branch);
+    navigator.clipboard.writeText(url.toString());
+    // Brief visual feedback
+    const btn = document.getElementById('copy-link');
+    const original = btn.textContent;
+    btn.textContent = 'Copied!';
+    setTimeout(() => btn.textContent = original, 1500);
+  });
+
   // Initial load
   await loadAndRenderData();
 }
diff --git a/doc/cost-models/valuedata/index.html b/doc/cost-models/valuedata/index.html
@@ -30,7 +30,10 @@ <h3 id="data-source-toggle">Data Source Configuration</h3>
       <div class="controls-content">
         <div class="control-group-vertical">
           <label for="branch-name">Branch name:</label>
-          <input type="text" id="branch-name" placeholder="master" style="width: 100%; font-family: monospace;">
+          <div class="branch-input-row">
+            <input type="text" id="branch-name" placeholder="master">
+            <button id="copy-link" title="Copy shareable link">Copy Link</button>
+          </div>
         </div>
         <div class="control-group-vertical">
           <label for="csv-url">CSV file URL:</label>
diff --git a/doc/cost-models/valuedata/plot.js b/doc/cost-models/valuedata/plot.js
@@ -39,10 +39,11 @@ function getFileUrls(baseUrl) {
   };
 }
 
-// Load settings from localStorage
+// Load settings from localStorage (URL param takes precedence)
 function loadSettings() {
+  const urlBranch = getBranchFromUrl();
   return {
-    branch: localStorage.getItem(STORAGE_KEYS.BRANCH) || DEFAULT_BRANCH,
+    branch: urlBranch || localStorage.getItem(STORAGE_KEYS.BRANCH) || DEFAULT_BRANCH,
     csvUrl: localStorage.getItem(STORAGE_KEYS.CSV_URL) || '',
     jsonUrl: localStorage.getItem(STORAGE_KEYS.JSON_URL) || '',
     collapsed: localStorage.getItem(STORAGE_KEYS.DATA_SOURCE_COLLAPSED) === 'true'
@@ -136,6 +137,20 @@ async function init() {
   // Set up plot control event listeners (only once)
   setupControls();
 
+  // Set up copy link button
+  document.getElementById('copy-link').addEventListener('click', () => {
+    const branch = document.getElementById('branch-name').value.trim() || DEFAULT_BRANCH;
+    const url = new URL(window.location.href);
+    url.search = '';
+    url.searchParams.set('branch', branch);
+    navigator.clipboard.writeText(url.toString());
+    // Brief visual feedback
+    const btn = document.getElementById('copy-link');
+    const original = btn.textContent;
+    btn.textContent = 'Copied!';
+    setTimeout(() => btn.textContent = original, 1500);
+  });
+
   // Initial load
   await loadAndRenderData();
 }

Original file line number	Diff line number	Diff line change
`@@ -381,3 +381,12 @@ async function loadData(csvUrl, jsonUrl) {`
`381`	`381`	`throw error;`
`382`	`382`	`}`
`383`	`383`	`}`
	`384`	`+`
	`385`	`+/**`
	`386`	`+ * Get branch name from URL query parameter`
	`387`	`+ * @returns {string\|null} Branch name or null if not specified`
	`388`	`+ */`
	`389`	`+function getBranchFromUrl() {`
	`390`	`+ const params = new URLSearchParams(window.location.search);`
	`391`	`+ return params.get('branch');`
	`392`	`+}`