update toolspage

src/app/toolspage/toolspage.component.html

@@ -30,10 +30,14 @@
           </mat-select>
         </mat-form-field>
 
-        <!-- Companies (multi-select) -->
+        <!-- Companies (multi-select) bound to indexSelected -->
         <mat-form-field appearance="fill" class="full">
           <mat-label>Select Companies (multi-select)</mat-label>
-          <mat-select [(ngModel)]="selectedCompanies" name="companies" [disabled]="companies.length === 0" multiple>
+          <mat-select [(ngModel)]="indexSelected"
+                      (ngModelChange)="onCompaniesModelChange($event)"
+                      name="companies"
+                      [disabled]="companies.length === 0"
+                      multiple>
             <mat-option (click)="toggleSelectAll()" [disabled]="companies.length === 0">
               {{ isAllSelected() ? 'Unselect All' : 'Select All' }}
             </mat-option>
@@ -42,25 +46,6 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-
-        <!-- Trading Type -->
-        <!--<mat-form-field appearance="fill" class="col">
-        <mat-label>Trading Type</mat-label>
-        <mat-select [(ngModel)]="selectedTradingType" name="tradingType"
-                    [disabled]="!selectedCompanies || selectedCompanies.length === 0">
-          <mat-option value="intraday">Intraday</mat-option>
-          <mat-option value="swing">Short-Term Swing Trading</mat-option>
-          <mat-option value="longTerm">Long-Term Investment</mat-option>
-        </mat-select>
-      </mat-form-field>-->
-        <!-- Run Analysis -->
-        <!--<button mat-raised-button
-              type="button"
-              class="run-btn"
-              (click)="submit()"
-              [disabled]="loading || !selectedTradingType">
-        Run Analysis
-      </button>-->
       </form>
     </section>
 
@@ -68,21 +53,12 @@
       <h2 class="title">Search</h2>
 
       <form class="grid" autocomplete="off">
-        <!-- Trading Type (independent) -->
-        <!--<mat-form-field appearance="fill" class="col">
-        <mat-label>Trading Type</mat-label>
-        <mat-select [(ngModel)]="selectedTradingType" name="tradingType">
-          <mat-option value="intraday">Intraday</mat-option>
-          <mat-option value="swing">Short-Term Swing Trading</mat-option>
-          <mat-option value="longTerm">Long-Term Investment</mat-option>
-        </mat-select>
-      </mat-form-field>-->
-        <!-- Independent Ticker Search (uses static TICKERS) -->
+        <!-- Search ticker/company via backend (/searchcompanies) -->
         <mat-form-field appearance="fill" class="full ticker-search">
           <mat-label>Search ticker</mat-label>
           <input matInput
                  type="text"
-                 placeholder="Type symbol or company name (e.g., INFY, RELIANCE)"
+                 placeholder="Type symbol or company (e.g., INFY, RELIANCE)"
                  [formControl]="tickerCtrl"
                  [matAutocomplete]="tickAuto" />
           <button mat-icon-button matSuffix *ngIf="tickerCtrl.value" (click)="clearTickerSearch()" aria-label="Clear">
@@ -92,37 +68,36 @@
         </mat-form-field>
 
         <mat-autocomplete #tickAuto="matAutocomplete" (optionSelected)="onPickTicker($event.option.value)">
-          <mat-option *ngFor="let c of filteredCompanies$ | async; trackBy: trackBySymbol" [value]="c">
-            <strong>{{ c.symbol }}</strong>&nbsp;—&nbsp;{{ c.company }}
+          <mat-option *ngFor="let h of filteredCompanies$ | async; trackBy: trackBySymbol" [value]="h">
+            <div style="display:flex;align-items:center;gap:10px;width:100%">
+              <strong style="min-width:90px">{{ h.symbol }}</strong>
+              <span style="flex:1;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ h.company }}</span>
+              <span style="font-size:12px;opacity:.75">{{ h.indexCode }}</span>
+            </div>
           </mat-option>
         </mat-autocomplete>
 
