Improvements on visualization and added pop guide.

backend/config/application.tmpl

@@ -46,25 +46,21 @@ spring:
     default-property-inclusion: non_null
   security:
     oauth2:
-      resourceserver:
-        jwt:
-          issuer-uri: {{ .Env.KEYCLOAK_AUTH_URL }}realms/{{ .Env.KEYCLOAK_REALM }}
       client:
         registration:
           keycloak:
             authorization-grant-type: authorization_code
             client-id: {{ .Env.KEYCLOAK_CLIENT_ID }}
             client-secret: {{ .Env.KEYCLOAK_CLIENT_SECRET }}
-            redirect-uri: "http://localhost:8090/services/login/oauth2/code/keycloak"
             scope: openid
         provider:
           keycloak:
             issuer-uri: {{ .Env.KEYCLOAK_AUTH_URL }}realms/{{ .Env.KEYCLOAK_REALM }}
             user-name-attribute: preferred_username
 app:
   frontend:
-    auth-callback-url: {{ .Env.FRONTEND_URL }}/auth-callback
-    base-url: {{ .Env.FRONTEND_URL }}
+    auth-callback-url: {{ .Env.PUBLIC_HOST }}/auth-callback
+    base-url: {{ .Env.PUBLIC_HOST }}
   data_quality_tool:
     json-to-excel-url: {{ .Env.DQT_URL }}/json-to-excel
     excel-to-json-url: {{ .Env.DQT_URL }}/excel-to-json

compose.yaml

@@ -1,5 +1,3 @@
-
-
 services:
   data_quality_tool:
     build:
@@ -41,7 +39,7 @@ services:
       DB_USER: postgres
       DB_PASSWORD: test
       ### Frontend ###
-      FRONTEND_URL: http://localhost
+      PUBLIC_HOST: http://localhost
       DQT_URL: http://data_quality_tool:8000
       ### Keycloak ###
       AUTHENTICATION: 1

frontend/src/app/pages/account-page/account-page.component.css

@@ -3,98 +3,65 @@
 /* General Styling */
 .account-page {
   display: flex;
+  justify-content: center;
+  align-items: center;
   height: 100vh;
-  margin-top: 20px;
   font-family: 'Roboto', sans-serif;
-}
-
-.sidebar {
-  width: 250px;
-  background-color: #f5f5f5;
-  transition: width 0.3s ease-in-out;
-  overflow: hidden;
-  position: relative;
-}
-
-.sidebar.collapsed {
-  width: 4%; /* Collapsed width for smaller sidebar */
-}
-
-.sidebar-toggle {
-  cursor: pointer;
-  padding: 10px;
-  text-align: center;
-  background-color: #18a2b8;
-  color: white;
-}
-
-.sidebar-nav {
-  list-style: none;
-  padding: 20px 0;
+  background-color: #f4f6f8;
   margin: 0;
 }
 
-.sidebar-nav li {
-  margin: 10px 0;
-}
-
-.sidebar-nav li a {
-  display: flex;
-  align-items: center;
-  padding: 10px 15px;
-  text-decoration: none;
-  color: #333;
-  transition: background-color 0.2s;
-}
-
-.sidebar-nav li a i {
-  font-size: 1.5em;
-}
-
-.sidebar-nav li a span {
-  margin-left: 10px;
-}
-
-.sidebar-nav li a:hover, .sidebar-nav li a.active {
-  background-color: #18a2b8;
-  color: white;
-}
-
 /* Main Content Styling */
 .content {
-  flex-grow: 1;
+  width: 90%;
+  max-width: 600px;
   padding: 20px;
   background-color: #ffffff;
-  overflow-y: auto;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  text-align: center;
 }
 
 .account-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-bottom: 20px;
+}
+
+h1 {
+  font-size: 1.8rem;
+  color: #333333;
 }
 
 .sign-out-btn {
   background-color: #18a2b8;
-  color: white;
+  color: #ffffff;
   border: none;
-  padding: 10px 15px;
+  padding: 10px 20px;
+  font-size: 1rem;
   cursor: pointer;
   border-radius: 5px;
+  transition: background-color 0.3s;
+}
+
+.sign-out-btn:hover {
+  background-color: #12798e;
 }
 
 .account-details {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  margin: 20px 0;
+  gap: 15px;
 }
 
 .profile-picture {
-  width: 100px;
-  height: 100px;
+  width: 120px;
+  height: 120px;
   border-radius: 50%;
   overflow: hidden;
-  margin-right: 20px;
+  border: 2px solid #18a2b8;
 }
 
 .profile-picture img {
@@ -103,66 +70,36 @@
 }
 
 .user-info h2 {
-  margin: 0;
-}
-
-.personal-info {
-  margin-top: 30px;
-}
-
-.info-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 20px;
-  margin-top: 20px;
+  margin: 10px 0 5px;
+  font-size: 1.5rem;
+  color: #333333;
 }
 
