filter

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html

@@ -79,16 +79,12 @@
 
   <!-- Multi-Select Filter -->
   <div class="filter-control" *ngIf="filterType === 'multiselect'">
-    <div class="compact-multiselect-checkboxes" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 10px;">
-      <div *ngFor="let option of filterOptions" class="clr-checkbox-wrapper" style="margin-bottom: 5px;">
-        <input type="checkbox" 
-               [id]="'multiselect-' + option" 
-               [value]="option" 
-               [checked]="isOptionSelected(option)"
-               (change)="onMultiselectOptionChange($event, option)">
-        <label [for]="'multiselect-' + option" class="clr-control-label">{{ option }}</label>
-      </div>
-    </div>
+    <select [(ngModel)]="filterValue" 
+            (ngModelChange)="onFilterValueChange($event)"
+            multiple 
+            class="clr-select compact-multiselect">
+      <option *ngFor="let option of filterOptions" [value]="option">{{ option }}</option>
+    </select>
   </div>
 
   <!-- Date Range Filter -->

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts

@@ -331,48 +331,4 @@ export class CompactFilterComponent implements OnInit, OnChanges {
       this.loadAvailableValues(this.configFilterKey);
     }
   }
-  
-  // Add method to check if an option is selected for checkboxes
-  isOptionSelected(option: string): boolean {
-    if (!this.filterValue) {
-      return false;
-    }
-    
-    // Ensure filterValue is an array for multiselect
-    if (!Array.isArray(this.filterValue)) {
-      this.filterValue = [];
-      return false;
-    }
-    
-    return this.filterValue.includes(option);
-  }
-  // need to check this 
-  // Add method to handle multiselect option change
-  onMultiselectOptionChange(event: any, option: string): void {
-    // Initialize filterValue array if it doesn't exist
-    if (!this.filterValue) {
-      this.filterValue = [];
-    }
-    
-    // Ensure filterValue is an array
-    if (!Array.isArray(this.filterValue)) {
-      this.filterValue = [];
-    }
-    
-    if (event.target.checked) {
-      // Add option if not already in array
-      if (!this.filterValue.includes(option)) {
-        this.filterValue.push(option);
-      }
-    } else {
-      // Remove option from array
-      const index = this.filterValue.indexOf(option);
-      if (index > -1) {
-        this.filterValue.splice(index, 1);
-      }
-    }
-    
-    // Emit the change event
-    this.onFilterValueChange(this.filterValue);
-  }
 }

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts

@@ -48,12 +48,6 @@ export class EditnewdashComponent implements OnInit {
   public entryForm: FormGroup;
   public commonFilterForm: FormGroup; // Add common filter form
 
-  // Add filterOptionsString property for compact filter
-  filterOptionsString: string = '';
-  
-  // Add availableKeys property for compact filter
-  availableKeys: string[] = [];
-
   WidgetsMock: WidgetModel[] = [
     {
       name: 'Common Filter',
@@ -366,16 +360,6 @@ export class EditnewdashComponent implements OnInit {
           dashboard.component = component.componentInstance;
         }
       });
-      
-      // Ensure compact filter configuration properties are properly initialized
-      if (dashboard.component === 'Compact Filter' || dashboard.name === 'Compact Filter') {
-        // Make sure all compact filter properties exist
-        if (dashboard.filterKey === undefined) dashboard.filterKey = '';
-        if (dashboard.filterType === undefined) dashboard.filterType = 'text';
-        if (dashboard.filterLabel === undefined) dashboard.filterLabel = '';
-        if (dashboard.filterOptions === undefined) dashboard.filterOptions = [];
-        // table and connection properties should already exist for all components
-      }
     });
   }
 
@@ -390,16 +374,6 @@ export class EditnewdashComponent implements OnInit {
           dashboard.component = component.name;
         }
       });
