From 261a1bb27f0c046a452d487b5a835a1d79f4f83d Mon Sep 17 00:00:00 2001
From: tmushayahama <tmushayahama@gmail.com>
Date: Thu, 9 Jan 2025 18:50:14 -0800
Subject: [PATCH 1/4] added the reference to the function label

---
 src/components/genes-panel/genes-panel.scss |  4 ++++
 src/components/genes-panel/genes-panel.tsx  | 21 +++++++++++++--------
 src/components/gocam-viz/gocam-viz.scss     |  2 +-
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/genes-panel/genes-panel.scss b/src/components/genes-panel/genes-panel.scss
index 963018c..d30722e 100644
--- 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 {
diff --git a/src/components/genes-panel/genes-panel.tsx b/src/components/genes-panel/genes-panel.tsx
index 339666e..0122c88 100644
--- 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>
         )
     }
 
@@ -125,7 +125,7 @@ export class GenesPanel {
                     evidences.map(evidence => {
                         return <a href={evidence.referenceEntity?.url} target='_blank'
                             title={"Source: " + evidence.reference + "\nEvidence: " + evidence.evidence.label}>
-                            { this.renderReferenceIcon() }
+                            {this.renderReferenceIcon()}
                         </a>
                     })
                 }
@@ -181,9 +181,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
index d87c8c0..56e353c 100644
--- 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);
 

From 27e1bfa782305d1195869c08f8076f6f9a1af79a Mon Sep 17 00:00:00 2001
From: tmushayahama <tmushayahama@gmail.com>
Date: Thu, 9 Jan 2025 19:45:05 -0800
Subject: [PATCH 2/4] Changed shape to oval/ellipse and now only 2 colors shape

---
 src/components/gocam-viz/gocam-viz.tsx             | 14 +++++++++-----
 .../@noctua.form/models/activity/activity.ts       |  4 ----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/gocam-viz/gocam-viz.tsx b/src/components/gocam-viz/gocam-viz.tsx
index 3f81a91..367dd5b 100644
--- 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
index 6362a43..7eba0fd 100644
--- a/src/globals/@noctua.form/models/activity/activity.ts
+++ b/src/globals/@noctua.form/models/activity/activity.ts
@@ -133,10 +133,6 @@ export class Activity extends SaeGraph<ActivityNode> {
 
   get backgroundColor() {
     switch (this.activityType) {
-      case ActivityType.ccOnly:
-        return 'purple'
-      case ActivityType.bpOnly:
-        return 'brown'
       case ActivityType.molecule:
         return '#b2dfdb'
       default:

From c65328a82d9281255b6c788edfaf0a97cd754f89 Mon Sep 17 00:00:00 2001
From: tmushayahama <tmushayahama@gmail.com>
Date: Thu, 9 Jan 2025 20:14:50 -0800
Subject: [PATCH 3/4] no display link doesnt have referencce,

---
 src/components/genes-panel/genes-panel.scss | 1 +
 src/components/genes-panel/genes-panel.tsx  | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/components/genes-panel/genes-panel.scss b/src/components/genes-panel/genes-panel.scss
index d30722e..c64bfbf 100644
--- a/src/components/genes-panel/genes-panel.scss
+++ b/src/components/genes-panel/genes-panel.scss
@@ -109,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
index 0122c88..01cc721 100644
--- a/src/components/genes-panel/genes-panel.tsx
+++ b/src/components/genes-panel/genes-panel.tsx
@@ -123,6 +123,9 @@ 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()}

From 0a1fffe595bd8ea433cc6fe48997a160dbda4112 Mon Sep 17 00:00:00 2001
From: tmushayahama <tmushayahama@gmail.com>
Date: Fri, 10 Jan 2025 19:23:09 -0800
Subject: [PATCH 4/4] Added the colors for BB Only, Complex and CC Only

---
 src/globals/@noctua.form/models/activity/activity.ts | 6 ++++++
 1 file changed, 6 insertions(+)

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