@smartnet360/svelte-components 0.0.13 → 0.0.14

package/dist/apps/antenna-pattern/components/AntennaControls.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
   import type { Antenna } from '../db';
+  import { sortAntennasWithRecent, addToRecentAntennas } from '../utils/recent-antennas';
 
   interface Props {
     antennas?: Antenna[];
@@ -47,9 +48,7 @@
   $effect(() => {
     // Only update internal state if the prop actually changed
     // Avoid overwriting user selections
-    console.log(`[Antenna ${antennaNumber}] Effect triggered - selectedAntenna prop:`, selectedAntenna?.name || 'null', 'internal:', internalSelectedAntenna?.name || 'null');
     if (selectedAntenna !== internalSelectedAntenna) {
-      console.log(`[Antenna ${antennaNumber}] Effect updating internal state from:`, internalSelectedAntenna?.name || 'null', 'to:', selectedAntenna?.name || 'null');
       internalSelectedAntenna = selectedAntenna;
     }
   });
@@ -88,33 +87,17 @@
 
   // Find the specific antenna that matches name, frequency, and electrical tilt
   function findAntennaWithTilt(antennaName: string, tiltIndex: number): Antenna | null {
-    console.log(`[Antenna ${antennaNumber}] findAntennaWithTilt called with:`, antennaName, 'tiltIndex:', tiltIndex);
-    
-    if (!antennaName) {
-      console.log(`[Antenna ${antennaNumber}] No antennaName provided, returning null`);
-      return null;
-    }
+    if (!antennaName) return null;
     
     // Handle case where availableElectricalTilts might not be populated yet
     const targetTilt = availableElectricalTilts[tiltIndex] || '0';
-    console.log(`[Antenna ${antennaNumber}] availableElectricalTilts:`, availableElectricalTilts);
-    console.log(`[Antenna ${antennaNumber}] targetTilt:`, targetTilt);
-    console.log(`[Antenna ${antennaNumber}] selectedFrequency:`, selectedFrequency);
     
     // Find antenna with matching name, frequency, and electrical tilt
-    const result = antennas.find(antenna => {
-      console.log(`[Antenna ${antennaNumber}] Checking antenna:`, antenna.name, 'freq:', antenna.frequency, 'tilt:', antenna.tilt);
-      
-      if (antenna.name !== antennaName) {
-        console.log(`[Antenna ${antennaNumber}] Name mismatch:`, antenna.name, '!==', antennaName);
-        return false;
-      }
+    return antennas.find(antenna => {
+      if (antenna.name !== antennaName) return false;
       
       // If frequency is selected, must match
-      if (selectedFrequency && antenna.frequency !== selectedFrequency) {
-        console.log(`[Antenna ${antennaNumber}] Frequency mismatch:`, antenna.frequency, '!==', selectedFrequency);
-        return false;
-      }
+      if (selectedFrequency && antenna.frequency !== selectedFrequency) return false;
       
       if (antenna.tilt) {
         const tiltString = antenna.tilt.toString();
@@ -122,19 +105,11 @@
           ? tiltString.split(',').map(t => t.trim())
           : [tiltString];
         
-        console.log(`[Antenna ${antennaNumber}] Antenna tilts:`, antennasTilts, 'target:', targetTilt);
-        const tiltMatch = antennasTilts.includes(targetTilt);
-        console.log(`[Antenna ${antennaNumber}] Tilt match:`, tiltMatch);
-        return tiltMatch;
+        return antennasTilts.includes(targetTilt);
       }
       
-      const defaultMatch = targetTilt === '0';
-      console.log(`[Antenna ${antennaNumber}] Default tilt match:`, defaultMatch);
-      return defaultMatch; // Default tilt
+      return targetTilt === '0'; // Default tilt
     }) || null;
-    
-    console.log(`[Antenna ${antennaNumber}] findAntennaWithTilt result:`, result?.name || 'null');
-    return result;
   }
 
   // Handle frequency selection
@@ -160,9 +135,6 @@
     const target = event.target as HTMLSelectElement;
     const antennaName = target.value;
     
-    console.log(`[Antenna ${antennaNumber}] handleAntennaChange called with:`, antennaName);
-    console.log(`[Antenna ${antennaNumber}] Before change - internalSelectedAntenna:`, internalSelectedAntenna?.name || 'null');
-    
     // Reset tilt and frequency values when antenna changes
     internalElectricalTiltIndex = 0;
     internalMechanicalTilt = 0;
@@ -170,12 +142,10 @@
     
     // Handle "Select Antenna" case (empty string)
     if (!antennaName) {
-      console.log(`[Antenna ${antennaNumber}] Setting to null (Select Antenna case)`);
       internalSelectedAntenna = null;
       onAntennaChange?.(null);
       onElectricalTiltChange?.(0);
       onMechanicalTiltChange?.(0);
-      console.log(`[Antenna ${antennaNumber}] After null set - internalSelectedAntenna:`, internalSelectedAntenna?.name || 'null');
       return;
     }
     
@@ -191,9 +161,6 @@
       let tiltToUse = tilts.includes('0') ? '0' : tilts[0];
       let tiltIndexToUse = tilts.includes('0') ? tilts.indexOf('0') : 0;
       
-      console.log(`[Antenna ${antennaNumber}] Available tilts for ${antennaName}:`, tilts);
-      console.log(`[Antenna ${antennaNumber}] Using tilt:`, tiltToUse, 'at index:', tiltIndexToUse);
-      
       // Find the specific antenna with the chosen tilt
       const newAntenna = antennas.find(antenna => {
         if (antenna.name !== antennaName) return false;
@@ -207,21 +174,23 @@
         return tiltToUse === '0';
       });
       
-      console.log(`[Antenna ${antennaNumber}] Found antenna with tilt ${tiltToUse}:`, newAntenna?.name || 'null');
       internalSelectedAntenna = newAntenna || null;
       internalElectricalTiltIndex = tiltIndexToUse;
       
     } else {
       // Fallback: use findAntennaWithTilt with index 0
       const newAntenna = findAntennaWithTilt(antennaName, 0);
-      console.log(`[Antenna ${antennaNumber}] Fallback - Found antenna:`, newAntenna?.name || 'null');
       internalSelectedAntenna = newAntenna;
     }
     
     onAntennaChange?.(internalSelectedAntenna);
     onElectricalTiltChange?.(internalElectricalTiltIndex);
     onMechanicalTiltChange?.(0);
-    console.log(`[Antenna ${antennaNumber}] After set - internalSelectedAntenna:`, internalSelectedAntenna?.name || 'null');
+    
+    // Track antenna selection in recent list
+    if (internalSelectedAntenna) {
+      addToRecentAntennas(internalSelectedAntenna);
+    }
   }
 
   // Handle electrical tilt changes
@@ -300,6 +269,9 @@
 
   // Get unique antennas (by name, not by individual DB entries with different tilts)
   let uniqueAntennas = $state<Antenna[]>([]);
+  let recentAntennas = $state<Antenna[]>([]);
+  let otherAntennas = $state<Antenna[]>([]);
+  
   $effect(() => {
     if (antennas.length > 0) {
       // Group antennas by name and take the first one from each group
@@ -309,7 +281,13 @@
           antennaMap.set(antenna.name, antenna);
         }
       });
-      uniqueAntennas = Array.from(antennaMap.values()).sort((a, b) => a.name.localeCompare(b.name));
+      const allUniqueAntennas = Array.from(antennaMap.values()).sort((a, b) => a.name.localeCompare(b.name));
+      
+      // Sort with recent antennas first
+      const { recent, others } = sortAntennasWithRecent(allUniqueAntennas);
+      recentAntennas = recent;
+      otherAntennas = others;
+      uniqueAntennas = [...recent, ...others];
     }
   });
 </script>
