added database settings

app/ui/.gitignore

@@ -0,0 +1,69 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
+# Dependencies
+node_modules/
+/.pnp
+.pnp.js
+
+# Testing
+/coverage
+
+# Production
+/build
+/dist
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Debug logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# IDE and editor files
+.idea/
+.vscode/
+*.swp
+*.swo
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history

app/ui/.vite/deps/_metadata.json

@@ -0,0 +1,8 @@
+{
+  "hash": "18fe90dd",
+  "configHash": "6374af2f",
+  "lockfileHash": "7d547d1c",
+  "browserHash": "675a502b",
+  "optimized": {},
+  "chunks": {}
+}

app/ui/.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

app/ui/src/components/ButtonsBar/ButtonsBar.module.css

@@ -0,0 +1,37 @@
+.buttonsContainer {
+  display: flex;
+  gap: 8px;
+  padding: 4px;
+  background-color: transparent;
+  border-radius: 8px;
+}
+
+.button {
+  padding: 4px 16px;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: var(--text-color-inactive);
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s ease-in-out;
+  outline: none;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  border: var(--border);
+  font-family: "SNPro-bold";
+  -webkit-tap-highlight-color: transparent;
+}
+
+.button:hover {
+  background-color: var(--button-color-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.button:focus {
+  outline: none;
+}
+
+.button:focus-visible {
+  outline: none;
+}

app/ui/src/components/ButtonsBar/ButtonsBar.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import styles from './ButtonsBar.module.css';
+
+interface ButtonsBarProps {
+  width: string | number;
+  height: string | number;
+  buttons: string[];
+  actions: (() => void)[];
+}
+
+export const ButtonsBar: FC<ButtonsBarProps> = ({ width, height, buttons, actions }) => {
+  return (
+    <div
+      className={styles.buttonsContainer}
+      style={{
+        width: typeof width === 'number' ? `${width}px` : width,
+        height: typeof height === 'number' ? `${height}px` : height,
+      }}
+    >
+      {buttons.map((button, index) => (
+        <button
+          key={index}
+          className={styles.button}
+          onClick={() => actions[index]()}
+        >
+          {button}
+        </button>
+      ))}
+    </div>
+  );
+};

app/ui/src/components/CohortViewer/CohortDataService.ts

@@ -2,6 +2,7 @@ import { TableData, ColumnDefinition, TableRow } from './tableTypes';
 import { PhenexDirectoryParserService } from '../../services/PhenexDirectoryParserService';
 import { DirectoryReaderWriterService } from '../LeftPanel/DirectoryReaderWriterService';
 import { executeStudy } from '../../api/execute_cohort/route';
+import { MapperDomains } from '../../types/mappers'
 
 // export abstract class CohortDataService {
 export class CohortDataService {
@@ -151,6 +152,39 @@ export class CohortDataService {
     this._table_data = this.tableDataFromCohortData();
   }
 
+  private listeners: Array<() => void> = [];
+
+  public addListener(listener: () => void) {
+    this.listeners.push(listener);
+  }
+
+  public removeListener(listener: () => void) {
+    const index = this.listeners.indexOf(listener);
+    if (index > -1) {
+      this.listeners.splice(index, 1);
+    }
+  }
+
+  private notifyListeners() {
+    this.listeners.forEach(listener => listener());
+  }
+
+  public setDatabaseSettings(databaseConfig){
+    this._cohort_data.database_config = databaseConfig;
+    console.log(databaseConfig);
+
+    // Update domain values based on mapper type
+    const domainColumn = this.columns.find(col => col.field === 'domain');
+    if (domainColumn) {
+      domainColumn.cellEditorParams.values = MapperDomains[databaseConfig.mapper];
+    }
+
+    // Refresh table data to reflect the updated domain values
+    this._table_data = this.tableDataFromCohortData();
+    this.saveChangesToCohort();
+    this.notifyListeners(); // Notify listeners of the change
+  }
+
   public onCellValueChanged(event: any) {
     /*
     Update phenotype data with new value from grid editor
@@ -268,4 +302,5 @@ export class CohortDataService {
     this._cohort_name = this._cohort_data.name;
     this._table_data = this.tableDataFromCohortData();
   }
+
 }

app/ui/src/components/CohortViewer/CohortDatabaseSettings/CohortDatabaseSettings.module.css

@@ -0,0 +1,73 @@
+.container {
+  padding-left: 25px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 0px;
+}
+
+.sectionTitle {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--text-color-primary);
+  margin: 0;
+  font-family: "SNPro-bold";
+}
+
+.dropdown {
+  padding: 8px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background-color: var(--background-color-content);
+  color: var(--text-color-primary);
+  font-size: 14px;
+  width: 100%;
+  max-width: 424px;
+  border: var(--border);
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  background-size: 16px;
+}
+
+.inputFields {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.inputGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0px;
+}
+
+.inputLabel {
+  font-size: 12px;
+  color: var(--text-color-secondary);
+  font-family: "SNPro-bold";
+  margin-left: 12px;
+}
+
+.input {
+  padding: 8px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background-color: var(--background-color-content);
+  color: var(--text-color-primary);
+  font-size: 14px;
+  width: 100%;
+  max-width: 400px;
+  border: var(--border);
+}
+
+.input[type="password"] {
+  font-family: monospace;
+}