-        <!-- Selected tickers (independent list) -->
-        <mat-chip-listbox *ngIf="pickedTickers.length" class="chipbar" aria-label="Picked tickers">
-          <mat-chip-row *ngFor="let t of pickedTickers; trackBy: trackBySymbol" [removable]="true" (removed)="removeTicker(t.symbol)">
-            {{ t.symbol }} — {{ t.company }}
+        <!-- Chips: ONLY search-picked items -->
+        <mat-chip-listbox *ngIf="selectedChips.length" class="chipbar" aria-label="Picked tickers">
+          <mat-chip-row *ngFor="let t of selectedChips; trackBy: trackBySymbol"
+                        [removable]="true"
+                        (removed)="onRemoveChip(t.symbol)">
+            {{ t.symbol }}
+            <ng-container *ngIf="t.company && t.company !== t.symbol">
+              — {{ t.company }}
+            </ng-container>
             <button matChipRemove aria-label="Remove"><mat-icon>close</mat-icon></button>
           </mat-chip-row>
         </mat-chip-listbox>
-
-        <!-- Run Analysis (optional reuse) -->
-        <!--<button mat-raised-button
-              type="button"
-              class="run-btn"
-              (click)="submit()"
-              [disabled]="loading || !selectedTradingType">
-        Run Analysis
-      </button>-->
       </form>
     </section>
   </div>
+
   <div class="type-content">
     <section class="filters-card">
       <h2 class="title">Trading Type</h2>
 
       <form class="grid" autocomplete="off">
-
-        <!-- Trading Type -->
         <mat-form-field appearance="fill" class="col">
           <mat-label>Trading Type</mat-label>
           <mat-select [(ngModel)]="selectedTradingType" name="tradingType"
@@ -139,12 +114,9 @@
             <mat-option value="futures">Futures Trading</mat-option>
             <mat-option value="arbitrage">Arbitrage Trading</mat-option>
             <mat-option value="eventDriven">Event-Driven Trading</mat-option>
-
           </mat-select>
         </mat-form-field>
 
-
-        <!-- Run Analysis -->
         <button mat-raised-button
                 type="button"
                 class="run-btn"
@@ -155,13 +127,8 @@
       </form>
     </section>
   </div>
-  <!--<footer></footer>-->
 </div>
 
-
-
-
-
 <!-- Loading overlay -->
 <div class="overlay" *ngIf="loading">
   <mat-spinner diameter="100"></mat-spinner>

src/app/toolspage/toolspage.component.scss

@@ -7,8 +7,8 @@
   gap:2vw;
   place-items: center; 
   color: #e6edf7;  
