commit for backup

compose.yaml

@@ -39,7 +39,7 @@ services:
       DB_USER: postgres
       DB_PASSWORD: test
       ### Frontend ###
-      PUBLIC_HOST: http://localhost
+      PUBLIC_HOST: http://localhost:4200
       DQT_URL: http://data_quality_tool:8000
       ### Keycloak ###
       AUTHENTICATION: 1
@@ -53,12 +53,12 @@ services:
         condition: service_healthy
     restart: unless-stopped
 
-  frontend:
-    build:
-      context: ./frontend
-      dockerfile: Dockerfile
-    container_name: frontend
-    ports:
-      - "80:80" # Expose the frontend on port 80
-    depends_on:
-      - backend
+#  frontend:
+#    build:
+#      context: ./frontend
+#      dockerfile: Dockerfile
+#    container_name: frontend
+#    ports:
+#      - "80:80" # Expose the frontend on port 80
+#    depends_on:
+#      - backend

frontend/src/app/pages/data-models-page/data-model-selector/data-model-selector.component.ts

@@ -37,7 +37,6 @@ export class DataModelSelectorComponent implements OnChanges, OnInit {
 
   onDataModelChange(): void {
     if (this.selectedDataModel) {
-      console.log('Data Model Changed:', this.selectedDataModel);
       this.dataModelChange.emit(this.selectedDataModel);
     }
   }

frontend/src/app/pages/data-models-page/visualization/search-bar/search-bar.component.css

@@ -0,0 +1,138 @@
+.search-container {
+  position: relative;
+  width: fit-content;
+  margin: 10px auto;
+  font-family: 'Arial', sans-serif;
+}
+
+.search-icon-circle {
+  width: 28px;
+  height: 28px;
+  background-color: #34a853;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.search-icon-circle:hover {
+  transform: scale(1.1);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.search-icon-circle i {
+  color: #fff;
+  font-size: 12px;
+}
+
+.search-expanded {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 400px;
+  background: #fff;
+  padding: 6px;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  margin-top: 8px;
+}
+
+.search-input-container {
+  display: flex;
+  align-items: center;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+#search-bar {
+  flex: 2;
+  padding: 4px 8px;
+  font-size: 12px;
+  border: none;
+  outline: none;
+  height: 24px;
+}
+
+.inline-filters {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px;
+  background-color: #f9f9f9;
+}
+.inline-filters select {
+  padding: 2px 4px; /* Reduced padding */
+  font-size: 10px;
+  color: #555;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #fff;
+  cursor: pointer;
+  height: 24px; /* Explicit height to match other elements */
+  line-height: 1.2; /* Align content vertically */
+  box-sizing: border-box; /* Consistent size calculation */
+  transition: background-color 0.3s ease;
+}
+
+.inline-filters select:hover {
+  background-color: #f1fbf2;
+  border-color: #34a853;
+}
+
+
+.suggestions-container {
+  position: absolute;
+  top: calc(100% + 1px);
+  left: 0;
+  width: 105%;
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.suggestions-container ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.suggestions-container li {
+  padding: 4px 6px;
+  font-size: 10px;
+  color: #333;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.suggestions-container li:hover {
+  background-color: #e8f5e9;
+  color: #34a853;
+}
+
+.no-results {
+  padding: 6px;
+  text-align: center;
+  color: #888;
+  font-size: 10px;
+}
+
+.suggestions-container::-webkit-scrollbar {
+  width: 4px;
+}
+
+.suggestions-container::-webkit-scrollbar-track {
+  background: #f9f9f9;
+}
+
+.suggestions-container::-webkit-scrollbar-thumb {
+  background-color: #34a853;
+  border-radius: 6px;
+  border: 1px solid #f9f9f9;
+}

frontend/src/app/pages/data-models-page/visualization/search-bar/search-bar.component.html

@@ -0,0 +1,55 @@
+<div class="search-container">
+  <!-- Circular Button -->
+  <div
+    *ngIf="!isSearchExpanded"
+    class="search-icon-circle"
+    (click)="expandSearch($event)"
+  >
+    <i class="fas fa-search"></i>
+  </div>
+
+  <!-- Search Bar with Integrated Filters -->
+  <div *ngIf="isSearchExpanded" class="search-expanded">
+    <div class="search-input-container">
+      <input
+        type="text"
+        id="search-bar"
+        placeholder="Search..."
+        [(ngModel)]="searchQuery"
+        (focus)="onSearchFocus()"
+        (input)="handleSearch(searchQuery)"
+      />
+      <!-- Inline Filters -->
+      <div class="inline-filters">
+        <select [(ngModel)]="filterType" (change)="applyFilter(filterType)">
+          <option value="variables">Variables</option>
+          <option value="groups">Groups</option>
+        </select>
+        <div *ngIf="filterType === 'variables'" class="additional-filter">
+          <select [(ngModel)]="variableTypeFilter" (change)="applyVariableTypeFilter(variableTypeFilter)">
+            <option value="">All Types</option>
+            <option *ngFor="let type of variableTypes" [value]="type">{{ type }}</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <!-- Search Suggestions -->
+    <div *ngIf="searchSuggestionsVisible" class="suggestions-container">
+      <div *ngIf="filteredItems.length > 0; else noResults">
+        <ul>
+          <li *ngFor="let item of filteredItems"
+              (click)="onItemClick(item)"
+              [title]="generateTooltip(item)">
+            <strong>{{ item.name || item }}</strong>
+          </li>
+        </ul>
+      </div>
+
+      <!-- No Results Message -->
+      <ng-template #noResults>
+        <div class="no-results">No results found</div>
+      </ng-template>
+    </div>
+  </div>
+</div>