-      
-      // Ensure compact filter configuration properties are preserved
-      if (dashboard.name === 'Compact Filter') {
-        // Make sure all compact filter properties exist
-        if (dashboard.filterKey === undefined) dashboard.filterKey = '';
-        if (dashboard.filterType === undefined) dashboard.filterType = 'text';
-        if (dashboard.filterLabel === undefined) dashboard.filterLabel = '';
-        if (dashboard.filterOptions === undefined) dashboard.filterOptions = [];
-        // table and connection properties should already exist for all components
-      }
     });
   }
   // Add method to get available fields for a filter dropdown (excluding already selected fields)
@@ -627,18 +601,6 @@ export class EditnewdashComponent implements OnInit {
     if (item['filterOptions'] === undefined) { 
       this.gadgetsEditdata['filterOptions'] = []; 
     }
-    
-    // Initialize filterOptionsString for compact filter
-    if (item.name === 'Compact Filter') {
-      this.filterOptionsString = this.gadgetsEditdata['filterOptions'].join(', ');
-      // Load available keys when editing a compact filter
-      if (this.gadgetsEditdata['table']) {
-        this.loadAvailableKeys(this.gadgetsEditdata['table'], this.gadgetsEditdata['connection']);
-      }
-    } else {
-      this.filterOptionsString = '';
-    }
-    
     this.getStores();
     
     // Set default connection if none is set and we have connections
@@ -737,9 +699,6 @@ export class EditnewdashComponent implements OnInit {
 
     //https://www.w3schools.com/js/tryit.asp?filename=tryjson_stringify_function_tostring
 
-    // First serialize the dashboard collection to ensure component names are properly set
-    this.serialize(this.dashboardCollection.dashboard);
-
     let cmp = this.dashboardCollection.dashboard.forEach(dashboard => {
       this.componentCollection.forEach(component => {
         if (dashboard.name === component.name) {
@@ -760,6 +719,8 @@ export class EditnewdashComponent implements OnInit {
     //console.log(merged);
     console.log("temp data", typeof tmp);
     console.log(tmp);
+    let parsed = JSON.parse(tmp);
+    this.serialize(parsed.dashboard);
     this.dashbord1_Line.model = tmp;
 
     // let obj = this.dashboardCollection;
@@ -816,16 +777,11 @@ export class EditnewdashComponent implements OnInit {
         xyz.commonFilterEnabled = this.gadgetsEditdata.commonFilterEnabled; // Add common filter property
         
         // For compact filter, preserve filter configuration properties
-        if (item.name === 'Compact Filter') {
+        if (item.component && item.component.name === 'CompactFilterComponent') {
           xyz.filterKey = this.gadgetsEditdata.filterKey || '';
           xyz.filterType = this.gadgetsEditdata.filterType || 'text';
           xyz.filterLabel = this.gadgetsEditdata.filterLabel || '';
-          // Convert filterOptionsString to array
-          if (this.gadgetsEditdata.fieldName === 'Compact Filter') {
-            xyz.filterOptions = this.filterOptionsString.split(',').map(opt => opt.trim()).filter(opt => opt);
-          } else {
-            xyz.filterOptions = this.gadgetsEditdata.filterOptions || [];
-          }
+          xyz.filterOptions = this.gadgetsEditdata.filterOptions || [];
           xyz.table = this.gadgetsEditdata.table || '';
           xyz.connection = this.gadgetsEditdata.connection || undefined;
         }
@@ -865,7 +821,7 @@ export class EditnewdashComponent implements OnInit {
    */
   getChartInputs(item: any): any {
     // For CompactFilterComponent, pass only filter configuration properties
-    if (item.name === 'Compact Filter') {
+    if (item.component && item.component.name === 'CompactFilterComponent') {
       const filterInputs = {
         filterKey: item['filterKey'] || '',
         filterType: item['filterType'] || 'text',
@@ -1039,16 +995,11 @@ export class EditnewdashComponent implements OnInit {
         updatedItem.commonFilterEnabledDrilldown = this.gadgetsEditdata.commonFilterEnabledDrilldown; // Add drilldown common filter property
         
         // For compact filter, preserve filter configuration properties
-        if (item.name === 'Compact Filter') {
+        if (item.component && item.component.name === 'CompactFilterComponent') {
           updatedItem.filterKey = this.gadgetsEditdata.filterKey || '';
           updatedItem.filterType = this.gadgetsEditdata.filterType || 'text';
           updatedItem.filterLabel = this.gadgetsEditdata.filterLabel || '';
-          // Convert filterOptionsString to array
-          if (this.gadgetsEditdata.fieldName === 'Compact Filter') {
-            updatedItem.filterOptions = this.filterOptionsString.split(',').map(opt => opt.trim()).filter(opt => opt);
-          } else {
-            updatedItem.filterOptions = this.gadgetsEditdata.filterOptions || [];
-          }
+          updatedItem.filterOptions = this.gadgetsEditdata.filterOptions || [];
           updatedItem.table = this.gadgetsEditdata.table || ''; // API URL
           updatedItem.connection = this.gadgetsEditdata.connection || undefined; // Connection ID
           
@@ -1484,80 +1435,4 @@ export class EditnewdashComponent implements OnInit {
       // This would require the chart component to have a public resize method
     }
   }
-  
-  // Add method to load available keys for compact filter
-  loadAvailableKeys(apiUrl: string, connectionId: string | undefined) {
-    if (apiUrl) {
-      const connectionIdNum = connectionId ? parseInt(connectionId, 10) : undefined;
-      this.alertService.getColumnfromurl(apiUrl, connectionIdNum).subscribe(
-        (keys: string[]) => {
-          this.availableKeys = keys;
-        },
-        (error) => {
-          console.error('Error loading available keys:', error);
-          this.availableKeys = [];
-        }
-      );
-    }
-  }
-
-  // Add method to load available values for a specific key
-  loadAvailableValues(key: string) {
-    if (key && this.gadgetsEditdata['table']) {
-      const connectionIdNum = this.gadgetsEditdata['connection'] ? 
-        parseInt(this.gadgetsEditdata['connection'], 10) : undefined;
-      this.alertService.getValuesFromUrl(this.gadgetsEditdata['table'], connectionIdNum, key).subscribe(
-        (values: string[]) => {
-          // Update filter options string for dropdown/multiselect
-          if (this.gadgetsEditdata['filterType'] === 'dropdown' || 
-              this.gadgetsEditdata['filterType'] === 'multiselect') {
-            this.filterOptionsString = values.join(', ');
-            // Also update the gadgetsEditdata filterOptions array
-            this.gadgetsEditdata['filterOptions'] = values;
-          }
-        },
-        (error) => {
-          console.error('Error loading available values:', error);
-        }
-      );
-    }
-  }
-
-  // Add method to handle filter key change
-  onFilterKeyChange(key: string) {
-    this.gadgetsEditdata['filterKey'] = key;
-    // Load available values when filter key changes
-    if (key && (this.gadgetsEditdata['filterType'] === 'dropdown' || 
-                this.gadgetsEditdata['filterType'] === 'multiselect')) {
-      this.loadAvailableValues(key);
-    }
-  }
-
-  // Add method to handle filter type change
-  onFilterTypeChange(type: string) {
-    this.gadgetsEditdata['filterType'] = type;
-    // Load available values when filter type changes to dropdown or multiselect
-    if ((type === 'dropdown' || type === 'multiselect') && this.gadgetsEditdata['filterKey']) {
-      this.loadAvailableValues(this.gadgetsEditdata['filterKey']);
-    }
-  }
-
-  // Add method to handle API URL change for compact filter
-  onCompactFilterApiUrlChange(url: string) {
-    this.gadgetsEditdata['table'] = url;
-    // Load available keys when API URL changes
-    if (url) {
-      this.loadAvailableKeys(url, this.gadgetsEditdata['connection']);
-    }
-  }
-
-  // Add method to handle connection change for compact filter
-  onCompactFilterConnectionChange(connectionId: string) {
-    this.gadgetsEditdata['connection'] = connectionId;
-    // Reload available keys when connection changes
-    if (this.gadgetsEditdata['table']) {
-      this.loadAvailableKeys(this.gadgetsEditdata['table'], connectionId);
-    }
-  }
-
 }

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html

@@ -1,73 +1,64 @@
+<!-- Display Mode - No configuration UI in runner -->
 <div class="compact-filter">
-  <div class="filter-header" (click)="toggleFilter()">
+  <div class="filter-header">
     <span class="filter-label" *ngIf="filterLabel">{{ filterLabel }}</span>
     <span class="filter-key" *ngIf="!filterLabel && filterKey">{{ filterKey }}</span>
     <span class="filter-type">({{ filterType }})</span>
-    <clr-icon shape="caret down" class="expand-icon" *ngIf="!isExpanded"></clr-icon>
-    <clr-icon shape="caret up" class="expand-icon" *ngIf="isExpanded"></clr-icon>
   </div>
   
-  <div class="filter-content" *ngIf="isExpanded">
-    <!-- Text Filter -->
-    <div class="filter-control" *ngIf="filterType === 'text'">
-      <input type="text" 
-             [(ngModel)]="filterValue" 
-             (ngModelChange)="onFilterValueChange($event)"
-             [placeholder]="filterLabel || filterKey"
-             class="clr-input compact-input">
-    </div>
+  <!-- Text Filter -->
+  <div class="filter-control" *ngIf="filterType === 'text'">
+    <input type="text" 
+           [(ngModel)]="filterValue" 
+           (ngModelChange)="onFilterValueChange($event)"
+           [placeholder]="filterLabel || filterKey"
+           class="clr-input compact-input">
+  </div>
 
-    <!-- Dropdown Filter -->
-    <div class="filter-control" *ngIf="filterType === 'dropdown'">
-      <select [(ngModel)]="filterValue" 
-              (ngModelChange)="onFilterValueChange($event)"
-              class="clr-select compact-select">
-        <option value="">{{ filterLabel || filterKey }}</option>
-        <option *ngFor="let option of filterOptions; let i = index" [value]="option">{{ option }}</option>
-      </select>
-    </div>
+  <!-- Dropdown Filter -->
+  <div class="filter-control" *ngIf="filterType === 'dropdown'">
+    <select [(ngModel)]="filterValue" 
+            (ngModelChange)="onFilterValueChange($event)"
+            class="clr-select compact-select">
+      <option value="">{{ filterLabel || filterKey }}</option>
+      <option *ngFor="let option of filterOptions" [value]="option">{{ option }}</option>
+    </select>
+  </div>
 
-    <!-- Multi-Select Filter -->
-    <div class="filter-control" *ngIf="filterType === 'multiselect'">
-      <div class="multiselect-container">
-        <div class="checkbox-group">
-          <div *ngFor="let option of filterOptions; let i = index" class="checkbox-item">
-            <input type="checkbox" 
-                   [checked]="isOptionSelected(option)" 
-                   (change)="onMultiSelectChange(option, $event)"
-                   [id]="'checkbox-' + filterKey + '-' + i" 
-                   class="clr-checkbox">
-            <label [for]="'checkbox-' + filterKey + '-' + i" class="checkbox-label">{{ option }}</label>
-          </div>
-        </div>
+  <!-- Multi-Select Filter -->
+  <div class="filter-control" *ngIf="filterType === 'multiselect'">
+    <div class="checkbox-group">
+      <div *ngFor="let option of filterOptions" class="checkbox-item">
+        <input type="checkbox" 
+               [checked]="filterValue && filterValue.includes(option)"
+               (change)="onMultiSelectChange(option, $event)"
+               [id]="'checkbox-' + option">
+        <label [for]="'checkbox-' + option">{{ option }}</label>
       </div>
     </div>
+  </div>
 
-    <!-- Date Range Filter -->
-    <div class="filter-control date-range" *ngIf="filterType === 'date-range'">
-      <div class="date-input-group">
-        <input type="date" 
-               [(ngModel)]="filterValue.start" 
-               (ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })"
-               placeholder="Start Date"
-               class="clr-input compact-date">
-        <span class="date-separator">to</span>
-        <input type="date" 
-               [(ngModel)]="filterValue.end" 
-               (ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })"
-               placeholder="End Date"
-               class="clr-input compact-date">
-      </div>
-    </div>
+  <!-- Date Range Filter -->
+  <div class="filter-control date-range" *ngIf="filterType === 'date-range'">
+    <input type="date" 
+           [(ngModel)]="filterValue.start" 
+           (ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })"
+           placeholder="Start Date"
+           class="clr-input compact-date">
+    <input type="date" 
+           [(ngModel)]="filterValue.end" 
+           (ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })"
+           placeholder="End Date"
+           class="clr-input compact-date">
+  </div>
 
-    <!-- Toggle Filter -->
-    <div class="filter-control toggle" *ngIf="filterType === 'toggle'">
-      <input type="checkbox" 
-             [(ngModel)]="filterValue" 
-             (ngModelChange)="onToggleChange($event)"
-             clrToggle 
-             class="clr-toggle">
-      <label class="toggle-label">{{ filterLabel || filterKey }}</label>
-    </div>
+  <!-- Toggle Filter -->
+  <div class="filter-control toggle" *ngIf="filterType === 'toggle'">
+    <input type="checkbox" 
+           [(ngModel)]="filterValue" 
+           (ngModelChange)="onToggleChange($event)"
+           clrToggle 
+           class="clr-toggle">
+    <label class="toggle-label">{{ filterLabel || filterKey }}</label>
   </div>
 </div>

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss

@@ -1,149 +1,74 @@
 .compact-filter {
-  display: block;
-  min-width: 200px;
-  max-width: 300px;
-  margin: 8px;
-  padding: 0;
-  background: #ffffff;
-  border: 1px solid #d7d7d7;
+  padding: 10px;
+  border: 1px solid #ddd;
   border-radius: 4px;
-  font-size: 14px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  margin-bottom: 10px;
+  background-color: #f8f8f8;
   
   .filter-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 12px 15px;
-    cursor: pointer;
-    background: #f8f8f8;
-    border-bottom: 1px solid #eaeaea;
-    border-radius: 4px 4px 0 0;
-    
-    &:hover {
-      background: #f0f0f0;
-    }
+    margin-bottom: 10px;
     
     .filter-label, .filter-key {
-      font-weight: 500;
-      color: #333333;
-      flex-grow: 1;
+      font-weight: bold;
     }
     
     .filter-type {
-      font-size: 12px;
-      color: #666666;
-      margin: 0 8px;
-      background: #eaeaea;
-      padding: 2px 8px;
-      border-radius: 12px;
-    }
-    
-    .expand-icon {
-      width: 16px;
-      height: 16px;
-      color: #666666;
+      font-size: 0.8em;
+      color: #666;
     }
   }
   
-  .filter-content {
-    padding: 15px;
+  .filter-control {
+    margin-bottom: 10px;
     
-    .filter-control {
-      margin-bottom: 12px;
+    .compact-input, .compact-select, .compact-date {
+      width: 100%;
+      padding: 5px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
     
-      &:last-child {
-        margin-bottom: 0;
-      }
+    .compact-multiselect {
+      width: 100%;
+      height: 100px;
+    }
     
-      &.date-range {
-        .date-input-group {
-          display: flex;
-          align-items: center;
-          gap: 8px;
+    .checkbox-group {
+      display: flex;
+      flex-direction: column;
       
-          .date-separator {
-            font-size: 14px;
-            color: #666666;
-          }
+      .checkbox-item {
+        margin: 5px 0;
+        
+        input[type="checkbox"] {
+          margin-right: 5px;
         }
       }
+    }
     
-      &.toggle {
-        display: flex;
-        align-items: center;
-        gap: 8px;
+    &.date-range {
+      display: flex;
+      gap: 10px;
+      
+      .compact-date {
+        flex: 1;
+      }
+    }
+    
+    &.toggle {
+      display: flex;
+      align-items: center;
+      
+      .clr-toggle {
+        margin-right: 10px;
+      }
+      
+      .toggle-label {
+        margin: 0;
       }
     }
   }
-  
-  .compact-input,
-  .compact-select,
-  .compact-date {
-    width: 100%;
-    padding: 8px 12px;
-    font-size: 14px;
-    border: 1px solid #d7d7d7;
-    border-radius: 4px;
-    background: #ffffff;
-    
-    &:focus {
-      outline: none;
-      border-color: #0072ce;
-      box-shadow: 0 0 0 1px #0072ce;
-    }
-  }
-  
-  .compact-select {
-    height: 36px;
-  }
-  
-  .multiselect-container {
-    max-height: 200px;
-    overflow-y: auto;
-    border: 1px solid #d7d7d7;
-    border-radius: 4px;
-    padding: 10px;
-    background: #ffffff;
-  }
-  
-  .checkbox-group {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  
-  .checkbox-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    
-    .clr-checkbox {
-      width: 16px;
-      height: 16px;
-      cursor: pointer;
-    }
-    
-    .checkbox-label {
-      font-size: 14px;
-      margin: 0;
-      cursor: pointer;
-      color: #333333;
-    }
-  }
-  
-  .toggle-label {
-    margin: 0;
-    font-size: 14px;
-    color: #333333;
-  }
-  
-  .clr-toggle {
-    margin: 0;
-  }
-}
-
-// Host styling
-:host {
-  display: block;
 }

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts

@@ -20,24 +20,20 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
   availableFilters: Filter[] = [];
   availableKeys: string[] = [];
   availableValues: string[] = [];
-  isExpanded: boolean = false; // Add expansion state
   
   constructor(
     private filterService: FilterService
-  ) {
-    console.log('=== COMPACT FILTER RUNNER CONSTRUCTOR CALLED ===');
-  }
+  ) { }
 
   ngOnInit(): void {
-    console.log('=== COMPACT FILTER RUNNER DEBUG INFO ===');
-    console.log('Component initialized with inputs:');
-    console.log('- filterKey:', this.filterKey);
-    console.log('- filterType:', this.filterType);
-    console.log('- filterOptions:', this.filterOptions);
-    console.log('- filterLabel:', this.filterLabel);
-    console.log('- apiUrl:', this.apiUrl);
-    console.log('- connection:', this.connection);
-    console.log('========================================');
+    console.log('CompactFilterRunnerComponent initialized with inputs:', {
+      filterKey: this.filterKey,
+      filterType: this.filterType,
+      filterOptions: this.filterOptions,
+      filterLabel: this.filterLabel,
+      apiUrl: this.apiUrl,
+      connection: this.connection
+    });
     
     // Register this filter with the filter service
     this.registerFilter();
@@ -45,35 +41,24 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
     // Subscribe to filter definitions to get available filters
     this.filterService.filters$.subscribe(filters => {
       this.availableFilters = filters;
-      console.log('Available filters updated:', filters);
       this.updateSelectedFilter();
     });
     
     // Subscribe to filter state changes
     this.filterService.filterState$.subscribe(state => {
-      console.log('Filter state updated:', state);
       if (this.selectedFilter && state.hasOwnProperty(this.selectedFilter.id)) {
         this.filterValue = state[this.selectedFilter.id];
-        console.log('Filter value updated for', this.selectedFilter.id, ':', this.filterValue);
       }
     });
   }
   
   ngOnChanges(changes: SimpleChanges): void {
-    console.log('=== COMPACT FILTER RUNNER CHANGES DEBUG ===');
-    console.log('Component inputs changed:', changes);
+    console.log('CompactFilterRunnerComponent inputs changed:', changes);
     
     // If filterKey or filterType changes, re-register the filter
     if (changes.filterKey || changes.filterType || changes.filterOptions) {
-      console.log('Re-registering filter due to input changes');
       this.registerFilter();
     }
-    console.log('==========================================');
-  }
-  
-  // Toggle filter expansion
-  toggleFilter(): void {
-    this.isExpanded = !this.isExpanded;
   }
   
   // Register this filter with the filter service
@@ -83,7 +68,6 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
     if (this.filterKey) {
       // Get current filter values from the service
       const currentFilterValues = this.filterService.getFilterValues();
-      console.log('Current filter values from service:', currentFilterValues);
       
       // Create a filter definition for this compact filter
       const filterDef: Filter = {
@@ -99,11 +83,9 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
       
       // Get current filters
       const currentFilters = this.filterService.getFilters();
-      console.log('Current filters from service:', currentFilters);
       
       // Check if this filter is already registered
       const existingFilterIndex = currentFilters.findIndex(f => f.id === filterDef.id);
-      console.log('Existing filter index:', existingFilterIndex);
       
       if (existingFilterIndex >= 0) {
         // Preserve the existing filter configuration
@@ -148,20 +130,15 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
       // Update the selected filter reference
       this.selectedFilter = filterDef;
       console.log('Selected filter set to:', this.selectedFilter);
-    } else {
-      console.log('No filterKey provided, skipping filter registration');
     }
   }
   
   updateSelectedFilter(): void {
-    console.log('Updating selected filter. Filter key:', this.filterKey, 'Available filters:', this.availableFilters);
     if (this.filterKey && this.availableFilters.length > 0) {
       this.selectedFilter = this.availableFilters.find(f => f.field === this.filterKey) || null;
-      console.log('Found selected filter:', this.selectedFilter);
       if (this.selectedFilter) {
         // Get current value for this filter from the service
         const currentState = this.filterService.getFilterValues();
-        console.log('Current state from service:', currentState);
         const filterValue = currentState[this.selectedFilter.id];
         if (filterValue !== undefined) {
           this.filterValue = filterValue;
@@ -226,20 +203,4 @@ export class CompactFilterRunnerComponent implements OnInit, OnChanges {
     // Emit the change
     this.onFilterValueChange(this.filterValue);
   }
-  
-  // Add method to check if an option is selected for checkboxes (needed for proper UI rendering)
-  isOptionSelected(option: string): boolean {
-    console.log('Checking if option is selected:', option, 'Current filter value:', this.filterValue);
-    if (!this.filterValue) {
-      return false;
-    }
-    
-    // Ensure filterValue is an array for multiselect
-    if (!Array.isArray(this.filterValue)) {
-      this.filterValue = [];
-      return false;
-    }
-    
-    return this.filterValue.includes(option);
-  }
 }

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.html

@@ -26,9 +26,6 @@
         <!-- <span><button class="btn btn-primary" (click)="Export(item.name)">Export</button></span> -->
         <!-- <span><app-line-runner (buttonClicked)="generatePDFFile()"></app-line-runner></span> -->
         <!-- <h4 style="margin-top: 10px; margin-left: 10px;">{{ item.charttitle }}</h4> -->
-        
-       
-        
         <ndc-dynamic class="no-drag" 
                      [ndcDynamicComponent]="item.component" 
                      [ndcDynamicInputs]="getComponentInputs(item)"

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.ts

@@ -311,18 +311,12 @@ dashboard_name = "Dashtest";
     
     // Compact Filter specific inputs
     if (item.name === 'Compact Filter') {
-      console.log('=== COMPACT FILTER INPUTS DEBUG ===');
-      console.log('Item data for compact filter:', item);
-      
       if (item.filterKey !== undefined) inputs.filterKey = item.filterKey;
       if (item.filterType !== undefined) inputs.filterType = item.filterType;
       if (item.filterLabel !== undefined) inputs.filterLabel = item.filterLabel;
       if (item.filterOptions !== undefined) inputs.filterOptions = item.filterOptions;
       if (item.table !== undefined) inputs.apiUrl = item.table; // Use table as API URL for compact filter
       if (item.connection !== undefined) inputs.connection = item.connection ? parseInt(item.connection, 10) : undefined;
-      
-      console.log('Final inputs for compact filter:', inputs);
-      console.log('==============================');
     }
     
     // Grid View specific inputs