corrected styles

src/app/webapp-common/pipelines/edit-pipeline-page/pipeline-step-info/pipeline-step-info.component.html

@@ -4,31 +4,20 @@
   </mat-expansion-panel-header>
   <div class="panel-body" *ngIf="step">
     <header *ngIf="step; else controllerHeader">
-      <i
+      <i class="al-icon lg" [class]="
-        class="al-icon lg"
-        [class]="
           'al-ico-type-' +
           (step.data.experimentDetails?.type
             ? step.data.experimentDetails.type.toString().replace('_', '-')
             : 'training')
-        "
+        "></i>
-      ></i>
       <div class="name" [smTooltip]="step.data.name" smShowTooltipIfEllipsis>
         {{ step.data?.name }}
       </div>
       <div class="d-flex justify-content-between">
-        <div
+        <div class="status" [class]="step.data.experimentDetails?.status" data-id="infoStepStatus">
-          class="status"
-          [class]="step.data.experimentDetails?.status"
-          data-id="infoStepStatus"
-        >
           {{ step.data.experimentDetails?.status }}
         </div>
-        <sm-id-badge
+        <sm-id-badge class="ms-1" [id]="step.id" (copied)="copyToClipboard()"></sm-id-badge>
-          class="ms-1"
-          [id]="step.id"
-          (copied)="copyToClipboard()"
-        ></sm-id-badge>
       </div>
     </header>
     <ng-template #controllerHeader>
@@ -39,103 +28,61 @@
     <ng-container>
       <div class="section">
         <div class="header">PARAMETERS</div>
-        <ng-container
+        <ng-container *ngFor="
-          *ngFor="
             let section of step?.data?.parameters.slice(0, 7);
             let index = index
-          "
+          ">
-        >
           <div class="param">
             <div class="key" [smTooltip]="section.name" smShowTooltipIfEllipsis>
               {{ section.name }}
             </div>
             <div class="value">
-              <input
+              <input [matAutocomplete]="auto" [(ngModel)]="section['value']" placeholder="Parameter"
-                [matAutocomplete]="auto"
+                (ngModelChange)="paramsChanged()" name="parameterKey-{{ section.name }}-{{ index }}" matInput required
-                [(ngModel)]="section['value']"
+                #optsInput="ngModel" />
-                placeholder="Parameter"
+              <mat-autocomplete #auto="matAutocomplete" class="light-theme" [displayWith]="displayFn"
-                (ngModelChange)="paramsChanged()"
+                (opened)="setIsAutoCompleteOpen(true)" (closed)="setIsAutoCompleteOpen(false)" autoActiveFirstOption>
-                name="parameterKey-{{ section.name }}-{{ index }}"
+                <mat-option *ngFor="let option of ioOptions; trackBy: trackByValue" [value]="option.value"
-                matInput
+                  [smTooltip]="option.label + ' (' + option.type + ')'" class="option"
-                required
+                  [matTooltipPosition]="'after'"
-                #optsInput="ngModel"
+                  (onSelectionChange)="paramSelected($event)">
-              />
+                  <div [smSearchText]="optsInput.value" style="text-overflow: ellipsis; overflow: hidden">
-              <mat-autocomplete
-                #auto="matAutocomplete"
-                class="light-theme"
-                [displayWith]="displayFn"
-                (opened)="setIsAutoCompleteOpen(true)"
-                (closed)="setIsAutoCompleteOpen(false)"
-                autoActiveFirstOption
-              >
-                <mat-option
-                  *ngFor="let option of ioOptions; trackBy: trackByValue"
-                  [value]="option.value"
-                  [smTooltip]="option.label + ' (' + option.type + ')'"
-                  class="option"
-                  (onSelectionChange)="paramSelected($event)"
-                >
-                  <div
-                    [smSearchText]="optsInput.value"
-                    style="text-overflow: ellipsis; overflow: hidden"
-                  >
                     {{ option.label }}
                   </div>
                 </mat-option>
