Standalone Metadata Condition

public/stage-1-covid/config-stage-1.json

@@ -125,7 +125,7 @@
         "initial_selection": ["Greece"]
       }
     },
-    "covid-metadata": {
+    "covid-metadata-task": {
       "type": "react-component",
       "path": "viz-guardrails/CovidMetadataTask.tsx",
       "instruction": "Below are four different visualizations (A–D) of COVID-19 data for Norway. Please review each chart and select the one you think is the most useful comparison for Norway.",
@@ -3270,7 +3270,7 @@
           }
         ]
       },
-      "covid-metadata",
+      "covid-metadata-task",
       "post-study-quant"
     ]
   }

src/public/viz-guardrails/LineChart.tsx

@@ -351,9 +351,39 @@ export function LineChart({
   const clusterRepsDataPath = '/sandbox/data/cluster_representatives.csv';
   const subregionRepsDataPath = '/sandbox/data/subregion_representatives.csv';
   // ---------------------------- Metadata (hardcoded countries) ---------------------------- //
-  const metadataCountries = useMemo(() => (
-    ['Sweden', 'Latvia', 'Denmark', 'Finland', 'Guernsey']
-  ), []);
+  // Map of related selected countries (LLM)
+  const relatedBySelected: Record<string, string[]> = {
+    Greece: ['Italy', 'Spain', 'Portugal', 'Cyprus', 'Croatia'],
+    Germany: ['France', 'Netherlands', 'Austria', 'Sweden', 'Denmark'],
+    Belarus: ['Russia', 'Ukraine', 'Kazakhstan', 'Moldova', 'Serbia'],
+    Canada: ['United States', 'United Kingdom', 'Australia', 'New Zealand', 'Germany'],
+    Tunisia: ['Morocco', 'Algeria', 'Egypt', 'Jordan', 'Lebanon'],
+    Norway: ['Sweden', 'Denmark', 'Finland', 'Iceland', 'Netherlands'],
+  };
+
+  // Map of related selected stocks (LLM)
+  const relatedBySelectedStocks: Record<string, string[]> = {
+    VZ: ['T', 'TMUS', 'CHTR', 'CMCSA', 'AMT'],
+    COR: ['MCK', 'CAH', 'CVS', 'WBA', 'HSIC'],
+    CHD: ['PG', 'CL', 'KMB', 'CLX', 'EL'],
+    TEL: ['APH', 'GLW', 'ETN', 'HUBB', 'KEYS'],
+    JKHY: ['FI', 'FIS', 'GPN', 'BR', 'PAYX'],
+  };
+
+  const metadataCountries = useMemo(() => {
+    if (!selection || selection.length === 0) return [];
+    // For the clean_data dataset, use the existing relatedBySelected mapping
+    if (dataname === 'clean_data') {
+      const match = selection.find((s) => Object.prototype.hasOwnProperty.call(relatedBySelected, s));
+      return match ? relatedBySelected[match] : [];
+    }
+    // For the sp500 dataset, use the SP500 mapping
+    if (dataname === 'sp500_stocks') {
+      const match = selection.find((s) => Object.prototype.hasOwnProperty.call(relatedBySelectedStocks, s));
+      return match ? relatedBySelectedStocks[match] : [];
+    }
+    return [];
+  }, [selection, dataname]);
 
   useEffect(() => {
     if (guardrail !== 'cluster') return;
@@ -945,11 +975,7 @@ export function LineChart({
     if (selection) {
       labels = labels.concat(
         selection.map((country) => {
-          let label = country;
-          if (guardrail === 'metadata' && dataname === 'clean_data') {
-            const item = items.find((it) => it.name === country);
-            if (item?.subregion) label = `${country} (${item.subregion})`;
-          }
+          const label = country;
           return {
             label,
             y: data.filter((val) => val[parameters.cat_var] === country).slice(-1).map((val) => yScale(val[parameters.y_var]))[0],
@@ -1024,7 +1050,7 @@ export function LineChart({
         if (line && line.lastPoint) {
           const percentile = percentiles[i];
           labels.push({
-            label: `${line.name} (${percentile}th Percentile)`,
+            label: `${line.name}\n${percentile}th Percentile`,
             y: yScale(line.lastPoint[parameters.y_var]),
             color: darkGrayColor,
           });
@@ -1054,13 +1080,8 @@ export function LineChart({
           .filter((line) => line !== null)
           .map((line) => {
             if (!line) return null;
-            let label = line.name;
-            if (dataname === 'clean_data') {
-              const item = items.find((it) => it.name === line.name);
-              if (item?.subregion) label = `${line.name} (${item.subregion})`;
-            }
             return {
-              label,
+              label: line.name,
               y: yScale(line.lastPoint[1]),
               color: darkGrayColor,
             };
@@ -1071,15 +1092,16 @@ export function LineChart({
 
     labels = labels.filter((l) => typeof l.y === 'number' && !Number.isNaN(l.y)).sort((a, b) => b.y - a.y);
 
-    let prevY: number | undefined;
-    for (const label of labels) {
-      if (prevY !== undefined) {
-        const diff = prevY - label.y;
-        if (diff < min_dist) {
-          label.y = prevY - min_dist;
-        }
+    const labelHeights = labels.map((l) => (l.label.includes('\n') ? 18 : 10));
+    for (let i = 0; i < labels.length; i += 1) {
+      if (i === 0) continue;
+      const prev = labels[i - 1];
+      const cur = labels[i];
+      const required = Math.max(labelHeights[i - 1], labelHeights[i], min_dist);
+      const diff = prev.y - cur.y;
+      if (diff < required) {
+        cur.y = prev.y - required;
       }
-      prevY = label.y;
     }
 
     return labels;
@@ -1108,7 +1130,7 @@ export function LineChart({
 
   // ---------------------------- Render ----------------------------
   const labelHtmlPositions = allLabelPositions.map((x, i) => {
-    const baseName = x.label.split(' (')[0];
+    const baseName = x.label.split('\n')[0].split(' (')[0];
     const country = items.find((it) => it.name === baseName);
     const tooltip = country?.longName || undefined;
     const labelX = width + margin.left - 3;
@@ -1487,6 +1509,7 @@ export function LineChart({
               color: x.color,
               background: 'transparent',
               cursor: x.tooltip ? 'pointer' : 'default',
+              whiteSpace: 'pre-line',
               zIndex: 2,
               userSelect: 'none',
               padding: 0,

src/public/viz-guardrails/Selector.tsx

@@ -49,6 +49,7 @@ export function Selector({
           { value: 'percentiles', label: 'Percentiles of All Lines At Each Timestamp' },
           { value: 'percentileClosest', label: 'Actual Percentiles Closest' },
           { value: 'cluster', label: 'Cluster Rep' },
+          { value: 'metadata', label: 'Metadata/Expert sampling' },
           { value: 'all', label: 'All' },
         ]}
       />