diff --git a/src/components/genes-panel/genes-panel.scss b/src/components/genes-panel/genes-panel.scss index e6436a1..963018c 100644 --- a/src/components/genes-panel/genes-panel.scss +++ b/src/components/genes-panel/genes-panel.scss @@ -1,4 +1,4 @@ -@import "../../scss/mixins"; +@import '../../scss/mixins'; :host { /** @@ -64,7 +64,7 @@ } .process-label { - @include standard-var-styles(process-label) + @include standard-var-styles(process-label); } .activity { @@ -90,11 +90,11 @@ } .gene-product { - @include standard-var-styles(gene-product) + @include standard-var-styles(gene-product); } .function-label { - @include standard-var-styles(function-label) + @include standard-var-styles(function-label); } .function-nodes { @@ -105,7 +105,7 @@ display: flex; align-items: center; margin-bottom: 0.175em; - @include standard-var-styles(node) + @include standard-var-styles(node); } .node:last-child { @@ -125,4 +125,10 @@ } .node-evidence { + text-align: right; + .icon { + margin-left: 0.25em; + height: 1em; + width: 1em; + } } diff --git a/src/components/genes-panel/genes-panel.tsx b/src/components/genes-panel/genes-panel.tsx index d1f7dd1..339666e 100644 --- a/src/components/genes-panel/genes-panel.tsx +++ b/src/components/genes-panel/genes-panel.tsx @@ -1,6 +1,6 @@ import { Component, Prop, Element, Event, EventEmitter, Watch, h, Method } from '@stencil/core'; import { State } from '@stencil/core'; -import { Activity, ActivityNode, ActivityNodeType, Cam, Evidence, noctuaFormConfig } from '../../globals/@noctua.form'; +import { Activity, ActivityNode, Cam, Evidence, noctuaFormConfig } from '../../globals/@noctua.form'; /** * @part process - Process containers @@ -102,19 +102,15 @@ export class GenesPanel { } } - /** - * Render the references of a GP but does not display "with" field for the moment - * @param gp a gene product object (see graphHandler) - */ - renderGeneReferences(gp) { + renderReferenceIcon() { + // SVG originally from https://icons.getbootstrap.com/icons/newspaper/ + // Modified to remove the width and height attributes in order to allow the size to be + // controlled via CSS return ( - - { - gp.evidences.map(evidence => { - return ev.label).join(",")}> - }) - } - + + + + ) } @@ -127,8 +123,10 @@ export class GenesPanel { { evidences.map(evidence => { - return E + return + { this.renderReferenceIcon() } + }) }