@basic-genomics/hivtrace-viz 1.2.3 → 1.2.4

package/dist/embed/index.html

@@ -12,9 +12,13 @@
   <link rel="shortcut icon" href="#" />
 
   <style>
+    html,
     body {
+      height: 100%;
+      width: 100%;
       margin: 0;
       padding: 0;
+      overflow: hidden;
     }
 
     /* 搜索框固定宽度 */
@@ -297,7 +301,7 @@
       flex-direction: column;
       height: 100%;
       min-height: 500px;
-      padding: 12px;
+      padding: 12px 0 0 0;
       gap: 12px;
     }
 
@@ -312,31 +316,11 @@
 
     .hivtrace-pill-row {
       display: flex;
-      flex-wrap: nowrap;
-      gap: 8px;
-      overflow-x: auto;
+      flex-wrap: wrap;
+      gap: 4px;
       padding: 4px 0 8px 0;
     }
 
-    /* Horizontal scrollbar for pill row */
-    .hivtrace-pill-row::-webkit-scrollbar {
-      height: 6px;
-    }
-
-    .hivtrace-pill-row::-webkit-scrollbar-track {
-      background: #f1f1f1;
-      border-radius: 3px;
-    }
-
-    .hivtrace-pill-row::-webkit-scrollbar-thumb {
-      background: #c1c1c1;
-      border-radius: 3px;
-    }
-
-    .hivtrace-pill-row::-webkit-scrollbar-thumb:hover {
-      background: #a1a1a1;
-    }
-
     /* 横向 Pill 样式 */
     .hivtrace-pill {
       display: inline-flex;
@@ -387,8 +371,6 @@
       display: flex;
       flex-direction: column;
       gap: 12px;
-      min-height: 0;
-      overflow: auto;
     }
 
     /* 大屏幕（> 996px）：左右布局 */
@@ -397,20 +379,19 @@
       .hivtrace-attributes-content,
       .hivtrace-stats-content {
         flex-direction: row;
+        align-items: stretch;
       }
     }
 
     /* 可视化面板和统计面板 */
     .hivtrace-viz-panel,
     .hivtrace-stats-panel {
-      flex: 1;
       display: flex;
       flex-direction: column;
       background: #f9fafb;
       border: 1px solid #e5e7eb;
       border-radius: 8px;
       padding: 12px;
-      min-width: 0;
     }
 
     /* 大屏幕（> 996px）：图表固定宽度 500px */
@@ -442,6 +423,30 @@
       justify-content: center;
     }
 