-                <mat-option
+                <mat-option disabled style="height: 0; min-height: 0"></mat-option>
-                  disabled
-                  style="height: 0; min-height: 0"
-                ></mat-option>
               </mat-autocomplete>
             </div>
 
             <!-- <div class="value" [smTooltip]="section.value" smShowTooltipIfEllipsis>{{section.value}}</div> -->
           </div>
         </ng-container>
-        <div
+        <div *ngIf="step?.data?.parameters?.length > 7" class="show-more-text"
-          *ngIf="step?.data?.parameters?.length > 7"
+          (click)="showMoreClicked(step?.data?.parameters)">
-          class="show-more-text"
-          (click)="showMoreClicked(step?.data?.parameters)"
-        >
           show more
         </div>
       </div>
       <div class="section">
         <div class="header">METRICS</div>
-        <ng-container
+        <ng-container *ngIf="
-          *ngIf="
             (step?.data?.experimentDetails?.last_metrics | keyvalue)?.length >
               0;
             else emptyMsg
-          "
+          ">
-        >
+          <ng-container *ngFor="
-          <ng-container
-            *ngFor="
               let metric of step?.data?.experimentDetails.last_metrics
                 | keyvalue
-            "
+            ">
-          >
+            <div *ngFor="
-            <div
-              *ngFor="
                 let variant of $any($any(metric.value) | keyvalue)
                   | filterMonitorMetric
-              "
+              " class="param">
-              class="param"
+              <div class="key" [smTooltip]="$any(variant.value).metric" smShowTooltipIfEllipsis>
-            >
-              <div
-                class="key"
-                [smTooltip]="$any(variant.value).metric"
-                smShowTooltipIfEllipsis
-              >
                 {{ $any(variant.value).metric }}/{{
-                  $any(variant.value).variant
+                $any(variant.value).variant
                 }}
               </div>
-              <div
+              <div class="value" [smTooltip]="$any(variant.value).value" smShowTooltipIfEllipsis>
-                class="value"
-                [smTooltip]="$any(variant.value).value"
-                smShowTooltipIfEllipsis
-              >
                 {{ $any(variant.value).value }}
               </div>
             </div>
@@ -144,27 +91,22 @@
       </div>
       <div class="section">
         <div class="header">ARTIFACTS</div>
-        <ng-container
+        <ng-container *ngIf="
-          *ngIf="
             step?.data?.experimentDetails?.execution?.artifacts?.length > 0;
             else emptyMsg
-          "
+          ">
-        >
+          <div *ngFor="
-          <div
-            *ngFor="
               let artifact of step?.data?.experimentDetails?.execution
                 .artifacts;
               trackBy: trackByFn
-            "
+            " class="param">
-            class="param"
-          >
             <div class="key" [smTooltip]="artifact.key" smShowTooltipIfEllipsis>
               {{ artifact.key }}
             </div>
             <div class="value">
               {{
-                (artifact?.content_size | filesize : fileSizeConfigStorage) ||
+              (artifact?.content_size | filesize : fileSizeConfigStorage) ||
-                  ""
+              ""
               }}
             </div>
           </div>
@@ -172,16 +114,11 @@
       </div>
       <div class="section">
         <div class="header">MODELS</div>
-        <ng-container
+        <ng-container *ngIf="
-          *ngIf="
             step?.data?.experimentDetails?.models?.output?.length > 0;
             else emptyMsg
-          "
+          ">
-        >
+          <div *ngFor="let model of step?.data?.experimentDetails?.models?.output" class="param">
-          <div
-            *ngFor="let model of step?.data?.experimentDetails?.models?.output"
-            class="param"
-          >
             <div class="key">
               {{ model.name || model.model.name }}
               <!-- <a [routerLink]="['/projects', model.model.project.id, 'models', model.model.id]"
@@ -197,11 +134,7 @@
     </ng-template>
   </div>
   <footer *ngIf="step?.id">
