@chapeaux/cpx-operator-graph - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

cpx-operator-graph.cjs.js

@@ -46,5 +46,5 @@ var B = 8, G = -1;
     constructor(range){
-        const rangeArray = range.replace('>=', '').replace('<', '').replace('x', '0').split(' ');
+        const rangeArray = range.replace(">=", "").replace("<", "").replace("x", "0").split(" ");
         this.min = rangeArray[0];
-        this.max = rangeArray.length > 0 ? rangeArray[1] : '';
+        this.max = rangeArray.length > 0 ? rangeArray[1] : "";
     }
@@ -77,3 +77,3 @@ min;
     :host([connected]) #node { stroke: var(--cpxOGConnectedColor,#0266c8); }
-    :host([connected]) aside span { display: inline; border-radius: 10px; padding: .1em 1em; background-color: #ccc; font-size: calc(var(--cpxOGFontSize,16px)*.75); }
+    :host([connected]) aside span, :host([active]) aside span { display: inline; border-radius: 10px; padding: .1em 1em; background-color: #ccc; font-size: calc(var(--cpxOGFontSize,16px)*.75); }
     
@@ -95,3 +95,3 @@
     </style>
-    <aside>${this.latest_in_channel ? '<em>Head</em>' : ''}</aside>
+    <aside>${this.latest_in_channel ? "<em>Head</em>" : ""}</aside>
     <div>
@@ -103,4 +103,4 @@ <label tabindex="0" for="${this.escVer}">${this.version}</label>
     <aside>
-      ${this.replaces && this.replaces.length > 0 ? `<span>Replaces: ${this.replaces.replace(this.package + '.', '')}</span>` : ''}
-      ${this.skips && this.skips.length ? `<span>Skips: ${this.skips.join(',')}</span>` : ''}
+      ${this.replaces && this.replaces.length > 0 ? `<span>Replaces: ${this.replaces}</span>` : ""}
+      ${this.skips && this.skips.length ? `<span>Skips: ${this.skips.join(",")}</span>` : ""}
     </aside>
@@ -117,4 +117,3 @@ <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     </svg>
-    <ul>${this.channels.map((ch)=>`<li>${ch}</li>`
-        ).join('')}</ul>`;
+    <ul id="channels"></ul>`;
     }
@@ -126,7 +125,10 @@ constructor(op){
         });
-        op.replaces = op.replaces ? op.replaces.replace(op.package + '.v', '') : '';
+        op.replaces = op.replaces ? op.replaces.replace(op.csv_name.split(op.version)[0], "") : "";
+        op.skips = op.skips ? op.skips.map((skp)=>skp.replace(op.csv_name.split(op.version)[0], "")
+        ) : [];
         op.skip_range = op.skip_range ? new SkipRange(op.skip_range) : null;
         Object.assign(this, op);
+        this.shadowRoot.innerHTML = this.html;
         this.activeListener = this.activeListener.bind(this);