-.info-card {
-  background-color: #f9f9f9;
-  border: 1px solid #eee;
-  border-radius: 8px;
-  padding: 15px;
-}
-
-.info-card h3 {
-  margin: 0 0 10px 0;
+.user-info p {
+  margin: 0;
+  font-size: 1rem;
+  color: #666666;
 }
 
 /* Responsive Design */
 @media (max-width: 768px) {
-  .sidebar {
-    position: absolute;
-    width: 80px;
-  }
-
-  .sidebar.collapsed {
-    width: 0;
-  }
-
   .content {
-    margin-left: 80px;
-  }
-
-  .sidebar-nav li a span {
-    display: none;
-  }
-
-  .info-cards {
-    grid-template-columns: 1fr; /* One column for mobile view */
+    width: 100%;
+    padding: 15px;
   }
 }
 
 @media (max-width: 480px) {
   .content {
-    margin-left: 0;
     padding: 10px;
   }
 
-  .sidebar {
-    width: 60px;
+  h1 {
+    font-size: 1.5rem;
   }
 
-  .sidebar.collapsed {
-    width: 0;
+  .sign-out-btn {
+    padding: 8px 15px;
+    font-size: 0.9rem;
   }
 }

frontend/src/app/pages/account-page/account-page.component.html

@@ -1,38 +1,5 @@
 <!-- account-page.component.html -->
 <div class="account-page">
-<!--  &lt;!&ndash; Sidebar Navigation &ndash;&gt;-->
-<!--  <div class="sidebar" [class.collapsed]="isCollapsed">-->
-<!--    <div class="sidebar-toggle" (click)="toggleSidebar()">-->
-<!--      <i class="fas fa-bars"></i>-->
-<!--    </div>-->
-<!--    <ul class="sidebar-nav">-->
-<!--      <li>-->
-<!--        <a routerLink="/account" routerLinkActive="active">-->
-<!--          <i class="fas fa-user"></i>-->
-<!--          <span *ngIf="!isCollapsed">Personal Info</span>-->
-<!--        </a>-->
-<!--      </li>-->
-<!--      <li>-->
-<!--        <a routerLink="/federation-management" routerLinkActive="active">-->
-<!--          <i class="fas fa-users"></i>-->
-<!--          <span *ngIf="!isCollapsed">Federation Management</span>-->
-<!--        </a>-->
-<!--      </li>-->
-<!--      <li>-->
-<!--        <a routerLink="/faq" routerLinkActive="active">-->
-<!--          <i class="fas fa-question-circle"></i>-->
-<!--          <span *ngIf="!isCollapsed">Support</span>-->
-<!--        </a>-->
-<!--      </li>-->
-<!--      <li>-->
-<!--        <a routerLink="/security-settings" routerLinkActive="active">-->
-<!--          <i class="fas fa-shield-alt"></i>-->
-<!--          <span *ngIf="!isCollapsed">Security Settings</span>-->
-<!--        </a>-->
-<!--      </li>-->
-<!--    </ul>-->
-<!--  </div>-->
-  <!-- Main Content Area -->
   <div class="content">
     <header class="account-header">
       <h1>Account Details</h1>
@@ -48,33 +15,4 @@ <h2>{{ userName }}</h2>
       </div>
     </section>
   </div>
-
-<!--    <section class="personal-info">-->
-<!--      <h2>Personal Information</h2>-->
-<!--      <p>Manage your personal information, including phone numbers and email addresses where you can be contacted.</p>-->
-<!--      <div class="info-cards">-->
-<!--        <div class="info-card">-->
-<!--          <h3>Name</h3>-->
-<!--          <p>{{ userName }}</p>-->
-<!--        </div>-->
-<!--        <div class="info-card">-->
-<!--          <h3>Areas of Expertise</h3>-->
-<!--          <p>Computer Science (BSc)</p>-->
-<!--          <p>Neuroscience (MSc)</p>-->
-<!--        </div>-->
-<!--        <div class="info-card">-->
-<!--          <h3>Country</h3>-->
-<!--          <p>Greece, Athens</p>-->
-<!--        </div>-->
-<!--        <div class="info-card">-->
-<!--          <h3>Language</h3>-->
-<!--          <p>English</p>-->
-<!--          <p>Greek</p>-->
-<!--        </div>-->
-<!--        <div class="info-card">-->
-<!--          <h3>Contact</h3>-->
-<!--          <p>{{ userEmail }}</p>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </section>-->
 </div>

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

@@ -18,14 +18,9 @@
 
 /* Dropdown container styling */
 .dropdown-container {
-  margin: 0; /* Ensure no extra space */
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
+  margin-bottom: 4px;
 }
 
-
-/* Node info container */
-.node-info-container {
-  margin-top: 10px; /* Add spacing above node info */
-}