+    .hivtrace-expand-spacing,
+    .hivtrace-compress-spacing,
+    .hivtrace-enlarge-window,
+    .hivtrace-shrink-window,
+    .hivtrace-attributes-color-label {
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+    }
+
+    .hivtrace-compress-spacing,
+    .hivtrace-shrink-window,
+    .hivtrace-enlarge-window,
+    .hivtrace-compute-graph-statistics,
+    .hivtrace-color-picker-toggle {
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+    }
+
+    .set-min-cluster-size,
+    .hivtrace-hide-others,
+    .hivtrace-color-picker-toggle {
+      border-left: none !important;
+    }
+
     .hivtrace-viz-wrapper {
       display: flex;
       align-items: center;
@@ -668,13 +673,13 @@
 
                         <!-- Dropdowns to Format Notes By Attributes (Color, Shape, Opacity and Label) -->
                         <div class="input-group-btn">
-                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
-                            data-hivtrace-ui-role="attributes_label">
+                          <button type="button" class="btn btn-default dropdown-toggle hivtrace-attributes-color-label"
+                            data-toggle="dropdown" data-hivtrace-ui-role="attributes_label">
                             颜色 <span class="caret"></span>
                           </button>
                           <ul class="dropdown-menu" role="menu" data-hivtrace-ui-role="attributes"></ul>
-                          <button type="button" class="btn btn-default" data-toggle="collapse" href="#colorPickerRow"
-                            title="Select Color Palette">
+                          <button type="button" class="btn btn-default hivtrace-color-picker-toggle"
+                            data-toggle="collapse" href="#colorPickerRow" title="Select Color Palette">
                             <i class="fa fa-circle color-picker-toggle" aria-hidden="true"></i>
                           </button>
                           <button type="button" class="btn btn-default" style="display: none"
@@ -716,7 +721,7 @@
                           </span>
                           <input id="filter_input" type="text" class="form-control" placeholder="在属性中搜索文本"
                             data-hivtrace-ui-role="filter" />
-                          <span class="input-group-addon">
+                          <span class="input-group-addon hivtrace-hide-others">
                             隐藏其他
                             <input type="checkbox" data-hivtrace-ui-role="hide_filter" />
                           </span>
@@ -912,8 +917,92 @@
 
   <script src="./hivtrace.js"></script>
   <!-- <script src="dist/hivtrace.es.js"></script> -->
-
   <script>
+    // 动态计算标签页高度
+    (function () {
+      var debounceTimer = null;
+
+      function updateTabContentHeight() {
+        var tabPane = document.querySelector('.tab-content');
+        if (!tabPane) return;
+
+        // 获取标签页内容区域的顶部位置
+        var tabPaneRect = tabPane.getBoundingClientRect();
+        var availableHeight = window.innerHeight - tabPaneRect.top;
+
+        // 设置统计标签页高度
+        var statsTab = document.getElementById('trace-attributes');
+        if (statsTab) {
+          statsTab.style.height = availableHeight + 'px';
+        }
+
+        // 设置网络标签页内 network_tag 高度
+        var networkTag = document.querySelector('#trace-results #network_tag');
+        if (networkTag) {
+          var networkTagRect = networkTag.getBoundingClientRect();
+          networkTag.style.height = (window.innerHeight - networkTagRect.top) + 'px';
+        }
+
+        // 设置动态簇视图的 SVG 容器高度
+        var clusterContainers = document.querySelectorAll('.hivtrace-network-svg-container');
+        clusterContainers.forEach(function (container) {
+          var containerRect = container.getBoundingClientRect();
+          container.style.height = (window.innerHeight - containerRect.top) + 'px';
+        });
+      }
+
+      // 防抖函数：避免频繁调用
+      function debouncedUpdate(delay) {
+        if (debounceTimer) {
+          clearTimeout(debounceTimer);
+        }
+        debounceTimer = setTimeout(function () {
+          requestAnimationFrame(updateTabContentHeight);
+        }, delay || 50);
+      }
+
+      // 页面加载和窗口调整时更新高度
+      window.addEventListener('load', function () {
+        updateTabContentHeight();
+        // 延迟再次计算，确保 nav-trace 换行后的布局完成
+        setTimeout(updateTabContentHeight, 100);
+      });
+      window.addEventListener('resize', function () {
+        debouncedUpdate(100);
+      });
+
+      // 标签切换时重新计算高度（包括动态创建的标签）
+      document.addEventListener('click', function (e) {
+        var tab = e.target.closest('#top_level_tab_container a[data-toggle="tab"]');
+        if (tab) {
+          debouncedUpdate(50);
+        }
+      });
+
+      // 监听动态创建的簇视图容器，触发高度计算
+      var observer = new MutationObserver(function (mutations) {
+        var needsUpdate = mutations.some(function (mutation) {
+          return Array.prototype.some.call(mutation.addedNodes, function (node) {
+            return node.nodeType === 1 && (
+              (node.classList && node.classList.contains('hivtrace-network-svg-container')) ||
+              (node.querySelector && node.querySelector('.hivtrace-network-svg-container'))
+            );
+          });
+        });
+        if (needsUpdate) {
+          debouncedUpdate(50);
+        }
+      });
+
+      // 延迟启动观察器，确保 tab-content 已存在
+      window.addEventListener('load', function () {
+        var tabContent = document.querySelector('.tab-content');
+        if (tabContent) {
+          observer.observe(tabContent, { childList: true, subtree: true });
+        }
+      });
+    })();
+
     var network_container = "#network_tag",
       network_status_string = "#network_status_string",
       network_warning = "#main-warning",

package/dist/hivtrace.css

@@ -11950,14 +11950,14 @@ circle.cluster {
   stroke-opacity: 0.3;
 }
 
-/* Network SVG container - only in main network tab */
+/* Network SVG container - only in main network tab (height set via JS) */
 #trace-results #network_tag {
   margin-top: 15px;
   overflow: scroll;
-  height: calc(100vh - 200px);
   position: relative;
   border: 1px solid #e5e7eb;
   border-radius: 6px;
+  box-sizing: border-box;
 }
 
 /* Hide the cloned empty #network_tag in dynamic cluster views */
@@ -11965,14 +11965,14 @@ circle.cluster {
   display: none;
 }
 
-/* SVG container for dynamic cluster views - same style as main network_tag */
+/* SVG container for dynamic cluster views - same style as main network_tag (height set via JS) */
 .hivtrace-network-svg-container {
   margin-top: 15px;
   overflow: scroll;
-  height: calc(100vh - 200px);
   position: relative;
   border: 1px solid #e5e7eb;
   border-radius: 6px;
+  box-sizing: border-box;
 }
 
 /* Force scrollbar visibility on macOS/WebKit browsers */
@@ -12003,10 +12003,9 @@ circle.cluster {
   margin-top: 5px;
 }
 
-/* Statistics tab - scrollable content area without affecting tabs */
+/* Statistics tab - height set dynamically via JavaScript */
 #trace-attributes {
   overflow-y: auto;
-  height: calc(100vh - 120px);
 }
 
 /* Checkbox and label vertical alignment - only for hide_filter addon */
@@ -12016,24 +12015,31 @@ input[data-hivtrace-ui-role="hide_filter"] {
 }
 
 .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn{
-  height: 36px !important;
+  height: 33px !important;
+  line-height: normal !important;
 }
 
+
 #network_ui_bar > .input-group-btn {
   padding-bottom: 5px;
-  height: 36px !important;
+  height: 33px !important;
 }
 
 #network_ui_bar > .input-group-btn > .btn {
-  height: 36px !important;
+  height: 33px !important;
 }
 
 #hivtrace-export-image {
-  height: 36px;
+  height: 33px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px !important;
+  gap: 2px;
 }
 
 input.form-control {
-  height: 36px !important;
+  height: 33px !important;
 }
 
 .hivtrace-download-button {
@@ -12495,33 +12501,6 @@ a[data-type="download-button"] i.fa-2x {
 }
 
 /* 下方：统计表格和直方图 - 响应式布局 */
-.hivtrace-stats-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  min-height: 0;
-}
-
-/* 大屏幕（≥996px）：左右布局 */
-@media (min-width: 996px) {
-  .hivtrace-stats-content {
-    flex-direction: row;
-  }
-}
-
-/* 统计面板 */
-.hivtrace-stats-panel {
-  flex: 1;
-  min-width: 0;
-}
-
-/* 直方图面板特殊居中 */
-.hivtrace-stats-panel:last-child {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
 
 
 /* Statistics table styling */