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

Comparing version 0.5.1 to 0.6.1

cpx-operator-graph.cjs.js

@@ -1,271 +0,290 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CPXOperatorGraph = void 0;
-const semver_parser_1 = require("semver-parser");
-const tmpl = `<style>
-:host { 
-  font-family: var(--cpxOGFontFamily, 'Red Hat Display', sans-serif);
-  font-size: var(--cpxOGFontSize, 16px );
+var B = 8, G = -1;
+var f = (e)=>Object.prototype.toString.call(e).slice(B, G)
+, i = (e)=>typeof e == "string" || e instanceof String
+;
+var X = 10, h = "(?:0|[1-9]\\d*)", y = "\\d*[A-z-][A-z\\d-]*", I = `(?:${y}|${h})`, L = `${I}(?:\\.${I})*`, A = `(?:${y}|\\d+)`, O = `${A}(?:\\.${A})*`, M = `(${h}(?:\\.${h}){2})(?:-(${L}))?(?:\\+(${O}))?`, N = new RegExp(`^${h}$`), P = new RegExp(`^v?${M}$`), d = new RegExp(`^${M}$`), u = (e, r = !1)=>{
+    if (!i(e)) throw new TypeError(`Expected String but got ${f(e)}.`);
+    return (r ? d : P).test(e);
+}, l = (e, r = !1)=>{
+    if (!i(e)) throw new TypeError(`Expected String but got ${f(e)}.`);
+    if (!(r || N.test(e))) throw new Error(`${e} is not a stringified positive integer.`);
+    if (N.test(e) && (e = parseInt(e, X), !Number.isSafeInteger(e))) throw new RangeError(`${e} exceeds ${Number.MAX_SAFE_INTEGER}.`);
+    return e;
+}, _ = (e, r, s = !1)=>{
+    if (!i(e)) throw new TypeError(`Expected String but got ${f(e)}.`);
+    if (!i(r)) throw new TypeError(`Expected String but got ${f(r)}.`);
+    if (!u(e, !!s)) throw new Error(`${e} is not valid version string.`);
+    if (!u(r, !!s)) throw new Error(`${r} is not valid version string.`);
+    let t;
+    if (e === r) t = 0;
+    else {
+        let m = s ? d : P, [, w, c] = e.match(m), [, S, p] = r.match(m), [$, g, E] = w.split(".").map(l), [a, R, V] = S.split(".").map(l);
+        if ($ > a) t = 1;
+        else if ($ < a) t = -1;
+        else if (g > R) t = 1;
+        else if (g < R) t = -1;
+        else if (E > V) t = 1;
+        else if (E < V) t = -1;
+        else if (c === p) t = 0;
+        else if (!c && p) t = 1;
+        else if (c && !p) t = -1;
+        else {
+            let b = c.split(".").map((o)=>l(o, !0)
+            ), T = p.split(".").map((o)=>l(o, !0)
+            ), v = Math.max(b.length, T.length), x = 0;
+            for(; x < v;){
+                let o = b[x], n = T[x];
+                if (o && !n || i(o) && Number.isInteger(n) ? t = 1 : !o && n || Number.isInteger(o) && i(n) ? t = -1 : o !== n && i(o) && i(n) ? t = o.localeCompare(n) : Number.isInteger(o) && Number.isInteger(n) && (o > n ? t = 1 : o < n && (t = -1)), Number.isInteger(t)) break;
+                x++;
+            }
+        }
+    }
+    return t;
+};
+class SkipRange {
+    constructor(range){
+        const rangeArray = range.replace('>=', '').replace('<', '').replace('x', '0').split(' ');
+        this.min = rangeArray[0];
+        this.max = rangeArray.length > 0 ? rangeArray[1] : '';
+    }
+    min;
+    max;
 }
-h3 { 
-  font-family: var(--cpxOGH3FontFamily, 'Red Hat Display', sans-serif);
-  font-weight: medium; 
-  font-size: var(--cpxOGH3FontSize, 20px); 
-}
-.node { fill: transparent; stroke-width:  var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGDisconnectedColor, #d2d2d2); }
-.edges { fill: transparent; stroke-width: var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGConnectedColor,#0266c8); }
-.inbound, .outbound, .active { display: none; }
-[active] .node { stroke: var(--cpxOGActiveColor,#93d434); }
-[active] .active, [inbound] .inbound, [outbound] .outbound { display: block; }
-[active] .active { fill: var(--cpxOGActiveColor, #93d434); }
-[connect] .node { stroke: var(--cpxOGConnectedColor,#0266c8); }
+class CPXOperatorVersion extends HTMLElement {
+    static get tag() {
+        return "cpx-operator-version";
+    }
+    get html() {
+        return `<style>
+    :host { height: 100px; display: grid;
+      grid-template-columns: 8% 12% 25% 25% 30%;
+      border-bottom: 1px solid #999;
+      padding: 0;align-items:center; }
 
