gramene-search 2.0.4 → 2.0.6

package/src/components/exprViz/styles.css

@@ -11,6 +11,10 @@
   flex-direction: column;
   gap: 0.5rem;
   padding: 0.5rem 0;
+  /* Constrain children so the grid scrolls internally instead of bleeding
+   * out and forcing the page to scroll horizontally. */
+  min-width: 0;
+  overflow: hidden;
 }
 
 .exprviz-toolbar {
@@ -19,6 +23,59 @@
   gap: 0.5rem;
 }
 
+/* Host applications (e.g. sorghum-webapp) sometimes ship global stylesheets
+ * that override `.btn` / `.btn-sm` with `!important` — fat padding, custom
+ * font-weight, transformed text — which leaves our toolbar buttons at
+ * inconsistent sizes (since plain `<Button>` and `<ToggleButton>` inside a
+ * `<ToggleButtonGroup>` pick up different rules). Re-state Bootstrap 5's
+ * small-button metrics here with higher specificity and `!important`, scoped
+ * to `.exprviz-toolbar`, so the toolbar always looks the same regardless of
+ * what the host's theme does. */
+.exprviz-toolbar .btn,
+.exprviz-toolbar .btn.btn-sm,
+.exprviz-toolbar .btn-group > .btn,
+.exprviz-toolbar .btn-group > .btn.btn-sm,
+.exprviz-toolbar .btn-group-sm > .btn,
+.exprviz-toolbar label.btn {
+  padding: 0.25rem 0.5rem !important;
+  font-size: 0.875rem !important;
+  line-height: 1.5 !important;
+  font-weight: 400 !important;
+  text-transform: none !important;
+  letter-spacing: normal !important;
+  height: auto !important;
+  min-height: 0 !important;
+  border-radius: 0.2rem !important;
+}
+
+/* Restore the squared-off inner edges within a ToggleButtonGroup. */
+.exprviz-toolbar .btn-group > .btn:not(:first-child):not(:last-child),
+.exprviz-toolbar .btn-group > .btn:not(:first-child):not(:last-child).btn-sm {
+  border-radius: 0 !important;
+}
+.exprviz-toolbar .btn-group > .btn:first-child:not(:last-child),
+.exprviz-toolbar .btn-group > .btn:first-child:not(:last-child).btn-sm {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.exprviz-toolbar .btn-group > .btn:last-child:not(:first-child),
+.exprviz-toolbar .btn-group > .btn:last-child:not(:first-child).btn-sm {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.exprviz-toolbar .btn-group {
+  vertical-align: middle;
+}
+
+/* Same idea for the status text — host stylesheets sometimes restyle
+ * <span>s in unexpected ways. */
+.exprviz-toolbar .exprviz-status {
+  font-weight: 400 !important;
+  text-transform: none !important;
+  letter-spacing: normal !important;
+}
+
 .exprviz-status {
   color: #666;
   font-size: 0.85rem;
@@ -38,13 +95,45 @@
 .exprviz-body {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .exprviz-plot {
-  height: 320px;
   border: 1px solid #ddd;
   background: #fff;
+  min-height: 120px;
+  overflow: hidden;
+}
+
+.exprviz-resizer {
+  height: 8px;
+  margin: 2px 0;
+  background: #f0f0f0;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  cursor: row-resize;
+  flex: none;
+}
+
+.exprviz-resizer::before {
+  content: '';
+  display: block;
+  width: 36px;
+  height: 2px;
+  background: #aaa;
+  border-radius: 1px;
+  margin: 3px auto;
+}
+
+.exprviz-resizer:hover,
+.exprviz-resizer:active {
+  background: #e0e8f5;
+}
+
+.exprviz-resizer:hover::before,
+.exprviz-resizer:active::before {
+  background: #2a6ebb;
 }
 
 .exprviz-pc-container {
@@ -94,13 +183,133 @@
   color: #888;
 }
 
+.exprviz-pc-tooltip {
+  position: fixed;
+  z-index: 1000;
+  background: #fff;
+  border: 1px solid #bbb;
+  border-radius: 3px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+  padding: 6px 8px;
+  font-size: 0.78rem;
+  line-height: 1.35;
+  max-width: 360px;
+  pointer-events: none;
+  color: #222;
+}
+
+.exprviz-pc-tip-section {
+  margin-top: 4px;
+  font-size: 0.72rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #888;
+}
+
+.exprviz-pc-tip-row {
+  margin-left: 0.4rem;
+}
+
+.exprviz-pc-tip-key {
+  font-weight: 600;
+}
+
 .exprviz-table {
   height: 480px;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .exprviz-aggrid {
   width: 100%;
   height: 100%;
+  /* Block the browser's edge-of-scroll back/forward gesture when the user
+   * scrolls all the way left or right inside the grid. */
+  overscroll-behavior-x: contain;
+}
+
+/* ag-grid's scrolling viewports — make sure the back/forward gesture is
+ * contained at every level, not just on our outer wrapper. */
+.exprviz-aggrid .ag-body-viewport,
+.exprviz-aggrid .ag-body-horizontal-scroll-viewport,
+.exprviz-aggrid .ag-center-cols-viewport {
+  overscroll-behavior-x: contain;
+}
+
+/* Group-header rows: subtle tinting so each metadata level reads as a band.
+ * The :first-of-type column-group rule covers the topmost (study) row. */
+.exprviz-aggrid .ag-header-group-cell {
+  font-size: 0.78rem;
+  border-right: 1px solid #e0e0e0;
+}
+
+.exprviz-aggrid .ag-header-group-cell-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 6px;
+}
+
+.exprviz-aggrid .exprviz-hg-factors {
+  background: #eef6ff;
+  color: #1e3a5f;
+}
+
+.exprviz-aggrid .exprviz-hg-chars {
+  background: #f5f5f0;
+  color: #4a4a30;
+}
+
+.exprviz-aggrid .exprviz-hg-collapsed {
+  font-style: italic;
+  color: #666;
+}
+
+/* The label cells stacked above the Gene ID and Name columns — Study/Title,
+ * every Factor/<factor type> row, every Characteristic/<char type> row,
+ * and the collapsed-section placeholders — are rendered via the
+ * LabelHeaderGroup / ToggleHeaderGroup React components. Both render a
+ * full-width div that right-aligns its content, so the alignment is
+ * baked into the component DOM and doesn't depend on overriding
+ * ag-grid's internal CSS. The leaf cells ("Gene ID" / "Name") are not
+ * wrapped in these components and keep ag-grid's default left alignment. */
+.exprviz-label-header {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  text-align: right;
+  padding-right: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.exprviz-toggle-header {
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  padding-right: 6px;
+}
+
+.exprviz-toggle-header:hover {
+  color: #2a6ebb;
+}
+
+.exprviz-toggle-caret {
+  display: inline-block;
+  width: 0.9em;
+  font-size: 0.75em;
+  color: #888;
+  margin-right: 2px;
+}
+
+.exprviz-toggle-header:hover .exprviz-toggle-caret {
+  color: #2a6ebb;
 }
 
 .exprviz-fields-layout {
@@ -260,57 +469,3 @@
   background: #fafaff;
 }
 
-.exprviz-header {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: 4px;
-}
-
-.exprviz-header-text {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.exprviz-header-sort {
-  margin-left: 2px;
-  font-size: 0.8em;
-  color: #666;
-}
-
-.exprviz-header-info {
-  cursor: help;
-  color: #2a6ebb;
-  font-size: 0.95em;
-  flex: none;
-}
-
-.exprviz-header-menu {
-  cursor: pointer;
-  flex: none;
-  opacity: 0.7;
-}
-
-.exprviz-header-menu:hover {
-  opacity: 1;
-}
-
-.exprviz-header-popover {
-  max-width: 360px;
-  font-size: 0.85rem;
-}
-
-.exprviz-header-popover ul {
-  margin: 0.25rem 0 0 0;
-  padding-left: 1rem;
-}
-
-.exprviz-header-popover li {
-  margin: 0;
-}
-
-.exprviz-header-section {
-  margin-top: 0.4rem;
-}

package/src/fieldCatalog.overlay.json

@@ -53,7 +53,7 @@
     },
     {
       "id": "diffexpr",
-      "match": "^(E[-_][A-Za-z0-9_-]+?)_g(\\d+)_g(\\d+)_(pval|logfc|l2fc)_attr_([a-z])$",
+      "match": "^(E[-_][A-Za-z0-9_-]+?)_g(\\d+)_g(\\d+)_(pval|l2fc)_attr_([a-z])$",
       "group": "differential",
       "diffExpression": true,
       "labelTemplate": "$1 · g$2 vs g$3 · $4"