Merge pull request #170 from ldsec/more-flexible-legend

legend is not cropped any more

Author: mickmis

src/app/modules/gb-analysis-module/panel-components/gb-cohort-landing-zone/gb-cohort-landing-zone.component.ts

@@ -16,7 +16,7 @@ import { CohortService } from '../../../../services/cohort.service';
 import { ApiI2b2Timing } from '../../../../models/api-request-models/medco-node/api-i2b2-timing';
 import { QueryService } from '../../../../services/query.service';
 
-const nameMaxLength = 12
+const nameMaxLength = 10
 
 @Component({
   selector: 'gb-cohort-landing-zone',
@@ -103,7 +103,7 @@ export class GbCohortLandingZoneComponent implements OnInit {
       MessageHelper.alert('error', `Subgroup name ${this.name} can only contain alphanumerical symbols (without ö é ç ...) and underscores "_"`)
       return
     }
-    if (this.name.length === nameMaxLength) {
+    if (this.name.length > nameMaxLength) {
       MessageHelper.alert('error', `Subgroup name length cannot exceed ${nameMaxLength}`)
       return
     }

src/app/utilities/rendering/survival-curves-drawing.ts

@@ -62,9 +62,9 @@ export class SurvivalCurvesDrawing {
   _rectHeight: number
   _div: Selection<HTMLDivElement, unknown, HTMLElement, any>
   _groupButton = new Map<string, Selection<SVGCircleElement, unknown, HTMLElement, any>>()
+  _groupTitleText = new Map<string, Selection<SVGTextElement, unknown, HTMLElement, any>>()
 
   _legendInterval: number
-  _legendxPos: number
   _legendyPos: number
   _legendRadius: number
 
@@ -94,7 +94,6 @@ export class SurvivalCurvesDrawing {
     public grid: boolean = false
   ) {
 
-    this._legendxPos = (this.width - this.curves.curves.length) / 2.0 - 30
     this._legendyPos = -25
     this._legendRadius = 4
     this._legendInterval = 60
@@ -168,11 +167,13 @@ export class SurvivalCurvesDrawing {
     this._colorSet = scaleOrdinal<string, string>().domain(this.curves.curves.map(c => c.groupId)).range(colorRange)
 
     // interactive title
+    let textAndCircleOffset = 0
+
     this.curves.curves.forEach((curve => {
       this._groupButton.set(curve.groupId, this.toggleStyle(curve.groupId,
         this._svgRef.append('circle')
 
-          .attr('cx', this._legendxPos)
+          .attr('cx', textAndCircleOffset)
           .attr('cy', this._legendyPos)
           .attr('r', this._legendRadius)
           .on('mousedown', (() => {
@@ -204,15 +205,29 @@ export class SurvivalCurvesDrawing {
       )
       )
 
-      let title = curve.groupId.length > 8 ? curve.groupId.slice(0, 9) : curve.groupId
-      this._svgRef.append('text')
-        .attr('x', this._legendxPos + 7)
-        .attr('y', this._legendyPos + 5)
-        .text(title)
-      this._legendxPos += this._legendInterval
+      textAndCircleOffset += this._legendRadius + 5
+
+      let addedText = this._svgRef.append('text')
+        .attr('x', textAndCircleOffset)
+        .attr('y', this._legendyPos + 4)
+        .text(curve.groupId)
+
+      textAndCircleOffset += addedText.node().getComputedTextLength() + 15
+      this._groupTitleText.set(curve.groupId, addedText)
 
     }).bind(this))
 
+    // center buttons and titles
+
+    this._groupButton.forEach(value => {
+
+      value.attr('cx', +value.attr('cx') + (this.width - textAndCircleOffset) / 2.0 + this.margins * 3.0)
+    })
+
+    this._groupTitleText.forEach(value => {
+      value.attr('x', +value.attr('x') + (this.width - textAndCircleOffset) / 2.0 + this.margins * 3.0)
+    })
+
     // curve references
     let curvePerSe = this._svgRef.append('g').attr('id', 'resultDrawing')
     this.curves.curves.forEach(({ groupId }) => {