@@ -330,12 +308,24 @@
         class="form-select form-select-sm" 
         value={internalSelectedAntenna?.name || ''}
         onchange={handleAntennaChange}
-        onfocus={() => console.log(`[Antenna ${antennaNumber}] Dropdown focused - current value:`, internalSelectedAntenna?.name || 'null')}
       >
         <option value="">-- Select Antenna --</option>
-        {#each uniqueAntennas as antenna}
-          <option value={antenna.name}>{antenna.name}</option>
-        {/each}
+        
+        <!-- Recent Antennas -->
+        {#if recentAntennas.length > 0}
+          <optgroup label="Recent">
+            {#each recentAntennas as antenna}
+              <option value={antenna.name}>▸ {antenna.name}</option>
+            {/each}
+          </optgroup>
+        {/if}
+        
+        <!-- All Other Antennas -->
+        <optgroup label="All Antennas">
+          {#each otherAntennas as antenna}
+            <option value={antenna.name}>{antenna.name}</option>
+          {/each}
+        </optgroup>
       </select>
       {#if internalSelectedAntenna}
         <small class="text-muted mt-1 d-block">

package/dist/apps/antenna-pattern/components/AntennaDiagrams.svelte

@@ -2,25 +2,18 @@
 
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { browser } from '$app/environment';
   import { loadAntennas } from '../utils/db-utils';
   import type { Antenna } from '../db';
   import AntennaControls from './AntennaControls.svelte';
   import AntennaSettingsModal from './AntennaSettingsModal.svelte';
-  import { 
-    createAntennaChartData,
-    createChartLayout,
-    createChartConfig,
-    generateChartTitle,
-    type PlotlyTraceData
-  } from '../utils/plotly-chart-utils';
-
-  let Plotly: any;
-  let chartDiv = $state<HTMLDivElement>();
+  import { PolarLineChart, PolarBarChart, PolarAreaChart } from './chart-engines/index';
+
+  // Chart engine types
+  type ChartEngineType = 'polar-line' | 'polar-bar' | 'polar-area';
+
   let antennas = $state<Antenna[]>([]);
   let selectedAntenna = $state<Antenna | null>(null);
   let selectedAntenna2 = $state<Antenna | null>(null);
-  let chartInitialized = $state(false);
 
   // External Bootstrap slider values
   let ant1ElectricalTilt = $state(0);
@@ -31,6 +24,12 @@
   // Viewing mode and pattern visibility
   let viewMode = $state<'single' | 'compare'>('single');
   let patternType = $state<'horizontal' | 'vertical'>('vertical');
+  
+  // Chart engine selection
+  let chartEngine = $state<ChartEngineType>('polar-line');
+
+  // Pattern display mode - normalized vs gain-adjusted
+  let patternDisplayMode = $state<'normalized' | 'gain-adjusted'>('normalized');
 
   // Settings modal state
   let showSettingsModal = $state(false);
@@ -118,89 +117,38 @@
     }
   }
 
-  // Watch for slider changes and update chart
-  $effect(() => {
-    if (chartInitialized) {
-      updateChart();
-    }
-  });
-
   onMount(async () => {
-    if (browser) {
-      try {
-        // Load Plotly and antenna data
-        Plotly = await import('plotly.js-dist-min');
-        antennas = await loadAntennas();
+    try {
+      // Load antenna data
+      antennas = await loadAntennas();
         
-        if (antennas.length > 0) {
-          // Set default antenna selection for antenna 1
-          selectedAntenna = antennas[0];
-          if (selectedAntenna.tilt) {
-            availableElectricalTilts = selectedAntenna.tilt.split(',').map(t => t.trim());
-          }
-          
-          // Set default antenna selection for antenna 2 (for compare mode)
-          if (antennas.length > 1) {
-            selectedAntenna2 = antennas[1];
-          } else {
-            selectedAntenna2 = antennas[0]; // Use same antenna if only one available
-          }
-          
-          await initializeChart();
+      if (antennas.length > 0) {
+        // Set default antenna selection for antenna 1
+        selectedAntenna = antennas[0];
+        if (selectedAntenna.tilt) {
+          availableElectricalTilts = selectedAntenna.tilt.split(',').map(t => t.trim());
+        }
+        
+        // Set default antenna selection for antenna 2 (for compare mode)
+        if (antennas.length > 1) {
+          selectedAntenna2 = antennas[1];
+        } else {
+          selectedAntenna2 = antennas[0]; // Use same antenna if only one available
         }
-      } catch (error) {
-        console.error('Failed to initialize:', error);
       }
-    }
-  });
-
-  async function initializeChart() {
-    if (!Plotly || !chartDiv) return;
-
-    const data = createAntennaChartData(
-      selectedAntenna,
-      selectedAntenna2,
-      viewMode,
-      patternType === 'horizontal',
-      patternType === 'vertical',
-      ant1ElectricalTilt,
-      ant1MechanicalTilt,
-      ant2ElectricalTilt,
-      ant2MechanicalTilt
-    );
-    const title = generateChartTitle(viewMode, selectedAntenna, selectedAntenna2);
-    const layout = createChartLayout(title);
-    const config = createChartConfig();
-
-    try {
-      await Plotly.newPlot(chartDiv, data, layout, config);
-      chartInitialized = true;
-      console.log('Chart initialized with antenna controls');
     } catch (error) {
-      console.error('Failed to create chart:', error);
+      console.error('Failed to initialize:', error);
     }
-  }
-
-  async function updateChart() {
-    if (!Plotly || !chartDiv || !chartInitialized) return;
+  });
 
-    try {
-      const data = createAntennaChartData(
-        selectedAntenna,
-        selectedAntenna2,
-        viewMode,
-        patternType === 'horizontal',
-        patternType === 'vertical',
-        ant1ElectricalTilt,
-        ant1MechanicalTilt,
-        ant2ElectricalTilt,
-        ant2MechanicalTilt
-      );
-      const title = generateChartTitle(viewMode, selectedAntenna, selectedAntenna2);
-      await Plotly.react(chartDiv, data, createChartLayout(title));
-    } catch (error) {
-      console.error('Failed to update chart:', error);
+  // Generate chart title based on current selection
+  function generateChartTitle(): string {
+    if (viewMode === 'compare' && selectedAntenna && selectedAntenna2) {
+      return `${selectedAntenna.name} vs ${selectedAntenna2.name}`;
+    } else if (selectedAntenna) {
+      return `${selectedAntenna.name} - Pattern Analysis`;
     }
+    return 'Antenna Pattern Analysis';
   }
 </script>
 
@@ -208,10 +156,10 @@
 
 
   <!-- Viewing Mode and Pattern Visibility Controls -->
-  <div class="row mb-4">
-    <div class="col-md-4">
-      <div class="form-label">Viewing Mode:</div>
-      <div class="btn-group w-100" role="group" aria-label="Viewing mode selection">
+  <div class="row mb-3">
+    <div class="col-md-2">
+      <div class="form-label">View Mode:</div>
+      <div class="btn-group w-100" role="group" aria-label="View mode selection">
         <input 
           type="radio" 
           class="btn-check" 
@@ -219,7 +167,7 @@
           bind:group={viewMode} 
           value="single"
         >
-        <label class="btn btn-outline-primary" for="singleMode">Single Antenna</label>
+        <label class="btn btn-outline-primary" for="singleMode">Single</label>
 
         <input 
           type="radio" 
@@ -232,7 +180,62 @@
       </div>
     </div>
 
-    <div class="col-md-4">
+    <div class="col-md-2">
+      <div class="form-label">Chart Type:</div>
+      <div class="btn-group w-100" role="group" aria-label="Chart type selection">
+        <input 
+          type="radio" 
+          class="btn-check" 
+          id="polarLineChart" 
+          bind:group={chartEngine} 
+          value="polar-line"
+        >
+        <label class="btn btn-outline-primary" for="polarLineChart">Line</label>
+
+        <!-- <input 
+          type="radio" 
+          class="btn-check" 
+          id="polarBarChart" 
+          bind:group={chartEngine} 
+          value="polar-bar"
+        >
+        <label class="btn btn-outline-success" for="polarBarChart">Bar</label> -->
+
+        <input 
+          type="radio" 
+          class="btn-check" 
+          id="polarAreaChart" 
+          bind:group={chartEngine} 
+          value="polar-area"
+        >
+        <label class="btn btn-outline-primary" for="polarAreaChart">Area</label>
+      </div>
+    </div>
+
+    <div class="col-md-3">
+      <div class="form-label">Display Mode:</div>
+      <div class="btn-group w-100" role="group" aria-label="Pattern display mode selection">
+        <input 
+          type="radio" 
+          class="btn-check" 
+          id="normalizedMode" 
+          bind:group={patternDisplayMode} 
+          value="normalized"
+        >
+        <label class="btn btn-outline-primary" for="normalizedMode">Pattern</label>
+
+        <input 
+          type="radio" 
+          class="btn-check" 
+          id="gainAdjustedMode" 
+          bind:group={patternDisplayMode} 
+          value="gain-adjusted"
+        >
+        <label class="btn btn-outline-primary" for="gainAdjustedMode">+Gain</label>
+      </div>
+    </div>
+
+    <div class="col-md-2">
       <div class="form-label">Pattern Type:</div>
       <div class="btn-group w-100" role="group" aria-label="Pattern type selection">
         <input 
@@ -255,7 +258,7 @@
       </div>
     </div>
 
-    <div class="col-md-4">
+    <div class="col-md-3">
       <div class="form-label">Actions:</div>
       <button 
         type="button" 
@@ -284,11 +287,50 @@
       />
     </div>
 
-    <!-- Center Column - Chart (always centered) -->
+    <!-- Center Column - Chart Engine (always centered) -->
     <div class="col-md-6">
       <div class="card">
         <div class="card-body p-1">
-          <div bind:this={chartDiv} style="height: 700px;"></div>
+          {#if chartEngine === 'polar-line'}
+            <PolarLineChart
+              {selectedAntenna}
+              {selectedAntenna2}
+              {viewMode}
+              {patternType}
+              {patternDisplayMode}
+              {ant1ElectricalTilt}
+              {ant1MechanicalTilt}
+              {ant2ElectricalTilt}
+              {ant2MechanicalTilt}
+              title={generateChartTitle()}
+            />
+          {:else if chartEngine === 'polar-bar'}
+            <PolarBarChart
+              {selectedAntenna}
+              {selectedAntenna2}
+              {viewMode}
+              {patternType}
+              {patternDisplayMode}
+              {ant1ElectricalTilt}
+              {ant1MechanicalTilt}
+              {ant2ElectricalTilt}
+              {ant2MechanicalTilt}
+              title={generateChartTitle()}
+            />
+          {:else if chartEngine === 'polar-area'}
+            <PolarAreaChart
+              {selectedAntenna}
+              {selectedAntenna2}
+              {viewMode}
+              {patternType}
+              {patternDisplayMode}
+              {ant1ElectricalTilt}
+              {ant1MechanicalTilt}
+              {ant2ElectricalTilt}
+              {ant2MechanicalTilt}
+              title={generateChartTitle()}
+            />
+          {/if}
         </div>
       </div>
     </div>

package/dist/apps/antenna-pattern/components/chart-engines/PolarAreaChart.svelte

@@ -0,0 +1,125 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { browser } from '$app/environment';
+  import type { Antenna } from '../../db';
+  import { 
+    createPolarAreaChartData,
+    createPolarAreaLayout,
+    type PolarAreaTraceData
+  } from '../../utils/chart-engines/polar-area-utils';
+
+  interface Props {
+    selectedAntenna?: Antenna | null;
+    selectedAntenna2?: Antenna | null;
+    viewMode?: 'single' | 'compare';
+    patternType?: 'horizontal' | 'vertical';
+    patternDisplayMode?: 'normalized' | 'gain-adjusted';
+    ant1ElectricalTilt?: number;
+    ant1MechanicalTilt?: number;
+    ant2ElectricalTilt?: number;
+    ant2MechanicalTilt?: number;
+    title?: string;
+  }
+
+  let {
+    selectedAntenna = null,
+    selectedAntenna2 = null,
+    viewMode = 'single',
+    patternType = 'vertical',
+    patternDisplayMode = 'normalized',
+    ant1ElectricalTilt = 0,
+    ant1MechanicalTilt = 0,
+    ant2ElectricalTilt = 0,
+    ant2MechanicalTilt = 0,
+    title = 'Antenna Pattern - Polar Area Chart'
+  }: Props = $props();
+
+  let Plotly: any;
+  let chartDiv = $state<HTMLDivElement>();
+  let chartInitialized = $state(false);
+
+  // Initialize Plotly on mount
+  onMount(async () => {
+    if (browser) {
+      try {
+        Plotly = await import('plotly.js-dist-min');
+        console.log('Plotly loaded for polar area chart');
+        await initializeChart();
+      } catch (error) {
+        console.error('Failed to load Plotly:', error);
+      }
+    }
+  });
+
+  // Update chart when data changes
+  $effect(() => {
+    if (chartInitialized) {
+      updateChart();
+    }
+  });
+
+  async function initializeChart() {
+    if (!Plotly || !chartDiv) return;
+
+    const data = createPolarAreaChartData(
+      selectedAntenna,
+      selectedAntenna2,
+      viewMode,
+      patternType === 'horizontal',
+      patternType === 'vertical',
+      ant1ElectricalTilt,
+      ant1MechanicalTilt,
+      ant2ElectricalTilt,
+      ant2MechanicalTilt,
+      patternDisplayMode
+    );
+    
+    const layout = createPolarAreaLayout(title);
+    const config = {
+      responsive: true,
+      displayModeBar: true,
+      displaylogo: false,
+      modeBarButtonsToRemove: [
+        'zoom2d', 'pan2d', 'select2d', 'lasso2d',
+        'zoomIn2d', 'zoomOut2d', 'autoScale2d', 
+        'resetScale2d', 'toggleSpikelines', 'toImage'
+      ]
+    };
+
+    try {
+      await Plotly.newPlot(chartDiv, data, layout, config);
+      chartInitialized = true;
+      console.log('Polar area chart initialized');
+    } catch (error) {
+      console.error('Failed to create polar area chart:', error);
+    }
+  }
+
+  async function updateChart() {
+    if (!Plotly || !chartDiv || !chartInitialized) return;
+
+    try {
+      const data = createPolarAreaChartData(
+        selectedAntenna,
+        selectedAntenna2,
+        viewMode,
+        patternType === 'horizontal',
+        patternType === 'vertical',
+        ant1ElectricalTilt,
+        ant1MechanicalTilt,
+        ant2ElectricalTilt,
+        ant2MechanicalTilt,
+        patternDisplayMode
+      );
+      
+      const layout = createPolarAreaLayout(title);
+      await Plotly.react(chartDiv, data, layout);
+    } catch (error) {
+      console.error('Failed to update polar area chart:', error);
+    }
+  }
+</script>
+
+<div bind:this={chartDiv} style="height: 700px;"></div>

package/dist/apps/antenna-pattern/components/chart-engines/PolarAreaChart.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Antenna } from '../../db';
+interface Props {
+    selectedAntenna?: Antenna | null;
+    selectedAntenna2?: Antenna | null;
+    viewMode?: 'single' | 'compare';
+    patternType?: 'horizontal' | 'vertical';
+    patternDisplayMode?: 'normalized' | 'gain-adjusted';
+    ant1ElectricalTilt?: number;
+    ant1MechanicalTilt?: number;
+    ant2ElectricalTilt?: number;
+    ant2MechanicalTilt?: number;
+    title?: string;
+}
+declare const PolarAreaChart: import("svelte").Component<Props, {}, "">;
+type PolarAreaChart = ReturnType<typeof PolarAreaChart>;
+export default PolarAreaChart;