From a19be947681edbaa5e410c022c32d4432e0dc012 Mon Sep 17 00:00:00 2001
From: accius <chris@cjhlighting.com>
Date: Sun, 1 Feb 2026 23:34:21 -0500
Subject: [PATCH] fixing callsign bounding, k index, legend

---
 src/components/SolarPanel.jsx | 51 ++++++++++++++++++++++++-----------
 src/components/WorldMap.jsx   | 37 ++++++++++++++++---------
 2 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/src/components/SolarPanel.jsx b/src/components/SolarPanel.jsx
index f6eabee..762d360 100644
--- a/src/components/SolarPanel.jsx
+++ b/src/components/SolarPanel.jsx
@@ -11,7 +11,7 @@ export const SolarPanel = ({ solarIndices }) => {
       return saved === 'indices';
     } catch (e) { return false; }
   });
-  const [imageType, setImageType] = useState('0193'); // AIA 193 (corona)
+  const [imageType, setImageType] = useState('0193');
   
   const toggleMode = () => {
     const newMode = !showIndices;
@@ -21,7 +21,6 @@ export const SolarPanel = ({ solarIndices }) => {
     } catch (e) {}
   };
   
-  // SDO/AIA image types
   const imageTypes = {
     '0193': { name: 'AIA 193Å', desc: 'Corona' },
     '0304': { name: 'AIA 304Å', desc: 'Chromosphere' },
@@ -30,7 +29,6 @@ export const SolarPanel = ({ solarIndices }) => {
     'HMIIC': { name: 'HMI Int', desc: 'Visible' }
   };
   
-  // SDO images update every ~15 minutes
   const timestamp = Math.floor(Date.now() / 900000) * 900000;
   const imageUrl = `https://sdo.gsfc.nasa.gov/assets/img/latest/latest_256_${imageType}.jpg?t=${timestamp}`;
   
@@ -42,6 +40,9 @@ export const SolarPanel = ({ solarIndices }) => {
     return '#00ff88';
   };
 
+  // Get K-Index data - server returns 'kp' not 'kIndex'
+  const kpData = solarIndices?.data?.kp || solarIndices?.data?.kIndex;
+
   return (
     <div className="panel" style={{ padding: '8px' }}>
       {/* Header with toggle */}
@@ -131,23 +132,43 @@ export const SolarPanel = ({ solarIndices }) => {
               <div style={{ background: 'var(--bg-tertiary)', borderRadius: '6px', padding: '8px', display: 'flex', alignItems: 'center', gap: '12px' }}>
                 <div style={{ minWidth: '60px' }}>
                   <div style={{ fontSize: '10px', color: 'var(--text-muted)' }}>K-Index</div>
-                  <div style={{ fontSize: '22px', fontWeight: '700', color: getKpColor(solarIndices.data.kIndex?.current), fontFamily: 'Orbitron, monospace' }}>
-                    {solarIndices.data.kIndex?.current ?? '--'}
+                  <div style={{ fontSize: '22px', fontWeight: '700', color: getKpColor(kpData?.current), fontFamily: 'Orbitron, monospace' }}>
+                    {kpData?.current ?? '--'}
                   </div>
                 </div>
                 <div style={{ flex: 1 }}>
-                  {solarIndices.data.kIndex?.forecast?.length > 0 && (
+                  {kpData?.forecast?.length > 0 ? (
+                    <div style={{ display: 'flex', gap: '2px', alignItems: 'flex-end', height: '30px' }}>
+                      {kpData.forecast.slice(0, 8).map((item, i) => {
+                        const val = typeof item === 'object' ? item.value : item;
+                        return (
+                          <div key={i} style={{
+                            flex: 1,
+                            height: `${Math.max(10, (val / 9) * 100)}%`,
+                            background: getKpColor(val),
+                            borderRadius: '2px',
+                            opacity: 0.8
+                          }} title={`Kp ${val}`} />
+                        );
+                      })}
+                    </div>
+                  ) : kpData?.history?.length > 0 ? (
                     <div style={{ display: 'flex', gap: '2px', alignItems: 'flex-end', height: '30px' }}>
-                      {solarIndices.data.kIndex.forecast.slice(0, 8).map((kp, i) => (
-                        <div key={i} style={{
-                          flex: 1,
-                          height: `${Math.max(10, (kp / 9) * 100)}%`,
-                          background: getKpColor(kp),
-                          borderRadius: '2px',
-                          opacity: 0.8
-                        }} title={`Kp ${kp}`} />
-                      ))}
+                      {kpData.history.slice(-8).map((item, i) => {
+                        const val = typeof item === 'object' ? item.value : item;
+                        return (
+                          <div key={i} style={{
+                            flex: 1,
+                            height: `${Math.max(10, (val / 9) * 100)}%`,
+                            background: getKpColor(val),
+                            borderRadius: '2px',
+                            opacity: 0.8
+                          }} title={`Kp ${val}`} />
+                        );
+                      })}
                     </div>
+                  ) : (
+                    <div style={{ color: 'var(--text-muted)', fontSize: '10px' }}>No forecast data</div>
                   )}
                 </div>
               </div>
diff --git a/src/components/WorldMap.jsx b/src/components/WorldMap.jsx
index f792238..cef7eb5 100644
--- a/src/components/WorldMap.jsx
+++ b/src/components/WorldMap.jsx
@@ -290,7 +290,7 @@ export const WorldMap = ({
           if (showDXLabels || isHovered) {
             const labelIcon = L.divIcon({
               className: '',
-              html: `<div style="background: ${isHovered ? '#fff' : color}; color: ${isHovered ? color : '#000'}; padding: 2px 6px; border-radius: 3px; font-family: JetBrains Mono; font-size: 11px; font-weight: 600; white-space: nowrap;">${path.dxCall}</div>`,
+              html: `<div style="background: ${isHovered ? '#fff' : color}; color: ${isHovered ? color : '#000'}; padding: 3px 8px; border-radius: 4px; font-family: JetBrains Mono; font-size: 11px; font-weight: 700; white-space: nowrap; border: 1px solid ${isHovered ? color : 'rgba(0,0,0,0.3)'};">${path.dxCall}</div>`,
               iconAnchor: [0, -10]
             });
             const label = L.marker([path.dxLat, path.dxLon], { icon: labelIcon, interactive: false }).addTo(map);
@@ -438,34 +438,47 @@ export const WorldMap = ({
         background: 'rgba(0, 0, 0, 0.85)',
         border: '1px solid #444',
         borderRadius: '6px',
-        padding: '6px 12px',
+        padding: '8px 14px',
         zIndex: 1000,
         display: 'flex',
-        gap: '12px',
+        gap: '10px',
         alignItems: 'center',
-        fontSize: '10px',
+        fontSize: '12px',
         fontFamily: 'JetBrains Mono, monospace'
       }}>
         {showDXPaths && (
-          <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
+          <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
             <span style={{ color: '#888' }}>DX:</span>
-            <span style={{ color: '#ff6666' }}>160m</span>
-            <span style={{ color: '#ffcc66' }}>40m</span>
-            <span style={{ color: '#66ff99' }}>20m</span>
-            <span style={{ color: '#66ccff' }}>15m</span>
-            <span style={{ color: '#9966ff' }}>10m</span>
+            <span style={{ background: '#ff6666', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>160m</span>
+            <span style={{ background: '#ff9966', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>80m</span>
+            <span style={{ background: '#ffcc66', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>40m</span>
+            <span style={{ background: '#ccff66', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>30m</span>
+            <span style={{ background: '#66ff99', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>20m</span>
+            <span style={{ background: '#66ffcc', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>17m</span>
+            <span style={{ background: '#66ccff', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>15m</span>
+            <span style={{ background: '#6699ff', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>12m</span>
+            <span style={{ background: '#9966ff', color: '#fff', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>10m</span>
+            <span style={{ background: '#cc66ff', color: '#fff', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>6m</span>
           </div>
         )}
+        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+          <span style={{ background: '#00aaff', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>● DE</span>
+          <span style={{ background: '#ff8800', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>● DX</span>
+        </div>
         {showPOTA && (
           <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
-            <span style={{ color: '#aa66ff' }}>● POTA</span>
+            <span style={{ background: '#aa66ff', color: '#fff', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>● POTA</span>
           </div>
         )}
         {showSatellites && (
           <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
-            <span style={{ color: '#00ffff' }}>🛰 SAT</span>
+            <span style={{ background: '#00ffff', color: '#000', padding: '2px 5px', borderRadius: '3px', fontWeight: '600' }}>🛰 SAT</span>
           </div>
         )}
+        <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
+          <span style={{ color: '#ffcc00' }}>☀ Sun</span>
+          <span style={{ color: '#aaaaaa' }}>🌙 Moon</span>
+        </div>
       </div>
     </div>
   );