Legend and Relations revised, few cleanups

.gitignore

@@ -24,3 +24,6 @@ $RECYCLE.BIN/
 Thumbs.db
 UserInterfaceState.xcuserstate
 .env
+
+
+debug.html

.prettierrc.json

@@ -10,4 +10,4 @@
   "tabWidth": 2,
   "trailingComma": "all",
   "useTabs": false
-}
+}

src/components/gocam-legend/gocam-legend.scss

@@ -32,29 +32,30 @@
   margin-bottom: 0.5em;
 }
 
-.sections {
+.item {
   display: flex;
-}
+  align-items: center;
+  margin-bottom: 0.2em;
+  gap: 0.25em;
+  height: 2em;
 
-.section {
-  flex: 1 1 auto;
+  svg {
+    flex-shrink: 0;
+  }
 }
 
-img {
+.item-label {
   display: inline-block;
-  max-height: 1.25em;
-  min-width: 3.5em;
-  max-width: 3.75em;
-  object-fit: scale-down;
+  margin-left: 0.2em;
 }
 
-.item {
+.columns {
   display: flex;
-  align-items: center;
-  margin-bottom: 0.5em;
-}
+  gap: 0.25em;
 
-.item-label {
-  display: inline-block;
-  margin-left: 0.5em;
+  .column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
 }

src/components/gocam-legend/gocam-legend.tsx

@@ -1,38 +1,9 @@
 import { Component, Host, h } from '@stencil/core';
-import { legend } from '../../globals/constants';
+import { RELATION_MAP, STYLES } from '../../globals/relations';
+import { LEGEND_COLUMNS } from '../../globals/legend';
 
-import direct_regulation from './assets/relation/direct_regulation.png';
-import indirect_regulation from './assets/relation/indirect_regulation.png';
-import positive_regulation from './assets/relation/positive_regulation.png';
-import negative_regulation from './assets/relation/negative_regulation.png';
-import provides_input_for from './assets/relation/provides_input_for.png';
-import neutral from './assets/relation/neutral.png';
-import input_of from './assets/relation/input_of.png';
-import has_output from './assets/relation/has_output.png';
 
-// Stencil's Assets feature[1] makes client applications jump through a lot of hoops[2] in order
-// to get the assets served from the right location if they choose to the NPM package instead of
-// a <script> tag. Since these legend images are quite small, it's a good tradeoff to just inline
-// them via the rollup image plugin[3].
-// [1] https://stenciljs.com/docs/assets
-// [2] https://github.com/ionic-team/stencil/issues/1868
-// [3] https://github.com/rollup/plugins/tree/master/packages/image
 
-const IMAGE_DATA = {
-  direct_regulation,
-  indirect_regulation,
-  positive_regulation,
-  negative_regulation,
-  provides_input_for,
-  neutral,
-  input_of,
-  has_output
-};
-
-/**
- * @part header - The header
- * @part section - Group of legend entries
- */
 @Component({
   tag: 'wc-gocam-legend',
   styleUrl: 'gocam-legend.scss',
@@ -42,26 +13,59 @@ export class GocamLegend {
   render() {
     return (
       <Host>
-        <div class='header' part="header">Relation Types</div>
-        <div class='sections'>
-          {Object.keys(legend).map((section) => {
-            return (
-              <div class={'section ' + section} part="section">
-                {legend[section].map((item) => {
-                  return (
-                    <div class='item'>
-                      <img alt={item.label} src={IMAGE_DATA[item.id]}></img>
-                      <div class='item-label'>
-                        {item.label}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            );
-          })}
+        <svg height="0" width="0" style={{ position: 'absolute' }}>
+          <defs>
+            {Object.entries(RELATION_MAP).map(([id, config]) => (
+              config.glyph === 'circle-triangle' ?
+                <marker id={`${config.glyph}-${id}`}
+                  viewBox="0 0 20 10"
+                  refX="18"
+                  refY="5"
+                  markerWidth="12"
+                  markerHeight="4"
+                  orient="auto">
+                  <circle cx="7" cy="5" r="3.5" fill={config.color} />
+                  <path d="M 12 0 L 18 5 L 12 10 z" fill={config.color} />
+                </marker>
+                :
+                <marker id={`${config.glyph}-${id}`} viewBox="0 0 10 10" refX="9" refY="5"
+                  markerWidth="4" markerHeight="4" orient="auto">
+                  {config.glyph === 'triangle' && <path d="M 0 0 L 10 5 L 0 10 z" fill={config.color} />}
+                  {config.glyph === 'tee' && <rect x="6" y="0" width="4" height="10" fill={config.color} />}
+                  {config.glyph === 'circle' && <circle cx="5" cy="5" r="4" fill={config.color} />}
+                  {config.glyph === 'square' && <rect x="0" y="0" width="10" height="10" fill={config.color} />}
+                </marker>
+            ))}
+          </defs>
+        </svg>
+
+        <div class='header'>Relation Types</div>
+        <div class="columns">
+          {Object.entries(LEGEND_COLUMNS).map(([columnName, relations]) => (
+            <div class={`column ${columnName}`}>
+              {Object.entries(relations).map(([relationId, label]) => {
+                const config = RELATION_MAP[relationId];
+                return (
+                  <div class="item">
+                    <svg height="30" width="60">
+                      <line
+                        x1="5" y1="15"
+                        x2="45" y2="15"
+                        stroke={config.color}
+                        stroke-width={STYLES.SIZES.DEFAULT}
+                        stroke-dasharray={config.lineStyle === 'dashed' ? '5,5' : 'none'}
+                        marker-end={config.glyph ? `url(#${config.glyph}-${relationId})` : 'none'}
+                      />
+                    </svg>
+                    <span>{label}</span>
+                  </div>
+                );
+              })}
+            </div>
+          ))}
         </div>
+
       </Host>
     );
   }
-}
+}

src/components/gocam-legend/readme.md

@@ -5,14 +5,6 @@
 <!-- Auto Generated Below -->
 
 
-## Shadow Parts
-
-| Part        | Description             |
-| ----------- | ----------------------- |
-| `"header"`  | The header              |
-| `"section"` | Group of legend entries |
-
-
 ## CSS Custom Properties
 
 | Name                    | Description                    |

src/components/gocam-viz/gocam-viz.scss

@@ -1,5 +1,5 @@
-@import "../../scss/panel";
-@import "../../scss/mixins";
+@import '../../scss/panel';
+@import '../../scss/mixins';
 
 :host {
   /**
@@ -100,16 +100,10 @@
 
   @include standard-var-declarations(process, $border-color: var(--border-color));
 
-  @include standard-var-declarations(process-label,
-    $border-color: var(--border-color),
-    $border-width: 0 0 2px 0
-  );
+  @include standard-var-declarations(process-label, $border-color: var(--border-color), $border-width: 0 0 2px 0);
+
+  @include standard-var-declarations(activity, $border-color: var(--border-color), $border-width: 0 0 1px 0, $padding: 0.25em 0);
 
-  @include standard-var-declarations(activity,
-    $border-color: var(--border-color),
-    $border-width: 0 0 1px 0,
-    $padding: 0.25em 0
-  );
   --activity-background-active: #f0f0f0;
   --activity-color-active: black;
 
@@ -125,6 +119,27 @@
   align-items: flex-start;
 }
 
+.gocam-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.gocam-top-section {
+  display: flex;
+  flex: 1;
+  margin-bottom: 1rem;
+}
+
+.gocam-legend-container {
+  width: 100%;
+
+  wc-gocam-legend {
+    height: 100%;
+    width: 100%;
+  }
+}
+
 .panel {
   border-color: var(--panel-border-color);
   border-style: solid;
@@ -164,8 +179,9 @@ button {
   cursor: pointer;
   user-select: none;
 
-  &:focus, &:hover {
-    background-color: var(--button-background-hover)
+  &:focus,
+  &:hover {
+    background-color: var(--button-background-hover);
   }
 
   &:first-child {
@@ -193,4 +209,4 @@ wc-gocam-legend {
 
 wc-genes-panel {
   --height: var(--graph-height);
-}
+}

src/components/gocam-viz/gocam-viz.tsx

@@ -2,7 +2,6 @@ import { Component, Host, Prop, Element, Event, EventEmitter, Watch, h } from '@
 import { Listen, Method, State } from '@stencil/core';
 import cytoscape from 'cytoscape';
 import dagre from 'cytoscape-dagre';
-import { glyph } from '../../globals/utils';
 import * as dbxrefs from "@geneontology/dbxrefs";
 import {
     Activity, ActivityType, Cam,
@@ -11,6 +10,7 @@ import {
     NoctuaGraphService,
     Triple
 } from '../../globals/@noctua.form';
+import { glyph } from '../../globals/relations';
 
 
 
@@ -477,6 +477,20 @@ export class GoCamViz {
                 {
                     selector: 'edge',
                     style: this.defaultEdgeStyle
+                },
+                {
+                    selector: 'edge',
+                    style: {
+                        ...this.defaultEdgeStyle,
+                        'arrow-shape': function (edge) {
+                            return {
+                                width: 3,
+                                height: 3,
+                                name: 'custom-tee-circle',
+                                path: 'M 0,0 m -1,-1 l 2,0 l 0,2 l -2,0 z M 2,0 a 1,1 0 1,0 2,0 a 1,1 0 1,0 -2,0'
+                            };
+                        }
+                    }
                 }
             ],
 
@@ -747,40 +761,45 @@ export class GoCamViz {
 
         return (
             <Host>
-                <div class="panel w-8" part="gocam-panel">
-                    <div class="panel-header">
-                        <div part="gocam-title">{this.cam?.title}</div>
-                        <div class="gocam-panel-header-buttons">
-                            <button onClick={() => this.toggleComplex()}>
-                                {this.expandComplex ? 'Collapse Protein Complexes' : 'Expand Protein Complexes'}
-                            </button>
-                            <button onClick={() => this.resetView()}>Reset View</button>
+                <div class="gocam-container">
+                    <div class="gocam-top-section">
+                        <div class="panel w-8" part="gocam-panel">
+                            <div class="panel-header">
+                                <div part="gocam-title">{this.cam?.title}</div>
+                                <div class="gocam-panel-header-buttons">
+                                    <button onClick={() => this.toggleComplex()}>
+                                        {this.expandComplex ? 'Collapse Protein Complexes' : 'Expand Protein Complexes'}
+                                    </button>
+                                    <button onClick={() => this.resetView()}>Reset View</button>
+                                </div>
+                            </div>
+                            <div class="panel-body">
+                                <div class="gocam-graph" part="gocam-graph" ref={(el) => this.graphDiv = el}>
+                                    {this.loading &&
+                                        <go-loading-spinner message={`Loading GO-CAM ${this.gocamId}`}></go-loading-spinner>
+                                    }
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                    <div class="panel-body">
-                        <div class="gocam-graph" part="gocam-graph" ref={(el) => this.graphDiv = el}>
-                            {this.loading &&
-                                <go-loading-spinner message={`Loading GO-CAM ${this.gocamId}`}></go-loading-spinner>
-                            }
+                        <div class="panel w-4" part="activities-panel">
+                            <div class="panel-header">
+                                Processes and Activities
+                            </div>
+                            <div class="panel-body">
+                                <wc-genes-panel
+                                    cam={this.cam}
+                                    exportparts="process, activity, gene-product, function-label"
+                                    ref={el => this.genesPanel = el}
+                                >
+                                </wc-genes-panel>
+                            </div>
                         </div>
-                        {this.showLegend && (
-                            <wc-gocam-legend exportparts="header : legend-header, section : legend-section" />
-                        )}
-                    </div>
-                </div>
-
-                <div class="panel w-4" part="activities-panel">
-                    <div class="panel-header">
-                        Processes and Activities
-                    </div>
-                    <div class="panel-body">
-                        <wc-genes-panel
-                            cam={this.cam}
-                            exportparts="process, activity, gene-product, function-label"
-                            ref={el => this.genesPanel = el}
-                        >
-                        </wc-genes-panel>
                     </div>
+                    {this.showLegend && (
+                        <div class="panel gocam-legend-container">
+                            <wc-gocam-legend exportparts="header : legend-header, section : legend-section" />
+                        </div>
+                    )}
                 </div>
             </Host>
         );