Merge pull request #258 from JWWade/copilot/update-legend-color-spectrum

Legend: vertically-oriented color spectrum with micro-polygon glyphs

Author: JWWade

client/src/features/legend/components/VisualLegend.module.css

@@ -28,59 +28,127 @@
   color: var(--color-text-secondary);
 }
 
-/* ── Color list (quality swatches in a wrapping grid) ─────────────────────── */
-.colorList {
+/* ── Top two-column layout (Quality Spectrum + Opacity Gradient) ──────────── */
+.topRow {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 14px;
+  align-items: flex-start;
+}
+
+/* ── Quality Spectrum Column ──────────────────────────────────────────────── */
+.spectrumSection {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.spectrumList {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
-  flex-wrap: wrap;
-  gap: 6px 10px;
+  flex-direction: column;
+  gap: 3px;
 }
 
-.colorItem {
+.spectrumItem {
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 8px;
 }
 
-.colorSwatch {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
+/** Colored band that contains the micro-polygon glyph. */
+.spectrumBand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 22px;
+  border-radius: 4px;
   flex-shrink: 0;
 }
 
-.colorLabel {
+.spectrumLabel {
   font-size: 11.5px;
   color: var(--color-text-primary);
   white-space: nowrap;
 }
 
-/* ── Shape list ───────────────────────────────────────────────────────────── */
-.shapeList {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+/* ── Opacity Gradient Column ──────────────────────────────────────────────── */
+.opacitySection {
+  flex: 0 0 auto;
+}
+
+.opacityStrip {
+  display: flex;
+  gap: 6px;
+  align-items: stretch;
+}
+
+/** Narrow vertical bar that fades from opaque to translucent. */
+.opacityBar {
+  width: 8px;
+  border-radius: 4px;
+  flex-shrink: 0;
+  /* height is driven by sibling content via align-items: stretch */
+  min-height: 60px;
+}
+
+.opacityNodes {
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   gap: 6px;
 }
 
-.shapeItem {
+.opacityNodeRow {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
+}
+
+.opacityNodeLabel {
+  font-size: 10px;
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  line-height: 1.3;
+}
+
+/* ── Cardinality Stack ────────────────────────────────────────────────────── */
+.cardinalityRow {
+  display: flex;
+  gap: 16px;
 }
 
-.shapeLabel {
+.cardinalityItem {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cardinalityLabel {
+  font-size: 11.5px;
+  color: var(--color-text-primary);
+}
+
+/* ── Visual Keys (centroid + interval icons) ──────────────────────────────── */
+.iconRow {
+  display: flex;
+  gap: 20px;
+}
+
+.iconItem {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.iconLabel {
   font-size: 11.5px;
   color: var(--color-text-primary);
-  line-height: 1.4;
 }
 
-/* ── Intensity list ───────────────────────────────────────────────────────── */
+/* ── Color Intensity list ─────────────────────────────────────────────────── */
 .intensityList {
   list-style: none;
   margin: 0;
@@ -129,24 +197,3 @@
   font-size: 11.5px;
   color: var(--color-text-primary);
 }
-
-/* ── Opacity list ─────────────────────────────────────────────────────────── */
-.opacityList {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.opacityItem {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.opacityLabel {
-  font-size: 11.5px;
-  color: var(--color-text-primary);
-}