add tooltip for more information about a concept constraint in explore

src/app/models/constraint-models/concept.ts

@@ -21,6 +21,8 @@ export class Concept {
   private _code: string;
   private _name: string;
   private _fullName: string;
+  private _comment: string;
+
   private _encryptionDescriptor?: MedcoEncryptionDescriptor;
   private _modifier?: Modifier;
   private _unit?: string;
@@ -104,6 +106,13 @@ export class Concept {
     this._code = value;
   }
 
+  get comment(): string {
+    return this._comment;
+  }
+  set comment(value: string) {
+    this._comment = value;
+  }
+
   get name(): string {
     return this._name;
   }

src/app/models/tree-models/tree-node.ts

@@ -29,6 +29,9 @@ export class TreeNode implements PrimeNgTreeNode {
   // number of subject (possibly undefined) associated with this node
   subjectCount: number;
 
+  // A comment stored in the database precising some informations about this tree-node's content.
+  comment: string;
+
 
   // flag to signal if the children were requested to the backend
   childrenAttached: boolean;

src/app/modules/gb-explore-module/constraint-components/gb-concept-constraint/gb-concept-constraint.component.html

@@ -35,12 +35,14 @@
     <input type="number" [step]="integerOrFloat" [min]="positive" class="col-sm-4" placeholder="max:{{maxLimit}}"
            [(ngModel)]="maxVal">
     <span>&nbsp;{{unit}}</span>
+    <gb-tooltip></gb-tooltip>
   </div>
 
   <div *ngIf="(numericalOperatorState !== null) && !isBetween() " class="d-inline-block">
     <input type="number" [step]="integerOrFloat" [min]="positive" class="col-sm-8"
            [(ngModel)]="equalVal">
     <span>&nbsp;{{unit}}</span>
+    <gb-tooltip></gb-tooltip>
   </div>
 </div>
 <!-- if the concept is TEXT -->
@@ -49,8 +51,9 @@
   <p-dropdown [(ngModel)]="textOperatorState" [options]="textOperation" dropdownIcon="pi pi-caret-down white-color" (onChange)="changeTextOperator($event)"></p-dropdown>
   <span>&nbsp;&nbsp;&nbsp;</span>
   <div *ngIf="(textOperatorState !== null)" class="d-inline-block">
-    <input type="text" class="col-sm-12" placeholder="expression"
-           [(ngModel)]="textValue">
+    <input type="text" class="col-sm-12" style="width: auto;" placeholder="expression"
+           [(ngModel)]="textValue"> <!-- Width auto so that the tooltip displays nicely on the right side instead of below this -->
+    <gb-tooltip></gb-tooltip>
   </div>
 
 </div>
@@ -92,6 +95,8 @@
     </div>
   </div>
 
+
+
   <!-- ---------- more options ----------
 
   <div *ngIf="!sensitive" class="gb-constraint-child-container" style="margin-top: 2px">

src/app/modules/gb-explore-module/constraint-components/gb-concept-constraint/gb-concept-constraint.component.ts

@@ -25,6 +25,7 @@ import {TreeNode} from '../../../../models/tree-models/tree-node';
 import {TextOperator} from '../../../../models/constraint-models/text-operator';
 import {NumericalOperator} from '../../../../models/constraint-models/numerical-operator';
 
+
 @Component({
   selector: 'gb-concept-constraint',
   templateUrl: './gb-concept-constraint.component.html',

src/app/modules/gb-explore-module/constraint-components/gb-concept-constraint/gb-tooltip/gb-tooltip.component.html

@@ -0,0 +1,2 @@
+
+<i *ngIf="canDisplay()" style="margin-left: 1em; color: var(--gb-clinical-green);" class="fa fa-info-circle" tooltipPosition="top" pTooltip="Informations: {{infos}}"></i>

src/app/modules/gb-explore-module/constraint-components/gb-concept-constraint/gb-tooltip/gb-tooltip.component.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright 2017 - 2018  The Hyve B.V.
+ * Copyright 2020 - 2021 CHUV
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Component, Inject, Input, OnInit } from "@angular/core";
+import { ValueType } from "src/app/models/constraint-models/value-type";
+import { GbConceptConstraintComponent } from "../gb-concept-constraint.component";
+
+@Component({
+  selector: 'gb-tooltip',
+  templateUrl: './gb-tooltip.component.html',
+  styleUrls: ['./gb-tooltip.component.css']
+})
+export class GbTooltipComponent implements OnInit {
+
+  infos: string;
+
+  constructor(@Inject(GbConceptConstraintComponent) private parentConcept: GbConceptConstraintComponent) {
+    this.infos = this.parentConcept.selectedConcept.comment
+  }
+
+  canDisplay(): boolean {
+    return (this.parentConcept.constraintConcept.type === ValueType.TEXT && this.parentConcept.textOperatorState !== null) ||
+      (this.parentConcept.constraintConcept.type === ValueType.NUMERICAL && this.parentConcept.numericalOperatorState !== null);
+  }
+
+
+  ngOnInit() {
+  }
+}

src/app/modules/gb-explore-module/gb-explore.component.html

@@ -12,7 +12,7 @@
           <span class="gb-data-selection-emphasis-text">{{globalCount | async}} subjects</span>
         </span>
         <span id="save-box">
-          <input [(ngModel)]="cohortName" pInputText (keydown)="saveIfEnter($event)" placeholder="Cohort name" (drop)="preventDefault($event)"/>
+          <input [(ngModel)]="cohortName" pInputText (keydown)="saveIfEnter($event)" placeholder="Cohort name" (drop)="preventDefault($event)" pTooltip="TEST"/>
           <span>&nbsp;</span>
           <button
             class="btn btn-outline-primary btn-sm gb-data-selection-overview-panel-btn {{lastSuccessfulSet ?  '' : 'gb-explore-waiting-cohort'}}"

src/app/modules/gb-explore-module/gb-explore.module.ts

@@ -25,6 +25,8 @@ import {PanelModule} from 'primeng';
 import {MultiSelectModule} from 'primeng';
 import {GbSelectionModule} from './gb-selection-component/gb-selection.module';
 
+import {TooltipModule} from 'primeng/tooltip';
+
 @NgModule({
   imports: [
     CommonModule,
@@ -37,7 +39,8 @@ import {GbSelectionModule} from './gb-selection-component/gb-selection.module';
     CalendarModule,
     PanelModule,
     MultiSelectModule,
-    GbSelectionModule
+    GbSelectionModule,
+    TooltipModule,
   ],
   exports: [
     RouterModule,

src/app/modules/gb-explore-module/gb-selection-component/gb-selection.module.ts

@@ -5,7 +5,7 @@ import { GbConstraintComponent } from '../constraint-components/gb-constraint/gb
 import { GbConceptConstraintComponent } from '../constraint-components/gb-concept-constraint/gb-concept-constraint.component';
 import { GbGenomicAnnotationConstraintComponent } from '../constraint-components/gb-genomic-annotation-constraint/gb-genomic-annotation-constraint.component';
 import { GbSelectionComponent } from './gb-selection.component';
-import { AccordionModule } from 'primeng';
+import { AccordionModule, TooltipModule } from 'primeng';
 import { InputNumberModule } from 'primeng';
 import { DropdownModule } from 'primeng';
 import { FormsModule } from '@angular/forms';
@@ -14,6 +14,7 @@ import { CheckboxModule } from 'primeng';
 import { CalendarModule } from 'primeng';
 import { PanelModule } from 'primeng';
 import { MultiSelectModule } from 'primeng';
+import { GbTooltipComponent } from '../constraint-components/gb-concept-constraint/gb-tooltip/gb-tooltip.component';
 
 
 
@@ -22,6 +23,7 @@ import { MultiSelectModule } from 'primeng';
     GbCombinationConstraintComponent,
     GbConstraintComponent,
     GbConceptConstraintComponent,
+    GbTooltipComponent,
     GbGenomicAnnotationConstraintComponent,
     GbSelectionComponent
   ],
@@ -31,17 +33,18 @@ import { MultiSelectModule } from 'primeng';
     FormsModule,
     InputNumberModule,
     AutoCompleteModule,
-    DropdownModule,
     CheckboxModule,
     CalendarModule,
     DropdownModule,
     PanelModule,
     MultiSelectModule,
+    TooltipModule,
   ],
   exports: [
     GbCombinationConstraintComponent,
     GbConstraintComponent,
     GbConceptConstraintComponent,
+    GbTooltipComponent,
     GbGenomicAnnotationConstraintComponent,
     GbSelectionComponent
   ]

src/app/services/api/medco-node/explore-search.service.ts

@@ -54,6 +54,7 @@ export class ExploreSearchService {
           treeNode.description = `${treeNodeObj['displayName']} (${treeNodeObj['code']})`;
           treeNode.conceptCode = treeNodeObj['code'];
           treeNode.metadata = treeNodeObj['metadata'];
+          treeNode.comment = treeNodeObj['comment'];
           // leaf in the database is not a leaf in the tree, as modifiers
           // are displayed as children
           treeNode.leaf = false;
@@ -110,6 +111,7 @@ export class ExploreSearchService {
           treeNode.metadata = treeNodeObj['metadata']
           treeNode.leaf = false;
           treeNode.encryptionDescriptor = treeNodeObj['medcoEncryption']
+          treeNode.comment = treeNodeObj['comment'];
 
           treeNode.nodeType = this.nodeType(treeNodeObj['type'] as string);
           treeNode.valueType = this.valueType(treeNode.nodeType, treeNode.metadata);

src/app/services/tree-node.service.ts

@@ -201,6 +201,7 @@ export class TreeNodeService {
     concept.code = treeNode.conceptCode;
     concept.fullName = treeNode.path;
     concept.name = treeNode.name;
+    concept.comment = treeNode.comment;
     concept.encryptionDescriptor = treeNode.encryptionDescriptor;
     return concept;
   }