diff --git a/e2e/modules/dataset/dataset.e2e-spec.ts b/e2e/modules/dataset/dataset.e2e-spec.ts index 0b2caebe..969f7750 100644 --- a/e2e/modules/dataset/dataset.e2e-spec.ts +++ b/e2e/modules/dataset/dataset.e2e-spec.ts @@ -100,7 +100,7 @@ describe('public dataset page', function() { expect(datasetPage.getSimilar_source().getText()).toContain('PAXDB'); datasetPage.clickGetMoreSimilar(); - expect(datasetPage.getSimilar().count()).toBe(15); + expect(datasetPage.getSimilar().count()).toBe(14); expect(datasetPage.getSimilar_title().getText()).toContain('M.musculus - Jejunum, Protein Intensity (Geiger,MCP,2013)'); @@ -109,13 +109,11 @@ describe('public dataset page', function() { expect(datasetPage.getSimilar_title().getText()).toContain('M.musculus - Ileum, Protein Intensity (Geiger,MCP,2013)'); expect(datasetPage.getSimilar_title().getText()).toContain('M.musculus - Spleen, Protein Intensity (Geiger,MCP,2013)'); expect(datasetPage.getSimilar_title().getText()).toContain('M.musculus - Uterus, Protein Intensity (Geiger,MCP,2013)'); - expect(datasetPage.getSimilar_title().getText()).toContain('M.musculus - Pancreas, Protein Intensity (Geiger,MCP,2013)'); expect(datasetPage.getSimilar_title().getText()).toContain('M.musculus - Diaphragm, Protein Intensity (Geiger,MCP,2013)'); expect(datasetPage.getSimilar_title().getText()).toContain('M.musculus - Cerebellum, Protein Intensity (Geiger,MCP,2013)'); expect(datasetPage.getSimilar_title().getText()).toContain('M.musculus - Lung, Protein Intensity (Geiger,MCP,2013)'); expect(datasetPage.getSimilar_title().getText()).toContain('M.musculus - Duodenum, Protein Intensity (Geiger,MCP,2013)'); expect(datasetPage.getSimilar_title().getText()).toContain('M.musculus - Stomach, Protein Intensity (Geiger,MCP,2013)'); - expect(datasetPage.getSimilar_title().getText()).toContain('M.musculus - Heart, Protein Intensity (Geiger,MCP,2013)'); expect(datasetPage.getSimilar_id().getText()).toContain('100909'); expect(datasetPage.getSimilar_id().getText()).toContain('10090488'); @@ -123,13 +121,11 @@ describe('public dataset page', function() { expect(datasetPage.getSimilar_id().getText()).toContain('10090222'); expect(datasetPage.getSimilar_id().getText()).toContain('10090364'); expect(datasetPage.getSimilar_id().getText()).toContain('10090320'); - expect(datasetPage.getSimilar_id().getText()).toContain('10090319'); expect(datasetPage.getSimilar_id().getText()).toContain('10090439'); expect(datasetPage.getSimilar_id().getText()).toContain('10090218'); expect(datasetPage.getSimilar_id().getText()).toContain('10090339'); expect(datasetPage.getSimilar_id().getText()).toContain('100906'); expect(datasetPage.getSimilar_id().getText()).toContain('1009080'); - expect(datasetPage.getSimilar_id().getText()).toContain('1009072'); }); }); diff --git a/package-lock.json b/package-lock.json index 386d34c8..12d32e9d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1018,7 +1018,8 @@ "@types/node": { "version": "10.9.4", "resolved": "https://registry.npmjs.org/@types/node/-/node-10.9.4.tgz", - "integrity": "sha512-fCHV45gS+m3hH17zgkgADUSi2RR1Vht6wOZ0jyHP8rjiQra9f+mIcgwPQHllmDocYOstIEbKlxbFDYlgrTPYqw==" + "integrity": "sha512-fCHV45gS+m3hH17zgkgADUSi2RR1Vht6wOZ0jyHP8rjiQra9f+mIcgwPQHllmDocYOstIEbKlxbFDYlgrTPYqw==", + "dev": true }, "@types/q": { "version": "0.0.32", @@ -2289,7 +2290,8 @@ "boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", - "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" + "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", + "dev": true }, "brace-expansion": { "version": "1.1.11", @@ -2753,29 +2755,6 @@ "supports-color": "^5.3.0" } }, - "cheerio": { - "version": "1.0.0-rc.2", - "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz", - "integrity": "sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=", - "requires": { - "css-select": "~1.2.0", - "dom-serializer": "~0.1.0", - "entities": "~1.1.1", - "htmlparser2": "^3.9.1", - "lodash": "^4.15.0", - "parse5": "^3.0.1" - }, - "dependencies": { - "parse5": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz", - "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==", - "requires": { - "@types/node": "*" - } - } - } - }, "chokidar": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz", @@ -3281,7 +3260,8 @@ "core-util-is": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", - "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" + "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", + "dev": true }, "cosmiconfig": { "version": "4.0.0", @@ -3402,6 +3382,7 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=", + "dev": true, "requires": { "boolbase": "~1.0.0", "css-what": "2.1", @@ -3423,7 +3404,8 @@ "css-what": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz", - "integrity": "sha1-lGfQMsOM+u+58teVASUwYvh/ob0=" + "integrity": "sha1-lGfQMsOM+u+58teVASUwYvh/ob0=", + "dev": true }, "cssauron": { "version": "1.4.0", @@ -4180,6 +4162,7 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz", "integrity": "sha1-BzxpdUbOB4DOI75KKOKT5AvDDII=", + "dev": true, "requires": { "domelementtype": "~1.1.1", "entities": "~1.1.1" @@ -4188,7 +4171,8 @@ "domelementtype": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz", - "integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=" + "integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=", + "dev": true } } }, @@ -4201,20 +4185,14 @@ "domelementtype": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz", - "integrity": "sha1-sXrtguirWeUt2cGbF1bg/BhyBMI=" - }, - "domhandler": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz", - "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==", - "requires": { - "domelementtype": "1" - } + "integrity": "sha1-sXrtguirWeUt2cGbF1bg/BhyBMI=", + "dev": true }, "domutils": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz", "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=", + "dev": true, "requires": { "dom-serializer": "0", "domelementtype": "1" @@ -4471,7 +4449,8 @@ "entities": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz", - "integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA=" + "integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA=", + "dev": true }, "errno": { "version": "0.1.7", @@ -6398,19 +6377,6 @@ } } }, - "htmlparser2": { - "version": "3.9.2", - "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.9.2.tgz", - "integrity": "sha1-G9+HrMoPP55T+k/M6w9LTLsAszg=", - "requires": { - "domelementtype": "^1.3.0", - "domhandler": "^2.3.0", - "domutils": "^1.5.1", - "entities": "^1.1.1", - "inherits": "^2.0.1", - "readable-stream": "^2.0.2" - } - }, "http-deceiver": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz", @@ -6961,7 +6927,8 @@ "isarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", - "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true }, "isbinaryfile": { "version": "3.0.3", @@ -9150,6 +9117,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.1.tgz", "integrity": "sha1-mSms32KPwsQQmN6rgqxYDPFJquQ=", + "dev": true, "requires": { "boolbase": "~1.0.0" } @@ -9480,7 +9448,7 @@ }, "parchment": { "version": "1.1.4", - "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz", + "resolved": "http://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz", "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==" }, "parse-asn1": { @@ -9826,12 +9794,14 @@ "process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", - "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=" + "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=", + "dev": true }, "process-nextick-args": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", - "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==" + "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", + "dev": true }, "promise": { "version": "7.3.1", @@ -10216,7 +10186,7 @@ }, "quill": { "version": "1.3.6", - "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.6.tgz", + "resolved": "http://registry.npmjs.org/quill/-/quill-1.3.6.tgz", "integrity": "sha512-K0mvhimWZN6s+9OQ249CH2IEPZ9JmkFuCQeHAOQax3EZ2nDJ3wfGh59mnlQaZV2i7u8eFarx6wAtvQKgShojug==", "requires": { "clone": "^2.1.1", @@ -10426,6 +10396,7 @@ "version": "2.3.6", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", + "dev": true, "requires": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", @@ -11806,6 +11777,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, "requires": { "safe-buffer": "~5.1.0" } diff --git a/package.json b/package.json index 8fc04ec5..36a0b778 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "angular-cli": {}, "scripts": { "ng": "ng", + "webdriver-update": "webdriver-manager update", "start": "ng serve", "test": "ng test", "e2e": "ng e2e", diff --git a/src/app/modules/dataset/components/dataset/dataset.component.html b/src/app/modules/dataset/components/dataset/dataset.component.html index b5340e14..fd151a3d 100644 --- a/src/app/modules/dataset/components/dataset/dataset.component.html +++ b/src/app/modules/dataset/components/dataset/dataset.component.html @@ -16,8 +16,8 @@

Dataset Information

-
-
+
+
diff --git a/src/app/shared/directives/pie-chart.directive.ts b/src/app/shared/directives/pie-chart.directive.ts index aeb7d619..59f770c9 100644 --- a/src/app/shared/directives/pie-chart.directive.ts +++ b/src/app/shared/directives/pie-chart.directive.ts @@ -3,6 +3,7 @@ import * as d3 from 'd3'; import {MathUtils} from '@shared/utils/math-utils'; import {DataSet} from 'model/DataSet'; import {Location} from '@angular/common'; +import {MegaNumberPipe} from '@shared/pipes/mega-number.pipe'; @Directive({ selector: '[appPieChart]' @@ -13,7 +14,7 @@ export class PieChartDirective implements OnInit { @Input() width: number; @Input() circleRadius: number; - constructor(private el: ElementRef, private location: Location) { + constructor(private el: ElementRef, private location: Location, private megaNumber: MegaNumberPipe) { } convertData() { @@ -65,28 +66,6 @@ export class PieChartDirective implements OnInit { } } - add_tooltip(element, data, i, tool_tip, root) { - if (i < data.length) { - element.on('mouseover', function () { - tool_tip.transition() - .duration(200) - .style('opacity', .9); - const mouse_coords = d3.mouse(root); - tool_tip.html(data[i]['label'] + ': ' + - d3.format(',d')(data[i]['score'])) - .style('right', (mouse_coords[0]) + 'px') - .style('top', (mouse_coords[1] - 40) + 'px') - .style('padding', '3px'); - }) - .on('mouseout', function (d) { - tool_tip - .transition() - .duration(200) - .style('opacity', 0); - }); - } - } - ngOnInit(): void { const abs_path = this.location.prepareExternalUrl(this.location.path()); const body = d3.select(this.el.nativeElement), @@ -97,16 +76,20 @@ export class PieChartDirective implements OnInit { .attr('height', this.width); const tool_tip = body.append('div') - .attr('class', 'chart_tooltip d3-tip') - .style('opacity', 0) - .style('width', '20px') + .attr('class', 'mt-card') + .style('position', 'absolute') + .style('display', 'none') + .style('width', '220px') + .style('background', 'white') .style('right', 0) + .style('z-index', '9999') .attr('position', 'absolute'); const defs = svg.append('defs'); - // const max_scale = data.reduce((a, b) => a + b['scale'], 0); + const total_scale = data.reduce((a, b) => a + b['scale'], 0); + const omics_score = Math.round(data.reduce((a, b) => a + b['scale'] * 1000, 0)); const leafs = []; for (let i = 0; i < data.length; i++) { - const contributed_scale = data[i]['scale'] / data.length; + const contributed_scale = data[i]['scale'] / total_scale; const total_leafs = contributed_scale / (1 / 12); data[i]['leafs'] = (total_leafs > 0 && total_leafs < 1) ? 1 : Math.round(total_leafs); for (let j = 0; j < data[i]['leafs']; j++) { @@ -130,117 +113,107 @@ export class PieChartDirective implements OnInit { } let color_index = 0; const graph = svg.append('g') + .style('cursor', 'pointer') .attr('transform', 'matrix(2.769449835201722,0,0,2.769449835201722,-623.698285897772,-621.9327602781555)'); - let path = graph.append('path').attr('d', 'm 378.9895761619361,264.3949755505212 c -5.7581064046051,-9.760471988086' + + graph.append('path').attr('d', 'm 378.9895761619361,264.3949755505212 c -5.7581064046051,-9.760471988086' + ' -13.9767744892666,-17.8967349868568 -23.7880988708504,-23.5771958597846 -19.6283610230305,11.35944983617' + ' -32.8333198402356,32.5714433799553 -32.8333198402356,56.8810218555477 8e-13,24.309578475592' + ' 13.1997639769653,45.5005305810539 32.8281250000002,56.859980417222 -11.3189343625164,-19.6517526426536' + ' -12.1487673822503,-44.6243573250858 0.00602185554,-65.67706984024 5.9880211686214,-10.3715569008459' + ' 14.3702453380125,-18.4586997617603 24.0528968555452,-24.0266605769822 -0.088750556225,-0.1532609037314' + ' -0.1756740404876,-0.307601595516 -0.2656250000002,-0.4600759957605 z') - .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index + '\')') + .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index++ + '\')') .attr('style', 'stroke:none'); - self.add_tooltip(path, leafs, color_index++, tool_tip, self.el.nativeElement); - path = graph.append('path').attr('d', 'm 420.8837824508476,288.3712819635018 c -0.1064304300389,-11.3318698969113 ' + + graph.append('path').attr('d', 'm 420.8837824508476,288.3712819635018 c -0.1064304300389,-11.3318698969113 ' + '-3.1558742772426,-22.4874143880489 -8.8125,-32.3125 -22.6783841986818,0.023391619623 -44.7202107622013,11.79103748485 ' + '-56.8749999999976,32.8437500000043 -12.1547892377953,21.0527125151545 -11.3189343625162,46.0044973573463 ' + '3e-13,65.6562500000003 0.023391619619,-22.6783841986843 11.7910374848463,-44.7202107622037 32.8437499999955,' + '-56.8750000000028 10.371556900848,-5.9880211686176 21.6743474022139,-8.8005802455077 32.8437500000001,-8.7812500000001 ' + '-2.297844251e-4,-0.1771031141508 0.00166261591,-0.3542278162052 -2e-13,-0.5312500000001 z') - .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index + '\')') + .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index++ + '\')') .attr('style', 'stroke:none'); - self.add_tooltip(path, leafs, color_index++, tool_tip, self.el.nativeElement); - path = graph.append('path').attr('d', 'm 445.1770761619407,330.0824755505187 c 5.5737634923062,-9.8669024181249 ' + + graph.append('path').attr('d', 'm 445.1770761619407,330.0824755505187 c 5.5737634923062,-9.8669024181249 ' + '8.5106398987825,-21.0526092640995 8.5244011291495,-32.3896958597847 -19.6517526426534,-11.3189343625115 ' + '-44.6243573250855,-12.1487673822458 -65.6770698402401,0.00602185555 -21.0527125151536,12.1547892377968 ' + '-32.8047333803807,34.1815962185377 -32.8281249999998,56.8599804172223 11.359449836168,-19.6283610230347 ' + '32.5714433799533,-32.8333198402394 56.8810218555426,-32.8333198402444 11.9760423372391,2e-12 23.1708255835205,' + '3.2156476404536 32.8341468555453,8.8170894230179 0.088352557926,-0.1534906881563 0.1785537757177,-0.3059389796057 ' + '0.2656249999998,-0.4600759957606 z') - .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index + '\')') + .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index++ + '\')') .attr('style', 'stroke:none'); - self.add_tooltip(path, leafs, color_index++, tool_tip, self.el.nativeElement); - path = graph.append('path').attr('d', 'm 445.3600888638353,378.352075674592 c 9.760471988086,-5.758106404605 ' + + graph.append('path').attr('d', 'm 445.3600888638353,378.352075674592 c 9.760471988086,-5.758106404605 ' + '17.8967349868569,-13.9767744892664 23.5771958597846,-23.7880988708504 -11.3594498361699,-19.6283610230302 ' + '-32.5714433799552,-32.8333198402352 -56.8810218555477,-32.8333198402357 -24.309578475592,9e-13 -45.5005305810539,' + '13.1997639769654 -56.8599804172219,32.8281250000004 19.6517526426538,-11.3189343625165 44.6243573250856,-12.1487673822505 ' + '65.6770698402401,0.00602185554 10.371556900846,5.9880211686212 18.4586997617602,14.3702453380126 24.0266605769822,' + '24.0528968555453 0.1532609037312,-0.088750556225 0.307601595516,-0.1756740404876 0.4600759957604,-0.2656250000003 z') - .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index + '\')') + .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index++ + '\')') .attr('style', 'stroke:none'); - self.add_tooltip(path, leafs, color_index++, tool_tip, self.el.nativeElement); - path = graph.append('path').attr('d', 'm 421.3837824508547,420.2462819635038 c 11.3318698969114,-0.1064304300389 ' + + graph.append('path').attr('d', 'm 421.3837824508547,420.2462819635038 c 11.3318698969114,-0.1064304300389 ' + '22.4874143880489,-3.1558742772425 32.3124999999998,-8.8125000000003 -0.023391619623,-22.6783841986814 -11.7910374848499,' + '-44.720210762201 -32.8437500000043,-56.8749999999976 -21.0527125151545,-12.1547892377952 -46.004497357346,-11.3189343625162 ' + '-65.65625,4e-13 22.6783841986841,0.023391619619 44.7202107622035,11.7910374848462 56.8750000000027,32.8437499999955 ' + '5.9880211686178,10.371556900848 8.8005802455077,21.674347402214 8.78125,32.8437500000002 0.1771031141507,-2.297844253e-4 ' + '0.3542278162053,0.00166261591 0.5312500000001,-2e-13 z') - .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index + '\')') + .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index++ + '\')') .attr('style', 'stroke:none'); - self.add_tooltip(path, leafs, color_index++, tool_tip, self.el.nativeElement); - path = graph.append('path').attr('d', 'm 379.6725888638378,444.5395756745965 c 9.8669024181249,5.5737634923063 ' + + graph.append('path').attr('d', 'm 379.6725888638378,444.5395756745965 c 9.8669024181249,5.5737634923063 ' + '21.0526092640994,8.5106398987828 32.3896958597846,8.5244011291495 11.3189343625117,-19.6517526426532 12.1487673822459,' + '-44.6243573250854 -0.00602185555,-65.6770698402401 -12.1547892377967,-21.0527125151536 -34.1815962185376,-32.8047333803806 ' + '-56.8599804172221,-32.8281249999996 19.6283610230345,11.3594498361679 32.8333198402394,32.5714433799532 32.8333198402444,' + '56.8810218555426 -2.1e-12,11.9760423372391 -3.2156476404539,23.1708255835205 -8.8170894230179,32.8341468555455 ' + '0.1534906881566,0.088352557925 0.3059389796059,0.1785537757177 0.4600759957606,0.2656249999997 z') - .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index + '\')') + .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index++ + '\')') .attr('style', 'stroke:none'); - self.add_tooltip(path, leafs, color_index++, tool_tip, self.el.nativeElement); - path = graph.append('path').attr('d', 'm 331.4029887397643,444.7225883764912 c 5.758106404605,9.7604719880859 ' + + graph.append('path').attr('d', 'm 331.4029887397643,444.7225883764912 c 5.758106404605,9.7604719880859 ' + '13.9767744892662,17.896734986857 23.7880988708504,23.5771958597845 19.6283610230303,-11.3594498361699 32.8333198402354,' + '-32.5714433799552 32.8333198402359,-56.8810218555478 -1.1e-12,-24.309578475592 -13.1997639769654,-45.5005305810537 ' + '-32.8281250000003,-56.8599804172217 11.3189343625163,19.6517526426537 12.1487673822505,44.6243573250857 -0.00602185554,' + '65.67706984024 -5.9880211686216,10.3715569008459 -14.370245338013,18.4586997617602 -24.0528968555454,24.0266605769824 ' + '0.088750556226,0.1532609037307 0.1756740404877,0.307601595516 0.2656250000002,0.4600759957603 z') - .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index + '\')') + .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index++ + '\')') .attr('style', 'stroke:none'); - self.add_tooltip(path, leafs, color_index++, tool_tip, self.el.nativeElement); - path = graph.append('path').attr('d', 'm 289.5087824508529,420.7462819635105 c 0.106430430039,11.3318698969113 ' + + graph.append('path').attr('d', 'm 289.5087824508529,420.7462819635105 c 0.106430430039,11.3318698969113 ' + '3.1558742772424,22.4874143880491 8.8125000000001,32.3124999999998 22.6783841986818,-0.023391619623 44.7202107622011,' + '-11.7910374848498 56.8749999999978,-32.8437500000043 12.1547892377952,-21.0527125151546 11.3189343625161,-46.0044973573459 ' + '-5e-13,-65.6562499999997 -0.023391619619,22.6783841986841 -11.7910374848461,44.7202107622035 -32.8437499999954,' + '56.8750000000026 -10.3715569008481,5.9880211686177 -21.6743474022142,8.8005802455077 -32.8437500000004,8.7812500000003 ' + '2.297844263e-4,0.1771031141507 -0.00166261591,0.3542278162052 3e-13,0.5312499999998 z') - .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index + '\')') + .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index++ + '\')') .attr('style', 'stroke:none'); - self.add_tooltip(path, leafs, color_index++, tool_tip, self.el.nativeElement); - path = graph.append('path').attr('d', 'm 265.2154887397601,379.0350883764934 c -5.5737634923061,9.8669024181251 ' + + graph.append('path').attr('d', 'm 265.2154887397601,379.0350883764934 c -5.5737634923061,9.8669024181251 ' + '-8.5106398987828,21.0526092640995 -8.5244011291495,32.3896958597847 19.6517526426535,11.3189343625118 44.6243573250854,' + '12.1487673822458 65.6770698402401,-0.00602185555 21.0527125151537,-12.1547892377968 32.8047333803805,-34.1815962185374 ' + '32.8281249999995,-56.859980417222 -11.359449836168,19.6283610230345 -32.5714433799531,32.8333198402395 -56.8810218555425,' + '32.8333198402444 -11.9760423372391,-2.2e-12 -23.1708255835207,-3.2156476404538 -32.8341468555456,-8.8170894230179 ' + '-0.088352557924,0.1534906881571 -0.1785537757177,0.3059389796057 -0.2656249999997,0.4600759957606 z') - .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index + '\')') + .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index++ + '\')') .attr('style', 'stroke:none'); - self.add_tooltip(path, leafs, color_index++, tool_tip, self.el.nativeElement); - path = graph.append('path').attr('d', 'm 265.0324760378657,330.7654882524203 c -9.760471988086,5.7581064046052' + + graph.append('path').attr('d', 'm 265.0324760378657,330.7654882524203 c -9.760471988086,5.7581064046052' + ' -17.8967349868572,13.9767744892663 -23.5771958597847,23.7880988708502 11.35944983617,19.6283610230307 ' + '32.5714433799553,32.8333198402353 56.8810218555478,32.8333198402359 24.309578475592,-9e-13 45.5005305810537,' + '-13.1997639769654 56.8599804172215,-32.8281250000001 -19.6517526426535,11.3189343625163 -44.6243573250855,12.1487673822505' + ' -65.6770698402397,-0.00602185554 -10.3715569008459,-5.9880211686215 -18.4586997617603,-14.3702453380129 -24.0266605769824,' + '-24.0528968555454 -0.1532609037301,0.088750556226 -0.3076015955161,0.1756740404876 -0.4600759957603,0.2656250000003 z') - .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index + '\')') + .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index++ + '\')') .attr('style', 'stroke:none'); - self.add_tooltip(path, leafs, color_index++, tool_tip, self.el.nativeElement); - path = graph.append('path').attr('d', 'm 289.0087824508462,288.8712819635089 c -11.3318698969114,0.106430430039 ' + + graph.append('path').attr('d', 'm 289.0087824508462,288.8712819635089 c -11.3318698969114,0.106430430039 ' + '-22.4874143880491,3.1558742772423 -32.3124999999999,8.8125 0.023391619623,22.6783841986819 11.7910374848502,44.720210762201' + ' 32.8437500000042,56.8749999999978 21.0527125151547,12.1547892377951 46.0044973573459,11.318934362516 65.6562499999998,' + '-5e-13 -22.6783841986841,-0.023391619619 -44.7202107622035,-11.791037484846 -56.8750000000025,-32.8437499999955 ' + '-5.9880211686176,-10.3715569008482 -8.8005802455075,-21.6743474022142 -8.7812500000001,-32.8437500000003 -0.1771031141501,' + '2.297844264e-4 -0.3542278162053,-0.00166261591 -0.53125,3e-13 z') - .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index + '\')') + .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index++ + '\')') .attr('style', 'stroke:none'); - self.add_tooltip(path, leafs, color_index++, tool_tip, self.el.nativeElement); - path = graph.append('path').attr('d', 'm 330.7199760378628,264.5779882524163 c -9.8669024181249,-5.5737634923063 ' + + graph.append('path').attr('d', 'm 330.7199760378628,264.5779882524163 c -9.8669024181249,-5.5737634923063 ' + '-21.0526092640994,-8.5106398987829 -32.3896958597846,-8.5244011291496 -11.3189343625118,19.6517526426536 -12.1487673822455,' + '44.6243573250852 0.00602185555,65.6770698402401 12.154789237797,21.0527125151536 34.1815962185375,32.8047333803803 ' + '56.8599804172221,32.8281249999995 -19.6283610230345,-11.359449836168 -32.8333198402396,-32.571443379953 -32.8333198402443,' + @@ -248,12 +221,84 @@ export class PieChartDirective implements OnInit { '-0.1534906881565,-0.088352557924 -0.3059389796056,-0.1785537757178 -0.4600759957605,-0.2656249999999 z') .attr('fill', 'url(\'' + abs_path + '#' + self.dataset.id + '_gradient_' + color_index + '\')') .attr('style', 'stroke:none'); - self.add_tooltip(path, leafs, color_index, tool_tip, self.el.nativeElement); graph.append('circle') .attr('cx', 355) .attr('cy', 355) .attr('fill', 'white') - .attr('r', self.circleRadius) + .attr('r', self.circleRadius); + graph.append('text').attr('x', 355) + .attr('y', 355) + .attr('dy', '.3em') + .attr('style', 'font-size: 32px') + .attr('text-anchor', 'middle') + .text(self.megaNumber.transform(omics_score, 1)); + + graph.on('mouseover', function () { + tool_tip.html(''); + tool_tip.transition() + .duration(200) + .style('display', 'block'); + for (let i = 0; i < data.length; i++) { + const tool_tip_box = tool_tip.append('div').style('width', '100%') + .style('display', 'flex').style('align-items', 'center'); + const tool_tip_circle = tool_tip_box.append('svg').attr('viewBox', '0 0 36 36') + .attr('width', '28px') + .attr('height', '28px') + .attr('class', 'circular-chart'); + tool_tip_circle + .append('path').attr('class', 'circle-bg') + .attr('d', 'M18 2.0845\n' + + ' a 15.9155 15.9155 0 0 1 0 31.831\n' + + ' a 15.9155 15.9155 0 0 1 0 -31.831'); + if (data[i]['score'] > 0) { + tool_tip_circle.append('path') + .attr('class', 'circle') + .attr('stroke-dasharray', data[i]['scale'] * 100 + ', 100') + .style('stroke', data[i]['color']) + .attr('d', 'M18 2.0845\n' + + ' a 15.9155 15.9155 0 0 1 0 31.831\n' + + ' a 15.9155 15.9155 0 0 1 0 -31.831'); + } + const percent = data[i]['scale'] * 100; + let percent_display = Math.round(percent) + ''; + if (percent > 0 && percent < 1) { + percent_display = '<1' + } + tool_tip_circle.append('text') + .attr('x', '18').attr('y', '22') + .attr('class', 'percentage').text(percent_display); + tool_tip_box.append('p').style('margin', '0 10px').style('padding', '0') + .text(data[i]['score'] + ' ' + data[i]['label']); + } + tool_tip.append('hr').style('width', '96%').style('margin', '10px auto'); + tool_tip.append('div').style('width', '100%') + .style('padding', '0 0 10px 10px') + .text('Omics score: ').append('b').text(omics_score); + tool_tip.append('div').style('width', 0).style('height', 0) + .style('border-top', '8px solid transparent') + .style('border-bottom', '8px solid transparent') + .style('position', 'absolute') + .style('top', '95px') + .style('right', '-8px') + .style('border-left', '8px solid #C0C0C0'); + tool_tip.append('div').style('width', 0).style('height', 0) + .style('border-top', '8px solid transparent') + .style('border-bottom', '8px solid transparent') + .style('position', 'absolute') + .style('top', '95px') + .style('right', '-7px') + .style('border-left', '8px solid white'); + tool_tip + .style('right', self.width + 20 + 'px') + .style('top', '-80px') + .style('padding', '3px'); + }) + .on('mouseout', function (d) { + tool_tip + .transition() + .duration(200) + .style('display', 'none'); + }); } } diff --git a/src/app/shared/modules/controls/datasetwidget/datasetwidget.component.html b/src/app/shared/modules/controls/datasetwidget/datasetwidget.component.html index 8b78a7ed..1e01dd13 100644 --- a/src/app/shared/modules/controls/datasetwidget/datasetwidget.component.html +++ b/src/app/shared/modules/controls/datasetwidget/datasetwidget.component.html @@ -4,7 +4,7 @@ (click)="toggle(d);" *ngIf="d">
-
+
@@ -19,7 +19,7 @@ - {{d.description | truncate : 200 : '...'}} + Not available
diff --git a/src/app/shared/pipes/mega-number.pipe.ts b/src/app/shared/pipes/mega-number.pipe.ts index 6bc86d81..0f81df1b 100644 --- a/src/app/shared/pipes/mega-number.pipe.ts +++ b/src/app/shared/pipes/mega-number.pipe.ts @@ -12,7 +12,7 @@ export class MegaNumberPipe implements PipeTransform { return '0'; } - if (!fractionSize || fractionSize < 0) { + if (fractionSize < 0) { fractionSize = 1; } diff --git a/src/css/ddi.css b/src/css/ddi.css index 46f18135..811c7092 100644 --- a/src/css/ddi.css +++ b/src/css/ddi.css @@ -1682,4 +1682,28 @@ app-image-cropper > div { .grey .badge-circle { fill: silver !important; +} + +.circular-chart { + display: block; + margin: 5px 10px; +} + +.circle-bg { + fill: none; + stroke: #eee; + stroke-width: 5; +} + +.circle { + fill: none; + stroke-width: 4; + stroke-linecap: round; +} + +.percentage { + fill: #666; + font-family: sans-serif; + font-size: .8em; + text-anchor: middle; } \ No newline at end of file diff --git a/src/environments/environment.dev.ts b/src/environments/environment.dev.ts index 72e23bba..a6f5a30c 100644 --- a/src/environments/environment.dev.ts +++ b/src/environments/environment.dev.ts @@ -1,6 +1,6 @@ export const environment = { production: false, - webServiceUrl: 'http://wwwdev.ebi.ac.uk/Tools/omicsdi/ws/', + webServiceUrl : 'http://wwwdev.ebi.ac.uk/Tools/omicsdi/ws/', userServiceUrl: 'http://wwwdev.ebi.ac.uk/Tools/omicsdi/profilews/api/', userServiceCookiePath: '/Tools/omicsdi/profilews/', thorUrl: 'https://www.ebi.ac.uk/europepmc/hubthor/api/dataclaiming/'