Merge pull request #68 from geneontology/issue-67-chemical-change

Issue 67 chemical change
geneontology · Jan 11, 2025 · 1c0e4c6 · 1c0e4c6
2 parents db5120e + 0a1fffe
commit 1c0e4c6
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 16 deletions.
diff --git a/src/components/genes-panel/genes-panel.scss b/src/components/genes-panel/genes-panel.scss
@@ -95,6 +95,10 @@
 
 .function-label {
   @include standard-var-styles(function-label);
+  display: flex;
+  .node-term {
+    font-size: 1em;
+  }
 }
 
 .function-nodes {
@@ -105,6 +109,7 @@
   display: flex;
   align-items: center;
   margin-bottom: 0.175em;
+  width: 100%;
   @include standard-var-styles(node);
 }
 

diff --git a/src/components/genes-panel/genes-panel.tsx b/src/components/genes-panel/genes-panel.tsx
@@ -107,10 +107,10 @@ export class GenesPanel {
         // Modified to remove the width and height attributes in order to allow the size to be
         // controlled via CSS
         return (
-          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-newspaper icon" viewBox="0 0 16 16">
-              <path d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5z"/>
-              <path d="M2 3h10v2H2zm0 3h4v3H2zm0 4h4v1H2zm0 2h4v1H2zm5-6h2v1H7zm3 0h2v1h-2zM7 8h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2z"/>
-          </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-newspaper icon" viewBox="0 0 16 16">
+                <path d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5z" />
+                <path d="M2 3h10v2H2zm0 3h4v3H2zm0 4h4v1H2zm0 2h4v1H2zm5-6h2v1H7zm3 0h2v1h-2zM7 8h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2z" />
+            </svg>
         )
     }
 
@@ -123,9 +123,12 @@ export class GenesPanel {
             <span>
                 {
                     evidences.map(evidence => {
+                        if (!evidence.reference) {
+                            return null; // for extreme case
+                        }
                         return <a href={evidence.referenceEntity?.url} target='_blank'
                             title={"Source: " + evidence.reference + "\nEvidence: " + evidence.evidence.label}>
-                            { this.renderReferenceIcon() }
+                            {this.renderReferenceIcon()}
                         </a>
                     })
                 }
@@ -181,9 +184,14 @@ export class GenesPanel {
                 {activity.rootNode &&
                     <div class='function'>
                         <div class='function-label' part="function-label">
-                            <a href={activity.rootNode?.term.url} target='_blank'>
-                                {activity.rootNode?.term.label}
-                            </a>
+                            <div class="node-term">
+                                <a href={activity.rootNode?.term.url} target='_blank'>
+                                    {activity.rootNode?.term.label}
+                                </a>
+                            </div>
+                            <div class="node-evidence">
+                                {this.renderReferences(activity.rootNode.predicate.evidence)}
+                            </div>
                         </div>
                         <div class="function-nodes">
                             {nodes.map((node: ActivityNode) => {

diff --git a/src/components/gocam-viz/gocam-viz.scss b/src/components/gocam-viz/gocam-viz.scss
@@ -112,7 +112,7 @@
 
   @include standard-var-declarations(gene-product, $border-color: var(--border-color));
 
-  @include standard-var-declarations(function-label, $border-color: var(--border-color));
+  @include standard-var-declarations(function-label, $border-color: var(--border-color), $padding: 0 1em 0 0);
 
   @include standard-var-declarations(node, $border-color: var(--border-color), $padding: 0 1em 0 0);
 

diff --git a/src/components/gocam-viz/gocam-viz.tsx b/src/components/gocam-viz/gocam-viz.tsx
@@ -110,7 +110,7 @@ export class GoCamViz {
         'min-zoomed-font-size': 1, //10,
         'text-valign': 'center',
         'color': 'black',
-        'shape': "rectangle",
+        'shape': "data(shape)",
         'text-wrap': 'wrap',
         // 'text-overflow-wrap': "anywhere",
         'text-max-width': 'data(textwidth)'
@@ -381,7 +381,8 @@ export class GoCamViz {
                 // parent: ??
                 "text-valign": "top",
                 "text-halign": "left",
-                "backgroundColor": activity.backgroundColor || 'white',
+                shape: "rectangle",
+                backgroundColor: activity.backgroundColor || 'white',
                 // degree: (child * 10 + parent)
             }
         }
@@ -417,7 +418,8 @@ export class GoCamViz {
                     height: 200,
                     width: Math.max(115, geneString.length * 11),
                     textwidth: Math.max(115, geneString.length * 9),
-                    "backgroundColor": activity.backgroundColor || 'white',
+                    shape: "rectangle",
+                    backgroundColor: activity.backgroundColor || 'white',
                 }
             }
 
@@ -430,7 +432,8 @@ export class GoCamViz {
                     label: label,
                     width: Math.max(115, label.length * 11),
                     textwidth: Math.max(115, label.length * 9),
-                    "backgroundColor": activity.backgroundColor || 'white',
+                    shape: "rectangle",
+                    backgroundColor: activity.backgroundColor || 'white',
                 }
             }
         }
@@ -446,6 +449,7 @@ export class GoCamViz {
         const el = {
             group: "nodes",
             data: {
+                shape: "ellipse",
                 id: activity.id,
                 label: geneShorthand,
                 width: Math.max(115, geneShorthand.length * 11),
@@ -454,7 +458,7 @@ export class GoCamViz {
                 // parent: ??
                 "text-valign": "top",
                 "text-halign": "left",
-                "backgroundColor": activity.backgroundColor || 'white',
+                backgroundColor: activity.backgroundColor || 'white',
                 // degree: (child * 10 + parent)
             }
         }

diff --git a/src/globals/@noctua.form/models/activity/activity.ts b/src/globals/@noctua.form/models/activity/activity.ts
@@ -134,11 +134,13 @@ export class Activity extends SaeGraph<ActivityNode> {
   get backgroundColor() {
     switch (this.activityType) {
       case ActivityType.ccOnly:
-        return 'purple'
+        return '#DDDDDD'
       case ActivityType.bpOnly:
-        return 'brown'
+        return '#d7ccc8' //brownish
       case ActivityType.molecule:
         return '#b2dfdb'
+      case ActivityType.proteinComplex:
+        return '#e2bde7'
       default:
         return this._backgroundColor;
     }