-    <button
+    <button class="btn btn-icon g-btn d-flex align-items-center" smTooltip="Delete step" (click)="deleteClicked()">
-      class="btn btn-icon g-btn d-flex align-items-center"
-      smTooltip="Delete step"
-      (click)="deleteClicked()"
-    >
       <i [class]="'al-icon me-2 ' + icons.REMOVE + ' sm-md'"></i>
       DELETE STEP
     </button>

src/app/webapp-common/pipelines/pipeline-parameters-dialog/pipeline-parameters-dialog.component.html

@@ -2,44 +2,21 @@
 <!-- eslint-disable @angular-eslint/template/label-has-associated-control -->
 <sm-dialog-template header="PARAMETERS">
   <div class="dialog-content">
-    <ng-container
+    <ng-container *ngFor="let section of parameters; let index = index" class="w-100 d-flex">
-      *ngFor="let section of parameters; let index = index"
-      class="w-100 d-flex"
-    >
       <div class="param">
         <div class="key" [smTooltip]="section.name" smShowTooltipIfEllipsis>
           {{ section.name }}
         </div>
         <div class="value">
-          <input
+          <input class="form-control" [matAutocomplete]="auto" [(ngModel)]="section['value']" placeholder="Parameter"
-            [matAutocomplete]="auto"
+            (ngModelChange)="paramsChanged()" name="parameterKey-{{ section.name }}-{{ index }}" matInput required
-            [(ngModel)]="section['value']"
+            #optsInput="ngModel" />
-            placeholder="Parameter"
+          <mat-autocomplete #auto="matAutocomplete" class="light-theme" [displayWith]="displayFn"
-            (ngModelChange)="paramsChanged()"
+            (opened)="setIsAutoCompleteOpen(true)" (closed)="setIsAutoCompleteOpen(false)" autoActiveFirstOption>
-            name="parameterKey-{{ section.name }}-{{ index }}"
+            <mat-option *ngFor="let option of ioOptions; trackBy: trackByValue" [value]="option.value"
-            matInput
+              [smTooltip]="option.label + ' (' + option.type + ')'" [matTooltipPosition]="'after'" class="option"
-            required
+              (onSelectionChange)="paramSelected($event)">
-            #optsInput="ngModel"
+              <div [smSearchText]="optsInput.value" style="text-overflow: ellipsis; overflow: hidden">
-          />
-          <mat-autocomplete
-            #auto="matAutocomplete"
-            class="light-theme"
-            [displayWith]="displayFn"
-            (opened)="setIsAutoCompleteOpen(true)"
-            (closed)="setIsAutoCompleteOpen(false)"
-            autoActiveFirstOption
-          >
-            <mat-option
-              *ngFor="let option of ioOptions; trackBy: trackByValue"
-              [value]="option.value"
-              [smTooltip]="option.label + ' (' + option.type + ')'"
-              class="option"
-              (onSelectionChange)="paramSelected($event)"
-            >
-              <div
-                [smSearchText]="optsInput.value"
-                style="text-overflow: ellipsis; overflow: hidden"
-              >
                 {{ option.label }}
               </div>
             </mat-option>

src/app/webapp-common/pipelines/pipeline-parameters-dialog/pipeline-parameters-dialog.component.scss

@@ -2,6 +2,8 @@
 .dialog-content {
   max-height: 400px;
   overflow-y: auto;
+  padding-left: 14px;
+  padding-right: 14px;
 }
 .param {
   display: flex;
@@ -15,8 +17,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     margin-right: 10px;
-    font-weight: bold; /* Making label bold */
+   
-    font-size: 16px; /* Increasing font size */
   }
 
   .value {
@@ -25,9 +26,9 @@
     flex-direction: column;
   }
 
-  input {
+  // input {
-    width: 100%;
+  //   width: 100%;
-    border: 1px solid $grey-purple; /* Adding border around input field */
+  //   border: 1px solid $grey-purple; /* Adding border around input field */
-    padding: 8px; /* Adding padding to input field */
+  //   padding: 8px; /* Adding padding to input field */
-  }
+  // }
 }