From 31f1726f28178395387ff997a027cf294d77b6ab Mon Sep 17 00:00:00 2001
From: Adam Wright <adam.j.wright82@gmail.com>
Date: Fri, 4 Sep 2026 22:46:59 +0000
Subject: [PATCH] fix(analysis): say which component your data hit, so it can
 be read

Curators, re-testing #154: "the components are shown, but an indication of
which component is hit in the analysis is missing."

It was not missing. Run against a real tissue analysis -- the HPA
experiment through /ExperimentDigester, posted exactly as the Tissue form
posts it -- every component row carries a marker: 8 popups, 15 rows, none
unmarked, and the found/not-found split matches the data. So the report is
about what the panel looks like, and on that it is right.

Three things made a present indication unreadable:

- **The marker was on its own line.** The row is a column flex, so a 7px dot
  sat above the name rather than beside it, unattached to anything.
- **A hollow dot was the entire signal** for a component your data missed.
  On a row with no values beside it there was nothing else to read.
- **The values were three bare numbers.** Which tissue each belonged to was
  in a tooltip, and nobody hovers a tooltip to discover a column exists.

Now: the dot sits against the name it belongs to, with a ring that separates
found from not-found at a glance; a missed row says "not in your data" in
words; and each value is a chip carrying its sample's name.

Also fixes the emphasis that was supposed to mark the sample the diagram is
coloured by, and never once did. `state.sample` holds the column's *name* --
`samples()[index]` is what sets it -- so reading it as a number gave NaN for
every real analysis. It only appeared to work when no sample was set, where
the fallback was the first column anyway.

Verified on beta across all four states: tissue expression (chips, current
sample emphasised), overrepresentation (markers, no chips), a component the
data missed, and no analysis at all (no marker, no text).

Refs #154

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../entity-popup/entity-popup.component.html  | 40 +++++++++-----
 .../entity-popup/entity-popup.component.scss  | 55 ++++++++++++++++---
 .../entity-popup/entity-popup.component.ts    | 17 +++++-
 3 files changed, 89 insertions(+), 23 deletions(-)

diff --git a/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.html b/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.html
index 6b98139e..ee3093a0 100644
--- a/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.html
+++ b/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.html
@@ -72,29 +72,43 @@ <h3 class="entity-popup__group">
                   <button type="button" (click)="open(row)">
                     <!-- With an analysis running, every molecule says whether it
                            was in it: otherwise a complex whose components are
-                           half hit looks the same as one nothing touched. -->
-                    @if (row.found !== undefined) {
-                      <span
-                        class="row-hit"
-                        [class.row-hit--found]="row.found"
-                        [matTooltip]="row.found ? 'In your analysis' : 'Not in your analysis'"
-                      ></span>
-                    }
-                    <span class="row-label" [class.row-label--missed]="row.found === false">{{ row.label }}</span>
+                           half hit looks the same as one nothing touched.
+                           The marker sits on the label's own line: stacked above
+                           it, curators read straight past it and reported the
+                           indication as missing. -->
+                    <span class="row-head">
+                      @if (row.found !== undefined) {
+                        <span
+                          class="row-hit"
+                          [class.row-hit--found]="row.found"
+                          [matTooltip]="row.found ? 'In your analysis' : 'Not in your analysis'"
+                        ></span>
+                      }
+                      <span class="row-label" [class.row-label--missed]="row.found === false">{{ row.label }}</span>
+                    </span>
                     @if (row.expression?.length) {
                       <span class="row-expression">
                         @for (value of row.expression; track $index) {
                           <!-- One value per sample, as the GWT panel shows one
-                                 column per sample. The one the rest of the
-                                 browser is displaying is the emphasised one. -->
+                                 column per sample. The sample's name is here
+                                 rather than in a tooltip only: three bare
+                                 numbers say nothing about which tissue is
+                                 which. The one the rest of the browser is
+                                 displaying is the emphasised one. -->
                           <span
                             class="row-expression__value"
                             [class.row-expression__value--current]="$index === selectedSample()"
-                            [matTooltip]="sampleNames()[$index] ?? 'Sample ' + ($index + 1)"
-                            >{{ value | number: '1.0-2' }}</span
                           >
+                            <span class="row-expression__name">{{
+                              sampleNames()[$index] ?? 'Sample ' + ($index + 1)
+                            }}</span>
+                            {{ value | number: '1.0-2' }}
+                          </span>
                         }
                       </span>
+                    } @else if (row.found === false) {
+                      <!-- Said in words, not only by an unfilled dot. -->
+                      <span class="row-missed">not in your data</span>
                     }
                     @if (row.detail) {
                       <span class="row-detail">{{ row.detail }}</span>
diff --git a/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.scss b/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.scss
index a86e008c..857d0a50 100644
--- a/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.scss
+++ b/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.scss
@@ -209,38 +209,74 @@
   opacity: 0.7;
 }
 
