Add go-ribbon components

src/components.d.ts

@@ -23,6 +23,93 @@ export namespace Components {
     placeholder: string;
     value: string;
   }
+  interface WcGoRibbon {
+    /**
+     * add a cell at the beginning of each row/subject to show all annotations
+     */
+    addCellAll: boolean;
+    annotationLabels: string;
+    baseApiUrl: string;
+    /**
+     * false = show a gradient of colors to indicate the value of a cell true = show only two colors (minColor; maxColor) to indicate the values of a cell
+     */
+    binaryColor: boolean;
+    /**
+     * 0 = Normal 1 = Bold
+     */
+    categoryAllStyle: number;
+    /**
+     * Override of the category case 0 (default) = unchanged 1 = to lower case 2 = to upper case
+     */
+    categoryCase: number;
+    /**
+     * 0 = Normal 1 = Bold
+     */
+    categoryOtherStyle: number;
+    classLabels: string;
+    /**
+     * Which value to base the cell color on 0 = class count 1 = annotation count
+     */
+    colorBy: number;
+    /**
+     * if provided, will override any value provided in subjects and subset
+     */
+    data: string;
+    excludePB: boolean;
+    /**
+     * Filter rows based on the presence of one or more values in a given column The filtering will be based on cell label or id Example: filter-by="evidence:ISS,ISO or multi-step filters: filter-by:evidence:ISS,ISO;term:xxx" Note: if value is "", remove any filtering
+     */
+    filterBy: string;
+    filterCrossAspect: boolean;
+    filterReference: string;
+    /**
+     * If true, the ribbon will fire an event if a user click an empty cell If false, the ribbon will not fire the event on an empty cell Note: if selectionMode == SELECTION.COLUMN, then the event will trigger if at least one of the selected cells has annotations
+     */
+    fireEventOnEmptyCells: boolean;
+    groupBaseUrl: string;
+    /**
+     * Using this parameter, the table rows can bee grouped based on column ids A multiple step grouping is possible by using a ";" between groups The grouping applies before the ordering Example: hid-1,hid-3 OR hid-1,hid-3;hid-2 Note: if value is "", remove any grouping
+     */
+    groupBy: string;
+    groupClickable: boolean;
+    groupMaxLabelSize: number;
+    groupNewTab: boolean;
+    /**
+     * Used to hide specific column of the table
+     */
+    hideColumns: string;
+    maxColor: string;
+    maxHeatLevel: number;
+    minColor: string;
+    /**
+     * This is used to sort the table depending of a column The column cells must be single values The ordering applies after the grouping Note: if value is "", remove any ordering
+     */
+    orderBy: string;
+    /**
+     * If no value is provided, the ribbon will load without any group selected. If a value is provided, the ribbon will show the requested group as selected The value should be the id of the group to be selected
+     */
+    selected: any;
+    /**
+     * Click handling of a cell. 0 = select only the cell (1 subject, 1 group) 1 = select the whole column (all subjects, 1 group)
+     */
+    selectionMode: number;
+    /**
+     * add a cell at the end of each row/subject to represent all annotations not mapped to a specific term
+     */
+    showOtherGroup: boolean;
+    subjectBaseUrl: string;
+    subjectOpenNewTab: boolean;
+    /**
+     * Position the subject label of each row 0 = None 1 = Left 2 = Right 3 = Bottom
+     */
+    subjectPosition: number;
+    subjectUseTaxonIcon: boolean;
+    /**
+     * provide gene ids (e.g. RGD:620474,RGD:3889 or as a list ["RGD:620474", "RGD:3889"])
+     */
+    subjects: string;
+    subset: string;
+  }
   interface WcLightModal {
     close: () => Promise<void>;
     modalAnchor: string;
@@ -252,6 +339,13 @@ declare global {
     prototype: HTMLWcGoAutocompleteElement;
     new (): HTMLWcGoAutocompleteElement;
   };
+  interface HTMLWcGoRibbonElement
+    extends Components.WcGoRibbon,
+      HTMLStencilElement {}
+  var HTMLWcGoRibbonElement: {
+    prototype: HTMLWcGoRibbonElement;
+    new (): HTMLWcGoRibbonElement;
+  };
   interface HTMLWcLightModalElement
     extends Components.WcLightModal,
       HTMLStencilElement {}
@@ -401,6 +495,7 @@ declare global {
   };
   interface HTMLElementTagNameMap {
     "wc-go-autocomplete": HTMLWcGoAutocompleteElement;
+    "wc-go-ribbon": HTMLWcGoRibbonElement;
     "wc-light-modal": HTMLWcLightModalElement;
     "wc-ribbon-cell": HTMLWcRibbonCellElement;
     "wc-ribbon-strips": HTMLWcRibbonStripsElement;
@@ -429,6 +524,93 @@ declare namespace LocalJSX {
     placeholder?: string;
     value?: string;
   }
+  interface WcGoRibbon {
+    /**
+     * add a cell at the beginning of each row/subject to show all annotations
+     */
+    addCellAll?: boolean;
+    annotationLabels?: string;
+    baseApiUrl?: string;
+    /**
+     * false = show a gradient of colors to indicate the value of a cell true = show only two colors (minColor; maxColor) to indicate the values of a cell
+     */
+    binaryColor?: boolean;
+    /**
+     * 0 = Normal 1 = Bold
+     */
+    categoryAllStyle?: number;
+    /**
+     * Override of the category case 0 (default) = unchanged 1 = to lower case 2 = to upper case
+     */
+    categoryCase?: number;
+    /**
+     * 0 = Normal 1 = Bold
+     */
+    categoryOtherStyle?: number;
+    classLabels?: string;
+    /**
+     * Which value to base the cell color on 0 = class count 1 = annotation count
+     */
+    colorBy?: number;
+    /**
+     * if provided, will override any value provided in subjects and subset
+     */
+    data?: string;
+    excludePB?: boolean;
+    /**
+     * Filter rows based on the presence of one or more values in a given column The filtering will be based on cell label or id Example: filter-by="evidence:ISS,ISO or multi-step filters: filter-by:evidence:ISS,ISO;term:xxx" Note: if value is "", remove any filtering
+     */
+    filterBy?: string;
+    filterCrossAspect?: boolean;
+    filterReference?: string;
+    /**
+     * If true, the ribbon will fire an event if a user click an empty cell If false, the ribbon will not fire the event on an empty cell Note: if selectionMode == SELECTION.COLUMN, then the event will trigger if at least one of the selected cells has annotations
+     */
+    fireEventOnEmptyCells?: boolean;
+    groupBaseUrl?: string;
+    /**
+     * Using this parameter, the table rows can bee grouped based on column ids A multiple step grouping is possible by using a ";" between groups The grouping applies before the ordering Example: hid-1,hid-3 OR hid-1,hid-3;hid-2 Note: if value is "", remove any grouping
+     */
+    groupBy?: string;
+    groupClickable?: boolean;
+    groupMaxLabelSize?: number;
+    groupNewTab?: boolean;
+    /**
+     * Used to hide specific column of the table
+     */
+    hideColumns?: string;
+    maxColor?: string;
+    maxHeatLevel?: number;
+    minColor?: string;
+    /**
+     * This is used to sort the table depending of a column The column cells must be single values The ordering applies after the grouping Note: if value is "", remove any ordering
+     */
+    orderBy?: string;
+    /**
+     * If no value is provided, the ribbon will load without any group selected. If a value is provided, the ribbon will show the requested group as selected The value should be the id of the group to be selected
+     */
+    selected?: any;
+    /**
+     * Click handling of a cell. 0 = select only the cell (1 subject, 1 group) 1 = select the whole column (all subjects, 1 group)
+     */
+    selectionMode?: number;
+    /**
+     * add a cell at the end of each row/subject to represent all annotations not mapped to a specific term
+     */
+    showOtherGroup?: boolean;
+    subjectBaseUrl?: string;
+    subjectOpenNewTab?: boolean;
+    /**
+     * Position the subject label of each row 0 = None 1 = Left 2 = Right 3 = Bottom
+     */
+    subjectPosition?: number;
+    subjectUseTaxonIcon?: boolean;
+    /**
+     * provide gene ids (e.g. RGD:620474,RGD:3889 or as a list ["RGD:620474", "RGD:3889"])
+     */
+    subjects?: string;
+    subset?: string;
+  }
   interface WcLightModal {
     modalAnchor?: string;
     modalContent?: string;
@@ -609,6 +791,7 @@ declare namespace LocalJSX {
   }
   interface IntrinsicElements {
     "wc-go-autocomplete": WcGoAutocomplete;
+    "wc-go-ribbon": WcGoRibbon;
     "wc-light-modal": WcLightModal;
     "wc-ribbon-cell": WcRibbonCell;
     "wc-ribbon-strips": WcRibbonStrips;
@@ -623,6 +806,8 @@ declare module "@stencil/core" {
     interface IntrinsicElements {
       "wc-go-autocomplete": LocalJSX.WcGoAutocomplete &
         JSXBase.HTMLAttributes<HTMLWcGoAutocompleteElement>;
+      "wc-go-ribbon": LocalJSX.WcGoRibbon &
+        JSXBase.HTMLAttributes<HTMLWcGoRibbonElement>;
       "wc-light-modal": LocalJSX.WcLightModal &
         JSXBase.HTMLAttributes<HTMLWcLightModalElement>;
       "wc-ribbon-cell": LocalJSX.WcRibbonCell &

src/components/go-ribbon-strips/readme.md

@@ -63,6 +63,10 @@ Type: `Promise<void>`
 
 ## Dependencies
 
+### Used by
+
+- [wc-go-ribbon](../go-ribbon)
+
 ### Depends on
 
 - [wc-spinner](../go-spinner)
@@ -76,6 +80,7 @@ graph TD;
   wc-ribbon-strips --> wc-spinner
   wc-ribbon-strips --> wc-ribbon-subject
   wc-ribbon-strips --> wc-ribbon-cell
+  wc-go-ribbon --> wc-ribbon-strips
   style wc-ribbon-strips fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/go-ribbon-strips/ribbon-strips.tsx

@@ -9,7 +9,8 @@ import {
   Watch,
 } from "@stencil/core";
 
-import { truncate, groupKey, subjectGroupKey, sameArray } from "./utils";
+import { truncate, groupKey, subjectGroupKey } from "./utils";
+import { sameArray } from "../../globals/utils";
 import {
   RibbonModel,
   RibbonCategory,

src/components/go-ribbon-strips/utils.ts

@@ -30,16 +30,3 @@ export function subjectGroupKey(subject, group) {
     group.type
   );
 }
-
-export function sameArray(array1, array2) {
-  if (array1.length !== array2.length) {
-    return false;
-  }
-
-  for (let i = 0; i < array1.length; i++) {
-    if (array1[i] !== array2[i]) {
-      return false;
-    }
-  }
-  return true;
-}

src/components/go-ribbon-table/readme.md

@@ -42,6 +42,20 @@ Type: `Promise<void>`
 
 Type: `Promise<void>`
 
+## Dependencies
+
+### Used by
+
+- [wc-go-ribbon](../go-ribbon)
+
+### Graph
+
+```mermaid
+graph TD;
+  wc-go-ribbon --> wc-ribbon-table
+  style wc-ribbon-table fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ---
 
 _Built with [StencilJS](https://stenciljs.com/)_

src/components/go-ribbon/go-ribbon.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}