@smartnet360/svelte-components 0.0.118 → 0.0.120

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

@@ -0,0 +1,412 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { loadAntennas } from '../utils/db-utils';
+  import type { Antenna } from '../db';
+  import type { 
+    ViewMode, 
+    PatternType, 
+    PatternDisplayMode, 
+    ChartEngineType,
+    AntennaCompareInit 
+  } from '../types';
+  import { 
+    findAntennaByName, 
+    collectAvailableTilts, 
+    findTiltIndex 
+  } from '../utils/antenna-helpers';
+  import AntennaControls from './AntennaControls.svelte';
+  import AntennaSettingsModal from './AntennaSettingsModal.svelte';
+  import { PolarLineChart, PolarAreaChart } from './chart-engines/index';
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // PROPS - Optional initialization from external sources
+  // ─────────────────────────────────────────────────────────────────────────────
+  
+  interface Props {
+    /** Initial configuration for comparison mode */
+    init?: AntennaCompareInit;
+  }
+
+  let { init }: Props = $props();
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // STATE - Core reactive state
+  // ─────────────────────────────────────────────────────────────────────────────
+  
+  // Data
+  let antennas = $state<Antenna[]>([]);
+  let isLoading = $state(true);
+  let error = $state<string | null>(null);
+
+  // Antenna 1 selection
+  let selectedAntenna1 = $state<Antenna | null>(null);
+  let ant1ElectricalTiltIndex = $state(0);
+  let ant1MechanicalTilt = $state(0);
+  let ant1AvailableTilts = $state<string[]>(['0']);
+
+  // Antenna 2 selection
+  let selectedAntenna2 = $state<Antenna | null>(null);
+  let ant2ElectricalTiltIndex = $state(0);
+  let ant2MechanicalTilt = $state(0);
+  let ant2AvailableTilts = $state<string[]>(['0']);
+
+  // View settings
+  let viewMode = $state<ViewMode>('single');
+  let patternType = $state<PatternType>('vertical');
+  let displayMode = $state<PatternDisplayMode>('normalized');
+  let chartEngine = $state<ChartEngineType>('polar-line');
+
+  // Settings modal
+  let showSettingsModal = $state(false);
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // DERIVED - Computed values
+  // ─────────────────────────────────────────────────────────────────────────────
+  
+  /** Generate chart title based on current selection */
+  let chartTitle = $derived.by(() => {
+    if (viewMode === 'compare' && selectedAntenna1 && selectedAntenna2) {
+      const label1 = init?.label1 || selectedAntenna1.name;
+      const label2 = init?.label2 || selectedAntenna2.name;
+      return `${label1} vs ${label2}`;
+    }
+    
+    if (selectedAntenna1) {
+      const label = init?.label1 || selectedAntenna1.name;
+      return `${label} - Pattern Analysis`;
+    }
+    
+    return 'Antenna Pattern Analysis';
+  });
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // INITIALIZATION
+  // ─────────────────────────────────────────────────────────────────────────────
+  
+  onMount(async () => {
+    try {
+      isLoading = true;
+      antennas = await loadAntennas();
+      
+      if (antennas.length === 0) {
+        error = 'No antenna data found. Please load antenna files.';
+        return;
+      }
+
+      // Initialize with provided config or defaults
+      initializeAntennas();
+      
+    } catch (e) {
+      error = e instanceof Error ? e.message : 'Failed to load antenna data';
+      console.error('[AntennaDiagrams] Initialization error:', e);
+    } finally {
+      isLoading = false;
+    }
+  });
+
+  /**
+   * Initialize antenna selections from init props or defaults
+   */
+  function initializeAntennas() {
+    // Set view mode from init or default
+    viewMode = init?.viewMode || 'single';
+
+    // Initialize Antenna 1
+    if (init?.antenna1Name) {
+      const result = findAntennaByName(antennas, init.antenna1Name);
+      selectedAntenna1 = result.antenna || antennas[0];
+      
+      if (result.matchType === 'not-found') {
+        console.warn(`[AntennaDiagrams] Antenna 1 not found: "${init.antenna1Name}"`);
+      }
+    } else {
+      selectedAntenna1 = antennas[0];
+    }
+
+    // Collect available tilts for antenna 1
+    if (selectedAntenna1) {
+      ant1AvailableTilts = collectAvailableTilts(antennas, selectedAntenna1.name);
+      ant1ElectricalTiltIndex = findTiltIndex(ant1AvailableTilts, init?.etilt1 || 0);
+      ant1MechanicalTilt = init?.mtilt1 || 0;
+    }
+
+    // Initialize Antenna 2
+    if (init?.antenna2Name) {
+      const result = findAntennaByName(antennas, init.antenna2Name);
+      selectedAntenna2 = result.antenna || (antennas.length > 1 ? antennas[1] : antennas[0]);
+      
+      if (result.matchType === 'not-found') {
+        console.warn(`[AntennaDiagrams] Antenna 2 not found: "${init.antenna2Name}"`);
+      }
+    } else {
+      selectedAntenna2 = antennas.length > 1 ? antennas[1] : antennas[0];
+    }
+
+    // Collect available tilts for antenna 2
+    if (selectedAntenna2) {
+      ant2AvailableTilts = collectAvailableTilts(antennas, selectedAntenna2.name);
+      ant2ElectricalTiltIndex = findTiltIndex(ant2AvailableTilts, init?.etilt2 || 0);
+      ant2MechanicalTilt = init?.mtilt2 || 0;
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // EVENT HANDLERS
+  // ─────────────────────────────────────────────────────────────────────────────
+  
+  function handleAntenna1Change(antenna: Antenna | null) {
+    selectedAntenna1 = antenna;
+    if (antenna) {
+      ant1AvailableTilts = collectAvailableTilts(antennas, antenna.name);
+    }
+  }
+
+  function handleAntenna2Change(antenna: Antenna | null) {
+    selectedAntenna2 = antenna;
+    if (antenna) {
+      ant2AvailableTilts = collectAvailableTilts(antennas, antenna.name);
+    }
+  }
+
+  function handleTilt1Change(tiltIndex: number) {
+    ant1ElectricalTiltIndex = tiltIndex;
+  }
+
+  function handleTilt2Change(tiltIndex: number) {
+    ant2ElectricalTiltIndex = tiltIndex;
+  }
+
+  function handleMechTilt1Change(tilt: number) {
+    ant1MechanicalTilt = tilt;
+  }
+
+  function handleMechTilt2Change(tilt: number) {
+    ant2MechanicalTilt = tilt;
+  }
+
+  async function handleDataRefresh() {
+    try {
+      antennas = await loadAntennas();
+      if (antennas.length > 0) {
+        selectedAntenna1 = antennas[0];
+        selectedAntenna2 = antennas.length > 1 ? antennas[1] : antennas[0];
+        ant1ElectricalTiltIndex = 0;
+        ant2ElectricalTiltIndex = 0;
+        ant1MechanicalTilt = 0;
+        ant2MechanicalTilt = 0;
+      }
+    } catch (e) {
+      console.error('[AntennaDiagrams] Failed to refresh data:', e);
+    }
+  }
+</script>
+
+<!-- ═══════════════════════════════════════════════════════════════════════════ -->
+<!-- TEMPLATE -->
+<!-- ═══════════════════════════════════════════════════════════════════════════ -->
+
+<div class="container-fluid mt-4">
+  
+  {#if isLoading}
+    <!-- Loading State -->
+    <div class="text-center py-5">
+      <div class="spinner-border text-primary" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+      <p class="mt-3 text-muted">Loading antenna data...</p>
+    </div>
+    
+  {:else if error}
+    <!-- Error State -->
+    <div class="alert alert-warning d-flex align-items-center" role="alert">
+      <i class="bi bi-exclamation-triangle-fill me-2"></i>
+      <div>
+        {error}
+        <button type="button" class="btn btn-sm btn-outline-primary ms-3" onclick={() => showSettingsModal = true}>
+          Load Antenna Data
+        </button>
+      </div>
+    </div>
+    
+  {:else}
+    <!-- Main Content -->
+    
+    <!-- Control Bar -->
+    <div class="row mb-3 g-2">
+      
+      <!-- View Mode -->
+      <div class="col-auto">
+        <div class="btn-group" role="group" aria-label="View mode">
+          <input type="radio" class="btn-check" id="viewSingle" bind:group={viewMode} value="single">
+          <label class="btn btn-outline-primary" for="viewSingle">
+            <i class="bi bi-square"></i> Single
+          </label>
+          <input type="radio" class="btn-check" id="viewCompare" bind:group={viewMode} value="compare">
+          <label class="btn btn-outline-primary" for="viewCompare">
+            <i class="bi bi-columns"></i> Compare
+          </label>
+        </div>
+      </div>
+
+      <!-- Chart Type -->
+      <div class="col-auto">
+        <div class="btn-group" role="group" aria-label="Chart type">
+          <input type="radio" class="btn-check" id="chartLine" bind:group={chartEngine} value="polar-line">
+          <label class="btn btn-outline-secondary" for="chartLine">Line</label>
+          <input type="radio" class="btn-check" id="chartArea" bind:group={chartEngine} value="polar-area">
+          <label class="btn btn-outline-secondary" for="chartArea">Area</label>
+        </div>
+      </div>
+
+      <!-- Display Mode -->
+      <div class="col-auto">
+        <div class="btn-group" role="group" aria-label="Display mode">
+          <input type="radio" class="btn-check" id="dispPattern" bind:group={displayMode} value="normalized">
+          <label class="btn btn-outline-secondary" for="dispPattern">Pattern</label>
+          <input type="radio" class="btn-check" id="dispGain" bind:group={displayMode} value="gain-adjusted">
+          <label class="btn btn-outline-secondary" for="dispGain">+Gain</label>
+        </div>
+      </div>
+
+      <!-- Pattern Type -->
+      <div class="col-auto">
+        <div class="btn-group" role="group" aria-label="Pattern type">
+          <input type="radio" class="btn-check" id="patHoriz" bind:group={patternType} value="horizontal">
+          <label class="btn btn-outline-secondary" for="patHoriz">Horizontal</label>
+          <input type="radio" class="btn-check" id="patVert" bind:group={patternType} value="vertical">
+          <label class="btn btn-outline-secondary" for="patVert">Vertical</label>
+        </div>
+      </div>
+
+      <!-- Spacer -->
+      <div class="col"></div>
+
+      <!-- Settings Button -->
+      <div class="col-auto">
+        <button 
+          type="button" 
+          class="btn btn-outline-secondary"
+          onclick={() => showSettingsModal = true}
+          aria-label="Antenna Settings"
+        >
+          <i class="bi bi-gear"></i>
+        </button>
+      </div>
+    </div>
+
+    <!-- Main Layout: Controls | Chart | Controls -->
+    <div class="row">
+      
+      <!-- Antenna 1 Controls -->
+      <div class="col-lg-3 col-md-4">
+        <AntennaControls 
+          {antennas}
+          selectedAntenna={selectedAntenna1}
+          antennaNumber={1}
+          electricalTiltIndex={ant1ElectricalTiltIndex}
+          mechanicalTilt={ant1MechanicalTilt}
+          colorTheme="primary"
+          onAntennaChange={handleAntenna1Change}
+          onElectricalTiltChange={handleTilt1Change}
+          onMechanicalTiltChange={handleMechTilt1Change}
+        />
+      </div>
+
+      <!-- Chart -->
+      <div class="col-lg-6 col-md-4">
+        <div class="chart-card">
+          {#if chartEngine === 'polar-line'}
+            <PolarLineChart
+              selectedAntenna={selectedAntenna1}
+              selectedAntenna2={selectedAntenna2}
+              {viewMode}
+              {patternType}
+              patternDisplayMode={displayMode}
+              ant1ElectricalTilt={ant1ElectricalTiltIndex}
+              ant1MechanicalTilt={ant1MechanicalTilt}
+              ant2ElectricalTilt={ant2ElectricalTiltIndex}
+              ant2MechanicalTilt={ant2MechanicalTilt}
+              title={chartTitle}
+            />
+          {:else if chartEngine === 'polar-area'}
+            <PolarAreaChart
+              selectedAntenna={selectedAntenna1}
+              selectedAntenna2={selectedAntenna2}
+              {viewMode}
+              {patternType}
+              patternDisplayMode={displayMode}
+              ant1ElectricalTilt={ant1ElectricalTiltIndex}
+              ant1MechanicalTilt={ant1MechanicalTilt}
+              ant2ElectricalTilt={ant2ElectricalTiltIndex}
+              ant2MechanicalTilt={ant2MechanicalTilt}
+              title={chartTitle}
+            />
+          {/if}
+        </div>
+      </div>
+
+      <!-- Antenna 2 Controls (Compare Mode) -->
+      <div class="col-lg-3 col-md-4">
+        {#if viewMode === 'compare'}
+          <AntennaControls 
+            {antennas}
+            selectedAntenna={selectedAntenna2}
+            antennaNumber={2}
+            electricalTiltIndex={ant2ElectricalTiltIndex}
+            mechanicalTilt={ant2MechanicalTilt}
+            colorTheme="warning"
+            onAntennaChange={handleAntenna2Change}
+            onElectricalTiltChange={handleTilt2Change}
+            onMechanicalTiltChange={handleMechTilt2Change}
+          />
+        {:else}
+          <!-- Placeholder to maintain layout -->
+          <div class="empty-placeholder"></div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- Settings Modal -->
+<AntennaSettingsModal 
+  show={showSettingsModal} 
+  onClose={() => showSettingsModal = false} 
+  on:dataRefresh={handleDataRefresh}
+/>
+
+<!-- ═══════════════════════════════════════════════════════════════════════════ -->
+<!-- STYLES -->
+<!-- ═══════════════════════════════════════════════════════════════════════════ -->
+
+<style>
+  .chart-card {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 0.5rem;
+  }
+
+  .empty-placeholder {
+    min-height: 200px;
+  }
+
+  /* Bootstrap icon font (if not already loaded) */
+  .bi::before {
+    vertical-align: -0.125em;
+  }
+
+  /* Enhanced button group styling */
+  .btn-group .btn {
+    font-size: 0.875rem;
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 992px) {
+    .chart-card {
+      margin-bottom: 1rem;
+    }
+  }
+</style>

package/dist/apps/antenna-pattern/components/AntennaDiagramsV2.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { AntennaCompareInit } from '../types';
+interface Props {
+    /** Initial configuration for comparison mode */
+    init?: AntennaCompareInit;
+}
+declare const AntennaDiagramsV2: import("svelte").Component<Props, {}, "">;
+type AntennaDiagramsV2 = ReturnType<typeof AntennaDiagramsV2>;
+export default AntennaDiagramsV2;

package/dist/apps/antenna-pattern/index.d.ts

@@ -1,6 +1,7 @@
 export { default as PlotlyRadarChart } from './components/PlotlyRadarChart.svelte';
 export { default as AntennaControls } from './components/AntennaControls.svelte';
 export { default as AntennaDiagrams } from './components/AntennaDiagrams.svelte';
+export { default as AntennaDiagramsV2 } from './components/AntennaDiagramsV2.svelte';
 export { default as AntennaSettingsModal } from './components/AntennaSettingsModal.svelte';
 export { default as JsonImporter } from './components/JsonImporter.svelte';
 export { default as MSIConverter } from './components/MSIConverter.svelte';
@@ -10,8 +11,10 @@ export { PolarLineChart, PolarBarChart } from './components/chart-engines/index'
 export { antennas, selectedAntenna, searchQuery, filteredAntennas } from './stores/antennas';
 export { dbStatus, dataOperationStatus, updateDbStatus, trackDataOperation } from './stores/db-status';
 export { db, type Antenna } from './db';
+export * from './types';
 export * from './utils/db-utils';
 export * from './utils/init-db';
 export * from './utils/msi-parser';
 export * from './utils/plotly-chart-utils';
 export * from './utils/load-static-antennas';
+export * from './utils/antenna-helpers';

package/dist/apps/antenna-pattern/index.js

@@ -2,6 +2,7 @@
 export { default as PlotlyRadarChart } from './components/PlotlyRadarChart.svelte';
 export { default as AntennaControls } from './components/AntennaControls.svelte';
 export { default as AntennaDiagrams } from './components/AntennaDiagrams.svelte';
+export { default as AntennaDiagramsV2 } from './components/AntennaDiagramsV2.svelte';
 export { default as AntennaSettingsModal } from './components/AntennaSettingsModal.svelte';
 export { default as JsonImporter } from './components/JsonImporter.svelte';
 export { default as MSIConverter } from './components/MSIConverter.svelte';
@@ -14,9 +15,12 @@ export { antennas, selectedAntenna, searchQuery, filteredAntennas } from './stor
 export { dbStatus, dataOperationStatus, updateDbStatus, trackDataOperation } from './stores/db-status';
 // Database and types
 export { db } from './db';
+// Types
+export * from './types';
 // Utilities
 export * from './utils/db-utils';
 export * from './utils/init-db';
 export * from './utils/msi-parser';
 export * from './utils/plotly-chart-utils';
 export * from './utils/load-static-antennas';
+export * from './utils/antenna-helpers';

package/dist/apps/antenna-pattern/types.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Antenna Pattern Types
+ * Clean, centralized type definitions for the antenna pattern module
+ */
+import type { Antenna } from './db';
+/** View mode for antenna diagrams */
+export type ViewMode = 'single' | 'compare';
+/** Pattern type for radiation display */
+export type PatternType = 'horizontal' | 'vertical';
+/** Display mode for pattern visualization */
+export type PatternDisplayMode = 'normalized' | 'gain-adjusted';
+/** Chart engine type */
+export type ChartEngineType = 'polar-line' | 'polar-bar' | 'polar-area';
+/** Color theme for antenna controls */
+export type ColorTheme = 'primary' | 'warning' | 'success' | 'info' | 'secondary';
+/**
+ * Antenna selection state - tracks antenna, tilts, and available options
+ */
+export interface AntennaSelection {
+    /** The selected antenna record */
+    antenna: Antenna | null;
+    /** Index into availableTilts array for electrical tilt */
+    electricalTiltIndex: number;
+    /** Mechanical tilt value in degrees */
+    mechanicalTilt: number;
+    /** Available electrical tilt values for this antenna model */
+    availableTilts: string[];
+    /** Available frequencies for this antenna model */
+    availableFrequencies: number[];
+    /** Custom label for display (e.g., cell name) */
+    label?: string;
+}
+/**
+ * Props for initializing AntennaDiagrams from external sources (URL params, etc.)
+ */
+export interface AntennaCompareInit {
+    /** Antenna 1 name pattern to match */
+    antenna1Name?: string;
+    /** Antenna 2 name pattern to match */
+    antenna2Name?: string;
+    /** Electrical tilt VALUE for antenna 1 */
+    etilt1?: number;
+    /** Electrical tilt VALUE for antenna 2 */
+    etilt2?: number;
+    /** Mechanical tilt for antenna 1 */
+    mtilt1?: number;
+    /** Mechanical tilt for antenna 2 */
+    mtilt2?: number;
+    /** Initial view mode */
+    viewMode?: ViewMode;
+    /** Custom label for antenna 1 */
+    label1?: string;
+    /** Custom label for antenna 2 */
+    label2?: string;
+}
+/**
+ * Result of finding an antenna by name
+ */
+export interface AntennaSearchResult {
+    antenna: Antenna | null;
+    matchType: 'exact' | 'case-insensitive' | 'partial' | 'not-found';
+}
+/**
+ * Complete state for the antenna diagram visualization
+ */
+export interface AntennaDiagramState {
+    /** All loaded antennas */
+    antennas: Antenna[];
+    /** First antenna selection */
+    selection1: AntennaSelection;
+    /** Second antenna selection (for compare mode) */
+    selection2: AntennaSelection;
+    /** Current view mode */
+    viewMode: ViewMode;
+    /** Current pattern type */
+    patternType: PatternType;
+    /** Current display mode */
+    displayMode: PatternDisplayMode;
+    /** Current chart engine */
+    chartEngine: ChartEngineType;
+    /** Whether data is loading */
+    isLoading: boolean;
+    /** Error message if any */
+    error: string | null;
+}
+/** Re-export Antenna type for convenience */
+export type { Antenna } from './db';

package/dist/apps/antenna-pattern/types.js

@@ -0,0 +1,5 @@
+/**
+ * Antenna Pattern Types
+ * Clean, centralized type definitions for the antenna pattern module
+ */
+export {};

package/dist/apps/antenna-pattern/utils/antenna-helpers.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Antenna Data Utilities
+ * Helper functions for working with antenna data, tilts, and searches
+ */
+import type { Antenna, AntennaSearchResult } from '../types';
+/**
+ * Find an antenna by name with fallback matching strategies
+ * @param antennas - Array of all antennas
+ * @param name - Name pattern to search for
+ * @returns Search result with antenna and match type
+ */
+export declare function findAntennaByName(antennas: Antenna[], name: string): AntennaSearchResult;
+/**
+ * Collect all available electrical tilts for an antenna model
+ * Searches all antennas with the same name and extracts unique tilt values
+ * @param antennas - Array of all antennas
+ * @param antennaName - The antenna model name
+ * @param frequency - Optional frequency to filter by
+ * @returns Sorted array of tilt values as strings
+ */
+export declare function collectAvailableTilts(antennas: Antenna[], antennaName: string, frequency?: number | null): string[];
+/**
+ * Collect all available frequencies for an antenna model
+ * @param antennas - Array of all antennas
+ * @param antennaName - The antenna model name
+ * @returns Sorted array of unique frequencies
+ */
+export declare function collectAvailableFrequencies(antennas: Antenna[], antennaName: string): number[];
+/**
+ * Find the index of a tilt value in the available tilts array
+ * @param availableTilts - Array of available tilt values
+ * @param tiltValue - The tilt value to find (as number)
+ * @returns Index in the array, or 0 if not found
+ */
+export declare function findTiltIndex(availableTilts: string[], tiltValue: number): number;
+/**
+ * Get the tilt value at a given index
+ * @param availableTilts - Array of available tilt values
+ * @param index - Index to retrieve
+ * @returns Tilt value as number
+ */
+export declare function getTiltValue(availableTilts: string[], index: number): number;
+/**
+ * Find an antenna with specific name, frequency, and tilt
+ * @param antennas - Array of all antennas
+ * @param name - Antenna model name
+ * @param frequency - Target frequency (optional)
+ * @param tiltValue - Target tilt value
+ * @returns Matching antenna or null
+ */
+export declare function findAntennaWithTilt(antennas: Antenna[], name: string, frequency: number | null, tiltValue: string): Antenna | null;
+/**
+ * Get unique antenna models (by name)
+ * @param antennas - Array of all antennas
+ * @returns Array of unique antenna names
+ */
+export declare function getUniqueAntennaModels(antennas: Antenna[]): string[];