+// The marker and the name it belongs to, on one line. The button is a column,
+// so without this the dot sits on a line of its own above the label -- which is
+// how a marker that is present gets reported as missing.
+.row-head {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
 // Analysis markers. A dot rather than a colour on the label: the rows already
 // carry type icons and colour, and this has to read at a glance next to them.
 .row-hit {
   flex: none;
-  width: 7px;
-  height: 7px;
+  width: 9px;
+  height: 9px;
   border-radius: 50%;
-  border: 1px solid var(--outline, rgb(0 0 0 / 35%));
+  border: 1px solid var(--outline, rgb(0 0 0 / 45%));
   background: transparent;
 }
 
 .row-hit--found {
   // The same green the diagram uses for a hit, so the popup and the diagram
-  // agree about what "found" looks like.
+  // agree about what "found" looks like. The ring is what separates it from an
+  // empty dot at a glance rather than on inspection.
   background: var(--analysis-hit, #2e7d32);
   border-color: var(--analysis-hit, #2e7d32);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--analysis-hit, #2e7d32) 28%, transparent);
 }
 
 .row-label--missed {
   opacity: 0.55;
 }
 
+// Said in words. An unfilled dot is the whole signal otherwise, and on a row
+// with no values beside it there is nothing else to read.
+.row-missed {
+  margin-left: 1.3rem;
+  font-size: 0.68rem;
+  font-style: italic;
+  opacity: 0.6;
+}
+
 .row-expression {
-  margin-left: auto;
-  display: inline-flex;
-  gap: 0.35rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin: 0.15rem 0 0 1.3rem;
   font-family: 'Roboto Mono', ui-monospace, monospace;
-  font-size: 0.72rem;
+  font-size: 0.7rem;
 }
 
+// One chip per sample, carrying its own name: three bare numbers cannot say
+// which tissue is which, and the name was in a tooltip nobody hovers.
 .row-expression__value {
-  opacity: 0.5;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.25rem;
+  padding: 0.05rem 0.3rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+  opacity: 0.75;
+}
+
+.row-expression__name {
+  font-family: inherit;
+  font-size: 0.62rem;
+  letter-spacing: 0.02em;
+  opacity: 0.75;
 }
 
 // The sample the diagram is currently coloured by, so the number you are
@@ -248,4 +284,5 @@
 .row-expression__value--current {
   opacity: 1;
   font-weight: 600;
+  background: color-mix(in srgb, currentColor 16%, transparent);
 }
diff --git a/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.ts b/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.ts
index fc4c59a5..d71bc68e 100644
--- a/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.ts
+++ b/projects/pathway-browser/src/app/diagram/entity-popup/entity-popup.component.ts
@@ -379,7 +379,22 @@ export class EntityPopupComponent {
   readonly sampleNames = computed(() => this.analysis.samples());
 
   /** The sample the rest of the browser is currently showing. */
-  readonly selectedSample = computed(() => Number(this.state.sample() ?? 0));
+  /**
+   * Which sample the diagram is currently coloured by, as an index into the
+   * values on a row.
+   *
+   * `state.sample` holds the column's *name* -- `samples()[index]` is what sets
+   * it -- so reading it as a number gave NaN for every real analysis, and the
+   * value a reader was actually looking at on the canvas was never the one
+   * emphasised here. It only ever appeared to work when no sample was set,
+   * where the fallback happened to be the first column anyway.
+   */
+  readonly selectedSample = computed(() => {
+    const name = this.state.sample();
+    if (!name) return 0;
+    const at = this.sampleNames().indexOf(name);
+    return at === -1 ? 0 : at;
+  });
 
   /** Group components by molecule type, in a stable order, as production does. */
   private group(components: any[], refs: Map<string, ComponentRef>): PopupGroup[] {