Show every residue's resolved state on the order track

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/components/Transitions.tsx

@@ -429,8 +429,51 @@ function fmtRanges(r: Array<[number, number]>, max = 8): string {
  * Residues resolved in the partner but not in this chain ("ordered") and the reverse
  * ("disordered"), on the SEQRES axis. Resolved-state sense, not intrinsic disorder.
  */
-export function OrderChangeView({ order, length, from, to }: { order: OrderChange; length: number; from: string; to: string }) {
+type ResState = 'both' | 'ord' | 'dis' | 'none';
+
+/** Contiguous runs of each residue's resolved state in this chain (A) vs the partner (B). */
+function resolvedRuns(L: number, resolvedA: Array<[number, number]>, order: OrderChange) {
+  const inA = new Uint8Array(L + 2);
+  for (const [a, b] of resolvedA) for (let i = Math.max(1, a); i <= Math.min(L, b); i++) inA[i] = 1;
+  const mark = new Array<ResState>(L + 2).fill('none');
+  for (let i = 1; i <= L; i++) mark[i] = inA[i] ? 'both' : 'none';
+  for (const [a, b] of order.disordered_ranges) for (let i = a; i <= Math.min(L, b); i++) mark[i] = 'dis';
+  for (const [a, b] of order.ordered_ranges) for (let i = a; i <= Math.min(L, b); i++) mark[i] = 'ord';
+  const runs: Array<{ state: ResState; start: number; end: number }> = [];
+  for (let i = 1; i <= L; i++) {
+    const last = runs[runs.length - 1];
+    if (last && last.state === mark[i] && last.end === i - 1) last.end = i;
+    else runs.push({ state: mark[i], start: i, end: i });
+  }
+  return runs;
+}
+
+export function OrderChangeView({
+  order,
+  length,
+  from,
+  to,
+  resolvedFrom,
+}: {
+  order: OrderChange;
+  length: number;
+  from: string;
+  to: string;
+  /** resolved SEQRES ranges of this chain (A); lets the track show every residue's state */
+  resolvedFrom?: Array<[number, number]>;
+}) {
   const L = Math.max(1, length);
+  const runs = resolvedFrom?.length ? resolvedRuns(L, resolvedFrom, order) : null;
+  const runTitle = (state: ResState, a: number, b: number) => {
+    const span = a === b ? `${a}` : `${a}–${b}`;
+    return state === 'both'
+      ? `${span}: resolved in both`
+      : state === 'ord'
+        ? `${span}: ordered in ${to} (missing in ${from})`
+        : state === 'dis'
+          ? `${span}: resolved only in ${from}`
+          : `${span}: not resolved in either structure`;
+  };
   return (
     <div className="orderview">
       <h3 className="compare__sub">Order ↔ disorder (resolved residues)</h3>
@@ -467,8 +510,16 @@ export function OrderChangeView({ order, length, from, to }: { order: OrderChang
             )}
             {order.with_ligand_change && <span className="badge badge--outline">Co-occurs with a ligand change</span>}
           </div>
-          <div className="order-track" aria-label="Order changes along the sequence">
-            {order.ordered_ranges.map(([a, b]) => (
+          <div className={`order-track ${runs ? 'order-track--full' : ''}`} aria-label="Resolved residues along the sequence">
+            {runs?.map((r) => (
+              <span
+                key={`${r.state}${r.start}`}
+                className={`order-track__seg order-track__seg--${r.state}`}
+                style={{ left: `${((r.start - 1) / L) * 100}%`, width: `${((r.end - r.start + 1) / L) * 100}%` }}
+                title={runTitle(r.state, r.start, r.end)}
+              />
+            ))}
+            {!runs && order.ordered_ranges.map(([a, b]) => (
               <span
                 key={`o${a}`}
                 className="order-track__seg order-track__seg--ord"
@@ -476,7 +527,7 @@ export function OrderChangeView({ order, length, from, to }: { order: OrderChang
                 title={`Ordered in ${to}: ${a}–${b}`}
               />
             ))}
-            {order.disordered_ranges.map(([a, b]) => (
+            {!runs && order.disordered_ranges.map(([a, b]) => (
               <span
                 key={`d${a}`}
                 className="order-track__seg order-track__seg--dis"
@@ -489,6 +540,22 @@ export function OrderChangeView({ order, length, from, to }: { order: OrderChang
               <span>{L}</span>
             </span>
           </div>
+          {runs && (
+            <ul className="legend order-legend">
+              <li>
+                <span className="swatch order-key order-key--both" /> Resolved in both
+              </li>
+              <li>
+                <span className="swatch" style={{ background: 'var(--ord)' }} /> Ordered in {to}
+              </li>
+              <li>
+                <span className="swatch" style={{ background: 'var(--disord)' }} /> Resolved only in {from}
+              </li>
+              <li>
+                <span className="swatch order-key order-key--none" /> Not resolved in either
+              </li>
+            </ul>
+          )}
           <p className="muted small orderview__ranges">
             {order.ordered_ranges.length > 0 && (
               <>

frontend/src/pages/ChainPage.tsx

@@ -143,7 +143,13 @@ function ComparePanel({
           <p className="muted small">Negative (green) means the partner conformation scores lower, i.e. more favourable.</p>
         </div>
       </div>
-      <OrderChangeView order={t.order} length={a.sequence_length ?? a.sequence.length} from={chainLabel(a.pdb_id, a.auth_asym_id)} to={chainLabel(t.pdb_id, t.auth_asym_id)} />
+      <OrderChangeView
+        order={t.order}
+        length={a.sequence_length ?? a.sequence.length}
+        from={chainLabel(a.pdb_id, a.auth_asym_id)}
+        to={chainLabel(t.pdb_id, t.auth_asym_id)}
+        resolvedFrom={a.resolved_ranges}
+      />
       {show3d && (
         <StructureDiff
           a={{ pdb_id: a.pdb_id, auth_asym_id: a.auth_asym_id }}

frontend/src/styles/pages.css

@@ -2049,3 +2049,35 @@
   color: var(--faint);
   margin-top: -6px;
 }
+
+/* full per-residue order track: both / ordered / disordered / neither */
+.order-track--full {
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--line-strong);
+}
+
+.order-track__seg--both,
+.order-key--both {
+  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
+}
+
+.order-track__seg--ord {
+  background: var(--ord);
+}
+
+.order-track__seg--dis {
+  background: var(--disord);
+}
+
+.order-track__seg--none {
+  background: repeating-linear-gradient(135deg, transparent 0 3px, var(--line) 3px 4px);
+}
+
+.order-key--none {
+  background: var(--surface);
+  box-shadow: inset 0 0 0 1px var(--line-strong);
+}
+
+.order-legend {
+  margin: -8px 0 6px;
+}