-  background: url('../../../public/filter-img.png') no-repeat;
-  background-size: cover;
+  background: url('../../../public/globe.png') no-repeat;
+ /* background-size: cover;*/
 }
 
 .filters-content {
@@ -21,12 +21,12 @@
 .filters-card {
   width: 30vw;
   padding: 1vw;
-  /* margin-top: 4vw;*/
-  /*background: rgba(14, 20, 36, 0.9);*/
-  background-color: #000000;
-  /*border: 1px solid #FF0000;*/
+  background: rgba(10, 12, 16, 0.92);
   border-radius: 1vw;
-  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
+  box-shadow: 0 12px 12px -6px rgba(255,255,255,0.6), /* bottom */
+  0 -12px 12px -6px rgba(255,255,255,0.6), /* top */
+  12px 0 12px -6px rgba(255,255,255,0.6), /* right */
+  -12px 0 12px -6px rgba(255,255,255,0.6); /* left */
 }
 
 

src/app/toolspage/toolspage.component.ts

@@ -11,17 +11,28 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { MarketService } from '../marketselect/market.service';
 import { Router } from '@angular/router';
-import { finalize, Observable } from 'rxjs';
-import { debounceTime, map, startWith } from 'rxjs/operators';
 
-interface CompanyOption { company: string; symbol: string; }
-interface IndexRef { code: string; name: string; }
+import { Observable, of } from 'rxjs';
+import { debounceTime, finalize, map, startWith, switchMap } from 'rxjs/operators';
+
+// --- Types ---
 interface Company { symbol: string; company: string; }
+interface CompanyOption { symbol: string; company: string; } // for chips view
+interface IndexRef { code: string; name: string; }
 type MarketMap = Record<string, Record<string, IndexRef[]>>;
 
+interface SearchHit {
+  symbol: string;
+  company: string;
+  indexCode: string;
+  indexName: string;
+  exchange: string;
+  country: string;
+}
+
 @Component({
   selector: 'app-toolspage',
   standalone: true,
@@ -36,53 +47,29 @@ type MarketMap = Record<string, Record<string, IndexRef[]>>;
     MatIconModule,
     MatButtonModule,
     MatChipsModule,
-    MatProgressSpinnerModule
+    MatProgressSpinnerModule,
+
+    MatSnackBarModule
   ],
   templateUrl: './toolspage.component.html',
   styleUrls: ['./toolspage.component.scss']
 })
 export class ToolspageComponent {
 
-  // ---------- Search (independent)
-  tickerCtrl = new FormControl<string>('', { nonNullable: true });
-  filteredCompanies$!: Observable<CompanyOption[]>;
-  pickedTickers: CompanyOption[] = [];
-
-  // A small static set (edit/expand as you like)
-  private readonly TICKERS: CompanyOption[] = [
-    { symbol: 'RELIANCE', company: 'Reliance Industries' },
-    { symbol: 'TCS', company: 'Tata Consultancy Services' },
-    { symbol: 'INFY', company: 'Infosys' },
-    { symbol: 'HDFCBANK', company: 'HDFC Bank' },
-    { symbol: 'ICICIBANK', company: 'ICICI Bank' },
-    { symbol: 'KOTAKBANK', company: 'Kotak Mahindra Bank' },
-    { symbol: 'SBIN', company: 'State Bank of India' },
-    { symbol: 'ITC', company: 'ITC' },
-    { symbol: 'LT', company: 'Larsen & Toubro' },
-    { symbol: 'HINDUNILVR', company: 'Hindustan Unilever' },
-    { symbol: 'AXISBANK', company: 'Axis Bank' },
-    { symbol: 'BAJFINANCE', company: 'Bajaj Finance' },
-    { symbol: 'BHARTIARTL', company: 'Bharti Airtel' },
-    { symbol: 'ASIANPAINT', company: 'Asian Paints' },
-    { symbol: 'TITAN', company: 'Titan Company' },
-    { symbol: 'ULTRACEMCO', company: 'UltraTech Cement' },
-    { symbol: 'WIPRO', company: 'Wipro' },
-    { symbol: 'HCLTECH', company: 'HCL Technologies' },
-    { symbol: 'MARUTI', company: 'Maruti Suzuki' },
-    { symbol: 'TATAMOTORS', company: 'Tata Motors' },
-    { symbol: 'TATASTEEL', company: 'Tata Steel' },
-    { symbol: 'M&M', company: 'Mahindra & Mahindra' }
-  ];
-
-  // ---------- Backend / config
- private readonly API =
-  location.hostname.endsWith('hf.space')
-    ? 'https://pykara-pytrade-backend.hf.space'
-    : 'http://127.0.0.1:5000'; 
+  // ---------- Backend / config ----------
+  private readonly API =
+    location.hostname.endsWith('hf.space')
+      ? 'https://pykara-pytrade-backend.hf.space'
+      : 'http://127.0.0.1:5000';
   loading = false;
   error: string | null = null;
 
-  // ---------- Filters
+  // ---------- Global search (backend-powered) ----------
+  tickerCtrl = new FormControl<string>('', { nonNullable: true });
+  filteredCompanies$!: Observable<SearchHit[]>;
+  globalLoading = false;
+
+  // ---------- Filters (country → exchange → index) ----------
   markets: MarketMap = {
     India: {
       'NSE (National Stock Exchange)': [
@@ -92,78 +79,123 @@ export class ToolspageComponent {
         { code: 'NIFTYMID100', name: 'NIFTY Midcap 100' },
         { code: 'NIFTY500', name: 'NIFTY 500' }
       ]
+    },
+    'United States': {
+      NASDAQ: [
+        { code: 'NASDAQ100', name: 'NASDAQ-100' }
+      ]
+    },
+    Germany: {
+      'XETRA (Deutsche Börse)': [
+        { code: 'DAX40', name: 'DAX 40' }
+      ]
+    },
+    Sweden: {
+      'OMX Stockholm': [
+        { code: 'OMXS30', name: 'OMX Stockholm 30' }
+      ]
     }
   };
 
-  // ---------- Selections
+  // ---------- Selections ----------
   selectedCountry = '';
   selectedExchange = '';
   selectedIndexName = '';
+
+  /** Global selection used for analysis (symbols only) */
   selectedCompanies: string[] = [];
-  selectedTradingType = 'swing'; 
 
-  // ---------- Derived lists
+  /** Current index selection bound to <mat-select> (symbols only) */
+  indexSelected: string[] = [];
+
+  /** Names for chips (search picks only): symbol -> company name */
+  private selectedNameMap = new Map<string, string>();
+
+  /** Symbols picked via SEARCH only (used to show chips) */
+  private searchSelected = new Set<string>();
+
+  selectedTradingType = 'swing';
+
+  // ---------- Derived lists for the index path ----------
   countries = Object.keys(this.markets);
   exchanges: string[] = [];
   indices: IndexRef[] = [];
   companies: Company[] = [];
 
-  // ---------- UI flags
+  // Fast lookup & membership for current index
+  private companiesBySymbol = new Map<string, string>(); // symbol -> name
+  private currentIndexSymbols: Set<string> = new Set<string>(); // membership only
+
+  // ---------- UI flags ----------
   allSelected = false;
-  loadingCompanies = false;
+  loadingCompanies = false;  
 
-  constructor(private http: HttpClient, private marketService: MarketService, private router: Router) { }
+  constructor(
+    private http: HttpClient,
+    private marketService: MarketService,
+    private router: Router,
+    private snackBar: MatSnackBar
+  ) { }
 
+  // ---------- Init ----------
   ngOnInit(): void {
+    // Wire the search box to /searchcompanies
     this.filteredCompanies$ = this.tickerCtrl.valueChanges.pipe(
       startWith(''),
-      debounceTime(150),
-      map(q => this.filterCompanies((q || '').trim().toLowerCase()))
+      debounceTime(200),
+      map((q:any) => (q || '').trim()),
+      switchMap((query:any) => {
+        if (!query) return of([] as SearchHit[]);
+        this.globalLoading = true;
+        const params = new HttpParams().set('q', query).set('limit', '50');
+        return this.http
+          .get<{ items: SearchHit[] }>(`${this.API}/searchcompanies`, { params })
+          .pipe(
+            map((res:any) => res?.items ?? []),
+            finalize(() => (this.globalLoading = false))
+          );
+      })
     );
   }
 
-  // -------- Search helpers
-  private filterCompanies(q: string): CompanyOption[] {
-    const list = this.TICKERS;
-    if (!q) return list.slice(0, 15);
-    return list.filter(c =>
-      c.symbol.toLowerCase().includes(q) || c.company.toLowerCase().includes(q)
-    ).slice(0, 20);
-  }
+  // ---------- Search selection ----------
+  onPickTicker(hit: SearchHit): void {
+    // Add to global selection and mark as search-picked
+    this.addToSelected(hit.symbol, hit.company);
+    this.searchSelected.add(hit.symbol);
 
-  onPickTicker(c: CompanyOption): void {
-    if (!this.pickedTickers.some(x => x.symbol === c.symbol)) {
-      this.pickedTickers = [...this.pickedTickers, c];
+    // If this symbol is in the currently loaded index, also reflect in dropdown
+    if (this.currentIndexSymbols.has(hit.symbol) && !this.indexSelected.includes(hit.symbol)) {
+      this.indexSelected = [...this.indexSelected, hit.symbol];
     }
-    this.tickerCtrl.setValue(''); // clear after selection
+
+    this.allSelected = this.isAllSelected();
+    this.tickerCtrl.setValue(''); // clear
   }
 
-  clearTickerSearch(): void { this.tickerCtrl.setValue(''); }
-  removeTicker(symbol: string): void {
-    this.pickedTickers = this.pickedTickers.filter(t => t.symbol !== symbol);
+  clearTickerSearch(): void {
+    this.tickerCtrl.setValue('');
   }
 
-  // -------- Market selection handlers
+  // ---------- Country / Exchange / Index handlers ----------
   onCountryChange(): void {
     this.error = null;
     this.selectedExchange = '';
     this.selectedIndexName = '';
-    this.selectedCompanies = [];
-    this.companies = [];
-    this.allSelected = false;
-
     this.exchanges = this.selectedCountry ? Object.keys(this.markets[this.selectedCountry]) : [];
     this.indices = [];
+    this.companies = [];
+    this.resetCompanyLookup();
+    this.indexSelected = []; // reset dropdown model
   }
 
   onExchangeChange(): void {
     this.error = null;
     this.selectedIndexName = '';
-    this.selectedCompanies = [];
-    this.companies = [];
-    this.allSelected = false;
-
     this.indices = this.markets[this.selectedCountry]?.[this.selectedExchange] ?? [];
+    this.companies = [];
+    this.resetCompanyLookup();
+    this.indexSelected = []; // reset dropdown model
   }
 
   onIndexChange(): void {
@@ -175,9 +207,8 @@ export class ToolspageComponent {
 
     const indexCode = (ref?.code || this.deriveIndexCode(this.selectedIndexName)).toUpperCase();
 
-    this.selectedCompanies = [];
     this.companies = [];
-    this.allSelected = false;
+    this.resetCompanyLookup();
 
     if (!indexCode) {
       this.error = 'Unable to resolve index code from selection.';
@@ -186,16 +217,53 @@ export class ToolspageComponent {
     this.fetchCompanies(indexCode);
   }
 
+  // ---------- Multi-select model change (merge with global, no chips for dropdown) ----------
+  onCompaniesModelChange(newSymbols: string[]): void {
+    this.indexSelected = [...newSymbols];
+
+    // Recompute global: (global - currentIndex) ∪ indexSelected
+    const others = this.selectedCompanies.filter(s => !this.currentIndexSymbols.has(s));
+    this.selectedCompanies = Array.from(new Set([...others, ...this.indexSelected]));
+
+    // If something was deselected via dropdown, also remove its chip if it was a search-pick
+    for (const s of [...this.searchSelected]) {
+      if (!this.selectedCompanies.includes(s)) this.searchSelected.delete(s);
+    }
+
+    this.allSelected = this.isAllSelected();
+  }
+
+  // ---------- Select All only for current index ----------
   toggleSelectAll(): void {
     this.allSelected = !this.allSelected;
-    this.selectedCompanies = this.allSelected ? this.companies.map(c => c.symbol) : [];
+
+    if (this.allSelected) {
+      // Select all in current index (chips are not added here)
+      this.indexSelected = Array.from(this.currentIndexSymbols);
+    } else {
+      // Deselect all current index symbols from global and chips
+      const current = Array.from(this.currentIndexSymbols);
+      this.indexSelected = [];
+      this.selectedCompanies = this.selectedCompanies.filter(s => !this.currentIndexSymbols.has(s));
+      for (const s of current) this.searchSelected.delete(s);
+    }
+
+    // Keep any selections from other indices
+    const others = this.selectedCompanies.filter(s => !this.currentIndexSymbols.has(s));
+    this.selectedCompanies = Array.from(new Set([...others, ...this.indexSelected]));
   }
+
   isAllSelected(): boolean {
-    return this.companies.length > 0 && this.selectedCompanies.length === this.companies.length;
+    if (this.companies.length === 0) return false;
+    const selectedSet = new Set(this.indexSelected);
+    return this.companies.every(c => selectedSet.has(c.symbol));
   }
-  trackBySymbol(_: number, c: { symbol: string }) { return c.symbol; }
 
-  // -------- Backend
+  trackBySymbol(_: number, c: { symbol: string }): string {
+    return c.symbol;
+  }
+
+  // ---------- Backend: fetch constituents for an index ----------
   private fetchCompanies(indexCode: string): void {
     this.loadingCompanies = true;
     const params = new HttpParams().set('code', indexCode);
@@ -204,25 +272,42 @@ export class ToolspageComponent {
       `${this.API}/getcompanies`,
       { params }
     ).subscribe({
-      next: res => {
+      next: (res:any) => {
         this.error = null;
         this.companies = res?.constituents ?? [];
-        const allowed = new Set(this.companies.map(c => c.symbol));
-        this.selectedCompanies = this.selectedCompanies.filter(s => allowed.has(s));
+
+        // Build lookups for this index
+        this.companiesBySymbol.clear();
+        this.currentIndexSymbols = new Set<string>();
+        for (const c of this.companies) {
+          this.companiesBySymbol.set(c.symbol, c.company);
+          this.currentIndexSymbols.add(c.symbol);
+        }
+
+        // Seed dropdown selection with intersection of global selection & current index
+        const selectedSet = new Set(this.selectedCompanies);
+        this.indexSelected = this.companies
+          .map(c => c.symbol)
+          .filter(sym => selectedSet.has(sym));
+
+        // Do NOT set names here (chips are for search picks only)
         this.allSelected = this.isAllSelected();
         this.loadingCompanies = false;
       },
-      error: err => {
+      error: (err:any) => {
         console.error('GET /getcompanies failed', err);
         this.error = (err?.error?.error as string) || 'Failed to load companies.';
         this.companies = [];
-        this.selectedCompanies = [];
+        this.companiesBySymbol.clear();
+        this.currentIndexSymbols = new Set<string>();
+        this.indexSelected = [];
         this.allSelected = false;
         this.loadingCompanies = false;
       }
     });
   }
 
+  // ---------- Helpers ----------
   private deriveIndexCode(name: string): string {
     return (name || '')
       .toUpperCase()
@@ -232,64 +317,119 @@ export class ToolspageComponent {
       .replace(/[^A-Z0-9]/g, '');
   }
 
-  getMarket(): string[] { return this.exchanges; }
-  getMarketDivision(): string[] { return this.indices.map(i => i.name); }
-  getCompanies(): Company[] { return this.companies; }
+  getMarket(): string[] {
+    return this.exchanges;
+  }
+
+  getMarketDivision(): string[] {
+    return this.indices.map(i => i.name);
+  }
+
+  getCompanies(): Company[] {
+    return this.companies;
+  }
+
+  private addToSelected(symbol: string, companyName: string): void {
+    if (!this.selectedCompanies.includes(symbol)) {
+      this.selectedCompanies = [...this.selectedCompanies, symbol];
+    }
+    // Store name only for search picks (chips)
+    if (companyName) this.selectedNameMap.set(symbol, companyName);
+  }
+
+  private resetCompanyLookup(): void {
+    this.companiesBySymbol.clear();
+    this.currentIndexSymbols = new Set<string>();
+    this.allSelected = false;
+  }
 
-  // -------- Common controls
+  // Chips show only search-picked symbols
+  get selectedChips(): CompanyOption[] {
+    return Array.from(this.searchSelected).map(s => ({
+      symbol: s,
+      company: this.selectedNameMap.get(s) || s
+    }));
+  }
+
+  // ---------- Analysis ----------
   canRunAnalysis(): boolean {
-    const hasTickers = this.selectedCompanies.length > 0 || this.pickedTickers.length > 0;
-    return !!this.selectedTradingType && hasTickers;
+    return !!this.selectedTradingType && this.selectedCompanies.length > 0;
+  }
+
+  submit(): void {
+    if (this.selectedTradingType == 'swing') {
+      const symbols = [...new Set(this.selectedCompanies)];
+      if (!this.selectedTradingType) {
+        this.error = 'Please select a trading type.';
+        return;
+      }
+      if (symbols.length === 0) {
+        this.error = 'Please select at least one company or ticker.';
+        return;
+      }
+
+      this.error = null;
+      this.loading = true;
+
+      this.marketService.getAnalyseResult(symbols)
+        .pipe(finalize(() => (this.loading = false)))
+        .subscribe({
+          next: (res:any) => this.router.navigate(['/analysepage'], { state: { result: res } }),
+          error: (err:any) => {
+            console.error('API error:', err);
+            this.error = 'Analysis failed. Please try again.';
+          }
+        });
+    } else {
+      this.openSnackBar();
+    }
+
   }
 
   resetAll(): void {
     this.error = null;
 
-    // Market Selection
+    // Filters
     this.selectedCountry = '';
     this.selectedExchange = '';
     this.selectedIndexName = '';
-    this.selectedCompanies = [];
     this.exchanges = [];
     this.indices = [];
     this.companies = [];
-    this.allSelected = false;
+    this.resetCompanyLookup();
+
+    // Unified selection
+    this.selectedCompanies = [];
+    this.indexSelected = [];
+    this.selectedNameMap.clear();
+    this.searchSelected.clear();
 
     // Search
     this.tickerCtrl.setValue('');
-    this.pickedTickers = [];
-
-    // Common
-    this.selectedTradingType = '';
   }
 
-  // -------- Submit
-  submit(): void {
-    const symbols =
-      this.selectedCompanies.length > 0
-        ? this.selectedCompanies
-        : this.pickedTickers.map(t => t.symbol);
+  // Chips remove (search picks only)
+  onRemoveChip(symbol: string): void {
+    this.searchSelected.delete(symbol); // hide chip
+    this.selectedCompanies = this.selectedCompanies.filter(s => s !== symbol); // unselect globally
 
-    if (!this.selectedTradingType) {
-      this.error = 'Please select a trading type.';
-      return;
-    }
-    if (symbols.length === 0) {
-      this.error = 'Please select at least one company or ticker.';
-      return;
+    // If symbol is part of the current index, reflect in dropdown
+    if (this.currentIndexSymbols.has(symbol)) {
+      this.indexSelected = this.indexSelected.filter(s => s !== symbol);
+      this.allSelected = this.isAllSelected();
     }
+  }
 
-    this.error = null;
-    this.loading = true;
-
-    this.marketService.getAnalyseResult(symbols)
-      .pipe(finalize(() => (this.loading = false)))
-      .subscribe({
-        next: res => this.router.navigate(['/analysepage'], { state: { result: res } }),
-        error: err => {
-          console.error('API error:', err);
-          this.error = 'Analysis failed. Please try again.';
-        }
-      });
+  openSnackBar(): void {
+    const ref = this.snackBar.open('Under Constructon', 'Close', {
+      duration: 3000,
+      horizontalPosition: 'center',
+      verticalPosition: 'bottom',
+      panelClass: ['snackbar-success']
+    });
+
+    ref.onAction().subscribe(() => {
+
+    });
   }
 }