-        this.addEventListener('click', (_evt)=>{
+        this.addEventListener("click", (_evt)=>{
             this.active = true;
@@ -136,7 +138,6 @@ });
     connectedCallback() {
-        this.shadowRoot.innerHTML = this.html;
-        globalThis.addEventListener('graph-active', this.activeListener);
-        if (!this.replaces && !this.skip_range && !this.skips) {
-            this.setAttribute('outbound', '');
+        if (!this.replaces && !this.skip_range && !this.skips.length) {
+            this.setAttribute("outbound", "");
         }
+        globalThis.addEventListener("graph-active", this.activeListener);
     }
@@ -147,3 +148,3 @@ disconnectedCallback() {
         this.replaced = false;
-        globalThis.removeEventListener('graph-active', null);
+        globalThis.removeEventListener("graph-active", null);
     }
@@ -159,6 +160,15 @@ package;
     replaces;
-    channels = [];
     get edges() {
-        return this.shadowRoot.getElementById('edges');
+        return this.shadowRoot.getElementById("edges");
     }
+    _channels = [];
+    get channels() {
+        return this._channels;
+    }
+    set channels(val) {
+        if (this._channels === val) return;
+        this._channels = val;
+        this.shadowRoot.querySelector('#channels').innerHTML = this.channels.map((ch)=>`<li>${ch}</li>`
+        ).join("");
+    }
     _replaced = false;
@@ -172,4 +182,4 @@ get replaced() {
         if (this._replaced) {
-            const repLine = document.createElementNS('http://www.w3.org/2000/svg', "path");
-            repLine.setAttributeNS(null, 'd', 'M 31 47 C 50 42, 70 40, 70 0');
+            const repLine = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            repLine.setAttributeNS(null, "d", "M 31 47 C 50 42, 70 40, 70 0");
             this.edges.appendChild(repLine);
@@ -186,5 +196,5 @@ }
         if (this._connected) {
-            this.setAttribute('connected', '');
+            this.setAttribute("connected", "");
         } else {
-            this.removeAttribute('connected');
+            this.removeAttribute("connected");
         }
@@ -197,19 +207,20 @@ }
     set active(val) {
-        if (this._active === val) return;
         this._active = val;
-        while(this.edges.firstChild){
-            this.edges.removeChild(this.edges.firstChild);
+        if (this.edges) {
+            while(this.edges.firstChild){
+                this.edges.removeChild(this.edges.firstChild);
+            }
         }
         if (this._active) {
             this.connected = false;
-            this.setAttribute('active', '');
-            if (this.replaces || this.skip_range || this.skips) {
-                const repLine = document.createElementNS('http://www.w3.org/2000/svg', "path");
-                repLine.setAttributeNS(null, 'd', 'M 31 53 C 50 58, 70 60, 70 100');
+            this.setAttribute("active", "");
+            if (this.replaces || this.skip_range || this.skips.length) {
+                const repLine = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                repLine.setAttributeNS(null, "d", "M 31 53 C 50 58, 70 60, 70 100");
                 this.edges.appendChild(repLine);
             }
-            this.dispatchEvent(new CustomEvent('graph-active', {
+            this.dispatchEvent(new CustomEvent("graph-active", {
                 detail: {
                     version: this.version,
-                    replaces: this.replaces ? this.replaces.replace(`${this.package}.v`, '') : '',
+                    replaces: this.replaces ? this.replaces : "",
                     skips: this.skips,
@@ -223,3 +234,3 @@ skip_min: this.skip_range ? this.skip_range.min : null,
         } else {
-            this.removeAttribute('active');
+            this.removeAttribute("active");
             this.replaced = false;
@@ -230,3 +241,3 @@ }
         const detail = evt.detail;
-        if (this.edges && detail) {
+        if (detail) {
             if (detail.version && detail.version !== this.version) {
@@ -239,4 +250,4 @@ while(this.edges.firstChild){
                 if (detail.replaces && detail.replaces === this.version) {
-                    const repLine = document.createElementNS('http://www.w3.org/2000/svg', "path");
-                    repLine.setAttributeNS(null, 'd', 'M 31 47 C 50 42, 70 40, 70 0');
+                    const repLine = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    repLine.setAttributeNS(null, "d", "M 31 47 C 50 42, 70 40, 70 0");
                     this.edges.appendChild(repLine);
@@ -246,4 +257,4 @@ this.connected = true;
                 if (this.replaces === detail.version) {
-                    const overLine = document.createElementNS('http://www.w3.org/2000/svg', "path");
-                    overLine.setAttributeNS(null, 'd', 'M 31 53 C 50 58, 70 60, 70 100');
+                    const overLine = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    overLine.setAttributeNS(null, "d", "M 31 53 C 50 58, 70 60, 70 100");
                     this.edges.appendChild(overLine);
@@ -253,8 +264,8 @@ evt.composedPath()[0].replaced = true;
                 }
-                if (detail.skips && detail.skips.indexOf(this.version) >= 0) {
-                    const skipLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-                    skipLine.setAttributeNS(null, 'x1', '70');
-                    skipLine.setAttributeNS(null, 'x2', '70');
-                    skipLine.setAttributeNS(null, 'y1', '100');
-                    skipLine.setAttributeNS(null, 'y2', '0');
+                if (detail.skips.length && detail.skips.indexOf(this.version) >= 0) {
+                    const skipLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                    skipLine.setAttributeNS(null, "x1", "70");
+                    skipLine.setAttributeNS(null, "x2", "70");
+                    skipLine.setAttributeNS(null, "y1", "100");
+                    skipLine.setAttributeNS(null, "y2", "0");
                     this.edges.appendChild(skipLine);
@@ -265,11 +276,11 @@ this.connected = true;
                     if (this.version !== detail.skip_min) {
-                        const skipLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-                        skipLine.setAttributeNS(null, 'x1', '70');
-                        skipLine.setAttributeNS(null, 'x2', '70');
-                        skipLine.setAttributeNS(null, 'y1', '100');
-                        skipLine.setAttributeNS(null, 'y2', '0');
+                        const skipLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                        skipLine.setAttributeNS(null, "x1", "70");
+                        skipLine.setAttributeNS(null, "x2", "70");
+                        skipLine.setAttributeNS(null, "y1", "100");
+                        skipLine.setAttributeNS(null, "y2", "0");
                         this.edges.appendChild(skipLine);
                     }
-                    const repLine = document.createElementNS('http://www.w3.org/2000/svg', "path");
-                    repLine.setAttributeNS(null, 'd', 'M 31 47 C 50 42, 70 40, 70 0');
+                    const repLine = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    repLine.setAttributeNS(null, "d", "M 31 47 C 50 42, 70 40, 70 0");
                     this.edges.appendChild(repLine);
@@ -282,6 +293,6 @@ this.connected = true;
     get escVer() {
-        return this.version.replaceAll('.', '-');
+        return this.version.replaceAll(".", "-");
     }
     get escChannel() {
-        return this.channel_name.replaceAll('.', '-');
+        return this.channel_name.replaceAll(".", "-");
     }
@@ -362,4 +373,6 @@ }
       font-family: var(--cpxOGH3FontFamily, 'Red Hat Display', sans-serif);
-      font-weight: medium; 
+      font-weight: var(--cpxOGH3FontWeight, medium); 
       font-size: var(--cpxOGH3FontSize, 20px); 
+      line-height: var(--cpxOGH3LineHeight, 20px);
+      margin: var(--cpxOGH3Margin, 20px 0);
     }
@@ -420,2 +433,3 @@
       grid-template-columns: 1fr 3fr; 
+      margin: var(--cpxOptionsMargin, 0);
     }
@@ -473,13 +487,13 @@ </style>
         if (this.bundle.indices.size > 0) {
-            const indexSelect = this.shadowRoot.querySelector('#ocp_versions select');
+            const indexSelect = this.shadowRoot.querySelector("#ocp_versions select");
             [
                 ...this.bundle.indices.keys()
             ].sort().forEach((index)=>{
-                const opt = document.createElement('option');
+                const opt = document.createElement("option");
                 opt.innerHTML = index;
-                opt.setAttribute('value', index);
+                opt.setAttribute("value", index);
                 if (this.index === index) {
                     this.index = index;
                     this.setChannels();
-                    opt.setAttribute('selected', 'selected');
+                    opt.setAttribute("selected", "selected");
                 }
@@ -502,3 +516,3 @@ indexSelect.appendChild(opt);
             ...this.bundle.indices.keys()
-        ][0];
+        ].slice(-1)[0];
     }
@@ -508,5 +522,5 @@ set index(val) {
         this._index = val;
-        this.setAttribute('index', this._index);
+        this.setAttribute("index", this._index);
         this.setChannels();
-        this.render();
+        this.requestRender();
     }
@@ -517,3 +531,3 @@ _channel = "";
             ...this.bundle.indices.get(this.index).channels.keys()
-        ][0];
+        ].slice(-1)[0];
     }
@@ -523,4 +537,4 @@ set channel(val) {
         this._channel = val;
-        this.setAttribute('channel', this._channel);
-        this.render();
+        this.setAttribute("channel", this._channel);
+        this.requestRender();
     }
@@ -534,3 +548,3 @@ _all = false;
         this._all = val;
-        this.render();
+        this.requestRender();
     }
@@ -540,6 +554,7 @@ _body;
         if (!this._body) {
-            this._body = this.shadowRoot.querySelector('main');
+            this._body = this.shadowRoot.querySelector("main");
         }
         return this._body;
     }
+    rendered = false;
     constructor(url){
@@ -552,12 +567,12 @@ super();
     connectedCallback() {
-        this.shadowRoot.addEventListener('pfe-select:change', (evt)=>{
-            if (evt.target['id'] === 'ocp_versions') {
-                this.index = evt['detail'].value;
-            } else if (evt.target['id'] === 'channels') {
-                this.channel = evt['detail'].value;
+        this.shadowRoot.addEventListener("pfe-select:change", (evt)=>{
+            if (evt.target["id"] === "ocp_versions") {
+                this.index = evt["detail"].value;
+            } else if (evt.target["id"] === "channels") {
+                this.channel = evt["detail"].value;
             }
         });
-        this.shadowRoot.addEventListener('change', (evt)=>{
-            if (evt.target['id'] === 'all-channels') {
-                this.all = evt.target['checked'] ? true : false;
+        this.shadowRoot.addEventListener("change", (evt)=>{
+            if (evt.target["id"] === "all-channels") {
+                this.all = evt.target["checked"] ? true : false;
             }
@@ -582,3 +597,3 @@ });
             if (this.bundle.indices.get(this.index).channels.size > 0) {
-                const channelSelect = this.shadowRoot.querySelector('#channels select');
+                const channelSelect = this.shadowRoot.querySelector("#channels select");
                 while(channelSelect.firstChild){
@@ -590,8 +605,8 @@ channelSelect.removeChild(channelSelect.firstChild);
                 ].sort().forEach((channel)=>{
-                    const opt = document.createElement('option');
+                    const opt = document.createElement("option");
                     opt.innerHTML = channel;
-                    opt.setAttribute('value', channel);
+                    opt.setAttribute("value", channel);
                     if (this.channel === channel) {
                         this.channel = channel;
-                        opt.setAttribute('selected', 'selected');
+                        opt.setAttribute("selected", "selected");
                     }
@@ -603,36 +618,45 @@ channelSelect.appendChild(opt);
     }
+    async requestRender() {
+        if (!this.rendered) {
+            this.rendered = true;
+            this.rendered = await false;
+            this.render();
+        }
+    }
     render() {
-        if (this.bundle && this.bundle.indices) {
-            const currIndex = this.bundle.indices.get(this.index);
-            const currChannel = this.bundle.indices.get(this.index).channels.get(this.channel);
-            if (currIndex && currChannel && currChannel.versions.size > 0) {
-                while(this.body.firstChild){
-                    this.body.removeChild(this.body.firstChild);
-                }
-                if (!this.all) {
-                    currChannel.getVersions().map((ver)=>{
-                        const csv = currChannel.versions.get(ver);
-                        const verChannels = [];
-                        currIndex.channels.forEach((ch)=>{
-                            if (ch.name !== csv.channel_name && ch.versions.has(csv.version)) {
-                                verChannels.push(ch.name);
-                            }
+        if (!this.rendered) {
+            if (this.bundle && this.bundle.indices) {
+                const currIndex = this.bundle.indices.get(this.index);
+                const currChannel = this.bundle.indices.get(this.index).channels.get(this.channel);
+                if (currIndex && currChannel && currChannel.versions.size > 0) {
+                    while(this.body.firstChild){
+                        this.body.removeChild(this.body.firstChild);
+                    }
+                    if (!this.all) {
+                        currChannel.getVersions().map((ver)=>{
+                            const csv = currChannel.versions.get(ver);
+                            const verChannels = [];
+                            currIndex.channels.forEach((ch)=>{
+                                if (ch.name !== csv.channel_name && ch.versions.has(csv.version)) {
+                                    verChannels.push(ch.name);
+                                }
+                            });
+                            csv.channels = verChannels;
+                            this.body.appendChild(csv);
                         });
-                        csv.channels = verChannels;
-                        this.body.appendChild(csv);
-                    });
-                } else {
-                    currIndex.getAllVersions().forEach((csv)=>{
-                        csv.version.replaceAll('.', '-');
-                        const verChannels = [];
-                        currIndex.channels.forEach((ch)=>{
-                            if (ch.versions.has(csv.version)) {
-                                verChannels.push(ch.name);
-                            }
+                    } else {
+                        currIndex.getAllVersions().forEach((csv)=>{
+                            csv.version.replaceAll(".", "-");
+                            const verChannels = [];
+                            currIndex.channels.forEach((ch)=>{
+                                if (ch.versions.has(csv.version)) {
+                                    verChannels.push(ch.name);
+                                }
+                            });
+                            csv.channels = verChannels;
+                            this.body.appendChild(csv);
                         });
-                        csv.channels = verChannels;
-                        this.body.appendChild(csv);
-                    });
+                    }
+                    this.body.firstChild.active = true;
                 }
-                this.body.firstChild.click();
             }
@@ -639,0 +663,0 @@ }

cpx-operator-graph.d.ts

 declare class SkipRange {
-    constructor(range: string);
-    min: string;
-    max: string;
+  constructor(range: string);
+  min: string;
+  max: string;
 }
 declare class CPXOperatorVersion extends HTMLElement {
-    static get tag(): string;
-    get html(): string;
-    constructor(op: any);
-    connectedCallback(): void;
-    package: string;
-    channel_name: string;
-    csv_name: string;
-    latest_in_channel: boolean;
-    ocp_version: string;
-    version: string;
-    skips: Array<string>;
-    skip_range: SkipRange;
-    replaces: string;
-    channels: Array<string>;
-    _active: boolean;
-    get active(): boolean;
-    set active(val: boolean);
-    activeListener(evt: any): void;
-    get escVer(): string;
-    get escChannel(): string;
+  static get tag(): string;
+  get html(): string;
+  constructor(op: any);
+  connectedCallback(): void;
+  package: string;
+  channel_name: string;
+  csv_name: string;
+  latest_in_channel: boolean;
+  ocp_version: string;
+  version: string;
+  skips: Array<string>;
+  skip_range: SkipRange;
+  replaces: string;
+  channels: Array<string>;
+  _active: boolean;
+  get active(): boolean;
+  set active(val: boolean);
+  activeListener(evt: any): void;
+  get escVer(): string;
+  get escChannel(): string;
 }
 declare class OperatorChannel {
-    constructor(name: string, version?: CPXOperatorVersion);
-    versions: Map<string, CPXOperatorVersion>;
-    name: string;
-    getVersions(ord?: string): string[];
+  constructor(name: string, version?: CPXOperatorVersion);
+  versions: Map<string, CPXOperatorVersion>;
+  name: string;
+  getVersions(ord?: string): string[];
 }
 declare class OperatorIndex {
-    constructor(version: string, channel?: OperatorChannel);
-    channels: Map<string, OperatorChannel>;
-    version: string;
-    getAllVersions(): Map<any, any>;
+  constructor(version: string, channel?: OperatorChannel);
+  channels: Map<string, OperatorChannel>;
+  version: string;
+  getAllVersions(): Map<any, any>;
 }
 declare class OperatorBundle {
-    constructor(data: Array<CPXOperatorVersion>);
-    indices: Map<string, OperatorIndex>;
-    getChannelsByIndex(index: any): void;
-    getVersionsByChannel(channel: any): void;
+  constructor(data: Array<CPXOperatorVersion>);
+  indices: Map<string, OperatorIndex>;
+  getChannelsByIndex(index: any): void;
+  getVersionsByChannel(channel: any): void;
 }
 export declare class CPXOperatorGraph extends HTMLElement {
-    static get tag(): string;
-    static get tmpl(): string;
-    _url: string;
-    get url(): string;
-    set url(val: string);
-    bundle: OperatorBundle;
-    _data: any[];
-    get data(): any[];
-    set data(val: any[]);
-    _order: string;
-    get order(): string;
-    set order(val: string);
-    _index: string;
-    get index(): string;
-    set index(val: string);
-    _channel: string;
-    get channel(): string;
-    set channel(val: string);
-    _all: boolean;
-    get all(): boolean;
-    set all(val: boolean);
-    _body: any;
-    get body(): any;
-    constructor(url: string);
-    connectedCallback(): void;
-    static get observedAttributes(): string[];
-    attributeChangedCallback(attr: any, oldVal: any, newVal: any): void;
-    setChannels(): void;
-    render(): void;
+  static get tag(): string;
+  static get tmpl(): string;
+  _url: string;
+  get url(): string;
+  set url(val: string);
+  bundle: OperatorBundle;
+  _data: any[];
+  get data(): any[];
+  set data(val: any[]);
+  _order: string;
+  get order(): string;
+  set order(val: string);
+  _index: string;
+  get index(): string;
+  set index(val: string);
+  _channel: string;
+  get channel(): string;
+  set channel(val: string);
+  _all: boolean;
+  get all(): boolean;
+  set all(val: boolean);
+  _body: any;
+  get body(): any;
+  constructor(url: string);
+  connectedCallback(): void;
+  static get observedAttributes(): string[];
+  attributeChangedCallback(attr: any, oldVal: any, newVal: any): void;
+  setChannels(): void;
+  render(): void;
 }
 export {};

cpx-operator-graph.js

@@ -46,5 +46,5 @@ var B = 8, G = -1;
     constructor(range){
-        const rangeArray = range.replace('>=', '').replace('<', '').replace('x', '0').split(' ');
+        const rangeArray = range.replace(">=", "").replace("<", "").replace("x", "0").split(" ");
         this.min = rangeArray[0];
-        this.max = rangeArray.length > 0 ? rangeArray[1] : '';
+        this.max = rangeArray.length > 0 ? rangeArray[1] : "";
     }
@@ -77,3 +77,3 @@ min;
     :host([connected]) #node { stroke: var(--cpxOGConnectedColor,#0266c8); }
-    :host([connected]) aside span { display: inline; border-radius: 10px; padding: .1em 1em; background-color: #ccc; font-size: calc(var(--cpxOGFontSize,16px)*.75); }
+    :host([connected]) aside span, :host([active]) aside span { display: inline; border-radius: 10px; padding: .1em 1em; background-color: #ccc; font-size: calc(var(--cpxOGFontSize,16px)*.75); }
     
@@ -95,3 +95,3 @@
     </style>
-    <aside>${this.latest_in_channel ? '<em>Head</em>' : ''}</aside>
+    <aside>${this.latest_in_channel ? "<em>Head</em>" : ""}</aside>
     <div>
@@ -103,4 +103,4 @@ <label tabindex="0" for="${this.escVer}">${this.version}</label>
     <aside>
-      ${this.replaces && this.replaces.length > 0 ? `<span>Replaces: ${this.replaces.replace(this.package + '.', '')}</span>` : ''}
-      ${this.skips && this.skips.length ? `<span>Skips: ${this.skips.join(',')}</span>` : ''}
+      ${this.replaces && this.replaces.length > 0 ? `<span>Replaces: ${this.replaces}</span>` : ""}
+      ${this.skips && this.skips.length ? `<span>Skips: ${this.skips.join(",")}</span>` : ""}
     </aside>
@@ -117,4 +117,3 @@ <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     </svg>
-    <ul>${this.channels.map((ch)=>`<li>${ch}</li>`
-        ).join('')}</ul>`;
+    <ul id="channels"></ul>`;
     }
@@ -126,7 +125,10 @@ constructor(op){
         });
-        op.replaces = op.replaces ? op.replaces.replace(op.package + '.v', '') : '';
+        op.replaces = op.replaces ? op.replaces.replace(op.csv_name.split(op.version)[0], "") : "";
+        op.skips = op.skips ? op.skips.map((skp)=>skp.replace(op.csv_name.split(op.version)[0], "")
+        ) : [];
         op.skip_range = op.skip_range ? new SkipRange(op.skip_range) : null;
         Object.assign(this, op);
+        this.shadowRoot.innerHTML = this.html;
         this.activeListener = this.activeListener.bind(this);
-        this.addEventListener('click', (_evt)=>{
+        this.addEventListener("click", (_evt)=>{
             this.active = true;
@@ -136,7 +138,6 @@ });
     connectedCallback() {
-        this.shadowRoot.innerHTML = this.html;
-        globalThis.addEventListener('graph-active', this.activeListener);
-        if (!this.replaces && !this.skip_range && !this.skips) {
-            this.setAttribute('outbound', '');
+        if (!this.replaces && !this.skip_range && !this.skips.length) {
+            this.setAttribute("outbound", "");
         }
+        globalThis.addEventListener("graph-active", this.activeListener);
     }
@@ -147,3 +148,3 @@ disconnectedCallback() {
         this.replaced = false;
-        globalThis.removeEventListener('graph-active', null);
+        globalThis.removeEventListener("graph-active", null);
     }
@@ -159,6 +160,15 @@ package;
     replaces;
-    channels = [];
     get edges() {
-        return this.shadowRoot.getElementById('edges');
+        return this.shadowRoot.getElementById("edges");
     }
+    _channels = [];
+    get channels() {
+        return this._channels;
+    }
+    set channels(val) {
+        if (this._channels === val) return;
+        this._channels = val;
+        this.shadowRoot.querySelector('#channels').innerHTML = this.channels.map((ch)=>`<li>${ch}</li>`
+        ).join("");
+    }
     _replaced = false;
@@ -172,4 +182,4 @@ get replaced() {
         if (this._replaced) {
-            const repLine = document.createElementNS('http://www.w3.org/2000/svg', "path");
-            repLine.setAttributeNS(null, 'd', 'M 31 47 C 50 42, 70 40, 70 0');
+            const repLine = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            repLine.setAttributeNS(null, "d", "M 31 47 C 50 42, 70 40, 70 0");
             this.edges.appendChild(repLine);
@@ -186,5 +196,5 @@ }
         if (this._connected) {
-            this.setAttribute('connected', '');
+            this.setAttribute("connected", "");
         } else {
-            this.removeAttribute('connected');
+            this.removeAttribute("connected");
         }
@@ -197,19 +207,20 @@ }
     set active(val) {
-        if (this._active === val) return;
         this._active = val;
-        while(this.edges.firstChild){
-            this.edges.removeChild(this.edges.firstChild);
+        if (this.edges) {
+            while(this.edges.firstChild){
+                this.edges.removeChild(this.edges.firstChild);
+            }
         }
         if (this._active) {
             this.connected = false;
-            this.setAttribute('active', '');
-            if (this.replaces || this.skip_range || this.skips) {
-                const repLine = document.createElementNS('http://www.w3.org/2000/svg', "path");
-                repLine.setAttributeNS(null, 'd', 'M 31 53 C 50 58, 70 60, 70 100');
+            this.setAttribute("active", "");
+            if (this.replaces || this.skip_range || this.skips.length) {
+                const repLine = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                repLine.setAttributeNS(null, "d", "M 31 53 C 50 58, 70 60, 70 100");
                 this.edges.appendChild(repLine);
             }
-            this.dispatchEvent(new CustomEvent('graph-active', {
+            this.dispatchEvent(new CustomEvent("graph-active", {
                 detail: {
                     version: this.version,
-                    replaces: this.replaces ? this.replaces.replace(`${this.package}.v`, '') : '',
+                    replaces: this.replaces ? this.replaces : "",
                     skips: this.skips,
@@ -223,3 +234,3 @@ skip_min: this.skip_range ? this.skip_range.min : null,
         } else {
-            this.removeAttribute('active');
+            this.removeAttribute("active");
             this.replaced = false;
@@ -230,3 +241,3 @@ }
         const detail = evt.detail;
-        if (this.edges && detail) {
+        if (detail) {
             if (detail.version && detail.version !== this.version) {
@@ -239,4 +250,4 @@ while(this.edges.firstChild){
                 if (detail.replaces && detail.replaces === this.version) {
-                    const repLine = document.createElementNS('http://www.w3.org/2000/svg', "path");
-                    repLine.setAttributeNS(null, 'd', 'M 31 47 C 50 42, 70 40, 70 0');
+                    const repLine = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    repLine.setAttributeNS(null, "d", "M 31 47 C 50 42, 70 40, 70 0");
                     this.edges.appendChild(repLine);
@@ -246,4 +257,4 @@ this.connected = true;
                 if (this.replaces === detail.version) {
-                    const overLine = document.createElementNS('http://www.w3.org/2000/svg', "path");
-                    overLine.setAttributeNS(null, 'd', 'M 31 53 C 50 58, 70 60, 70 100');
+                    const overLine = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    overLine.setAttributeNS(null, "d", "M 31 53 C 50 58, 70 60, 70 100");
                     this.edges.appendChild(overLine);
@@ -253,8 +264,8 @@ evt.composedPath()[0].replaced = true;
                 }
-                if (detail.skips && detail.skips.indexOf(this.version) >= 0) {
-                    const skipLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-                    skipLine.setAttributeNS(null, 'x1', '70');
-                    skipLine.setAttributeNS(null, 'x2', '70');
-                    skipLine.setAttributeNS(null, 'y1', '100');
-                    skipLine.setAttributeNS(null, 'y2', '0');
+                if (detail.skips.length && detail.skips.indexOf(this.version) >= 0) {
+                    const skipLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                    skipLine.setAttributeNS(null, "x1", "70");
+                    skipLine.setAttributeNS(null, "x2", "70");
+                    skipLine.setAttributeNS(null, "y1", "100");
+                    skipLine.setAttributeNS(null, "y2", "0");
                     this.edges.appendChild(skipLine);
@@ -265,11 +276,11 @@ this.connected = true;
                     if (this.version !== detail.skip_min) {
-                        const skipLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-                        skipLine.setAttributeNS(null, 'x1', '70');
-                        skipLine.setAttributeNS(null, 'x2', '70');
-                        skipLine.setAttributeNS(null, 'y1', '100');
-                        skipLine.setAttributeNS(null, 'y2', '0');
+                        const skipLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                        skipLine.setAttributeNS(null, "x1", "70");
+                        skipLine.setAttributeNS(null, "x2", "70");
+                        skipLine.setAttributeNS(null, "y1", "100");
+                        skipLine.setAttributeNS(null, "y2", "0");
                         this.edges.appendChild(skipLine);
                     }
-                    const repLine = document.createElementNS('http://www.w3.org/2000/svg', "path");
-                    repLine.setAttributeNS(null, 'd', 'M 31 47 C 50 42, 70 40, 70 0');
+                    const repLine = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    repLine.setAttributeNS(null, "d", "M 31 47 C 50 42, 70 40, 70 0");
                     this.edges.appendChild(repLine);
@@ -282,6 +293,6 @@ this.connected = true;
     get escVer() {
-        return this.version.replaceAll('.', '-');
+        return this.version.replaceAll(".", "-");
     }
     get escChannel() {
-        return this.channel_name.replaceAll('.', '-');
+        return this.channel_name.replaceAll(".", "-");
     }
@@ -362,4 +373,6 @@ }
       font-family: var(--cpxOGH3FontFamily, 'Red Hat Display', sans-serif);
-      font-weight: medium; 
+      font-weight: var(--cpxOGH3FontWeight, medium); 
       font-size: var(--cpxOGH3FontSize, 20px); 
+      line-height: var(--cpxOGH3LineHeight, 20px);
+      margin: var(--cpxOGH3Margin, 20px 0);
     }
@@ -420,2 +433,3 @@
       grid-template-columns: 1fr 3fr; 
+      margin: var(--cpxOptionsMargin, 0);
     }
@@ -473,13 +487,13 @@ </style>
         if (this.bundle.indices.size > 0) {
-            const indexSelect = this.shadowRoot.querySelector('#ocp_versions select');
+            const indexSelect = this.shadowRoot.querySelector("#ocp_versions select");
             [
                 ...this.bundle.indices.keys()
             ].sort().forEach((index)=>{
-                const opt = document.createElement('option');
+                const opt = document.createElement("option");
                 opt.innerHTML = index;
-                opt.setAttribute('value', index);
+                opt.setAttribute("value", index);
                 if (this.index === index) {
                     this.index = index;
                     this.setChannels();
-                    opt.setAttribute('selected', 'selected');
+                    opt.setAttribute("selected", "selected");
                 }
@@ -502,3 +516,3 @@ indexSelect.appendChild(opt);
             ...this.bundle.indices.keys()
-        ][0];
+        ].slice(-1)[0];
     }
@@ -508,5 +522,5 @@ set index(val) {
         this._index = val;
-        this.setAttribute('index', this._index);
+        this.setAttribute("index", this._index);
         this.setChannels();
-        this.render();
+        this.requestRender();
     }
@@ -517,3 +531,3 @@ _channel = "";
             ...this.bundle.indices.get(this.index).channels.keys()
-        ][0];
+        ].slice(-1)[0];
     }
@@ -523,4 +537,4 @@ set channel(val) {
         this._channel = val;
-        this.setAttribute('channel', this._channel);
-        this.render();
+        this.setAttribute("channel", this._channel);
+        this.requestRender();
     }
@@ -534,3 +548,3 @@ _all = false;
         this._all = val;
-        this.render();
+        this.requestRender();
     }
@@ -540,6 +554,7 @@ _body;
         if (!this._body) {
-            this._body = this.shadowRoot.querySelector('main');
+            this._body = this.shadowRoot.querySelector("main");
         }
         return this._body;
     }
+    rendered = false;
     constructor(url){
@@ -552,12 +567,12 @@ super();
     connectedCallback() {
-        this.shadowRoot.addEventListener('pfe-select:change', (evt)=>{
-            if (evt.target['id'] === 'ocp_versions') {
-                this.index = evt['detail'].value;
-            } else if (evt.target['id'] === 'channels') {
-                this.channel = evt['detail'].value;
+        this.shadowRoot.addEventListener("pfe-select:change", (evt)=>{
+            if (evt.target["id"] === "ocp_versions") {
+                this.index = evt["detail"].value;
+            } else if (evt.target["id"] === "channels") {
+                this.channel = evt["detail"].value;
             }
         });
-        this.shadowRoot.addEventListener('change', (evt)=>{
-            if (evt.target['id'] === 'all-channels') {
-                this.all = evt.target['checked'] ? true : false;
+        this.shadowRoot.addEventListener("change", (evt)=>{
+            if (evt.target["id"] === "all-channels") {
+                this.all = evt.target["checked"] ? true : false;
             }
@@ -582,3 +597,3 @@ });
             if (this.bundle.indices.get(this.index).channels.size > 0) {
-                const channelSelect = this.shadowRoot.querySelector('#channels select');
+                const channelSelect = this.shadowRoot.querySelector("#channels select");
                 while(channelSelect.firstChild){
@@ -590,8 +605,8 @@ channelSelect.removeChild(channelSelect.firstChild);
                 ].sort().forEach((channel)=>{
-                    const opt = document.createElement('option');
+                    const opt = document.createElement("option");
                     opt.innerHTML = channel;
-                    opt.setAttribute('value', channel);
+                    opt.setAttribute("value", channel);
                     if (this.channel === channel) {
                         this.channel = channel;
-                        opt.setAttribute('selected', 'selected');
+                        opt.setAttribute("selected", "selected");
                     }
@@ -603,36 +618,45 @@ channelSelect.appendChild(opt);
     }
+    async requestRender() {
+        if (!this.rendered) {
+            this.rendered = true;
+            this.rendered = await false;
+            this.render();
+        }
+    }
     render() {
-        if (this.bundle && this.bundle.indices) {
-            const currIndex = this.bundle.indices.get(this.index);
-            const currChannel = this.bundle.indices.get(this.index).channels.get(this.channel);
-            if (currIndex && currChannel && currChannel.versions.size > 0) {
-                while(this.body.firstChild){
-                    this.body.removeChild(this.body.firstChild);
-                }
-                if (!this.all) {
-                    currChannel.getVersions().map((ver)=>{
-                        const csv = currChannel.versions.get(ver);
-                        const verChannels = [];
-                        currIndex.channels.forEach((ch)=>{
-                            if (ch.name !== csv.channel_name && ch.versions.has(csv.version)) {
-                                verChannels.push(ch.name);
-                            }
+        if (!this.rendered) {
+            if (this.bundle && this.bundle.indices) {
+                const currIndex = this.bundle.indices.get(this.index);
+                const currChannel = this.bundle.indices.get(this.index).channels.get(this.channel);
+                if (currIndex && currChannel && currChannel.versions.size > 0) {
+                    while(this.body.firstChild){
+                        this.body.removeChild(this.body.firstChild);
+                    }
+                    if (!this.all) {
+                        currChannel.getVersions().map((ver)=>{
+                            const csv = currChannel.versions.get(ver);
+                            const verChannels = [];
+                            currIndex.channels.forEach((ch)=>{
+                                if (ch.name !== csv.channel_name && ch.versions.has(csv.version)) {
+                                    verChannels.push(ch.name);
+                                }
+                            });
+                            csv.channels = verChannels;
+                            this.body.appendChild(csv);
                         });
-                        csv.channels = verChannels;
-                        this.body.appendChild(csv);
-                    });
-                } else {
-                    currIndex.getAllVersions().forEach((csv)=>{
-                        csv.version.replaceAll('.', '-');
-                        const verChannels = [];
-                        currIndex.channels.forEach((ch)=>{
-                            if (ch.versions.has(csv.version)) {
-                                verChannels.push(ch.name);
-                            }
+                    } else {
+                        currIndex.getAllVersions().forEach((csv)=>{
+                            csv.version.replaceAll(".", "-");
+                            const verChannels = [];
+                            currIndex.channels.forEach((ch)=>{
+                                if (ch.versions.has(csv.version)) {
+                                    verChannels.push(ch.name);
+                                }
+                            });
+                            csv.channels = verChannels;
+                            this.body.appendChild(csv);
                         });
-                        csv.channels = verChannels;
-                        this.body.appendChild(csv);
-                    });
+                    }
+                    this.body.firstChild.active = true;
                 }
-                this.body.firstChild.click();
             }
@@ -639,0 +663,0 @@ }

package.json

 {
   "name": "@chapeaux/cpx-operator-graph",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Chapeaux Operator Graph Component",
@@ -32,3 +32,3 @@ "type": "module",
   "homepage": "https://github.com/chapeaux/cpx-components/components/cpx-operator-graph",
-  "gitHead": "874d21962f1a81e75dedec2d280e3845e87f1825",
+  "gitHead": "03c113e6ec47be4ca201930c6d3963edbd2b3bd5",
   "dependencies": {
@@ -35,0 +35,0 @@ "semver-parser": "^4.0.0"

No alert changes

Improved metrics

Total package byte prevSize

88285

increased by2.01%

Lines of code

1345

increased by3.7%

No dependency changes