-table { table-layout: fixed; max-width: 100%; width: 100%; border-collapse: collapse; border-spacing: 0; }
-thead th { padding-bottom: 20px; }
-thead th:nth-child(1) { width: 8%; }
-thead th:nth-child(2) { width: 12%; text-align:left; }
-thead th:nth-child(3) { width: 25%; }
-thead th:nth-child(4) { width: 25%; text-align: left; }
-thead th:nth-child(5) { width: 30%; text-align: left; }
-tr { border-bottom: 1px solid #999; }
-td { padding: 0; }
-tbody td:nth-child(1) {}
-tbody th:nth-child(2) { }
-tbody th:nth-child(2) label { color: var(--cpxOGConnectedColor, #0266c8); text-align: left; }
-tbody th:nth-child(2) input { opacity: 0; width:0; height:0; }
-tbody [active] th:nth-child(2) label { color: #333; font-weight: normal; }
-tbody td:nth-child(3) { text-align: right; }
-tbody td:nth-child(4) { padding-left: 24px; }
-tbody td:nth-child(5) {}
-svg { display: block; max-width: 100px; }
+    #node { fill: transparent; stroke-width:  var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGDisconnectedColor, #d2d2d2); }
+    #edges { fill: transparent; stroke-width: var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGConnectedColor,#0266c8); }
+    .inbound, .outbound, .active { display: none; }
+    :host([active]) #node { stroke: var(--cpxOGActiveColor,#93d434); }
+    :host([active]) .active, :host([inbound]) .inbound, :host([outbound]) .outbound { display: block; }
+    :host([active]) .active { fill: var(--cpxOGActiveColor, #93d434); }
+    :host([connected]) #node { stroke: var(--cpxOGConnectedColor,#0266c8); }
 
-.toggle { justify-self: end; padding-right: 10em;  font-size: var(--cpxOGToggleFontSize, 16px); }
-.toggle input[type=checkbox] { height: 0; width: 0; opacity: 0; position: absolute; }
-.toggle label {
-  cursor: pointer;
-  text-indent: 60px;
-  font-size: var(--cpxOGToggleFontSize, 16px);
-  width: 50px;
-  height: 30px;
-  background: var(--cpxOGDisconnectedColor, #d2d2d2);
-  display: block;
-  border-radius: 25px;
-  position: relative;
-  white-space: nowrap;
-  line-height: 30px;
-  color: var(--cpxOGDisconnectedColor, #d2d2d2);
-}
+    aside { }
+    div label { color: var(--cpxOGConnectedColor, #0266c8); text-align: left;  }
+    div input { opacity: 0; width:0; height:0; }
+    :host([active]) div label { color: #333; font-weight: normal; }
 
-.toggle label:after {
-  content: '';
-  position: absolute;
-  top: 6px;
-  left: 7px;
-  width: 17px;
-  height: 17px;
-  background: #fff;
-  border-radius: 20px;
-  transition: 0.3s;
-}
+    main :nth-child(1) {}
+    main :nth-child(2) { }
 
-.toggle input:checked + label {
-  background: var(--cpxOGConnectedColor, #0266c8);
-  color: #151515;
-}
-
-.toggle input:checked + label:after  { left: calc(100% - 7px); transform: translateX(-100%); }
-.toggle label:active:after { width: 33px; }
-.options { 
-  display: grid; 
-  grid-template-columns: 1fr 3fr; 
-  margin-bottom: 60px; 
-}
-</style>
-<section>
-<h3>OpenShift Version</h3>
-<div class="options">
-  <pfe-select id="ocp_versions"><select></select></pfe-select>
-</div>
-<h3>Channel</h3>
-<div class="options">
-  <pfe-select id="channels"><select></select></pfe-select>
-  <div class="toggle">
-    <input type="checkbox" name="all-channels" value="all" id="all-channels">
-    <label for="all-channels">Show all versions</label>
-  </div>
-</div>
-<table>
-    <caption></caption>
-    <thead><tr>
-    <th scope="col"></th>
-    <th scope="col">Version</th>
-    <th scope="col"></th>
-    <th scope="col">Update Paths</th>
-    <th scope="col">Other Available Channels</th>
-    </tr></thead>
-    <tbody></tbody>
-</table>`;
-class SkipRange {
-    constructor(range) {
-        Object.defineProperty(this, "min", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "max", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        range.split(' ');
+    
+    tbody td:nth-child(3) { text-align: right; }
+    tbody td:nth-child(4) { padding-left: 24px; }
+    tbody td:nth-child(5) {}
+    svg { display: block; max-width: 100px; max-height: 100%; }
+    </style>
+    <aside>${this.latest_in_channel ? '<em>Head</em>' : ''}</aside>
+    <div><label tabindex="0" for="${this.escVer}">${this.version}</label><input type="radio" id="${this.escVer}" name="${this.escChannel}" value="${this.version}"></div>
+    <aside>
+      ${this.replaces && this.replaces.length > 0 ? `Replaces: ${this.replaces.replace(this.package + '.', '')}` : ''}
+      ${this.skips && this.skips.length ? `Skips: ${this.skips.join(',')}` : ''}
+    </aside>
+    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+      <g id="node">
+          <circle cx="20" cy="50" r="10"/>
+          <circle class="active" cx="20" cy="50" r="3"/>
+          <line class="inbound outbound" x1="10" y1="50" x2="30" y2="50"/>
+          <line class="inbound" x1="5" y1="43" x2="35" y2="43" stroke="white" stroke-width="12"/>
+          <line class="outbound" x1="5" y1="57" x2="35" y2="57" stroke="white" stroke-width="12"/>
+      </g>
+      <g id="edges"></g>
+    </svg>
+    <ul>${this.channels.map((ch)=>`<li>${ch}</li>`
+        )}</ul>`;
     }
-}
-class OperatorGraph {
-    constructor() {
-        Object.defineProperty(this, "active", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
+    constructor(op){
+        super();
+        this.attachShadow({
+            mode: "open"
         });
-        Object.defineProperty(this, "inbound", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "outbound", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "connected", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "graph", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: document.createElementNS('http://www.w3.org/2000/svg', 'svg')
-        });
+        op.replaces = op.replaces ? op.replaces.replace(op.package + '.v', '') : '';
+        op.skip_range = op.skip_range ? new SkipRange(op.skip_range) : null;
+        Object.assign(this, op);
+        this.activeListener = this.activeListener.bind(this);
     }
-}
-class OperatorVersion {
-    constructor(op) {
-        Object.defineProperty(this, "package", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
+    connectedCallback() {
+        this.shadowRoot.innerHTML = this.html;
+        this.addEventListener('click', (_evt)=>{
+            this.active = true;
+            console.log('Activate:', this.version);
         });
-        Object.defineProperty(this, "channel_name", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "csv_name", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "latest_in_channel", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "ocp_version", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "version", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "skips", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "skip_range", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "replaces", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.assign(this, op);
-        if (op.skip_range) {
-            this.skip_range = new SkipRange(op.skip_range);
+        globalThis.addEventListener('graph-active', this.activeListener);
+        if (!this.replaces && !this.skip_range && !this.skips) {
+            this.setAttribute('outbound', '');
         }
     }
+    package;
+    channel_name;
+    csv_name;
+    latest_in_channel;
+    ocp_version;
+    version;
+    skips = [];
+    skip_range;
+    replaces;
+    channels = [];
+    _edges;
+    get edges() {
+        if (!this._edges) {
+            this._edges = this.shadowRoot.getElementById('edges');
+        }
+        return this._edges;
+    }
+    _replaced = false;
+    get replaced() {
+        return this._replaced;
+    }
+    set replaced(val) {
+        if (this._replaced === val) return;
+        this._replaced = val;
+        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');
+            this.edges.appendChild(repLine);
+        }
+    }
+    _connected = false;
+    get connected() {
+        return this._connected;
+    }
+    set connected(val) {
+        if (this._connected === val) return;
+        this._connected = val;
+        if (this._connected) {
+            this.setAttribute('connected', '');
+        } else {
+            this.removeAttribute('connected');
+        }
+    }
+    _active = false;
+    get active() {
+        return this._active;
+    }
+    set active(val) {
+        if (this._active === val) return;
+        this._active = val;
+        while(this.edges.firstChild){
+            this.edges.removeChild(this.edges.firstChild);
+        }
+        if (this._active) {
+            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.edges.appendChild(repLine);
+            }
+            this.dispatchEvent(new CustomEvent('graph-active', {
+                detail: {
+                    version: this.version,
+                    replaces: this.replaces ? this.replaces.replace(`${this.package}.v`, '') : '',
+                    skips: this.skips,
+                    skip_min: this.skip_range ? this.skip_range.min : null,
+                    skip_max: this.skip_range ? this.skip_range.max : null
+                },
+                bubbles: true,
+                composed: true
+            }));
+        } else {
+            this.removeAttribute('active');
+            this.replaced = false;
+        }
+    }
+    activeListener(evt) {
+        const detail = evt.detail;
+        if (detail) {
+            if (detail.version && detail.version !== this.version) {
+                while(this.edges.firstChild){
+                    this.edges.removeChild(this.edges.firstChild);
+                }
+                this.active = false;
+                this.connected = false;
+                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');
+                    this.edges.appendChild(repLine);
+                    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');
+                    this.edges.appendChild(overLine);
+                    evt.composedPath()[0].replaced = true;
+                    this.connected = 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');
+                    this.edges.appendChild(skipLine);
+                    this.connected = true;
+                }
+                if (detail.skip_min && _(this.version, detail.skip_min) >= 0 && _(this.version, detail.skip_max) < 0) {
+                    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');
+                        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');
+                    this.edges.appendChild(repLine);
+                    this.connected = true;
+                }
+            }
+        }
+    }
+    get escVer() {
+        return this.version.replaceAll('.', '-');
+    }
+    get escChannel() {
+        return this.channel_name.replaceAll('.', '-');
+    }
 }
-class OperatorPackage {
-}
 class OperatorChannel {
-    constructor(name, version) {
-        Object.defineProperty(this, "versions", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Map()
-        });
-        Object.defineProperty(this, "name", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
+    constructor(name, version){
         this.name = name;
         this.versions.set(version.version, version);
     }
+    versions = new Map();
+    name;
     getVersions(ord) {
-        return [...this.versions.keys()].sort((a, b) => (0, semver_parser_1.compareSemVer)(b, a));
+        return [
+            ...this.versions.keys()
+        ].sort((a, b)=>_(b, a)
+        );
     }
 }
 class OperatorIndex {
-    constructor(version, channel) {
-        Object.defineProperty(this, "channels", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Map()
-        });
-        Object.defineProperty(this, "version", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
+    constructor(version, channel){
         this.version = version;
         this.channels.set(channel.name, channel);
     }
+    channels = new Map();
+    version;
     getAllVersions() {
         const versions = new Map();
-        this.channels.forEach(ch => {
-            ch.versions.forEach(v => {
+        this.channels.forEach((ch)=>{
+            ch.versions.forEach((v)=>{
                 versions.set(v.version, v);
             });
         });
-        const orderedVersions = [...versions.keys()]
-            .sort((a, b) => (0, semver_parser_1.compareSemVer)(b, a))
-            .reduce((a, c) => a.set(c, versions.get(c)), new Map());
+        const orderedVersions = [
+            ...versions.keys()
+        ].sort((a, b)=>_(b, a)
+        ).reduce((a, c)=>a.set(c, versions.get(c))
+        , new Map());
         return orderedVersions;
@@ -275,11 +294,5 @@ }
 class OperatorBundle {
-    constructor(data) {
-        Object.defineProperty(this, "indices", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Map()
-        });
-        data.map(op => {
-            const version = new OperatorVersion(op);
+    constructor(data){
+        data.map((op)=>{
+            const version = new CPXOperatorVersion(op);
             const channel = new OperatorChannel(op.channel_name, version);
@@ -292,8 +305,6 @@ const index = new OperatorIndex(op.ocp_version, channel);
                     }
-                }
-                else {
+                } else {
                     this.indices.get(index.version).channels.set(channel.name, channel);
                 }
-            }
-            else {
+            } else {
                 this.indices.set(index.version, index);
@@ -303,61 +314,105 @@ }
     }
-    getChannelsByIndex(index) { }
-    getVersionsByChannel(channel) { }
+    indices = new Map();
+    getChannelsByIndex(index) {
+    }
+    getVersionsByChannel(channel) {
+    }
 }
-class CPXOperatorGraph extends HTMLElement {
-    constructor(url) {
-        super();
-        Object.defineProperty(this, "_url", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ""
-        });
-        Object.defineProperty(this, "bundle", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_data", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
-        });
-        Object.defineProperty(this, "_order", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: "desc"
-        });
-        Object.defineProperty(this, "_index", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ""
-        });
-        Object.defineProperty(this, "_channel", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ""
-        });
-        Object.defineProperty(this, "_all", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "_body", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.attachShadow({ mode: "open" });
-    }
+class CPXOperatorGraph1 extends HTMLElement {
     static get tag() {
         return "cpx-operator-graph";
     }
+    static get tmpl() {
+        return `<style>
+    :host { 
+      font-family: var(--cpxOGFontFamily, 'Red Hat Display', sans-serif);
+      font-size: var(--cpxOGFontSize, 16px );
+    }
+    h3 { 
+      font-family: var(--cpxOGH3FontFamily, 'Red Hat Display', sans-serif);
+      font-weight: medium; 
+      font-size: var(--cpxOGH3FontSize, 20px); 
+    }
+
+    section { display:grid; grid-template-rows: auto; }
+    header, cpx-operator-version { display: grid; grid-template-columns: 8% 12% 25% 25% 30%; border-bottom: 1px solid #999; padding: 0; }
+    header { padding-bottom: 20px; }
+    header strong:nth-child(1) {  }
+    header strong:nth-child(2) { text-align:left; }
+    header strong:nth-child(3) {  }
+    header strong:nth-child(4) { text-align: left; }
+    header strong:nth-child(5) { text-align: left; }
+
+    .toggle { justify-self: end; padding-right: 10em;  font-size: var(--cpxOGToggleFontSize, 16px); }
+    .toggle input[type=checkbox] { height: 0; width: 0; opacity: 0; position: absolute; }
+    .toggle label {
+      cursor: pointer;
+      text-indent: 60px;
+      font-size: var(--cpxOGToggleFontSize, 16px);
+      width: 50px;
+      height: 30px;
+      background: var(--cpxOGDisconnectedColor, #d2d2d2);
+      display: block;
+      border-radius: 25px;
+      position: relative;
+      white-space: nowrap;
+      line-height: 30px;
+      color: var(--cpxOGDisconnectedColor, #d2d2d2);
+    }
+
+    .toggle label:after {
+      content: '';
+      position: absolute;
+      top: 6px;
+      left: 7px;
+      width: 17px;
+      height: 17px;
+      background: #fff;
+      border-radius: 20px;
+      transition: 0.3s;
+    }
+
+    .toggle label:focus {
+      outline: 8px ridge --var(--cpxOGConnectedColor, #0266c8);
+    }
+
+    .toggle input:checked + label {
+      background: var(--cpxOGConnectedColor, #0266c8);
+      color: #151515;
+    }
+
+    .toggle input:checked + label:after  { left: calc(100% - 7px); transform: translateX(-100%); }
+    .toggle label:active:after { width: 33px; }
+    .options { 
+      display: grid; 
+      grid-template-columns: 1fr 3fr; 
+      margin-bottom: 60px; 
+    }
+    </style>
+    <section>
+    <h3>OpenShift Version</h3>
+    <div class="options">
+      <pfe-select id="ocp_versions"><select></select></pfe-select>
+    </div>
+    <h3>Channel</h3>
+    <div class="options">
+      <pfe-select id="channels"><select></select></pfe-select>
+      <div class="toggle">
+        <input type="checkbox" name="all-channels" value="all" id="all-channels">
+        <label for="all-channels">Show all versions</label>
+      </div>
+    </div>
+    </section>
+    <section>
+      <header>
+        <strong></strong>
+        <strong>Version</strong>
+        <strong></strong>
+        <strong>Update Paths</strong>
+        <strong>Other Available Channels</strong>
+      </header>
+      <main></main>
+    <section>`;
+    }
+    _url = "";
     get url() {
@@ -367,12 +422,13 @@ return this._url;
     set url(val) {
-        if (this._url === val)
-            return;
+        if (this._url === val) return;
         this._url = val;
         this.setAttribute("url", this._url);
-        fetch(val).then((resp) => {
+        fetch(val).then((resp)=>{
             return resp.json();
-        }).then((data) => {
-            this.data = data['data'];
+        }).then((data)=>{
+            this.data = data;
         });
     }
+    bundle;
+    _data = [];
     get data() {
@@ -382,11 +438,12 @@ return this._data;
     set data(val) {
-        if (this._data === val)
-            return;
+        if (this._data === val) return;
         this._data = val;
         this.bundle = new OperatorBundle(this._data);
-        this.shadowRoot.innerHTML = tmpl;
+        this.shadowRoot.innerHTML = CPXOperatorGraph1.tmpl;
         this.render();
         if (this.bundle.indices.size > 0) {
             const indexSelect = this.shadowRoot.querySelector('#ocp_versions select');
-            [...this.bundle.indices.keys()].sort().forEach(index => {
+            [
+                ...this.bundle.indices.keys()
+            ].sort().forEach((index)=>{
                 const opt = document.createElement('option');
@@ -404,2 +461,3 @@ opt.innerHTML = index;
     }
+    _order = "desc";
     get order() {
@@ -409,12 +467,13 @@ return this._order;
     set order(val) {
-        if (this._order === val)
-            return;
+        if (this._order === val) return;
         this._order = val;
     }
+    _index = "";
     get index() {
-        return this._index !== "" ? this._index : [...this.bundle.indices.keys()][0];
+        return this._index !== "" ? this._index : [
+            ...this.bundle.indices.keys()
+        ][0];
     }
     set index(val) {
-        if (this._index === val)
-            return;
+        if (this._index === val) return;
         this._index = val;
@@ -425,8 +484,10 @@ this.setAttribute('index', this._index);
     }
+    _channel = "";
     get channel() {
-        return this._channel !== "" ? this._channel : [...this.bundle.indices.get(this.index).channels.keys()][0];
+        return this._channel !== "" ? this._channel : [
+            ...this.bundle.indices.get(this.index).channels.keys()
+        ][0];
     }
     set channel(val) {
-        if (this._channel === val)
-            return;
+        if (this._channel === val) return;
         this._channel = val;
@@ -436,2 +497,3 @@ this.setAttribute('channel', this._channel);
     }
+    _all = false;
     get all() {
@@ -441,23 +503,28 @@ return this._all;
     set all(val) {
-        if (this._all === val)
-            return;
+        if (this._all === val) return;
         this._all = val;
         this.render();
     }
+    _body;
     get body() {
         if (!this._body) {
-            this._body = this.shadowRoot.querySelector('tbody');
+            this._body = this.shadowRoot.querySelector('main');
         }
         return this._body;
     }
+    constructor(url){
+        super();
+        this.attachShadow({
+            mode: "open"
+        });
+    }
     connectedCallback() {
-        this.shadowRoot.addEventListener('pfe-select:change', evt => {
+        this.shadowRoot.addEventListener('pfe-select:change', (evt)=>{
             if (evt.target['id'] === 'ocp_versions') {
                 this.index = evt['detail'].value;
-            }
-            else if (evt.target['id'] === 'channels') {
+            } else if (evt.target['id'] === 'channels') {
                 this.channel = evt['detail'].value;
             }
         });
-        this.shadowRoot.addEventListener('change', evt => {
+        this.shadowRoot.addEventListener('change', (evt)=>{
             if (evt.target['id'] === 'all-channels') {
@@ -469,3 +536,9 @@ this.all = evt.target['checked'] ? true : false;
     static get observedAttributes() {
-        return ["url", "order", "channel", "index", "all"];
+        return [
+            "url",
+            "order",
+            "channel",
+            "index",
+            "all"
+        ];
     }
@@ -475,14 +548,2 @@ attributeChangedCallback(attr, oldVal, newVal) {
     }
-    handleClick(id) {
-        return (e) => {
-            const active = this.shadowRoot.querySelector('[active]');
-            if (active) {
-                active.removeAttribute('active');
-            }
-            this.shadowRoot.getElementById(id).setAttribute('active', '');
-            const activeInput = this.shadowRoot.querySelector(`[active] input`);
-            activeInput['click']();
-            activeInput['focus']();
-        };
-    }
     setChannels() {
@@ -493,6 +554,8 @@ this.channel = "";
                 const channelSelect = this.shadowRoot.querySelector('#channels select');
-                while (channelSelect.firstChild) {
+                while(channelSelect.firstChild){
                     channelSelect.removeChild(channelSelect.firstChild);
                 }
-                [...this.bundle.indices.get(this.index).channels.keys()].sort().forEach(channel => {
+                [
+                    ...this.bundle.indices.get(this.index).channels.keys()
+                ].sort().forEach((channel)=>{
                     const opt = document.createElement('option');
@@ -515,12 +578,12 @@ opt.innerHTML = channel;
             if (currIndex && currChannel && currChannel.versions.size > 0) {
-                while (this.body.firstChild) {
+                while(this.body.firstChild){
                     this.body.removeChild(this.body.firstChild);
                 }
                 if (!this.all) {
-                    currChannel.getVersions().map(ver => {
+                    currChannel.getVersions().map((ver)=>{
                         const csv = currChannel.versions.get(ver);
-                        const escVer = ver.replaceAll('.', '');
-                        const escChannel = currChannel.name.replaceAll('.', '');
+                        ver.replaceAll('.', '');
+                        currChannel.name.replaceAll('.', '');
                         const verChannels = [];
-                        currIndex.channels.forEach(ch => {
+                        currIndex.channels.forEach((ch)=>{
                             if (ch.name !== csv.channel_name && ch.versions.has(csv.version)) {
@@ -530,36 +593,9 @@ verChannels.push(ch.name);
                         });
-                        const row = document.createElement('tr');
-                        row.id = csv['_id'];
-                        row.onclick = this.handleClick(row.id);
-                        if (csv.latest_in_channel && csv.replaces !== null) {
-                            row.setAttribute('inbound', '');
-                        }
-                        if (csv.replaces === null) {
-                            row.setAttribute('outbound', '');
-                        }
-                        row.innerHTML = `<td>${csv.latest_in_channel ? '<em>Head</em>' : ''}</td>
-            <th scope="row"><label for="${escVer}">${csv['version']}</label><input type="radio" id="${escVer}" name="${escChannel}" value="${csv['version']}"></th>
-            <td>
-              ${csv['replaces'] ? `Replaces: ${csv['replaces'].replace(csv.package + '.', '')}` : ''}
-              ${csv.skips && csv.skips.length ? `Skips: ${csv.skips.join(',')}` : ''}
-            </td>
-            <td><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-              <g class="node">
-                  <circle cx="20" cy="50" r="10"/>
-                  <circle class="active" cx="20" cy="50" r="3"/>
-                  <line class="inbound outbound" x1="10" y1="50" x2="30" y2="50"/>
-                  <line class="inbound" x1="5" y1="43" x2="35" y2="43" stroke="white" stroke-width="12"/>
-                  <line class="outbound" x1="5" y1="57" x2="35" y2="57" stroke="white" stroke-width="12"/>
-              </g>
-              <g class="edges"></g>
-            </svg></td>
-            <td>${verChannels.join(', ')}</td>`;
-                        this.body.appendChild(row);
+                        this.body.appendChild(csv);
                     });
-                }
-                else {
-                    currIndex.getAllVersions().forEach(csv => {
-                        const escVer = csv.version.replaceAll('.', '');
+                } else {
+                    currIndex.getAllVersions().forEach((csv)=>{
+                        csv.version.replaceAll('.', '-');
                         const verChannels = [];
-                        currIndex.channels.forEach(ch => {
+                        currIndex.channels.forEach((ch)=>{
                             if (ch.versions.has(csv.version)) {
@@ -569,29 +605,3 @@ verChannels.push(ch.name);
                         });
-                        const row = document.createElement('tr');
-                        row.id = csv['_id'];
-                        row.onclick = this.handleClick(row.id);
-                        if (csv.latest_in_channel && csv.replaces !== null) {
-                            row.setAttribute('inbound', '');
-                        }
-                        if (csv.replaces === null) {
-                            row.setAttribute('outbound', '');
-                        }
-                        row.innerHTML = `<td></td>
-            <th scope="row"><label for="${escVer}">${csv.version}</label><input type="radio" id="${escVer}" name="all-versions" value="${csv.version}"></th>
-            <td>
-              ${csv.replaces ? `Replaces: ${csv.replaces.replace(csv.package + '.', '')}` : ''}
-              ${csv.skips && csv.skips.length ? `Skips: ${csv.skips.join(',')}` : ''}
-            </td>
-            <td><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-              <g class="node">
-                  <circle cx="20" cy="50" r="10"/>
-                  <circle class="active" cx="20" cy="50" r="3"/>
-                  <line class="inbound outbound" x1="10" y1="50" x2="30" y2="50"/>
-                  <line class="inbound" x1="5" y1="43" x2="35" y2="43" stroke="white" stroke-width="12"/>
-                  <line class="outbound" x1="5" y1="57" x2="35" y2="57" stroke="white" stroke-width="12"/>
-              </g>
-              <g class="edges"></g>
-            </svg></td>
-            <td>${verChannels.join(', ')}</td>`;
-                        this.body.appendChild(row);
+                        this.body.appendChild(csv);
                     });
@@ -603,8 +613,8 @@ }
 }
-exports.CPXOperatorGraph = CPXOperatorGraph;
-window.customElements.define(CPXOperatorGraph.tag, CPXOperatorGraph);
+window.customElements.define(CPXOperatorVersion.tag, CPXOperatorVersion);
+window.customElements.define(CPXOperatorGraph1.tag, CPXOperatorGraph1);
 document.dispatchEvent(new CustomEvent("cpx-operator-graph-ready", {
     composed: true,
-    bubbles: true,
+    bubbles: true
 }));
-//# sourceMappingURL=cpx-operator-graph.js.map
+export { CPXOperatorGraph1 as CPXOperatorGraph };

cpx-operator-graph.d.ts

@@ -1,38 +0,77 @@
-/// <amd-module name="file:///home/ldary/rh/chapeaux/cpx-components/components/cpx-operator-graph/src/cpx-operator-graph.ts" />
+declare class SkipRange {
+    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;
+}
+declare class OperatorChannel {
+    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>;
+}
+declare class OperatorBundle {
+    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;
-    template: any;
-    cy: any;
+    static get tmpl(): string;
     _url: string;
     get url(): string;
     set url(val: string);
-    _data: any;
-    get data(): any;
-    set data(val: any);
-    _filter: string;
-    get filter(): string;
-    set filter(val: string);
-    _query: string;
-    get query(): string;
-    set query(val: string);
-    _sort: string;
-    get sort(): string;
-    set sort(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);
-    _channels: Map<string, any>;
-    get channels(): Map<string, any>;
-    set channels(val: Map<string, any>);
-    _versions: Map<string, Set<string>>;
-    get versions(): Map<string, Set<string>>;
-    set versions(val: Map<string, Set<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(name: string, oldVal: any, newVal: any): void;
-    render(all?: boolean): void;
+    attributeChangedCallback(attr: any, oldVal: any, newVal: any): void;
+    setChannels(): void;
+    render(): void;
 }
+export {};

cpx-operator-graph.js

@@ -1,268 +0,290 @@
-import { compareSemVer } from 'https://cdn.skypack.dev/semver-parser';
-const tmpl = `<style>
-:host { 
-  font-family: var(--cpxOGFontFamily, 'Red Hat Display', sans-serif);
-  font-size: var(--cpxOGFontSize, 16px );
+var B = 8, G = -1;
+var f = (e)=>Object.prototype.toString.call(e).slice(B, G)
+, i = (e)=>typeof e == "string" || e instanceof String
+;
+var X = 10, h = "(?:0|[1-9]\\d*)", y = "\\d*[A-z-][A-z\\d-]*", I = `(?:${y}|${h})`, L = `${I}(?:\\.${I})*`, A = `(?:${y}|\\d+)`, O = `${A}(?:\\.${A})*`, M = `(${h}(?:\\.${h}){2})(?:-(${L}))?(?:\\+(${O}))?`, N = new RegExp(`^${h}$`), P = new RegExp(`^v?${M}$`), d = new RegExp(`^${M}$`), u = (e, r = !1)=>{
+    if (!i(e)) throw new TypeError(`Expected String but got ${f(e)}.`);
+    return (r ? d : P).test(e);
+}, l = (e, r = !1)=>{
+    if (!i(e)) throw new TypeError(`Expected String but got ${f(e)}.`);
+    if (!(r || N.test(e))) throw new Error(`${e} is not a stringified positive integer.`);
+    if (N.test(e) && (e = parseInt(e, X), !Number.isSafeInteger(e))) throw new RangeError(`${e} exceeds ${Number.MAX_SAFE_INTEGER}.`);
+    return e;
+}, _ = (e, r, s = !1)=>{
+    if (!i(e)) throw new TypeError(`Expected String but got ${f(e)}.`);
+    if (!i(r)) throw new TypeError(`Expected String but got ${f(r)}.`);
+    if (!u(e, !!s)) throw new Error(`${e} is not valid version string.`);
+    if (!u(r, !!s)) throw new Error(`${r} is not valid version string.`);
+    let t;
+    if (e === r) t = 0;
+    else {
+        let m = s ? d : P, [, w, c] = e.match(m), [, S, p] = r.match(m), [$, g, E] = w.split(".").map(l), [a, R, V] = S.split(".").map(l);
+        if ($ > a) t = 1;
+        else if ($ < a) t = -1;
+        else if (g > R) t = 1;
+        else if (g < R) t = -1;
+        else if (E > V) t = 1;
+        else if (E < V) t = -1;
+        else if (c === p) t = 0;
+        else if (!c && p) t = 1;
+        else if (c && !p) t = -1;
+        else {
+            let b = c.split(".").map((o)=>l(o, !0)
+            ), T = p.split(".").map((o)=>l(o, !0)
+            ), v = Math.max(b.length, T.length), x = 0;
+            for(; x < v;){
+                let o = b[x], n = T[x];
+                if (o && !n || i(o) && Number.isInteger(n) ? t = 1 : !o && n || Number.isInteger(o) && i(n) ? t = -1 : o !== n && i(o) && i(n) ? t = o.localeCompare(n) : Number.isInteger(o) && Number.isInteger(n) && (o > n ? t = 1 : o < n && (t = -1)), Number.isInteger(t)) break;
+                x++;
+            }
+        }
+    }
+    return t;
+};
+class SkipRange {
+    constructor(range){
+        const rangeArray = range.replace('>=', '').replace('<', '').replace('x', '0').split(' ');
+        this.min = rangeArray[0];
+        this.max = rangeArray.length > 0 ? rangeArray[1] : '';
+    }
+    min;
+    max;
 }
-h3 { 
-  font-family: var(--cpxOGH3FontFamily, 'Red Hat Display', sans-serif);
-  font-weight: medium; 
-  font-size: var(--cpxOGH3FontSize, 20px); 
-}
-.node { fill: transparent; stroke-width:  var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGDisconnectedColor, #d2d2d2); }
-.edges { fill: transparent; stroke-width: var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGConnectedColor,#0266c8); }
-.inbound, .outbound, .active { display: none; }
-[active] .node { stroke: var(--cpxOGActiveColor,#93d434); }
-[active] .active, [inbound] .inbound, [outbound] .outbound { display: block; }
-[active] .active { fill: var(--cpxOGActiveColor, #93d434); }
-[connect] .node { stroke: var(--cpxOGConnectedColor,#0266c8); }
+class CPXOperatorVersion extends HTMLElement {
+    static get tag() {
+        return "cpx-operator-version";
+    }
+    get html() {
+        return `<style>
+    :host { height: 100px; display: grid;
+      grid-template-columns: 8% 12% 25% 25% 30%;
+      border-bottom: 1px solid #999;
+      padding: 0;align-items:center; }
 
-table { table-layout: fixed; max-width: 100%; width: 100%; border-collapse: collapse; border-spacing: 0; }
-thead th { padding-bottom: 20px; }
-thead th:nth-child(1) { width: 8%; }
-thead th:nth-child(2) { width: 12%; text-align:left; }
-thead th:nth-child(3) { width: 25%; }
-thead th:nth-child(4) { width: 25%; text-align: left; }
-thead th:nth-child(5) { width: 30%; text-align: left; }
-tr { border-bottom: 1px solid #999; }
-td { padding: 0; }
-tbody td:nth-child(1) {}
-tbody th:nth-child(2) { }
-tbody th:nth-child(2) label { color: var(--cpxOGConnectedColor, #0266c8); text-align: left; }
-tbody th:nth-child(2) input { opacity: 0; width:0; height:0; }
-tbody [active] th:nth-child(2) label { color: #333; font-weight: normal; }
-tbody td:nth-child(3) { text-align: right; }
-tbody td:nth-child(4) { padding-left: 24px; }
-tbody td:nth-child(5) {}
-svg { display: block; max-width: 100px; }
+    #node { fill: transparent; stroke-width:  var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGDisconnectedColor, #d2d2d2); }
+    #edges { fill: transparent; stroke-width: var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGConnectedColor,#0266c8); }
+    .inbound, .outbound, .active { display: none; }
+    :host([active]) #node { stroke: var(--cpxOGActiveColor,#93d434); }
+    :host([active]) .active, :host([inbound]) .inbound, :host([outbound]) .outbound { display: block; }
+    :host([active]) .active { fill: var(--cpxOGActiveColor, #93d434); }
+    :host([connected]) #node { stroke: var(--cpxOGConnectedColor,#0266c8); }
 
-.toggle { justify-self: end; padding-right: 10em;  font-size: var(--cpxOGToggleFontSize, 16px); }
-.toggle input[type=checkbox] { height: 0; width: 0; opacity: 0; position: absolute; }
-.toggle label {
-  cursor: pointer;
-  text-indent: 60px;
-  font-size: var(--cpxOGToggleFontSize, 16px);
-  width: 50px;
-  height: 30px;
-  background: var(--cpxOGDisconnectedColor, #d2d2d2);
-  display: block;
-  border-radius: 25px;
-  position: relative;
-  white-space: nowrap;
-  line-height: 30px;
-  color: var(--cpxOGDisconnectedColor, #d2d2d2);
-}
+    aside { }
+    div label { color: var(--cpxOGConnectedColor, #0266c8); text-align: left;  }
+    div input { opacity: 0; width:0; height:0; }
+    :host([active]) div label { color: #333; font-weight: normal; }
 
-.toggle label:after {
-  content: '';
-  position: absolute;
-  top: 6px;
-  left: 7px;
-  width: 17px;
-  height: 17px;
-  background: #fff;
-  border-radius: 20px;
-  transition: 0.3s;
-}
+    main :nth-child(1) {}
+    main :nth-child(2) { }
 
-.toggle input:checked + label {
-  background: var(--cpxOGConnectedColor, #0266c8);
-  color: #151515;
-}
-
-.toggle input:checked + label:after  { left: calc(100% - 7px); transform: translateX(-100%); }
-.toggle label:active:after { width: 33px; }
-.options { 
-  display: grid; 
-  grid-template-columns: 1fr 3fr; 
-  margin-bottom: 60px; 
-}
-</style>
-<section>
-<h3>OpenShift Version</h3>
-<div class="options">
-  <pfe-select id="ocp_versions"><select></select></pfe-select>
-</div>
-<h3>Channel</h3>
-<div class="options">
-  <pfe-select id="channels"><select></select></pfe-select>
-  <div class="toggle">
-    <input type="checkbox" name="all-channels" value="all" id="all-channels">
-    <label for="all-channels">Show all versions</label>
-  </div>
-</div>
-<table>
-    <caption></caption>
-    <thead><tr>
-    <th scope="col"></th>
-    <th scope="col">Version</th>
-    <th scope="col"></th>
-    <th scope="col">Update Paths</th>
-    <th scope="col">Other Available Channels</th>
-    </tr></thead>
-    <tbody></tbody>
-</table>`;
-class SkipRange {
-    constructor(range) {
-        Object.defineProperty(this, "min", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "max", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        range.split(' ');
+    
+    tbody td:nth-child(3) { text-align: right; }
+    tbody td:nth-child(4) { padding-left: 24px; }
+    tbody td:nth-child(5) {}
+    svg { display: block; max-width: 100px; max-height: 100%; }
+    </style>
+    <aside>${this.latest_in_channel ? '<em>Head</em>' : ''}</aside>
+    <div><label tabindex="0" for="${this.escVer}">${this.version}</label><input type="radio" id="${this.escVer}" name="${this.escChannel}" value="${this.version}"></div>
+    <aside>
+      ${this.replaces && this.replaces.length > 0 ? `Replaces: ${this.replaces.replace(this.package + '.', '')}` : ''}
+      ${this.skips && this.skips.length ? `Skips: ${this.skips.join(',')}` : ''}
+    </aside>
+    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+      <g id="node">
+          <circle cx="20" cy="50" r="10"/>
+          <circle class="active" cx="20" cy="50" r="3"/>
+          <line class="inbound outbound" x1="10" y1="50" x2="30" y2="50"/>
+          <line class="inbound" x1="5" y1="43" x2="35" y2="43" stroke="white" stroke-width="12"/>
+          <line class="outbound" x1="5" y1="57" x2="35" y2="57" stroke="white" stroke-width="12"/>
+      </g>
+      <g id="edges"></g>
+    </svg>
+    <ul>${this.channels.map((ch)=>`<li>${ch}</li>`
+        )}</ul>`;
     }
-}
-class OperatorGraph {
-    constructor() {
-        Object.defineProperty(this, "active", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
+    constructor(op){
+        super();
+        this.attachShadow({
+            mode: "open"
         });
-        Object.defineProperty(this, "inbound", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "outbound", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "connected", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "graph", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: document.createElementNS('http://www.w3.org/2000/svg', 'svg')
-        });
+        op.replaces = op.replaces ? op.replaces.replace(op.package + '.v', '') : '';
+        op.skip_range = op.skip_range ? new SkipRange(op.skip_range) : null;
+        Object.assign(this, op);
+        this.activeListener = this.activeListener.bind(this);
     }
-}
-class OperatorVersion {
-    constructor(op) {
-        Object.defineProperty(this, "package", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
+    connectedCallback() {
+        this.shadowRoot.innerHTML = this.html;
+        this.addEventListener('click', (_evt)=>{
+            this.active = true;
+            console.log('Activate:', this.version);
         });
-        Object.defineProperty(this, "channel_name", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "csv_name", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "latest_in_channel", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "ocp_version", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "version", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "skips", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "skip_range", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "replaces", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.assign(this, op);
-        if (op.skip_range) {
-            this.skip_range = new SkipRange(op.skip_range);
+        globalThis.addEventListener('graph-active', this.activeListener);
+        if (!this.replaces && !this.skip_range && !this.skips) {
+            this.setAttribute('outbound', '');
         }
     }
+    package;
+    channel_name;
+    csv_name;
+    latest_in_channel;
+    ocp_version;
+    version;
+    skips = [];
+    skip_range;
+    replaces;
+    channels = [];
+    _edges;
+    get edges() {
+        if (!this._edges) {
+            this._edges = this.shadowRoot.getElementById('edges');
+        }
+        return this._edges;
+    }
+    _replaced = false;
+    get replaced() {
+        return this._replaced;
+    }
+    set replaced(val) {
+        if (this._replaced === val) return;
+        this._replaced = val;
+        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');
+            this.edges.appendChild(repLine);
+        }
+    }
+    _connected = false;
+    get connected() {
+        return this._connected;
+    }
+    set connected(val) {
+        if (this._connected === val) return;
+        this._connected = val;
+        if (this._connected) {
+            this.setAttribute('connected', '');
+        } else {
+            this.removeAttribute('connected');
+        }
+    }
+    _active = false;
+    get active() {
+        return this._active;
+    }
+    set active(val) {
+        if (this._active === val) return;
+        this._active = val;
+        while(this.edges.firstChild){
+            this.edges.removeChild(this.edges.firstChild);
+        }
+        if (this._active) {
+            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.edges.appendChild(repLine);
+            }
+            this.dispatchEvent(new CustomEvent('graph-active', {
+                detail: {
+                    version: this.version,
+                    replaces: this.replaces ? this.replaces.replace(`${this.package}.v`, '') : '',
+                    skips: this.skips,
+                    skip_min: this.skip_range ? this.skip_range.min : null,
+                    skip_max: this.skip_range ? this.skip_range.max : null
+                },
+                bubbles: true,
+                composed: true
+            }));
+        } else {
+            this.removeAttribute('active');
+            this.replaced = false;
+        }
+    }
+    activeListener(evt) {
+        const detail = evt.detail;
+        if (detail) {
+            if (detail.version && detail.version !== this.version) {
+                while(this.edges.firstChild){
+                    this.edges.removeChild(this.edges.firstChild);
+                }
+                this.active = false;
+                this.connected = false;
+                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');
+                    this.edges.appendChild(repLine);
+                    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');
+                    this.edges.appendChild(overLine);
+                    evt.composedPath()[0].replaced = true;
+                    this.connected = 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');
+                    this.edges.appendChild(skipLine);
+                    this.connected = true;
+                }
+                if (detail.skip_min && _(this.version, detail.skip_min) >= 0 && _(this.version, detail.skip_max) < 0) {
+                    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');
+                        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');
+                    this.edges.appendChild(repLine);
+                    this.connected = true;
+                }
+            }
+        }
+    }
+    get escVer() {
+        return this.version.replaceAll('.', '-');
+    }
+    get escChannel() {
+        return this.channel_name.replaceAll('.', '-');
+    }
 }
-class OperatorPackage {
-}
 class OperatorChannel {
-    constructor(name, version) {
-        Object.defineProperty(this, "versions", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Map()
-        });
-        Object.defineProperty(this, "name", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
+    constructor(name, version){
         this.name = name;
         this.versions.set(version.version, version);
     }
+    versions = new Map();
+    name;
     getVersions(ord) {
-        return [...this.versions.keys()].sort((a, b) => compareSemVer(b, a));
+        return [
+            ...this.versions.keys()
+        ].sort((a, b)=>_(b, a)
+        );
     }
 }
 class OperatorIndex {
-    constructor(version, channel) {
-        Object.defineProperty(this, "channels", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Map()
-        });
-        Object.defineProperty(this, "version", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
+    constructor(version, channel){
         this.version = version;
         this.channels.set(channel.name, channel);
     }
+    channels = new Map();
+    version;
     getAllVersions() {
         const versions = new Map();
-        this.channels.forEach(ch => {
-            ch.versions.forEach(v => {
+        this.channels.forEach((ch)=>{
+            ch.versions.forEach((v)=>{
                 versions.set(v.version, v);
             });
         });
-        const orderedVersions = [...versions.keys()]
-            .sort((a, b) => compareSemVer(b, a))
-            .reduce((a, c) => a.set(c, versions.get(c)), new Map());
+        const orderedVersions = [
+            ...versions.keys()
+        ].sort((a, b)=>_(b, a)
+        ).reduce((a, c)=>a.set(c, versions.get(c))
+        , new Map());
         return orderedVersions;
@@ -272,11 +294,5 @@ }
 class OperatorBundle {
-    constructor(data) {
-        Object.defineProperty(this, "indices", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Map()
-        });
-        data.map(op => {
-            const version = new OperatorVersion(op);
+    constructor(data){
+        data.map((op)=>{
+            const version = new CPXOperatorVersion(op);
             const channel = new OperatorChannel(op.channel_name, version);
@@ -289,8 +305,6 @@ const index = new OperatorIndex(op.ocp_version, channel);
                     }
-                }
-                else {
+                } else {
                     this.indices.get(index.version).channels.set(channel.name, channel);
                 }
-            }
-            else {
+            } else {
                 this.indices.set(index.version, index);
@@ -300,61 +314,105 @@ }
     }
-    getChannelsByIndex(index) { }
-    getVersionsByChannel(channel) { }
+    indices = new Map();
+    getChannelsByIndex(index) {
+    }
+    getVersionsByChannel(channel) {
+    }
 }
-export class CPXOperatorGraph extends HTMLElement {
-    constructor(url) {
-        super();
-        Object.defineProperty(this, "_url", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ""
-        });
-        Object.defineProperty(this, "bundle", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "_data", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: []
-        });
-        Object.defineProperty(this, "_order", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: "desc"
-        });
-        Object.defineProperty(this, "_index", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ""
-        });
-        Object.defineProperty(this, "_channel", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ""
-        });
-        Object.defineProperty(this, "_all", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "_body", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.attachShadow({ mode: "open" });
-    }
+class CPXOperatorGraph1 extends HTMLElement {
     static get tag() {
         return "cpx-operator-graph";
     }
+    static get tmpl() {
+        return `<style>
+    :host { 
+      font-family: var(--cpxOGFontFamily, 'Red Hat Display', sans-serif);
+      font-size: var(--cpxOGFontSize, 16px );
+    }
+    h3 { 
+      font-family: var(--cpxOGH3FontFamily, 'Red Hat Display', sans-serif);
+      font-weight: medium; 
+      font-size: var(--cpxOGH3FontSize, 20px); 
+    }
+
+    section { display:grid; grid-template-rows: auto; }
+    header, cpx-operator-version { display: grid; grid-template-columns: 8% 12% 25% 25% 30%; border-bottom: 1px solid #999; padding: 0; }
+    header { padding-bottom: 20px; }
+    header strong:nth-child(1) {  }
+    header strong:nth-child(2) { text-align:left; }
+    header strong:nth-child(3) {  }
+    header strong:nth-child(4) { text-align: left; }
+    header strong:nth-child(5) { text-align: left; }
+
+    .toggle { justify-self: end; padding-right: 10em;  font-size: var(--cpxOGToggleFontSize, 16px); }
+    .toggle input[type=checkbox] { height: 0; width: 0; opacity: 0; position: absolute; }
+    .toggle label {
+      cursor: pointer;
+      text-indent: 60px;
+      font-size: var(--cpxOGToggleFontSize, 16px);
+      width: 50px;
+      height: 30px;
+      background: var(--cpxOGDisconnectedColor, #d2d2d2);
+      display: block;
+      border-radius: 25px;
+      position: relative;
+      white-space: nowrap;
+      line-height: 30px;
+      color: var(--cpxOGDisconnectedColor, #d2d2d2);
+    }
+
+    .toggle label:after {
+      content: '';
+      position: absolute;
+      top: 6px;
+      left: 7px;
+      width: 17px;
+      height: 17px;
+      background: #fff;
+      border-radius: 20px;
+      transition: 0.3s;
+    }
+
+    .toggle label:focus {
+      outline: 8px ridge --var(--cpxOGConnectedColor, #0266c8);
+    }
+
+    .toggle input:checked + label {
+      background: var(--cpxOGConnectedColor, #0266c8);
+      color: #151515;
+    }
+
+    .toggle input:checked + label:after  { left: calc(100% - 7px); transform: translateX(-100%); }
+    .toggle label:active:after { width: 33px; }
+    .options { 
+      display: grid; 
+      grid-template-columns: 1fr 3fr; 
+      margin-bottom: 60px; 
+    }
+    </style>
+    <section>
+    <h3>OpenShift Version</h3>
+    <div class="options">
+      <pfe-select id="ocp_versions"><select></select></pfe-select>
+    </div>
+    <h3>Channel</h3>
+    <div class="options">
+      <pfe-select id="channels"><select></select></pfe-select>
+      <div class="toggle">
+        <input type="checkbox" name="all-channels" value="all" id="all-channels">
+        <label for="all-channels">Show all versions</label>
+      </div>
+    </div>
+    </section>
+    <section>
+      <header>
+        <strong></strong>
+        <strong>Version</strong>
+        <strong></strong>
+        <strong>Update Paths</strong>
+        <strong>Other Available Channels</strong>
+      </header>
+      <main></main>
+    <section>`;
+    }
+    _url = "";
     get url() {
@@ -364,12 +422,13 @@ return this._url;
     set url(val) {
-        if (this._url === val)
-            return;
+        if (this._url === val) return;
         this._url = val;
         this.setAttribute("url", this._url);
-        fetch(val).then((resp) => {
+        fetch(val).then((resp)=>{
             return resp.json();
-        }).then((data) => {
-            this.data = data['data'];
+        }).then((data)=>{
+            this.data = data;
         });
     }
+    bundle;
+    _data = [];
     get data() {
@@ -379,11 +438,12 @@ return this._data;
     set data(val) {
-        if (this._data === val)
-            return;
+        if (this._data === val) return;
         this._data = val;
         this.bundle = new OperatorBundle(this._data);
-        this.shadowRoot.innerHTML = tmpl;
+        this.shadowRoot.innerHTML = CPXOperatorGraph1.tmpl;
         this.render();
         if (this.bundle.indices.size > 0) {
             const indexSelect = this.shadowRoot.querySelector('#ocp_versions select');
-            [...this.bundle.indices.keys()].sort().forEach(index => {
+            [
+                ...this.bundle.indices.keys()
+            ].sort().forEach((index)=>{
                 const opt = document.createElement('option');
@@ -401,2 +461,3 @@ opt.innerHTML = index;
     }
+    _order = "desc";
     get order() {
@@ -406,12 +467,13 @@ return this._order;
     set order(val) {
-        if (this._order === val)
-            return;
+        if (this._order === val) return;
         this._order = val;
     }
+    _index = "";
     get index() {
-        return this._index !== "" ? this._index : [...this.bundle.indices.keys()][0];
+        return this._index !== "" ? this._index : [
+            ...this.bundle.indices.keys()
+        ][0];
     }
     set index(val) {
-        if (this._index === val)
-            return;
+        if (this._index === val) return;
         this._index = val;
@@ -422,8 +484,10 @@ this.setAttribute('index', this._index);
     }
+    _channel = "";
     get channel() {
-        return this._channel !== "" ? this._channel : [...this.bundle.indices.get(this.index).channels.keys()][0];
+        return this._channel !== "" ? this._channel : [
+            ...this.bundle.indices.get(this.index).channels.keys()
+        ][0];
     }
     set channel(val) {
-        if (this._channel === val)
-            return;
+        if (this._channel === val) return;
         this._channel = val;
@@ -433,2 +497,3 @@ this.setAttribute('channel', this._channel);
     }
+    _all = false;
     get all() {
@@ -438,23 +503,28 @@ return this._all;
     set all(val) {
-        if (this._all === val)
-            return;
+        if (this._all === val) return;
         this._all = val;
         this.render();
     }
+    _body;
     get body() {
         if (!this._body) {
-            this._body = this.shadowRoot.querySelector('tbody');
+            this._body = this.shadowRoot.querySelector('main');
         }
         return this._body;
     }
+    constructor(url){
+        super();
+        this.attachShadow({
+            mode: "open"
+        });
+    }
     connectedCallback() {
-        this.shadowRoot.addEventListener('pfe-select:change', evt => {
+        this.shadowRoot.addEventListener('pfe-select:change', (evt)=>{
             if (evt.target['id'] === 'ocp_versions') {
                 this.index = evt['detail'].value;
-            }
-            else if (evt.target['id'] === 'channels') {
+            } else if (evt.target['id'] === 'channels') {
                 this.channel = evt['detail'].value;
             }
         });
-        this.shadowRoot.addEventListener('change', evt => {
+        this.shadowRoot.addEventListener('change', (evt)=>{
             if (evt.target['id'] === 'all-channels') {
@@ -466,3 +536,9 @@ this.all = evt.target['checked'] ? true : false;
     static get observedAttributes() {
-        return ["url", "order", "channel", "index", "all"];
+        return [
+            "url",
+            "order",
+            "channel",
+            "index",
+            "all"
+        ];
     }
@@ -472,14 +548,2 @@ attributeChangedCallback(attr, oldVal, newVal) {
     }
-    handleClick(id) {
-        return (e) => {
-            const active = this.shadowRoot.querySelector('[active]');
-            if (active) {
-                active.removeAttribute('active');
-            }
-            this.shadowRoot.getElementById(id).setAttribute('active', '');
-            const activeInput = this.shadowRoot.querySelector(`[active] input`);
-            activeInput['click']();
-            activeInput['focus']();
-        };
-    }
     setChannels() {
@@ -490,6 +554,8 @@ this.channel = "";
                 const channelSelect = this.shadowRoot.querySelector('#channels select');
-                while (channelSelect.firstChild) {
+                while(channelSelect.firstChild){
                     channelSelect.removeChild(channelSelect.firstChild);
                 }
-                [...this.bundle.indices.get(this.index).channels.keys()].sort().forEach(channel => {
+                [
+                    ...this.bundle.indices.get(this.index).channels.keys()
+                ].sort().forEach((channel)=>{
                     const opt = document.createElement('option');
@@ -512,12 +578,12 @@ opt.innerHTML = channel;
             if (currIndex && currChannel && currChannel.versions.size > 0) {
-                while (this.body.firstChild) {
+                while(this.body.firstChild){
                     this.body.removeChild(this.body.firstChild);
                 }
                 if (!this.all) {
-                    currChannel.getVersions().map(ver => {
+                    currChannel.getVersions().map((ver)=>{
                         const csv = currChannel.versions.get(ver);
-                        const escVer = ver.replaceAll('.', '');
-                        const escChannel = currChannel.name.replaceAll('.', '');
+                        ver.replaceAll('.', '');
+                        currChannel.name.replaceAll('.', '');
                         const verChannels = [];
-                        currIndex.channels.forEach(ch => {
+                        currIndex.channels.forEach((ch)=>{
                             if (ch.name !== csv.channel_name && ch.versions.has(csv.version)) {
@@ -527,36 +593,9 @@ verChannels.push(ch.name);
                         });
-                        const row = document.createElement('tr');
-                        row.id = csv['_id'];
-                        row.onclick = this.handleClick(row.id);
-                        if (csv.latest_in_channel && csv.replaces !== null) {
-                            row.setAttribute('inbound', '');
-                        }
-                        if (csv.replaces === null) {
-                            row.setAttribute('outbound', '');
-                        }
-                        row.innerHTML = `<td>${csv.latest_in_channel ? '<em>Head</em>' : ''}</td>
-            <th scope="row"><label for="${escVer}">${csv['version']}</label><input type="radio" id="${escVer}" name="${escChannel}" value="${csv['version']}"></th>
-            <td>
-              ${csv['replaces'] ? `Replaces: ${csv['replaces'].replace(csv.package + '.', '')}` : ''}
-              ${csv.skips && csv.skips.length ? `Skips: ${csv.skips.join(',')}` : ''}
-            </td>
-            <td><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-              <g class="node">
-                  <circle cx="20" cy="50" r="10"/>
-                  <circle class="active" cx="20" cy="50" r="3"/>
-                  <line class="inbound outbound" x1="10" y1="50" x2="30" y2="50"/>
-                  <line class="inbound" x1="5" y1="43" x2="35" y2="43" stroke="white" stroke-width="12"/>
-                  <line class="outbound" x1="5" y1="57" x2="35" y2="57" stroke="white" stroke-width="12"/>
-              </g>
-              <g class="edges"></g>
-            </svg></td>
-            <td>${verChannels.join(', ')}</td>`;
-                        this.body.appendChild(row);
+                        this.body.appendChild(csv);
                     });
-                }
-                else {
-                    currIndex.getAllVersions().forEach(csv => {
-                        const escVer = csv.version.replaceAll('.', '');
+                } else {
+                    currIndex.getAllVersions().forEach((csv)=>{
+                        csv.version.replaceAll('.', '-');
                         const verChannels = [];
-                        currIndex.channels.forEach(ch => {
+                        currIndex.channels.forEach((ch)=>{
                             if (ch.versions.has(csv.version)) {
@@ -566,29 +605,3 @@ verChannels.push(ch.name);
                         });
-                        const row = document.createElement('tr');
-                        row.id = csv['_id'];
-                        row.onclick = this.handleClick(row.id);
-                        if (csv.latest_in_channel && csv.replaces !== null) {
-                            row.setAttribute('inbound', '');
-                        }
-                        if (csv.replaces === null) {
-                            row.setAttribute('outbound', '');
-                        }
-                        row.innerHTML = `<td></td>
-            <th scope="row"><label for="${escVer}">${csv.version}</label><input type="radio" id="${escVer}" name="all-versions" value="${csv.version}"></th>
-            <td>
-              ${csv.replaces ? `Replaces: ${csv.replaces.replace(csv.package + '.', '')}` : ''}
-              ${csv.skips && csv.skips.length ? `Skips: ${csv.skips.join(',')}` : ''}
-            </td>
-            <td><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-              <g class="node">
-                  <circle cx="20" cy="50" r="10"/>
-                  <circle class="active" cx="20" cy="50" r="3"/>
-                  <line class="inbound outbound" x1="10" y1="50" x2="30" y2="50"/>
-                  <line class="inbound" x1="5" y1="43" x2="35" y2="43" stroke="white" stroke-width="12"/>
-                  <line class="outbound" x1="5" y1="57" x2="35" y2="57" stroke="white" stroke-width="12"/>
-              </g>
-              <g class="edges"></g>
-            </svg></td>
-            <td>${verChannels.join(', ')}</td>`;
-                        this.body.appendChild(row);
+                        this.body.appendChild(csv);
                     });
@@ -600,6 +613,8 @@ }
 }
-window.customElements.define(CPXOperatorGraph.tag, CPXOperatorGraph);
+window.customElements.define(CPXOperatorVersion.tag, CPXOperatorVersion);
+window.customElements.define(CPXOperatorGraph1.tag, CPXOperatorGraph1);
 document.dispatchEvent(new CustomEvent("cpx-operator-graph-ready", {
     composed: true,
-    bubbles: true,
+    bubbles: true
 }));
+export { CPXOperatorGraph1 as CPXOperatorGraph };

package.json

 {
   "name": "@chapeaux/cpx-operator-graph",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "Chapeaux Operator Graph Component",
@@ -32,3 +32,3 @@ "type": "module",
   "homepage": "https://github.com/chapeaux/cpx-components/components/cpx-operator-graph",
-  "gitHead": "3ff4c423a69a89e87672aa472f2ff289c760ab17",
+  "gitHead": "fcca54240a14b53e25061d5f28c081334184d89f",
   "dependencies": {
@@ -35,0 +35,0 @@ "semver-parser": "^4.0.0"

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

96985

increased by6.57%

Lines of code

1263

increased by4.55%

No dependency changes