@hpcc-js/html - npm Package Compare versions

Comparing version 2.44.0 to 3.1.0

dist/index.js

@@ -1,1048 +0,93 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@hpcc-js/common'), require('@hpcc-js/util')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@hpcc-js/common', '@hpcc-js/util'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@hpcc-js/html"] = {}, global["@hpcc-js/common"], global["@hpcc-js/util"]));
-})(this, (function (exports, common, util) { 'use strict';
+var B=Object.defineProperty;var s=(n,t)=>B(n,"name",{value:t,configurable:!0});var K="@hpcc-js/html",q="3.1.0",Q="3.2.0";import{HTMLWidget as D,select as I}from"@hpcc-js/common";import{scopedLogger as P}from"@hpcc-js/util";var c=class extends D{static{s(this,"HTMLTooltip")}_triggerElement;_contentNode;_prevContentNode;_tooltipElement;_arrowElement;_tooltipHTMLCallback=s(t=>"<b>_tooltipHTMLCallback is undefined</b>","_tooltipHTMLCallback");_logger=P("html/HTMLTooltip");constructor(){super(),this.visible(!1)}tooltipHTML(t){return this._tooltipHTMLCallback=t,this}tooltipContent(t){return arguments.length?(this._contentNode=t,this):this._contentNode}triggerElement(t){return this._triggerElement=t,this}enter(t,e){super.enter(t,e);let o=I("body");this._tooltipElement=o.append("div").attr("class","tooltip-div").style("z-index","2147483638").style("position","fixed"),this._arrowElement=o.append("div").attr("class","arrow-div").style("z-index","2147483638").style("position","fixed")}update(t,e){if(super.update(t,e),this._contentNode!==this._prevContentNode){let o=this._tooltipElement.node();[...o.querySelectorAll("*")].map(i=>i.__data__).filter(i=>i).forEach(i=>{typeof i.target=="function"&&i.target(null),typeof i.exit=="function"&&i.exit()}),o.innerHTML="",o.appendChild(this._contentNode),this._prevContentNode=this._contentNode}if(this._contentNode?this.onShowContent(this._contentNode):this._tooltipElement.html(()=>this._tooltipHTMLCallback(this.data())),this.fitContent()){this._tooltipElement.style("width","auto").style("height","auto").style("padding","0px").style("box-sizing","content-box");let o=this._tooltipElement.node().getBoundingClientRect();this.tooltipWidth_default(o.width),this.tooltipHeight_default(o.height)}this._closing=!1,this._tooltipElement.style("background-color",this.tooltipColor()).style("color",this.fontColor()).style("width",this.tooltipWidth()+"px").style("height",this.tooltipHeight()+"px").style("opacity",1).style("padding",this.padding()+"px").style("pointer-events",this.enablePointerEvents()?"all":"none").style("box-sizing","content-box"),this._arrowElement.style("opacity",1).style("pointer-events","none"),this.updateTooltipPosition()}onShowContent(t){}updateTooltipPosition(){let t=this.calcReferenceBBox(),e=this.calcTooltipDirection(t),o=t[e];return this._tooltipElement.style("top",o.y+"px").style("left",o.x+"px"),this.setArrowPosition(o,e),o}calcTooltipDirection(t){let e=Object.keys(t),o=this.direction();e.sort((r,l)=>r===o?-1:1);let i={top:0,left:0,width:window.innerWidth,height:window.innerHeight};for(let r=0;r<e.length;r++){let l={top:t[e[r]].y,left:t[e[r]].x,width:this.tooltipWidth(),height:this.tooltipHeight()};if(this.rectFits(l,i))return e[r]}return this._logger.warning(`Tooltip doesn't fit in the window for any of the directions. Defaulting to '${o}'`),this._logger.debug(i),this._logger.debug({top:t[o].y,left:t[o].x,width:this.tooltipWidth(),height:this.tooltipHeight()}),o}rectFits(t,e){return t.top>=e.top&&t.left>=e.left&&t.width+t.left<=e.width+e.left&&t.height+t.top<=e.height+e.top}setArrowPosition(t,e){let o,i,r="border-top-color";switch(this._arrowElement.style("border",`${this.arrowHeight()}px solid ${this.tooltipColor()}`).style("border-top-color","transparent").style("border-right-color","transparent").style("border-bottom-color","transparent").style("border-left-color","transparent"),e){case"n":o=t.y+this.tooltipHeight()+this.padding()*2,i=t.x+this.tooltipWidth()/2-this.arrowWidth()/2+this.padding(),r="border-top-color",this._arrowElement.style("border-top-width",`${this.arrowHeight()}px`).style("border-bottom-width","0px").style("border-left-width",`${this.arrowWidth()/2}px`).style("border-right-width",`${this.arrowWidth()/2}px`);break;case"s":o=t.y-this.arrowHeight(),i=t.x+this.padding()+this.tooltipWidth()/2-this.arrowWidth()/2,r="border-bottom-color",this._arrowElement.style("border-top-width","0px").style("border-bottom-width",`${this.arrowHeight()}px`).style("border-left-width",`${this.arrowWidth()/2}px`).style("border-right-width",`${this.arrowWidth()/2}px`);break;case"e":o=t.y+this.tooltipHeight()/2+this.padding()-this.arrowWidth()/2,i=t.x-this.arrowHeight(),r="border-right-color",this._arrowElement.style("border-top-width",`${this.arrowWidth()/2}px`).style("border-bottom-width",`${this.arrowWidth()/2}px`).style("border-left-width","0px").style("border-right-width",`${this.arrowHeight()}px`);break;case"w":o=t.y+this.tooltipHeight()/2-this.arrowWidth()/2+this.padding(),i=t.x+this.tooltipWidth()+this.padding()*2,r="border-left-color",this._arrowElement.style("border-top-width",`${this.arrowWidth()/2}px`).style("border-bottom-width",`${this.arrowWidth()/2}px`).style("border-left-width",`${this.arrowHeight()}px`).style("border-right-width","0px");break}return typeof o<"u"&&typeof i<"u"?this._arrowElement.style("top",o+"px").style("left",i+"px").style(r,this.tooltipColor()).style("opacity",1):this._arrowElement.style("opacity",0),t}getReferenceNode(){return this._triggerElement?this._triggerElement.node():this.element().node().parentNode.parentNode}_cursorLoc;calcReferenceBBox(){let t=this.getReferenceNode(),{top:e,left:o,width:i,height:r}=t.getBoundingClientRect(),l=this.tooltipWidth(),p=this.tooltipHeight(),h=l/2,d=p/2,f=this.arrowHeight(),b=this.padding(),u=b*2;return this.followCursor()&&this._cursorLoc&&(o=this._cursorLoc[0],e=this._cursorLoc[1],i=1,r=1),{n:{x:o+i/2-h-b,y:e-p-f-u},e:{x:o+i+f,y:e+r/2-d-b},s:{x:o+i/2-h-b,y:e+r+f},w:{x:o-l-f-u,y:e+r/2-d-b},nw:{x:o-l-u,y:e-p-u},ne:{x:o+i,y:e-p-u},se:{x:o+i,y:e+r},sw:{x:o-l-u,y:e+r}}}_closing=!1;mouseout(){this._closing=!0,this._tooltipElement.on("mouseover",()=>{this._closing=!1}),this._tooltipElement.on("mouseout",()=>{this.mouseout()}),setTimeout(()=>{this._closing&&this.visible(!1)},this.closeDelay())}visible(t){return arguments.length?(this._arrowElement&&(this._arrowElement.style("visibility",t?"visible":"hidden"),this._tooltipElement.style("visibility",t?"visible":"hidden")),super.visible(t),this):super.visible()}exit(t,e){this._arrowElement&&(this._arrowElement.remove(),this._tooltipElement.remove()),super.exit(t,e)}};c.prototype._class+=" html_HTMLTooltip";c.prototype.publish("fitContent",!1,"boolean","If true, tooltip will grow to fit its html content");c.prototype.publish("followCursor",!1,"boolean","If true, tooltip will display relative to cursor location");c.prototype.publish("closeDelay",400,"number","Number of milliseconds to wait before closing tooltip (cancelled on tooltip mouseover event)");c.prototype.publish("direction","n","set","Direction in which to display the tooltip",["n","s","e","w","ne","nw","se","sw"]);c.prototype.publish("padding",8,"number","Padding (pixels)");c.prototype.publish("arrowWidth",16,"number","Width (or height depending on direction) of the tooltip arrow (pixels)");c.prototype.publish("arrowHeight",8,"number","Height (or width depending on direction) of the tooltip arrow (pixels)");c.prototype.publish("fontColor","#FFF","html-color","The default font color for text in the tooltip");c.prototype.publish("tooltipColor","#000000EE","html-color","Background color of the tooltip");c.prototype.publish("tooltipWidth",200,"number","Width of the tooltip (not including arrow) (pixels)");c.prototype.publish("tooltipHeight",200,"number","Height of the tooltip (not including arrow) (pixels)");c.prototype.publish("enablePointerEvents",!1,"boolean","If true, the 'pointer-events: all' style will be used");import{HTMLWidget as N,select as M}from"@hpcc-js/common";var w=class extends N{static{s(this,"SimpleTable")}_table;_tbody;_thead;_theadRow;constructor(){super()}transformData(){return this.data()}enter(t,e){super.enter(t,e),this._table=e.append("table"),this._thead=this._table.append("thead"),this._theadRow=this._thead.append("tr"),this._tbody=this._table.append("tbody")}update(t,e){super.update(t,e),this._table.style("width",this.autoWidth()?"auto":"100%");let o=this._theadRow.selectAll("th").data(this.columns());o.enter().append("th").attr("class",(r,l)=>`th-${l}`).merge(o).text(r=>r.toString()),o.exit().remove();let i=this._tbody.selectAll("tr").data(this.transformData());i.enter().append("tr").merge(i).each(function(r){let p=M(this).selectAll("td").data(r);p.enter().append("td").attr("class",(h,d)=>`col-${d}`).merge(p).text(h=>h.toString()),p.exit().remove()}),i.exit().remove()}};w.prototype._class+=" html_SimpleTable";w.prototype.publish("autoWidth",!1,"boolean","If true, table width will be set to 'auto'. If false, the width is set to '100%'");var g=class extends w{static{s(this,"StyledTable")}constructor(){super()}applyStyleObject(t,e){Object.keys(e).forEach(o=>{t.style(o,e[o])})}update(t,e){super.update(t,e),e.selectAll("tr,th,td").attr("style","").style("font-family",this.fontFamily()).style("color",this.fontColor()),this.theadColumnStyles().forEach((l,p)=>{this.applyStyleObject(e.select(`.th-${p}`),l)}),this.tbodyColumnStyles().forEach((l,p)=>{this.applyStyleObject(e.selectAll(`.col-${p}`),l)});let o=Object.keys(this.evenRowStyles()).length>0,i=Object.keys(this.lastRowStyles()).length>0,r=e.selectAll("tbody > tr");if(o){let l=r.select(function(p,h){return h%2?this:null});this.applyStyleObject(l,this.evenRowStyles())}if(i){let l=r.select(function(p,h,d){return h===d.length-1?this:null});this.applyStyleObject(l,this.lastRowStyles())}}};g.prototype._class+=" html_StyledTable";g.prototype.publish("fontFamily","Verdana","string","Base font-family used within the table");g.prototype.publish("fontColor","#333","string","Base font color used within the table");g.prototype.publish("theadColumnStyles",[],"array",'Array of objects containing styles for the thead columns (ex: [{"color":"red"},{"color":"blue"}])');g.prototype.publish("tbodyColumnStyles",[],"array",'Array of objects containing styles for the tbody columns (ex: [{"color":"red"},{"color":"blue"}])');g.prototype.publish("lastRowStyles",{},"object",'Object containing styles for the last row (ex: {"color":"red"})');g.prototype.publish("evenRowStyles",{},"object",'Object containing styles for even rows (ex: {"background-color":"#AAA"})');var a=class extends g{static{s(this,"BreakdownTable")}_tooltip;constructor(){super()}transformData(){let t=this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount();return this.breakdownData(t)}breakdownData(t){let e=this.data().length,o=this.data().reduce((h,d)=>h+d[1],0),i=[],r=0;this.data().sort((h,d)=>h[1]>d[1]?-1:1);let p=e-t>0;if(this.data().filter((h,d)=>p?d<t-1:!0).forEach(h=>{let d=Math.round(h[1]/o*100);r+=d,i.push([h[0],d+"%"])}),p){let h=`${this.otherLabel()} (${e-t+1})`,d="~"+(100-r)+"%";i.push([h,d])}return i}calculateRowCount(){let t=this.columns().length>0?this.thFontSize()+5:0,e=this.fontSize()+5,o=this.height()-t;return Math.floor(o/e)}enter(t,e){super.enter(t,e),this._tooltip=new c().target(t),this._tooltip.tooltipHTML(o=>{let i=this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount(),r=Math.max(...o.map(u=>this.textSize(u[0],this.fontFamily(),this.fontSize()).height))??this.fontSize(),l=Math.max(...o.map(u=>this.textSize(u[0],this.fontFamily(),this.fontSize()).width)),p=30,h=2,d=h*(l+p)+this._tooltip.padding()*2,f=r*Math.ceil((o.length-i)/h)+this._tooltip.padding()*2;this._tooltip.tooltipWidth(d),this._tooltip.tooltipHeight(f);let b=this.breakdownData(this.data().length).slice(i-1);return`<div style="
+                    width: 100%;
+                    height: 100%;
+                    font-size: ${this.fontSize()}px;
+                ">${b.map(u=>`<div style="
+                        float:left;
+                        width:${Math.floor(99/h)}%;
+                    ">${u[0]}: ${u[1]}</div>`).join("")}</div>`})}update(t,e){if(this.theadColumnStyles_default([{color:this.thFirstColor(),"font-size":this.thFontSize()+"px","font-weight":this.thFontWeight(),"text-align":this.labelAlignment(),width:"auto",padding:"0px"},{width:"1%","font-size":this.thFontSize()+"px","font-weight":this.thFontWeight(),"text-align":this.percentageAlignment(),padding:"0px"}]),this.tbodyColumnStyles_default([{color:this.topLabelColor(),"font-size":this.fontSize()+"px","font-weight":"normal","text-align":this.labelAlignment(),width:"auto",padding:"0px"},{color:this.topPercentageColor(),"font-size":this.fontSize()+"px","font-weight":"normal","text-align":this.percentageAlignment(),width:"1%",padding:"0px"}]),this.lastRowStyles_default([{color:this.otherLabelColor(),"font-size":this.fontSize()+"px","font-weight":this.otherLabelBold()?"bold":"normal","text-align":this.labelAlignment(),width:"auto",padding:"0px"},{color:this.otherLabelColor(),"font-size":this.fontSize()+"px","font-weight":this.otherPercentageBold()?"bold":"normal","text-align":this.percentageAlignment(),width:"1%",padding:"0px"}]),super.update(t,e),(this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount())<this.data().length){let i=e.select("tbody > tr:last-child"),r=this;i.on("mouseout.tooltip",l=>{r._tooltip._triggerElement=i,r._tooltip.visible(!1).render()}).on("mouseenter.tooltip",l=>{r._tooltip._triggerElement=i,r._tooltip.direction("n").data(r.data()).visible(!0).render()})}}};a.prototype._class+=" html_BreakdownTable";a.prototype.publish("useCalculatedRowCount",!0,"boolean","If true, rowCount will be calculated and its default will be overwritten");a.prototype.publish("rowCount",5,"number","Number of total rows to display (including the 'other' row)",void 0,{disable:s(n=>n.useCalculatedRowCount(),"disable")});a.prototype.publish("fontSize",14,"number","Font size (pixels)");a.prototype.publish("labelAlignment","left","set","Alignment of the label column text",["left","center","right"]);a.prototype.publish("percentageAlignment","center","set","Alignment of the percentage column text",["left","center","right"]);a.prototype.publish("topLabelColor","#333","html-color","Color of displayed 'top' labels");a.prototype.publish("topPercentageColor","#1A99D5","html-color","Color of displayed 'top' percentages");a.prototype.publish("topPercentageBold",!0,"html-color","If true, the 'top' percentages will be bold");a.prototype.publish("otherLabel","Other","string","Label text for the 'other' row");a.prototype.publish("otherLabelColor","#AAA","html-color","Color of the 'other' label");a.prototype.publish("otherLabelBold",!1,"html-color","If true, the 'other' label will be bold");a.prototype.publish("otherPercentageColor","#AAA","html-color","Color of the 'other' percentage");a.prototype.publish("otherPercentageBold",!1,"html-color","If true, the 'other' percentage will be bold");a.prototype.publish("thFontWeight","bold","string","Font weight for th elements");a.prototype.publish("thFontSize",26,"number","Font size for th elements");a.prototype.publish("thFirstColor","#333","html-color","Text color of the first th element");a.prototype.publish("thLastColor","#333","html-color","Text color of the last th element");import R from"react";import{render as z}from"react-dom";import{HTMLWidget as $}from"@hpcc-js/common";var y=class extends ${static{s(this,"JSXWidget")}static Component=R.Component;static createElement=R.createElement;rootNode;jsxRender(t,e){this.rootNode=z(t,e,this.rootNode)}};y.prototype._class+=" html_JSXWidget";import{select as k}from"@hpcc-js/common";var _=class{static{s(this,"VNode")}_attrs;_children;constructor(t,e){this._attrs=t,this._children=e}type(){return"div"}attrs(){return this._attrs}attr(t){return this._attrs[t]}children(){return this._children}update(t){for(let e in this._attrs)t.attr(e,this._attrs[e])}render(t){let e=t.selectAll(`${t.node().tagName} > *`).data([this]);return e.exit().remove(),e.enter().append(this.type()).attr("reactd3",0).merge(e).each(function(o){let i=k(this);o.update(i),o.renderChildren(i)})}renderChildren(t){let e=t.selectAll(`${t.node().tagName} > *`).data(this._children);return e.exit().remove(),e.enter().append(o=>document.createElement(o.type())).attr("reactd3",(o,i)=>i).merge(e).each(function(o){let i=k(this);o.update(i),o.renderChildren(i)})}},W=class extends _{static{s(this,"ConstVNode")}_type;constructor(t,e,o){super(e,o),this._type=t}type(){return this._type}},E=class extends _{static{s(this,"TextVNode")}_text;constructor(t){super({},[]),this._text=t}type(){return"span"}update(t){super.update(t),t.text(this._text)}};function V(n){return typeof n=="function"}s(V,"isReactFn");function j(n){return n.prototype&&n.prototype instanceof _}s(j,"isIVNode");var T=class{static{s(this,"ReactD3")}static createElement(t,e,...o){return j(t)?new t(e):V(t)?t(e):new W(t,e,o.map(i=>typeof i=="string"?new E(i):i))}static render(t,e){t.render(e)}};import O from"react";var F=class extends y.Component{static{s(this,"VizComponent")}widget;refreshProps(){for(let t in this.props)this.widget[t]&&typeof this.widget[t]=="function"&&this.widget[t](this.props[t])}componentDidMount(){this.widget=new this.props.type().target(this.base),this.refreshProps(),this.widget.render()}componentWillUnmount(){this.widget.target(null).render()}render(){return O.createElement("div",{style:this.props.style})}componentDidUpdate(){this.refreshProps(),this.widget.render()}};import U from"react";var L=class extends y.Component{static{s(this,"VizInstance")}widget;refreshProps(){for(let t in this.props)this.widget[t]&&typeof this.widget[t]=="function"&&this.widget[t](this.props[t])}componentDidMount(){this.widget=this.props.instance.target(this.base),this.refreshProps(),this.widget.render()}componentWillUnmount(){this.widget.target(null).render()}render(){return U.createElement("div",{style:this.props.style})}componentDidUpdate(){this.refreshProps(),this.widget.render()}};import{format as A}from"@hpcc-js/common";var m=class extends g{static{s(this,"StatsTable")}transformData(){let t=[["Total",0,0]],e=this.data();return e.forEach(o=>{t[0][1]+=o[1],t[0][2]+=o[2]}),e.concat(t).map(o=>[o[0],this.secondColumnFormat_exists()?A(this.secondColumnFormat())(o[1]):o[1],this.thirdColumnFormat_exists()?A(this.thirdColumnFormat())(o[2]):o[2]])}update(t,e){this.tbodyColumnStyles_default([{"font-weight":"bold",width:this.firstColumnWidth(),"text-align":"left"},{width:this.secondColumnWidth(),"text-align":"right"},{width:this.thirdColumnWidth(),"text-align":"right"}]),this.evenRowStyles_default([{"font-weight":"bold",width:this.firstColumnWidth(),"text-align":"left","font-color":this.evenRowFontColor(),"background-color":this.evenRowBackgroundColor()},{width:this.secondColumnWidth(),"text-align":"right","font-color":this.evenRowFontColor(),"background-color":this.evenRowBackgroundColor()},{width:this.thirdColumnWidth(),"text-align":"right","font-color":this.evenRowFontColor(),"background-color":this.evenRowBackgroundColor()}]),this.lastRowStyles_default({"font-weight":"bold"}),super.update(t,e)}};m.prototype._class+=" html_StatsTable";m.prototype.publish("labelColor","#333","html-color","Color of the text in the first column");m.prototype.publish("primaryValueColor","#333","html-color","Color of the text in the second column");m.prototype.publish("secondaryValueColor","#333","html-color","Color of the text in the third column");m.prototype.publish("evenRowBackgroundColor","#333","html-color","Background color of the even rows");m.prototype.publish("evenRowFontColor","#333","html-color","Font color of the even rows");m.prototype.publish("firstColumnWidth","auto","string","CSS style applied as the 'width' for the first column (ex: 40px)");m.prototype.publish("secondColumnWidth","1%","string","CSS style applied as the 'width' for the second column (ex: 40px)");m.prototype.publish("thirdColumnWidth","1%","string","CSS style applied as the 'width' for the third column (ex: 40px)");m.prototype.publish("secondColumnFormat","$,.0f","string","d3-format specifier applied to the second column's values",void 0,{optional:!0});m.prototype.publish("thirdColumnFormat",null,"string","d3-format specifier applied to the third column's values",void 0,{optional:!0});import{HTMLWidget as J}from"@hpcc-js/common";(function(){if(!document.getElementById("f5fc3b48")){var n=document.createElement("style");n.id="f5fc3b48",n.textContent=`#wrap
+{
+    width: 100%;
+}
+#left, #right {padding:5px;}
 
-  var PKG_NAME = "@hpcc-js/html";
-  var PKG_VERSION = "2.44.0";
-  var BUILD_VERSION = "2.107.0";
+#left {
+    background-color:red;
+    text-align:left;
+    display: block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
 
-  /******************************************************************************
-  Copyright (c) Microsoft Corporation.
+#right {
+    background-color:orange;
+    float:right;
+    text-align:right;
+    white-space: nowrap;
+}
 
-  Permission to use, copy, modify, and/or distribute this software for any
-  purpose with or without fee is hereby granted.
+.html_TitleBar > .main {
+    width: 100%;
+    display: block;
+}
 
-  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-  PERFORMANCE OF THIS SOFTWARE.
-  ***************************************************************************** */
-  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+.html_TitleBar .title {
+    padding:4px;
+    text-align:left;
+    display: block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    font-size:20px;
+    font-weight: bold;
+}
 
-  var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-  };
+.html_TitleBar .icon-bar {
+    padding:4px;
+    float: right;
+    text-align:right;
+    white-space: nowrap;
+    line-height: 28px;
+}
 
-  function __extends(d, b) {
-    if (typeof b !== "function" && b !== null)
-        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-  }
+.html_TitleBar .icon-bar-item {
+    display: inline;    
+}
 
-  function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-  }
+.html_TitleBar .icon-bar-item > div {
+    display: inline;    
+}
 
-  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-  };
+.html_TitleBar .icon-bar a {
+    text-align: center; /* Center-align text */
+    padding-top: 4px;
+    padding-bottom: 4px;
+    transition: all 0.3s ease; /* Add transition for hover effects */
+    color: darkgray; /* White text color */
+}
 
-  var HTMLTooltip = /** @class */ (function (_super) {
-      __extends(HTMLTooltip, _super);
-      function HTMLTooltip() {
-          var _this = _super.call(this) || this;
-          _this._tooltipHTMLCallback = function (data) { return "<b>_tooltipHTMLCallback is undefined</b>"; };
-          _this._logger = util.scopedLogger("html/HTMLTooltip");
-          _this._closing = false;
-          _this.visible(false);
-          return _this;
-      }
-      HTMLTooltip.prototype.tooltipHTML = function (_) {
-          this._tooltipHTMLCallback = _;
-          return this;
-      };
-      HTMLTooltip.prototype.tooltipContent = function (_) {
-          if (!arguments.length)
-              return this._contentNode;
-          this._contentNode = _;
-          return this;
-      };
-      HTMLTooltip.prototype.triggerElement = function (_) {
-          this._triggerElement = _;
-          return this;
-      };
-      HTMLTooltip.prototype.enter = function (domNode, element) {
-          _super.prototype.enter.call(this, domNode, element);
-          var body = common.select("body");
-          this._tooltipElement = body.append("div")
-              .attr("class", "tooltip-div")
-              .style("z-index", "2147483638")
-              .style("position", "fixed");
-          this._arrowElement = body.append("div")
-              .attr("class", "arrow-div")
-              .style("z-index", "2147483638")
-              .style("position", "fixed");
-      };
-      HTMLTooltip.prototype.update = function (domNode, element) {
-          var _this = this;
-          _super.prototype.update.call(this, domNode, element);
-          if (this._contentNode !== this._prevContentNode) {
-              var node = this._tooltipElement.node();
-              __spreadArray([], node.querySelectorAll("*"), true).map(function (n) { return n.__data__; })
-                  .filter(function (n) { return n; })
-                  .forEach(function (w) {
-                  if (typeof w.target === "function") {
-                      w.target(null);
-                  }
-                  if (typeof w.exit === "function") {
-                      w.exit();
-                  }
-              });
-              node.innerHTML = "";
-              node.appendChild(this._contentNode);
-              this._prevContentNode = this._contentNode;
-          }
-          if (this._contentNode) {
-              this.onShowContent(this._contentNode);
-          }
-          else {
-              this._tooltipElement
-                  .html(function () {
-                  return _this._tooltipHTMLCallback(_this.data());
-              });
-          }
-          if (this.fitContent()) {
-              this._tooltipElement
-                  .style("width", "auto")
-                  .style("height", "auto")
-                  .style("padding", "0px")
-                  .style("box-sizing", "content-box");
-              var rect = this._tooltipElement.node().getBoundingClientRect();
-              this.tooltipWidth_default(rect.width);
-              this.tooltipHeight_default(rect.height);
-          }
-          this._closing = false;
-          this._tooltipElement
-              .style("background-color", this.tooltipColor())
-              .style("color", this.fontColor())
-              .style("width", this.tooltipWidth() + "px")
-              .style("height", this.tooltipHeight() + "px")
-              .style("opacity", 1)
-              .style("padding", this.padding() + "px")
-              .style("pointer-events", this.enablePointerEvents() ? "all" : "none")
-              .style("box-sizing", "content-box");
-          this._arrowElement
-              .style("opacity", 1)
-              .style("pointer-events", "none");
-          this.updateTooltipPosition();
-      };
-      HTMLTooltip.prototype.onShowContent = function (node) {
-      };
-      HTMLTooltip.prototype.updateTooltipPosition = function () {
-          var bbox = this.calcReferenceBBox();
-          var direction = this.calcTooltipDirection(bbox);
-          var box = bbox[direction];
-          this._tooltipElement
-              .style("top", box.y + "px")
-              .style("left", box.x + "px");
-          this.setArrowPosition(box, direction);
-          return box;
-      };
-      HTMLTooltip.prototype.calcTooltipDirection = function (bbox) {
-          var directions = Object.keys(bbox);
-          var defaultDirection = this.direction();
-          directions.sort(function (a, b) { return a === defaultDirection ? -1 : 1; });
-          var windowRect = {
-              top: 0,
-              left: 0,
-              width: window.innerWidth,
-              height: window.innerHeight
-          };
-          for (var i = 0; i < directions.length; i++) {
-              var tooltipRect = {
-                  top: bbox[directions[i]].y,
-                  left: bbox[directions[i]].x,
-                  width: this.tooltipWidth(),
-                  height: this.tooltipHeight()
-              };
-              if (this.rectFits(tooltipRect, windowRect)) {
-                  return directions[i];
-              }
-          }
-          this._logger.warning("Tooltip doesn't fit in the window for any of the directions. Defaulting to '".concat(defaultDirection, "'"));
-          this._logger.debug(windowRect);
-          this._logger.debug({
-              top: bbox[defaultDirection].y,
-              left: bbox[defaultDirection].x,
-              width: this.tooltipWidth(),
-              height: this.tooltipHeight()
-          });
-          return defaultDirection;
-      };
-      HTMLTooltip.prototype.rectFits = function (innerRect, outerRect) {
-          return (innerRect.top >= outerRect.top &&
-              innerRect.left >= outerRect.left &&
-              innerRect.width + innerRect.left <= outerRect.width + outerRect.left &&
-              innerRect.height + innerRect.top <= outerRect.height + outerRect.top);
-      };
-      HTMLTooltip.prototype.setArrowPosition = function (point, direction) {
-          var top;
-          var left;
-          var visibleBorderStyle = "border-top-color";
-          this._arrowElement
-              .style("border", "".concat(this.arrowHeight(), "px solid ").concat(this.tooltipColor()))
-              .style("border-top-color", "transparent")
-              .style("border-right-color", "transparent")
-              .style("border-bottom-color", "transparent")
-              .style("border-left-color", "transparent");
-          switch (direction) {
-              case "n":
-                  top = point.y + this.tooltipHeight() + (this.padding() * 2);
-                  left = point.x + (this.tooltipWidth() / 2) - (this.arrowWidth() / 2) + this.padding();
-                  visibleBorderStyle = "border-top-color";
-                  this._arrowElement
-                      .style("border-top-width", "".concat(this.arrowHeight(), "px"))
-                      .style("border-bottom-width", "0px")
-                      .style("border-left-width", "".concat(this.arrowWidth() / 2, "px"))
-                      .style("border-right-width", "".concat(this.arrowWidth() / 2, "px"));
-                  break;
-              case "s":
-                  top = point.y - this.arrowHeight();
-                  left = point.x + this.padding() + (this.tooltipWidth() / 2) - (this.arrowWidth() / 2);
-                  visibleBorderStyle = "border-bottom-color";
-                  this._arrowElement
-                      .style("border-top-width", "0px")
-                      .style("border-bottom-width", "".concat(this.arrowHeight(), "px"))
-                      .style("border-left-width", "".concat(this.arrowWidth() / 2, "px"))
-                      .style("border-right-width", "".concat(this.arrowWidth() / 2, "px"));
-                  break;
-              case "e":
-                  top = point.y + (this.tooltipHeight() / 2) + this.padding() - (this.arrowWidth() / 2);
-                  left = point.x - this.arrowHeight();
-                  visibleBorderStyle = "border-right-color";
-                  this._arrowElement
-                      .style("border-top-width", "".concat(this.arrowWidth() / 2, "px"))
-                      .style("border-bottom-width", "".concat(this.arrowWidth() / 2, "px"))
-                      .style("border-left-width", "0px")
-                      .style("border-right-width", "".concat(this.arrowHeight(), "px"));
-                  break;
-              case "w":
-                  top = point.y + (this.tooltipHeight() / 2) - (this.arrowWidth() / 2) + this.padding();
-                  left = point.x + this.tooltipWidth() + (this.padding() * 2);
-                  visibleBorderStyle = "border-left-color";
-                  this._arrowElement
-                      .style("border-top-width", "".concat(this.arrowWidth() / 2, "px"))
-                      .style("border-bottom-width", "".concat(this.arrowWidth() / 2, "px"))
-                      .style("border-left-width", "".concat(this.arrowHeight(), "px"))
-                      .style("border-right-width", "0px");
-                  break;
-          }
-          if (typeof top !== "undefined" && typeof left !== "undefined") {
-              this._arrowElement
-                  .style("top", top + "px")
-                  .style("left", left + "px")
-                  .style(visibleBorderStyle, this.tooltipColor())
-                  .style("opacity", 1);
-          }
-          else {
-              this._arrowElement
-                  .style("opacity", 0);
-          }
-          return point;
-      };
-      HTMLTooltip.prototype.getReferenceNode = function () {
-          if (!this._triggerElement) {
-              return this.element().node().parentNode.parentNode;
-          }
-          return this._triggerElement.node();
-      };
-      HTMLTooltip.prototype.calcReferenceBBox = function () {
-          var node = this.getReferenceNode();
-          var _a = node.getBoundingClientRect(), top = _a.top, left = _a.left, width = _a.width, height = _a.height;
-          var wholeW = this.tooltipWidth();
-          var wholeH = this.tooltipHeight();
-          var halfW = wholeW / 2;
-          var halfH = wholeH / 2;
-          var arrowH = this.arrowHeight();
-          var p = this.padding();
-          var p2 = p * 2;
-          if (this.followCursor() && this._cursorLoc) {
-              left = this._cursorLoc[0];
-              top = this._cursorLoc[1];
-              width = 1;
-              height = 1;
-          }
-          var bbox = {
-              n: {
-                  x: left + (width / 2) - halfW - p,
-                  y: top - wholeH - arrowH - p2
-              },
-              e: {
-                  x: left + width + arrowH,
-                  y: top + (height / 2) - halfH - p
-              },
-              s: {
-                  x: left + (width / 2) - halfW - p,
-                  y: top + height + arrowH
-              },
-              w: {
-                  x: left - wholeW - arrowH - p2,
-                  y: top + (height / 2) - halfH - p
-              },
-              nw: {
-                  x: left - wholeW - p2,
-                  y: top - wholeH - p2
-              },
-              ne: {
-                  x: left + width,
-                  y: top - wholeH - p2
-              },
-              se: {
-                  x: left + width,
-                  y: top + height
-              },
-              sw: {
-                  x: left - wholeW - p2,
-                  y: top + height
-              }
-          };
-          return bbox;
-      };
-      HTMLTooltip.prototype.mouseout = function () {
-          var _this = this;
-          this._closing = true;
-          this._tooltipElement.on("mouseover", function () {
-              _this._closing = false;
-          });
-          this._tooltipElement.on("mouseout", function () {
-              _this.mouseout();
-          });
-          setTimeout(function () {
-              if (_this._closing) {
-                  _this.visible(false);
-              }
-          }, this.closeDelay());
-      };
-      HTMLTooltip.prototype.visible = function (_) {
-          if (!arguments.length)
-              return _super.prototype.visible.call(this);
-          if (this._arrowElement) {
-              this._arrowElement.style("visibility", _ ? "visible" : "hidden");
-              this._tooltipElement.style("visibility", _ ? "visible" : "hidden");
-          }
-          _super.prototype.visible.call(this, _);
-          return this;
-      };
-      HTMLTooltip.prototype.exit = function (domNode, element) {
-          if (this._arrowElement) {
-              this._arrowElement.remove();
-              this._tooltipElement.remove();
-          }
-          _super.prototype.exit.call(this, domNode, element);
-      };
-      return HTMLTooltip;
-  }(common.HTMLWidget));
-  HTMLTooltip.prototype._class += " html_HTMLTooltip";
-  HTMLTooltip.prototype.publish("fitContent", false, "boolean", "If true, tooltip will grow to fit its html content");
-  HTMLTooltip.prototype.publish("followCursor", false, "boolean", "If true, tooltip will display relative to cursor location");
-  HTMLTooltip.prototype.publish("closeDelay", 400, "number", "Number of milliseconds to wait before closing tooltip (cancelled on tooltip mouseover event)");
-  HTMLTooltip.prototype.publish("direction", "n", "set", "Direction in which to display the tooltip", ["n", "s", "e", "w", "ne", "nw", "se", "sw"]);
-  HTMLTooltip.prototype.publish("padding", 8, "number", "Padding (pixels)");
-  HTMLTooltip.prototype.publish("arrowWidth", 16, "number", "Width (or height depending on direction) of the tooltip arrow (pixels)");
-  HTMLTooltip.prototype.publish("arrowHeight", 8, "number", "Height (or width depending on direction) of the tooltip arrow (pixels)");
-  HTMLTooltip.prototype.publish("fontColor", "#FFF", "html-color", "The default font color for text in the tooltip");
-  HTMLTooltip.prototype.publish("tooltipColor", "#000000EE", "html-color", "Background color of the tooltip");
-  HTMLTooltip.prototype.publish("tooltipWidth", 200, "number", "Width of the tooltip (not including arrow) (pixels)");
-  HTMLTooltip.prototype.publish("tooltipHeight", 200, "number", "Height of the tooltip (not including arrow) (pixels)");
-  HTMLTooltip.prototype.publish("enablePointerEvents", false, "boolean", "If true, the 'pointer-events: all' style will be used");
+.html_TitleBar .icon-bar a:hover {
+    background-color: whitesmoke; /* Add a hover color */
+}
 
-  var SimpleTable = /** @class */ (function (_super) {
-      __extends(SimpleTable, _super);
-      function SimpleTable() {
-          return _super.call(this) || this;
-      }
-      SimpleTable.prototype.transformData = function () {
-          return this.data();
-      };
-      SimpleTable.prototype.enter = function (domNode, element) {
-          _super.prototype.enter.call(this, domNode, element);
-          this._table = element.append("table");
-          this._thead = this._table.append("thead");
-          this._theadRow = this._thead.append("tr");
-          this._tbody = this._table.append("tbody");
-      };
-      SimpleTable.prototype.update = function (domNode, element) {
-          _super.prototype.update.call(this, domNode, element);
-          this._table
-              .style("width", this.autoWidth() ? "auto" : "100%");
-          var theadTrSelection = this._theadRow.selectAll("th").data(this.columns());
-          theadTrSelection.enter()
-              .append("th")
-              .attr("class", function (n, i) { return "th-".concat(i); })
-              .merge(theadTrSelection)
-              .text(function (_d) { return (_d).toString(); });
-          theadTrSelection.exit().remove();
-          var trSelection = this._tbody.selectAll("tr").data(this.transformData());
-          trSelection.enter()
-              .append("tr")
-              .merge(trSelection)
-              .each(function (d) {
-              var tr = common.select(this);
-              var tdSelection = tr.selectAll("td").data(d);
-              tdSelection.enter()
-                  .append("td")
-                  .attr("class", function (n, i) { return "col-".concat(i); })
-                  .merge(tdSelection)
-                  .text(function (_d) { return (_d).toString(); });
-              tdSelection.exit().remove();
-          });
-          trSelection.exit().remove();
-      };
-      return SimpleTable;
-  }(common.HTMLWidget));
-  SimpleTable.prototype._class += " html_SimpleTable";
-  SimpleTable.prototype.publish("autoWidth", false, "boolean", "If true, table width will be set to 'auto'. If false, the width is set to '100%'");
+.html_TitleBar .icon-bar a.selected {
+    background-color: #efe5e5; /* Add a hover color */
+}
 
-  var StyledTable = /** @class */ (function (_super) {
-      __extends(StyledTable, _super);
-      function StyledTable() {
-          return _super.call(this) || this;
-      }
-      StyledTable.prototype.applyStyleObject = function (selection, styleObject) {
-          Object.keys(styleObject).forEach(function (styleName) {
-              selection.style(styleName, styleObject[styleName]);
-          });
-      };
-      StyledTable.prototype.update = function (domNode, element) {
-          var _this = this;
-          _super.prototype.update.call(this, domNode, element);
-          element.selectAll("tr,th,td")
-              .attr("style", "")
-              .style("font-family", this.fontFamily())
-              .style("color", this.fontColor());
-          this.theadColumnStyles().forEach(function (styleObj, i) {
-              _this.applyStyleObject(element.select(".th-".concat(i)), styleObj);
-          });
-          this.tbodyColumnStyles().forEach(function (styleObj, i) {
-              _this.applyStyleObject(element.selectAll(".col-".concat(i)), styleObj);
-          });
-          var evenRowStylesExist = Object.keys(this.evenRowStyles()).length > 0;
-          var lastRowStylesExist = Object.keys(this.lastRowStyles()).length > 0;
-          var tbodyRows = element.selectAll("tbody > tr");
-          if (evenRowStylesExist) {
-              var tbodyEvenRows = tbodyRows.select(function (d, i) { return i % 2 ? this : null; });
-              this.applyStyleObject(tbodyEvenRows, this.evenRowStyles());
-          }
-          if (lastRowStylesExist) {
-              var tbodyLastRow = tbodyRows.select(function (d, i, arr) { return i === arr.length - 1 ? this : null; });
-              this.applyStyleObject(tbodyLastRow, this.lastRowStyles());
-          }
-      };
-      return StyledTable;
-  }(SimpleTable));
-  StyledTable.prototype._class += " html_StyledTable";
-  StyledTable.prototype.publish("fontFamily", "Verdana", "string", "Base font-family used within the table");
-  StyledTable.prototype.publish("fontColor", "#333", "string", "Base font color used within the table");
-  StyledTable.prototype.publish("theadColumnStyles", [], "array", 'Array of objects containing styles for the thead columns (ex: [{"color":"red"},{"color":"blue"}])');
-  StyledTable.prototype.publish("tbodyColumnStyles", [], "array", 'Array of objects containing styles for the tbody columns (ex: [{"color":"red"},{"color":"blue"}])');
-  StyledTable.prototype.publish("lastRowStyles", {}, "object", 'Object containing styles for the last row (ex: {"color":"red"})');
-  StyledTable.prototype.publish("evenRowStyles", {}, "object", 'Object containing styles for even rows (ex: {"background-color":"#AAA"})');
+.html_TitleBar .icon-bar a.spacer {
+    text-align: center; /* Center-align text */
+    padding-top: 2px;
+    padding-left: 8px;
+    padding-bottom: 0px;
+    color: none;
+}
 
-  var BreakdownTable = /** @class */ (function (_super) {
-      __extends(BreakdownTable, _super);
-      function BreakdownTable() {
-          return _super.call(this) || this;
-      }
-      BreakdownTable.prototype.transformData = function () {
-          var rowCount = this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount();
-          return this.breakdownData(rowCount);
-      };
-      BreakdownTable.prototype.breakdownData = function (limit) {
-          var len = this.data().length;
-          var sum = this.data().reduce(function (acc, row) { return acc + row[1]; }, 0);
-          var data = [];
-          var percSum = 0;
-          this.data().sort(function (a, b) { return a[1] > b[1] ? -1 : 1; });
-          var hiddenRowCount = len - limit;
-          var showOther = hiddenRowCount > 0;
-          this.data()
-              .filter(function (_, i) { return showOther ? i < limit - 1 : true; })
-              .forEach(function (row) {
-              var perc = Math.round((row[1] / sum) * 100);
-              percSum += perc;
-              data.push([row[0], perc + "%"]);
-          });
-          if (showOther) {
-              var otherLabel = "".concat(this.otherLabel(), " (").concat(len - limit + 1, ")");
-              var otherPercentage = "~" + (100 - percSum) + "%";
-              data.push([otherLabel, otherPercentage]);
-          }
-          return data;
-      };
-      BreakdownTable.prototype.calculateRowCount = function () {
-          var theadRowHeight = this.columns().length > 0 ? this.thFontSize() + 5 : 0;
-          var tbodyRowHeight = this.fontSize() + 5;
-          var tbodyAvailableHeight = this.height() - theadRowHeight;
-          var rowCount = Math.floor(tbodyAvailableHeight / tbodyRowHeight);
-          return rowCount;
-      };
-      BreakdownTable.prototype.enter = function (domNode, element) {
-          var _this = this;
-          _super.prototype.enter.call(this, domNode, element);
-          this._tooltip = new HTMLTooltip()
-              .target(domNode);
-          this._tooltip
-              .tooltipHTML(function (data) {
-              var _a;
-              var rowCount = _this.useCalculatedRowCount() ? _this.calculateRowCount() : _this.rowCount();
-              var rowHeight = (_a = Math.max.apply(Math, data.map(function (row) { return _this.textSize(row[0], _this.fontFamily(), _this.fontSize()).height; }))) !== null && _a !== void 0 ? _a : _this.fontSize();
-              var widestLabel = Math.max.apply(Math, data.map(function (row) { return _this.textSize(row[0], _this.fontFamily(), _this.fontSize()).width; }));
-              var widestPerc = 30;
-              var colCount = 2;
-              var w = colCount * (widestLabel + widestPerc) + (_this._tooltip.padding() * 2);
-              var h = rowHeight * Math.ceil((data.length - rowCount) / colCount) + (_this._tooltip.padding() * 2);
-              _this._tooltip.tooltipWidth(w);
-              _this._tooltip.tooltipHeight(h);
-              var otherData = _this.breakdownData(_this.data().length).slice(rowCount - 1);
-              return "<div style=\"\n                    width: 100%;\n                    height: 100%;\n                    font-size: ".concat(_this.fontSize(), "px;\n                \">").concat(otherData.map(function (row) {
-                  return "<div style=\"\n                        float:left;\n                        width:".concat(Math.floor(99 / colCount), "%;\n                    \">").concat(row[0], ": ").concat(row[1], "</div>");
-              }).join(""), "</div>");
-          });
-      };
-      BreakdownTable.prototype.update = function (domNode, element) {
-          this.theadColumnStyles_default([
-              {
-                  "color": this.thFirstColor(),
-                  "font-size": this.thFontSize() + "px",
-                  "font-weight": this.thFontWeight(),
-                  "text-align": this.labelAlignment(),
-                  "width": "auto",
-                  "padding": "0px"
-              },
-              {
-                  "width": "1%",
-                  "font-size": this.thFontSize() + "px",
-                  "font-weight": this.thFontWeight(),
-                  "text-align": this.percentageAlignment(),
-                  "padding": "0px"
-              }
-          ]);
-          this.tbodyColumnStyles_default([
-              {
-                  "color": this.topLabelColor(),
-                  "font-size": this.fontSize() + "px",
-                  "font-weight": "normal",
-                  "text-align": this.labelAlignment(),
-                  "width": "auto",
-                  "padding": "0px"
-              },
-              {
-                  "color": this.topPercentageColor(),
-                  "font-size": this.fontSize() + "px",
-                  "font-weight": "normal",
-                  "text-align": this.percentageAlignment(),
-                  "width": "1%",
-                  "padding": "0px"
-              }
-          ]);
-          this.lastRowStyles_default([
-              {
-                  "color": this.otherLabelColor(),
-                  "font-size": this.fontSize() + "px",
-                  "font-weight": this.otherLabelBold() ? "bold" : "normal",
-                  "text-align": this.labelAlignment(),
-                  "width": "auto",
-                  "padding": "0px"
-              },
-              {
-                  "color": this.otherLabelColor(),
-                  "font-size": this.fontSize() + "px",
-                  "font-weight": this.otherPercentageBold() ? "bold" : "normal",
-                  "text-align": this.percentageAlignment(),
-                  "width": "1%",
-                  "padding": "0px"
-              }
-          ]);
-          _super.prototype.update.call(this, domNode, element);
-          var rowCount = this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount();
-          if (rowCount < this.data().length) {
-              var lastRow_1 = element.select("tbody > tr:last-child");
-              var context_1 = this;
-              lastRow_1
-                  .on("mouseout.tooltip", function (d) {
-                  context_1._tooltip._triggerElement = lastRow_1;
-                  context_1._tooltip
-                      .visible(false)
-                      .render();
-              })
-                  .on("mouseenter.tooltip", function (d) {
-                  context_1._tooltip._triggerElement = lastRow_1;
-                  context_1._tooltip
-                      .direction("n")
-                      .data(context_1.data())
-                      .visible(true)
-                      .render();
-              });
-          }
-      };
-      return BreakdownTable;
-  }(StyledTable));
-  BreakdownTable.prototype._class += " html_BreakdownTable";
-  BreakdownTable.prototype.publish("useCalculatedRowCount", true, "boolean", "If true, rowCount will be calculated and its default will be overwritten");
-  BreakdownTable.prototype.publish("rowCount", 5, "number", "Number of total rows to display (including the 'other' row)", undefined, { disable: function (w) { return w.useCalculatedRowCount(); } });
-  BreakdownTable.prototype.publish("fontSize", 14, "number", "Font size (pixels)");
-  BreakdownTable.prototype.publish("labelAlignment", "left", "set", "Alignment of the label column text", ["left", "center", "right"]);
-  BreakdownTable.prototype.publish("percentageAlignment", "center", "set", "Alignment of the percentage column text", ["left", "center", "right"]);
-  BreakdownTable.prototype.publish("topLabelColor", "#333", "html-color", "Color of displayed 'top' labels");
-  BreakdownTable.prototype.publish("topPercentageColor", "#1A99D5", "html-color", "Color of displayed 'top' percentages");
-  BreakdownTable.prototype.publish("topPercentageBold", true, "html-color", "If true, the 'top' percentages will be bold");
-  BreakdownTable.prototype.publish("otherLabel", "Other", "string", "Label text for the 'other' row");
-  BreakdownTable.prototype.publish("otherLabelColor", "#AAA", "html-color", "Color of the 'other' label");
-  BreakdownTable.prototype.publish("otherLabelBold", false, "html-color", "If true, the 'other' label will be bold");
-  BreakdownTable.prototype.publish("otherPercentageColor", "#AAA", "html-color", "Color of the 'other' percentage");
-  BreakdownTable.prototype.publish("otherPercentageBold", false, "html-color", "If true, the 'other' percentage will be bold");
-  BreakdownTable.prototype.publish("thFontWeight", "bold", "string", "Font weight for th elements");
-  BreakdownTable.prototype.publish("thFontSize", 26, "number", "Font size for th elements");
-  BreakdownTable.prototype.publish("thFirstColor", "#333", "html-color", "Text color of the first th element");
-  BreakdownTable.prototype.publish("thLastColor", "#333", "html-color", "Text color of the last th element");
+.html_TitleBar .icon-bar a.spacer:hover {
+    background-color: transparent;
+}
 
-  var n,l$1,u$1,i$1,o$1,r$1,f$1,e$1,c$1,s$1,h$1={},v$1=[],p$1=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,y$1=Array.isArray;function d$1(n,l){for(var u in l)n[u]=l[u];return n}function w$1(n){n&&n.parentNode&&n.parentNode.removeChild(n);}function _(l,u,t){var i,o,r,f={};for(r in u)"key"==r?i=u[r]:"ref"==r?o=u[r]:f[r]=u[r];if(arguments.length>2&&(f.children=arguments.length>3?n.call(arguments,2):t),"function"==typeof l&&null!=l.defaultProps)for(r in l.defaultProps)void 0===f[r]&&(f[r]=l.defaultProps[r]);return g(l,f,i,o,null)}function g(n,t,i,o,r){var f={type:n,props:t,key:i,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:null==r?++u$1:r,__i:-1,__u:0};return null==r&&null!=l$1.vnode&&l$1.vnode(f),f}function b(n){return n.children}function k$1(n,l){this.props=n,this.context=l;}function x(n,l){if(null==l)return n.__?x(n.__,n.__i+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return "function"==typeof n.type?x(n):null}function C$1(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return C$1(n)}}function M(n){(!n.__d&&(n.__d=!0)&&i$1.push(n)&&!P.__r++||o$1!==l$1.debounceRendering)&&((o$1=l$1.debounceRendering)||r$1)(P);}function P(){var n,u,t,o,r,e,c,s;for(i$1.sort(f$1);n=i$1.shift();)n.__d&&(u=i$1.length,o=void 0,e=(r=(t=n).__v).__e,c=[],s=[],t.__P&&((o=d$1({},r)).__v=r.__v+1,l$1.vnode&&l$1.vnode(o),O(t.__P,o,r,t.__n,t.__P.namespaceURI,32&r.__u?[e]:null,c,null==e?x(r):e,!!(32&r.__u),s),o.__v=r.__v,o.__.__k[o.__i]=o,j$1(c,o,s),o.__e!=e&&C$1(o)),i$1.length>u&&i$1.sort(f$1));P.__r=0;}function S(n,l,u,t,i,o,r,f,e,c,s){var a,p,y,d,w,_=t&&t.__k||v$1,g=l.length;for(u.__d=e,$(u,l,_),e=u.__d,a=0;a<g;a++)null!=(y=u.__k[a])&&(p=-1===y.__i?h$1:_[y.__i]||h$1,y.__i=a,O(n,y,p,i,o,r,f,e,c,s),d=y.__e,y.ref&&p.ref!=y.ref&&(p.ref&&N(p.ref,null,y),s.push(y.ref,y.__c||d,y)),null==w&&null!=d&&(w=d),65536&y.__u||p.__k===y.__k?e=I(y,e,n):"function"==typeof y.type&&void 0!==y.__d?e=y.__d:d&&(e=d.nextSibling),y.__d=void 0,y.__u&=-196609);u.__d=e,u.__e=w;}function $(n,l,u){var t,i,o,r,f,e=l.length,c=u.length,s=c,a=0;for(n.__k=[],t=0;t<e;t++)null!=(i=l[t])&&"boolean"!=typeof i&&"function"!=typeof i?(r=t+a,(i=n.__k[t]="string"==typeof i||"number"==typeof i||"bigint"==typeof i||i.constructor==String?g(null,i,null,null,null):y$1(i)?g(b,{children:i},null,null,null):void 0===i.constructor&&i.__b>0?g(i.type,i.props,i.key,i.ref?i.ref:null,i.__v):i).__=n,i.__b=n.__b+1,o=null,-1!==(f=i.__i=L(i,u,r,s))&&(s--,(o=u[f])&&(o.__u|=131072)),null==o||null===o.__v?(-1==f&&a--,"function"!=typeof i.type&&(i.__u|=65536)):f!==r&&(f==r-1?a--:f==r+1?a++:(f>r?a--:a++,i.__u|=65536))):i=n.__k[t]=null;if(s)for(t=0;t<c;t++)null!=(o=u[t])&&0==(131072&o.__u)&&(o.__e==n.__d&&(n.__d=x(o)),V(o,o));}function I(n,l,u){var t,i;if("function"==typeof n.type){for(t=n.__k,i=0;t&&i<t.length;i++)t[i]&&(t[i].__=n,l=I(t[i],l,u));return l}n.__e!=l&&(l&&n.type&&!u.contains(l)&&(l=x(n)),u.insertBefore(n.__e,l||null),l=n.__e);do{l=l&&l.nextSibling;}while(null!=l&&8===l.nodeType);return l}function L(n,l,u,t){var i=n.key,o=n.type,r=u-1,f=u+1,e=l[u];if(null===e||e&&i==e.key&&o===e.type&&0==(131072&e.__u))return u;if(t>(null!=e&&0==(131072&e.__u)?1:0))for(;r>=0||f<l.length;){if(r>=0){if((e=l[r])&&0==(131072&e.__u)&&i==e.key&&o===e.type)return r;r--;}if(f<l.length){if((e=l[f])&&0==(131072&e.__u)&&i==e.key&&o===e.type)return f;f++;}}return -1}function T$1(n,l,u){"-"===l[0]?n.setProperty(l,null==u?"":u):n[l]=null==u?"":"number"!=typeof u||p$1.test(l)?u:u+"px";}function A(n,l,u,t,i){var o;n:if("style"===l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof t&&(n.style.cssText=t=""),t)for(l in t)u&&l in u||T$1(n.style,l,"");if(u)for(l in u)t&&u[l]===t[l]||T$1(n.style,l,u[l]);}else if("o"===l[0]&&"n"===l[1])o=l!==(l=l.replace(/(PointerCapture)$|Capture$/i,"$1")),l=l.toLowerCase()in n||"onFocusOut"===l||"onFocusIn"===l?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+o]=u,u?t?u.u=t.u:(u.u=e$1,n.addEventListener(l,o?s$1:c$1,o)):n.removeEventListener(l,o?s$1:c$1,o);else {if("http://www.w3.org/2000/svg"==i)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!=l&&"height"!=l&&"href"!=l&&"list"!=l&&"form"!=l&&"tabIndex"!=l&&"download"!=l&&"rowSpan"!=l&&"colSpan"!=l&&"role"!=l&&"popover"!=l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null==u||!1===u&&"-"!==l[4]?n.removeAttribute(l):n.setAttribute(l,"popover"==l&&1==u?"":u));}}function F(n){return function(u){if(this.l){var t=this.l[u.type+n];if(null==u.t)u.t=e$1++;else if(u.t<t.u)return;return t(l$1.event?l$1.event(u):u)}}}function O(n,u,t,i,o,r,f,e,c,s){var a,h,v,p,w,_,g,m,x,C,M,P,$,I,H,L,T=u.type;if(void 0!==u.constructor)return null;128&t.__u&&(c=!!(32&t.__u),r=[e=u.__e=t.__e]),(a=l$1.__b)&&a(u);n:if("function"==typeof T)try{if(m=u.props,x="prototype"in T&&T.prototype.render,C=(a=T.contextType)&&i[a.__c],M=a?C?C.props.value:a.__:i,t.__c?g=(h=u.__c=t.__c).__=h.__E:(x?u.__c=h=new T(m,M):(u.__c=h=new k$1(m,M),h.constructor=T,h.render=q$1),C&&C.sub(h),h.props=m,h.state||(h.state={}),h.context=M,h.__n=i,v=h.__d=!0,h.__h=[],h._sb=[]),x&&null==h.__s&&(h.__s=h.state),x&&null!=T.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=d$1({},h.__s)),d$1(h.__s,T.getDerivedStateFromProps(m,h.__s))),p=h.props,w=h.state,h.__v=u,v)x&&null==T.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),x&&null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else {if(x&&null==T.getDerivedStateFromProps&&m!==p&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(m,M),!h.__e&&(null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(m,h.__s,M)||u.__v===t.__v)){for(u.__v!==t.__v&&(h.props=m,h.state=h.__s,h.__d=!1),u.__e=t.__e,u.__k=t.__k,u.__k.some(function(n){n&&(n.__=u);}),P=0;P<h._sb.length;P++)h.__h.push(h._sb[P]);h._sb=[],h.__h.length&&f.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(m,h.__s,M),x&&null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(p,w,_);});}if(h.context=M,h.props=m,h.__P=n,h.__e=!1,$=l$1.__r,I=0,x){for(h.state=h.__s,h.__d=!1,$&&$(u),a=h.render(h.props,h.state,h.context),H=0;H<h._sb.length;H++)h.__h.push(h._sb[H]);h._sb=[];}else do{h.__d=!1,$&&$(u),a=h.render(h.props,h.state,h.context),h.state=h.__s;}while(h.__d&&++I<25);h.state=h.__s,null!=h.getChildContext&&(i=d$1(d$1({},i),h.getChildContext())),x&&!v&&null!=h.getSnapshotBeforeUpdate&&(_=h.getSnapshotBeforeUpdate(p,w)),S(n,y$1(L=null!=a&&a.type===b&&null==a.key?a.props.children:a)?L:[L],u,t,i,o,r,f,e,c,s),h.base=u.__e,u.__u&=-161,h.__h.length&&f.push(h),g&&(h.__E=h.__=null);}catch(n){if(u.__v=null,c||null!=r){for(u.__u|=c?160:32;e&&8===e.nodeType&&e.nextSibling;)e=e.nextSibling;r[r.indexOf(e)]=null,u.__e=e;}else u.__e=t.__e,u.__k=t.__k;l$1.__e(n,u,t);}else null==r&&u.__v===t.__v?(u.__k=t.__k,u.__e=t.__e):u.__e=z$1(t.__e,u,t,i,o,r,f,c,s);(a=l$1.diffed)&&a(u);}function j$1(n,u,t){u.__d=void 0;for(var i=0;i<t.length;i++)N(t[i],t[++i],t[++i]);l$1.__c&&l$1.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l$1.__e(n,u.__v);}});}function z$1(u,t,i,o,r,f,e,c,s){var a,v,p,d,_,g,m,b=i.props,k=t.props,C=t.type;if("svg"===C?r="http://www.w3.org/2000/svg":"math"===C?r="http://www.w3.org/1998/Math/MathML":r||(r="http://www.w3.org/1999/xhtml"),null!=f)for(a=0;a<f.length;a++)if((_=f[a])&&"setAttribute"in _==!!C&&(C?_.localName===C:3===_.nodeType)){u=_,f[a]=null;break}if(null==u){if(null===C)return document.createTextNode(k);u=document.createElementNS(r,C,k.is&&k),c&&(l$1.__m&&l$1.__m(t,f),c=!1),f=null;}if(null===C)b===k||c&&u.data===k||(u.data=k);else {if(f=f&&n.call(u.childNodes),b=i.props||h$1,!c&&null!=f)for(b={},a=0;a<u.attributes.length;a++)b[(_=u.attributes[a]).name]=_.value;for(a in b)if(_=b[a],"children"==a);else if("dangerouslySetInnerHTML"==a)p=_;else if(!(a in k)){if("value"==a&&"defaultValue"in k||"checked"==a&&"defaultChecked"in k)continue;A(u,a,null,_,r);}for(a in k)_=k[a],"children"==a?d=_:"dangerouslySetInnerHTML"==a?v=_:"value"==a?g=_:"checked"==a?m=_:c&&"function"!=typeof _||b[a]===_||A(u,a,_,b[a],r);if(v)c||p&&(v.__html===p.__html||v.__html===u.innerHTML)||(u.innerHTML=v.__html),t.__k=[];else if(p&&(u.innerHTML=""),S(u,y$1(d)?d:[d],t,i,o,"foreignObject"===C?"http://www.w3.org/1999/xhtml":r,f,e,f?f[0]:i.__k&&x(i,0),c,s),null!=f)for(a=f.length;a--;)w$1(f[a]);c||(a="value","progress"===C&&null==g?u.removeAttribute("value"):void 0!==g&&(g!==u[a]||"progress"===C&&!g||"option"===C&&g!==b[a])&&A(u,a,g,b[a],r),a="checked",void 0!==m&&m!==u[a]&&A(u,a,m,b[a],r));}return u}function N(n,u,t){try{if("function"==typeof n){var i="function"==typeof n.__u;i&&n.__u(),i&&null==u||(n.__u=n(u));}else n.current=u;}catch(n){l$1.__e(n,t);}}function V(n,u,t){var i,o;if(l$1.unmount&&l$1.unmount(n),(i=n.ref)&&(i.current&&i.current!==n.__e||N(i,null,u)),null!=(i=n.__c)){if(i.componentWillUnmount)try{i.componentWillUnmount();}catch(n){l$1.__e(n,u);}i.base=i.__P=null;}if(i=n.__k)for(o=0;o<i.length;o++)i[o]&&V(i[o],u,t||"function"!=typeof n.type);t||w$1(n.__e),n.__c=n.__=n.__e=n.__d=void 0;}function q$1(n,l,u){return this.constructor(n,u)}function B$1(u,t,i){var o,r,f,e;l$1.__&&l$1.__(u,t),r=(o="function"==typeof i)?null:i&&i.__k||t.__k,f=[],e=[],O(t,u=(!o&&i||t).__k=_(b,null,[u]),r||h$1,h$1,t.namespaceURI,!o&&i?[i]:r?null:t.firstChild?n.call(t.childNodes):null,f,!o&&i?i:r?r.__e:t.firstChild,o,e),j$1(f,u,e);}n=v$1.slice,l$1={__e:function(n,l,u,t){for(var i,o,r;l=l.__;)if((i=l.__c)&&!i.__)try{if((o=i.constructor)&&null!=o.getDerivedStateFromError&&(i.setState(o.getDerivedStateFromError(n)),r=i.__d),null!=i.componentDidCatch&&(i.componentDidCatch(n,t||{}),r=i.__d),r)return i.__E=i}catch(l){n=l;}throw n}},u$1=0,k$1.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=d$1({},this.state),"function"==typeof n&&(n=n(d$1({},u),this.props)),n&&d$1(u,n),null!=n&&this.__v&&(l&&this._sb.push(l),M(this));},k$1.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),M(this));},k$1.prototype.render=b,i$1=[],r$1="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,f$1=function(n,l){return n.__v.__b-l.__v.__b},P.__r=0,e$1=0,c$1=F(!1),s$1=F(!0);
-
-  var r,u,i,f=[],c=l$1,e=c.__b,a=c.__r,v=c.diffed,l=c.__c,m=c.unmount,s=c.__;function j(){for(var n;n=f.shift();)if(n.__P&&n.__H)try{n.__H.__h.forEach(z),n.__H.__h.forEach(B),n.__H.__h=[];}catch(t){n.__H.__h=[],c.__e(t,n.__v);}}c.__b=function(n){r=null,e&&e(n);},c.__=function(n,t){n&&t.__k&&t.__k.__m&&(n.__m=t.__k.__m),s&&s(n,t);},c.__r=function(n){a&&a(n);var i=(r=n.__c).__H;i&&(u===r?(i.__h=[],r.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.i=n.__N=void 0;})):(i.__h.forEach(z),i.__h.forEach(B),i.__h=[],0)),u=r;},c.diffed=function(n){v&&v(n);var t=n.__c;t&&t.__H&&(t.__H.__h.length&&(1!==f.push(t)&&i===c.requestAnimationFrame||((i=c.requestAnimationFrame)||w)(j)),t.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.i=void 0;})),u=r=null;},c.__c=function(n,t){t.some(function(n){try{n.__h.forEach(z),n.__h=n.__h.filter(function(n){return !n.__||B(n)});}catch(r){t.some(function(n){n.__h&&(n.__h=[]);}),t=[],c.__e(r,n.__v);}}),l&&l(n,t);},c.unmount=function(n){m&&m(n);var t,r=n.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{z(n);}catch(n){t=n;}}),r.__H=void 0,t&&c.__e(t,r.__v));};var k="function"==typeof requestAnimationFrame;function w(n){var t,r=function(){clearTimeout(u),k&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);k&&(t=requestAnimationFrame(r));}function z(n){var t=r,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r=t;}function B(n){var t=r;n.__c=n.__(),r=t;}
-
-  var JSXWidget = /** @class */ (function (_super) {
-      __extends(JSXWidget, _super);
-      function JSXWidget() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      JSXWidget.prototype.jsxRender = function (jsx, domNode) {
-          this.rootNode = B$1(jsx, domNode, this.rootNode);
-      };
-      JSXWidget.Component = k$1;
-      JSXWidget.createElement = _;
-      return JSXWidget;
-  }(common.HTMLWidget));
-  JSXWidget.prototype._class += " html_JSXWidget";
-
-  var VNode = /** @class */ (function () {
-      function VNode(attrs, children) {
-          this._attrs = attrs;
-          this._children = children;
-      }
-      VNode.prototype.type = function () {
-          return "div";
-      };
-      VNode.prototype.attrs = function () {
-          return this._attrs;
-      };
-      VNode.prototype.attr = function (key) {
-          return this._attrs[key];
-      };
-      VNode.prototype.children = function () {
-          return this._children;
-      };
-      VNode.prototype.update = function (targetElement) {
-          for (var key in this._attrs) {
-              targetElement.attr(key, this._attrs[key]);
-          }
-      };
-      VNode.prototype.render = function (targetElement) {
-          var thisElement = targetElement.selectAll("".concat(targetElement.node().tagName, " > *")).data([this]);
-          thisElement.exit()
-              .remove();
-          return thisElement.enter().append(this.type())
-              .attr("reactd3", 0)
-              .merge(thisElement)
-              .each(function (d) {
-              var element = common.select(this);
-              d.update(element);
-              d.renderChildren(element);
-          });
-      };
-      VNode.prototype.renderChildren = function (targetElement) {
-          var thisElement = targetElement.selectAll("".concat(targetElement.node().tagName, " > *")).data(this._children);
-          thisElement.exit()
-              .remove();
-          return thisElement.enter().append(function (d) { return document.createElement(d.type()); })
-              .attr("reactd3", function (_d, i) { return i; })
-              .merge(thisElement)
-              .each(function (d) {
-              var element = common.select(this);
-              d.update(element);
-              d.renderChildren(element);
-          });
-      };
-      return VNode;
-  }());
-  var ConstVNode = /** @class */ (function (_super) {
-      __extends(ConstVNode, _super);
-      function ConstVNode(type, attrs, children) {
-          var _this = _super.call(this, attrs, children) || this;
-          _this._type = type;
-          return _this;
-      }
-      ConstVNode.prototype.type = function () {
-          return this._type;
-      };
-      return ConstVNode;
-  }(VNode));
-  var TextVNode = /** @class */ (function (_super) {
-      __extends(TextVNode, _super);
-      function TextVNode(text) {
-          var _this = _super.call(this, {}, []) || this;
-          _this._text = text;
-          return _this;
-      }
-      TextVNode.prototype.type = function () {
-          return "span";
-      };
-      TextVNode.prototype.update = function (targetElement) {
-          _super.prototype.update.call(this, targetElement);
-          targetElement.text(this._text);
-      };
-      return TextVNode;
-  }(VNode));
-  function isReactFn(_) {
-      return typeof _ === "function";
-  }
-  function isIVNode(_) {
-      return _.prototype && _.prototype instanceof VNode;
-  }
-  var ReactD3 = /** @class */ (function () {
-      function ReactD3() {
-      }
-      // static createElementXXX(type: string | ReactFn | IVNode, attrs: { [key: string]: string }, ...children: Array<string | VNode>): VNode {
-      ReactD3.createElement = function (type, attrs) {
-          var children = [];
-          for (var _i = 2; _i < arguments.length; _i++) {
-              children[_i - 2] = arguments[_i];
-          }
-          if (isIVNode(type)) {
-              return new type(attrs);
-          }
-          else if (isReactFn(type)) {
-              return type(attrs);
-          }
-          return new ConstVNode(type, attrs, children.map(function (child) {
-              if (typeof child === "string") {
-                  return new TextVNode(child);
-              }
-              return child;
-          }));
-      };
-      ReactD3.render = function (vdom, targetElement) {
-          vdom.render(targetElement);
-      };
-      return ReactD3;
-  }());
-
-  var VizComponent = /** @class */ (function (_super) {
-      __extends(VizComponent, _super);
-      function VizComponent() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      VizComponent.prototype.refreshProps = function () {
-          for (var key in this.props) {
-              if (this.widget[key] && typeof this.widget[key] === "function") {
-                  this.widget[key](this.props[key]);
-              }
-          }
-      };
-      VizComponent.prototype.componentDidMount = function () {
-          this.widget = new this.props.type()
-              .target(this.base);
-          this.refreshProps();
-          this.widget
-              .render();
-      };
-      VizComponent.prototype.componentWillUnmount = function () {
-          this.widget
-              .target(null)
-              .render();
-      };
-      VizComponent.prototype.render = function () {
-          return _("div", { style: this.props.style });
-      };
-      VizComponent.prototype.componentDidUpdate = function () {
-          this.refreshProps();
-          this.widget.render();
-      };
-      return VizComponent;
-  }(JSXWidget.Component));
-
-  var VizInstance = /** @class */ (function (_super) {
-      __extends(VizInstance, _super);
-      function VizInstance() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      VizInstance.prototype.refreshProps = function () {
-          for (var key in this.props) {
-              if (this.widget[key] && typeof this.widget[key] === "function") {
-                  this.widget[key](this.props[key]);
-              }
-          }
-      };
-      VizInstance.prototype.componentDidMount = function () {
-          this.widget = this.props.instance
-              .target(this.base);
-          this.refreshProps();
-          this.widget
-              .render();
-      };
-      VizInstance.prototype.componentWillUnmount = function () {
-          this.widget
-              .target(null)
-              .render();
-      };
-      VizInstance.prototype.render = function () {
-          return _("div", { style: this.props.style });
-      };
-      VizInstance.prototype.componentDidUpdate = function () {
-          this.refreshProps();
-          this.widget.render();
-      };
-      return VizInstance;
-  }(JSXWidget.Component));
-
-  var StatsTable = /** @class */ (function (_super) {
-      __extends(StatsTable, _super);
-      function StatsTable() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      StatsTable.prototype.transformData = function () {
-          var _this = this;
-          var totalRow = [["Total", 0, 0]];
-          var data = this.data();
-          data.forEach(function (row) {
-              totalRow[0][1] += row[1];
-              totalRow[0][2] += row[2];
-          });
-          return data
-              .concat(totalRow)
-              .map(function (row) {
-              return [
-                  row[0],
-                  _this.secondColumnFormat_exists() ? common.format(_this.secondColumnFormat())(row[1]) : row[1],
-                  _this.thirdColumnFormat_exists() ? common.format(_this.thirdColumnFormat())(row[2]) : row[2]
-              ];
-          });
-      };
-      StatsTable.prototype.update = function (domNode, element) {
-          this.tbodyColumnStyles_default([
-              {
-                  "font-weight": "bold",
-                  "width": this.firstColumnWidth(),
-                  "text-align": "left"
-              },
-              {
-                  "width": this.secondColumnWidth(),
-                  "text-align": "right"
-              },
-              {
-                  "width": this.thirdColumnWidth(),
-                  "text-align": "right"
-              }
-          ]);
-          this.evenRowStyles_default([
-              {
-                  "font-weight": "bold",
-                  "width": this.firstColumnWidth(),
-                  "text-align": "left",
-                  "font-color": this.evenRowFontColor(),
-                  "background-color": this.evenRowBackgroundColor()
-              },
-              {
-                  "width": this.secondColumnWidth(),
-                  "text-align": "right",
-                  "font-color": this.evenRowFontColor(),
-                  "background-color": this.evenRowBackgroundColor()
-              },
-              {
-                  "width": this.thirdColumnWidth(),
-                  "text-align": "right",
-                  "font-color": this.evenRowFontColor(),
-                  "background-color": this.evenRowBackgroundColor()
-              }
-          ]);
-          this.lastRowStyles_default({
-              "font-weight": "bold"
-          });
-          _super.prototype.update.call(this, domNode, element);
-      };
-      return StatsTable;
-  }(StyledTable));
-  StatsTable.prototype._class += " html_StatsTable";
-  StatsTable.prototype.publish("labelColor", "#333", "html-color", "Color of the text in the first column");
-  StatsTable.prototype.publish("primaryValueColor", "#333", "html-color", "Color of the text in the second column");
-  StatsTable.prototype.publish("secondaryValueColor", "#333", "html-color", "Color of the text in the third column");
-  StatsTable.prototype.publish("evenRowBackgroundColor", "#333", "html-color", "Background color of the even rows");
-  StatsTable.prototype.publish("evenRowFontColor", "#333", "html-color", "Font color of the even rows");
-  StatsTable.prototype.publish("firstColumnWidth", "auto", "string", "CSS style applied as the 'width' for the first column (ex: 40px)");
-  StatsTable.prototype.publish("secondColumnWidth", "1%", "string", "CSS style applied as the 'width' for the second column (ex: 40px)");
-  StatsTable.prototype.publish("thirdColumnWidth", "1%", "string", "CSS style applied as the 'width' for the third column (ex: 40px)");
-  StatsTable.prototype.publish("secondColumnFormat", "$,.0f", "string", "d3-format specifier applied to the second column's values", undefined, { optional: true });
-  StatsTable.prototype.publish("thirdColumnFormat", null, "string", "d3-format specifier applied to the third column's values", undefined, { optional: true });
-
-  function styleInject(css, ref) {
-    if ( ref === void 0 ) ref = {};
-    var insertAt = ref.insertAt;
-
-    if (typeof document === 'undefined') { return; }
-
-    var head = document.head || document.getElementsByTagName('head')[0];
-    var style = document.createElement('style');
-    style.type = 'text/css';
-
-    if (insertAt === 'top') {
-      if (head.firstChild) {
-        head.insertBefore(style, head.firstChild);
-      } else {
-        head.appendChild(style);
-      }
-    } else {
-      head.appendChild(style);
-    }
-
-    if (style.styleSheet) {
-      style.styleSheet.cssText = css;
-    } else {
-      style.appendChild(document.createTextNode(css));
-    }
-  }
-
-  var css_248z = "#wrap{width:100%}#left,#right{padding:5px}#left{background-color:red;display:block;overflow:hidden;text-align:left;text-overflow:ellipsis}#left,#right{white-space:nowrap}#right{background-color:orange;float:right;text-align:right}.html_TitleBar>.main{display:block;width:100%}.html_TitleBar .title{display:block;font-size:20px;font-weight:700;overflow:hidden;padding:4px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.html_TitleBar .icon-bar{float:right;line-height:28px;padding:4px;text-align:right;white-space:nowrap}.html_TitleBar .icon-bar-item,.html_TitleBar .icon-bar-item>div{display:inline}.html_TitleBar .icon-bar a{color:#a9a9a9;padding-bottom:4px;padding-top:4px;text-align:center;transition:all .3s ease}.html_TitleBar .icon-bar a:hover{background-color:#f5f5f5}.html_TitleBar .icon-bar a.selected{background-color:#efe5e5}.html_TitleBar .icon-bar a.spacer{color:none;padding-bottom:0;padding-left:8px;padding-top:2px;text-align:center}.html_TitleBar .icon-bar a.spacer:hover{background-color:transparent}.html_TitleBar .icon-bar .active{background-color:#4caf50}";
-  styleInject(css_248z);
-
-  var Item = /** @class */ (function (_super) {
-      __extends(Item, _super);
-      function Item(owner) {
-          var _this = _super.call(this) || this;
-          _this._owner = owner;
-          _this._tag = "a";
-          return _this;
-      }
-      return Item;
-  }(common.HTMLWidget));
-  var Button = /** @class */ (function (_super) {
-      __extends(Button, _super);
-      function Button(owner, icon) {
-          var _this = _super.call(this, owner) || this;
-          _this._icon = icon;
-          return _this;
-      }
-      Button.prototype.icon = function () {
-          return this._icon;
-      };
-      Button.prototype.enter = function (domNode, element) {
-          var _this = this;
-          _super.prototype.enter.call(this, domNode, element);
-          element
-              .attr("href", "#")
-              .on("click", function (d, idx, groups) { return _this._owner.titleBarClick(_this, d, idx, groups); })
-              .append("i")
-              .attr("class", "fa ".concat(this._icon, " fa-lg fa-fw"));
-      };
-      return Button;
-  }(Item));
-  var ToggleButton = /** @class */ (function (_super) {
-      __extends(ToggleButton, _super);
-      function ToggleButton() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      ToggleButton.prototype.enter = function (domNode, element) {
-          var _this = this;
-          element.on("click.sel", function (d, idx, groups) {
-              _this.selected(!_this.selected());
-              _this.render();
-          });
-          _super.prototype.enter.call(this, domNode, element);
-      };
-      ToggleButton.prototype.update = function (domNode, element) {
-          _super.prototype.update.call(this, domNode, element);
-          this._element.classed("selected", this.selected());
-      };
-      return ToggleButton;
-  }(Button));
-  ToggleButton.prototype.publish("selected", false, "boolean");
-  var Spacer = /** @class */ (function (_super) {
-      __extends(Spacer, _super);
-      function Spacer() {
-          return _super !== null && _super.apply(this, arguments) || this;
-      }
-      Spacer.prototype.enter = function (domNode, element) {
-          _super.prototype.enter.call(this, domNode, element);
-          element
-              .attr("class", "spacer")
-              .attr("href", "#")
-              .append("i");
-      };
-      return Spacer;
-  }(Item));
-  var TitleBar = /** @class */ (function (_super) {
-      __extends(TitleBar, _super);
-      function TitleBar() {
-          return _super.call(this) || this;
-      }
-      TitleBar.prototype.enter = function (domNode, element) {
-          _super.prototype.enter.call(this, domNode, element);
-          this._divMain = element.append("div")
-              .attr("class", "main");
-          this._divIconBar = this._divMain.append("div")
-              .attr("class", "icon-bar");
-          this._divTitle = this._divMain.append("div")
-              .attr("class", "title");
-      };
-      TitleBar.prototype.update = function (domNode, element) {
-          _super.prototype.update.call(this, domNode, element);
-          this._divTitle.text(this.title());
-          var icons = this._divIconBar.selectAll(".icon-bar-item").data(this.buttons());
-          icons.enter().append("div")
-              .attr("class", "icon-bar-item")
-              .each(function (d) {
-              d.target(this);
-          })
-              .merge(icons)
-              .each(function (d) {
-              d.render();
-          });
-          icons.exit()
-              .each(function (d) {
-              d.target(null);
-          })
-              .remove();
-          icons.order();
-      };
-      return TitleBar;
-  }(JSXWidget));
-  TitleBar.prototype._class += " html_TitleBar";
-  TitleBar.prototype.publish("title", "", "string");
-  TitleBar.prototype.publish("buttons", [], "widgetArray");
-
-  exports.BUILD_VERSION = BUILD_VERSION;
-  exports.BreakdownTable = BreakdownTable;
-  exports.Button = Button;
-  exports.HTMLTooltip = HTMLTooltip;
-  exports.Item = Item;
-  exports.JSXWidget = JSXWidget;
-  exports.PKG_NAME = PKG_NAME;
-  exports.PKG_VERSION = PKG_VERSION;
-  exports.ReactD3 = ReactD3;
-  exports.SimpleTable = SimpleTable;
-  exports.Spacer = Spacer;
-  exports.StatsTable = StatsTable;
-  exports.StyledTable = StyledTable;
-  exports.TitleBar = TitleBar;
-  exports.ToggleButton = ToggleButton;
-  exports.VNode = VNode;
-  exports.VizComponent = VizComponent;
-  exports.VizInstance = VizInstance;
-
-}));
+.html_TitleBar .icon-bar .active {
+    background-color: #4CAF50; /* Add an active/current color */
+}`,document.head.appendChild(n)}})();var x=class extends J{static{s(this,"Item")}_owner;constructor(t){super(),this._owner=t,this._tag="a"}};x.prototype._class+=" html_Item";var v=class extends x{static{s(this,"Button")}_icon;constructor(t,e){super(t),this._icon=e}icon(){return this._icon}enter(t,e){super.enter(t,e),e.attr("href","#").on("click",(o,i,r)=>this._owner.titleBarClick(this,o,i,r)).append("i").attr("class",`fa ${this._icon} fa-lg fa-fw`)}};v.prototype._class+=" html_Button";var S=class extends v{static{s(this,"ToggleButton")}enter(t,e){e.on("click.sel",(o,i,r)=>{this.selected(!this.selected()),this.render()}),super.enter(t,e)}update(t,e){super.update(t,e),this._element.classed("selected",this.selected())}};S.prototype._class+=" html_ToggleButton";S.prototype.publish("selected",!1,"boolean");var H=class extends x{static{s(this,"Spacer")}enter(t,e){super.enter(t,e),e.attr("class","spacer").attr("href","#").append("i")}};H.prototype._class+=" html_Spacer";var C=class extends y{static{s(this,"TitleBar")}_divMain;_divIconBar;_divTitle;constructor(){super()}enter(t,e){super.enter(t,e),this._divMain=e.append("div").attr("class","main"),this._divIconBar=this._divMain.append("div").attr("class","icon-bar"),this._divTitle=this._divMain.append("div").attr("class","title")}update(t,e){super.update(t,e),this._divTitle.text(this.title());let o=this._divIconBar.selectAll(".icon-bar-item").data(this.buttons());o.enter().append("div").attr("class","icon-bar-item").each(function(i){i.target(this)}).merge(o).each(function(i){i.render()}),o.exit().each(function(i){i.target(null)}).remove(),o.order()}};C.prototype._class+=" html_TitleBar";C.prototype.publish("title","","string");C.prototype.publish("buttons",[],"widgetArray");export{Q as BUILD_VERSION,a as BreakdownTable,v as Button,c as HTMLTooltip,x as Item,y as JSXWidget,K as PKG_NAME,q as PKG_VERSION,T as ReactD3,w as SimpleTable,H as Spacer,m as StatsTable,g as StyledTable,C as TitleBar,S as ToggleButton,_ as VNode,F as VizComponent,L as VizInstance};
 //# sourceMappingURL=index.js.map

package.json

 {
     "name": "@hpcc-js/html",
-    "version": "2.44.0",
+    "version": "3.1.0",
     "description": "hpcc-js - Viz HTML",
-    "main": "dist/index.js",
-    "module": "dist/index.es6",
-    "unpkg": "dist/index.min.js",
-    "jsdelivr": "dist/index.min.js",
-    "types": "types/index.d.ts",
-    "typesVersions": {
-        "<3.8": {
-            "*": [
-                "types-3.4/index.d.ts"
-            ]
-        }
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./types/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./dist/*": "./dist/*"
     },
+    "module": "./dist/index.js",
+    "browser": "./dist/index.js",
+    "types": "./types/index.d.ts",
     "files": [
         "dist/*",
-        "types/*",
-        "types-3.4/*",
-        "src/*"
+        "src/*",
+        "types/*"
     ],
     "scripts": {
-        "clean": "rimraf --glob lib* types dist *.tsbuildinfo",
-        "compile-es6": "tsc --module es6 --outDir ./lib-es6",
-        "compile-es6-watch": "npm run compile-es6 -- -w",
-        "compile-umd": "tsc --module umd --outDir ./lib-umd",
-        "compile-umd-watch": "npm run compile-umd -- -w",
-        "bundle": "rollup -c",
-        "bundle-watch": "npm run bundle -- -w",
-        "minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js",
-        "gen-legacy-types": "downlevel-dts ./types ./types-3.4",
-        "build": "npm run compile-es6 && npm run bundle",
-        "watch": "npm-run-all compile-es6 -p compile-es6-watch bundle-watch",
-        "stamp": "node ../../node_modules/@hpcc-js/bundle/src/stamp.js",
+        "clean": "rimraf --glob lib* types dist *.tsbuildinfo .turbo",
+        "bundle": "node esbuild.js",
+        "bundle-watch": "npm run bundle -- --development --watch",
+        "gen-types": "tsc --project tsconfig.json",
+        "gen-types-watch": "npm run gen-types -- --watch",
+        "build": "run-p gen-types bundle",
         "lint": "eslint ./src",
+        "lint-fix": "eslint --fix src/**/*.ts",
         "docs": "typedoc --options tdoptions.json .",
-        "update": "npx --yes npm-check-updates -u -t minor"
+        "test-browser": "vitest run --project browser",
+        "test": "vitest run",
+        "coverage": "vitest run --coverage",
+        "update": "npx --yes npm-check-updates -u -t minor",
+        "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/common": "^2.73.0",
-        "@hpcc-js/preact-shim": "^2.18.0",
-        "@hpcc-js/util": "^2.53.0"
+        "@hpcc-js/common": "^3.2.0",
+        "@hpcc-js/util": "^3.2.0"
     },
     "devDependencies": {
-        "@hpcc-js/bundle": "^2.12.0",
+        "@hpcc-js/esbuild-plugins": "^1.3.0",
         "d3-format": "^1",
         "d3-selection": "^1",
-        "tslib": "2.7.0"
+        "react": "18.3.1",
+        "react-dom": "18.3.1"
     },
+    "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+    },
     "repository": {
@@ -62,3 +63,3 @@ "type": "git",
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "fbbef050700b0e9d76ef99714856383d95155149"
+    "gitHead": "658c50fd965a7744ba8db675ba6878607c44d5e2"
 }

src/__package__.ts

 export const PKG_NAME = "@hpcc-js/html";
-export const PKG_VERSION = "2.44.0";
-export const BUILD_VERSION = "2.107.0";
+export const PKG_VERSION = "3.1.0";
+export const BUILD_VERSION = "3.2.0";

src/BreakdownTable.ts

@@ -1,8 +0,8 @@
-import { HTMLTooltip } from "./HTMLTooltip";
-import { StyledTable } from "./StyledTable";
+import { HTMLTooltip } from "./HTMLTooltip.ts";
+import { StyledTable } from "./StyledTable.ts";
 
 export class BreakdownTable extends StyledTable {
-    protected _table;
-    protected _tbody;
-    protected _tooltip;
+    // protected _table;
+    // protected _tbody;
+    protected _tooltip: HTMLTooltip;
     constructor() {
@@ -9,0 +9,0 @@ super();

src/HTMLTooltip.ts

@@ -1,4 +0,3 @@
-import { HTMLWidget } from "@hpcc-js/common";
+import { HTMLWidget, select as d3Select } from "@hpcc-js/common";
 import { scopedLogger, ScopedLogging } from "@hpcc-js/util";
-import { select as d3Select } from "d3-selection";
 
@@ -59,15 +58,15 @@ type Direction = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
 
-        if(this._contentNode !== this._prevContentNode){
+        if (this._contentNode !== this._prevContentNode) {
             const node = this._tooltipElement.node();
             [...node.querySelectorAll("*")]
-            .map(n=>n.__data__)
-            .filter(n=>n)
-            .forEach(w=>{
-                if(typeof w.target === "function"){
-                    w.target(null);
-                }
-                if(typeof w.exit === "function"){
-                    w.exit();
-                }
-            });
+                .map(n => n.__data__)
+                .filter(n => n)
+                .forEach(w => {
+                    if (typeof w.target === "function") {
+                        w.target(null);
+                    }
+                    if (typeof w.exit === "function") {
+                        w.exit();
+                    }
+                });
             node.innerHTML = "";
@@ -86,3 +85,3 @@ node.appendChild(this._contentNode);
         }
-        if(this.fitContent()){
+        if (this.fitContent()) {
             this._tooltipElement
@@ -117,3 +116,3 @@ .style("width", "auto")
     onShowContent(node) {
-        
+
     }
@@ -265,4 +264,4 @@
 
-        if(this.followCursor() && this._cursorLoc) {
-            
+        if (this.followCursor() && this._cursorLoc) {
+
             left = this._cursorLoc[0];
@@ -319,4 +318,4 @@ top = this._cursorLoc[1];
         });
-        setTimeout(()=>{
-            if(this._closing){
+        setTimeout(() => {
+            if (this._closing) {
                 this.visible(false);
@@ -376,3 +375,3 @@ }
     fitContent(_: boolean): this;
-    
+
 }
@@ -379,0 +378,0 @@

src/index.ts

@@ -1,11 +0,11 @@
-export * from "./__package__";
-export * from "./BreakdownTable";
-export * from "./HTMLTooltip";
-export * from "./JSXWidget";
-export * from "./reactD3";
-export * from "./VizComponent";
-export * from "./VizInstance";
-export * from "./SimpleTable";
-export * from "./StatsTable";
-export * from "./StyledTable";
-export * from "./TitleBar";
+export * from "./__package__.ts";
+export * from "./BreakdownTable.ts";
+export * from "./HTMLTooltip.ts";
+export * from "./JSXWidget.ts";
+export * from "./reactD3.ts";
+export * from "./VizComponent.tsx";
+export * from "./VizInstance.tsx";
+export * from "./SimpleTable.ts";
+export * from "./StatsTable.ts";
+export * from "./StyledTable.ts";
+export * from "./TitleBar.ts";

src/JSXWidget.ts

@@ -0,7 +1,8 @@
+import React from "react";
+import { render } from "react-dom";
 import { HTMLWidget } from "@hpcc-js/common";
-import { Component, createElement, render } from "@hpcc-js/preact-shim";
 
 export class JSXWidget extends HTMLWidget {
-    static Component = Component;
-    static createElement = createElement;
+    static Component = React.Component;
+    static createElement = React.createElement;
     protected rootNode;
@@ -8,0 +9,0 @@

src/reactD3.ts

@@ -1,2 +0,2 @@
-import { select as d3Select } from "d3-selection";
+import { select as d3Select } from "@hpcc-js/common";
 
@@ -45,3 +45,3 @@ export type ReactFn = (attrs: { [key: string]: string }) => VNode;
             .merge(thisElement)
-            .each(function (d: VNode) {
+            .each(function (this: HTMLElement, d: VNode) {
                 const element = d3Select(this);
@@ -61,3 +61,3 @@ d.update(element);
             .merge(thisElement)
-            .each(function (d: VNode) {
+            .each(function (this: HTMLElement, d: VNode) {
                 const element = d3Select(this);
@@ -64,0 +64,0 @@ d.update(element);

src/SimpleTable.ts

@@ -1,3 +0,2 @@
-import { HTMLWidget } from "@hpcc-js/common";
-import { select as d3Select } from "d3-selection";
+import { HTMLWidget, select as d3Select } from "@hpcc-js/common";
 
@@ -4,0 +3,0 @@ export class SimpleTable extends HTMLWidget {

src/StatsTable.ts

 import { format as d3Format } from "d3-format";
-import { StyledTable } from "./StyledTable";
+import { StyledTable } from "./StyledTable.ts";
 
@@ -102,3 +102,3 @@ export class StatsTable extends StyledTable {
 StatsTable.prototype.publish("thirdColumnWidth", "1%", "string", "CSS style applied as the 'width' for the third column (ex: 40px)");
-StatsTable.prototype.publish("secondColumnFormat", "$,.0f", "string", "d3-format specifier applied to the second column's values", undefined, {optional: true});
-StatsTable.prototype.publish("thirdColumnFormat", null, "string", "d3-format specifier applied to the third column's values", undefined, {optional: true});
+StatsTable.prototype.publish("secondColumnFormat", "$,.0f", "string", "d3-format specifier applied to the second column's values", undefined, { optional: true });
+StatsTable.prototype.publish("thirdColumnFormat", null, "string", "d3-format specifier applied to the third column's values", undefined, { optional: true });

src/StyledTable.ts

@@ -1,2 +0,2 @@
-import { SimpleTable } from "./SimpleTable";
+import { SimpleTable } from "./SimpleTable.ts";
 
@@ -33,7 +33,7 @@ export class StyledTable extends SimpleTable {
         if (evenRowStylesExist) {
-            const tbodyEvenRows = tbodyRows.select(function (d, i) { return i % 2 ? this : null; });
+            const tbodyEvenRows = tbodyRows.select(function (this: HTMLElement, d, i) { return i % 2 ? this : null; });
             this.applyStyleObject(tbodyEvenRows, this.evenRowStyles());
         }
         if (lastRowStylesExist) {
-            const tbodyLastRow = tbodyRows.select(function (d, i, arr) { return i === arr.length - 1 ? this : null; });
+            const tbodyLastRow = tbodyRows.select(function (this: HTMLElement, d, i, arr) { return i === arr.length - 1 ? this : null; });
             this.applyStyleObject(tbodyLastRow, this.lastRowStyles());
@@ -50,14 +50,14 @@ }
     fontColor(_: string): this;
-    tbodyColumnStyles(): Array<{[styleID: string]: any}>;
-    tbodyColumnStyles(_: Array<{[styleID: string]: any}>): this;
-    tbodyColumnStyles_default(_: Array<{[styleID: string]: any}>): this;
-    theadColumnStyles(): Array<{[styleID: string]: any}>;
-    theadColumnStyles(_: Array<{[styleID: string]: any}>): this;
-    theadColumnStyles_default(_: Array<{[styleID: string]: any}>): this;
-    lastRowStyles(): {[styleID: string]: any};
-    lastRowStyles(_: {[styleID: string]: any}): this;
-    lastRowStyles_default(_: {[styleID: string]: any}): this;
-    evenRowStyles(): {[styleID: string]: any};
-    evenRowStyles(_: {[styleID: string]: any}): this;
-    evenRowStyles_default(_: {[styleID: string]: any}): this;
+    tbodyColumnStyles(): Array<{ [styleID: string]: any }>;
+    tbodyColumnStyles(_: Array<{ [styleID: string]: any }>): this;
+    tbodyColumnStyles_default(_: Array<{ [styleID: string]: any }>): this;
+    theadColumnStyles(): Array<{ [styleID: string]: any }>;
+    theadColumnStyles(_: Array<{ [styleID: string]: any }>): this;
+    theadColumnStyles_default(_: Array<{ [styleID: string]: any }>): this;
+    lastRowStyles(): { [styleID: string]: any };
+    lastRowStyles(_: { [styleID: string]: any }): this;
+    lastRowStyles_default(_: { [styleID: string]: any }): this;
+    evenRowStyles(): { [styleID: string]: any };
+    evenRowStyles(_: { [styleID: string]: any }): this;
+    evenRowStyles_default(_: { [styleID: string]: any }): this;
 }
@@ -64,0 +64,0 @@

src/TitleBar.ts

 import { HTMLWidget } from "@hpcc-js/common";
-import { JSXWidget } from "./JSXWidget";
+import { JSXWidget } from "./JSXWidget.ts";
 
@@ -12,3 +12,2 @@ import "../src/TitleBar.css";
     protected _owner: IClickHandler;
-    protected _element;
 
@@ -21,2 +20,3 @@ constructor(owner: IClickHandler) {
 }
+Item.prototype._class += " html_Item";
 
@@ -45,2 +45,3 @@ export class Button extends Item {
 }
+Button.prototype._class += " html_Button";
 
@@ -62,2 +63,3 @@ export class ToggleButton extends Button {
 }
+ToggleButton.prototype._class += " html_ToggleButton";
 export interface ToggleButton {
@@ -80,2 +82,3 @@ selected(): boolean;
 }
+Spacer.prototype._class += " html_Spacer";
 
@@ -82,0 +85,0 @@ export class TitleBar extends JSXWidget {

types/__package__.d.ts

 export declare const PKG_NAME = "@hpcc-js/html";
-export declare const PKG_VERSION = "2.44.0";
-export declare const BUILD_VERSION = "2.107.0";
-//# sourceMappingURL=__package__.d.ts.map
+export declare const PKG_VERSION = "3.1.0";
+export declare const BUILD_VERSION = "3.2.0";

types/BreakdownTable.d.ts

@@ -1,6 +0,5 @@
-import { StyledTable } from "./StyledTable";
+import { HTMLTooltip } from "./HTMLTooltip.ts";
+import { StyledTable } from "./StyledTable.ts";
 export declare class BreakdownTable extends StyledTable {
-    protected _table: any;
-    protected _tbody: any;
-    protected _tooltip: any;
+    protected _tooltip: HTMLTooltip;
     constructor();
@@ -49,2 +48,1 @@ protected transformData(): any[];
 }
-//# sourceMappingURL=BreakdownTable.d.ts.map

types/HTMLTooltip.d.ts

@@ -107,2 +107,1 @@ import { HTMLWidget } from "@hpcc-js/common";
 export {};
-//# sourceMappingURL=HTMLTooltip.d.ts.map

types/index.d.ts

@@ -1,12 +0,11 @@
-export * from "./__package__";
-export * from "./BreakdownTable";
-export * from "./HTMLTooltip";
-export * from "./JSXWidget";
-export * from "./reactD3";
-export * from "./VizComponent";
-export * from "./VizInstance";
-export * from "./SimpleTable";
-export * from "./StatsTable";
-export * from "./StyledTable";
-export * from "./TitleBar";
-//# sourceMappingURL=index.d.ts.map
+export * from "./__package__.ts";
+export * from "./BreakdownTable.ts";
+export * from "./HTMLTooltip.ts";
+export * from "./JSXWidget.ts";
+export * from "./reactD3.ts";
+export * from "./VizComponent.tsx";
+export * from "./VizInstance.tsx";
+export * from "./SimpleTable.ts";
+export * from "./StatsTable.ts";
+export * from "./StyledTable.ts";
+export * from "./TitleBar.ts";

types/JSXWidget.d.ts

@@ -0,9 +1,8 @@
+import React from "react";
 import { HTMLWidget } from "@hpcc-js/common";
-import { Component, createElement } from "@hpcc-js/preact-shim";
 export declare class JSXWidget extends HTMLWidget {
-    static Component: typeof Component;
-    static createElement: typeof createElement;
+    static Component: typeof React.Component;
+    static createElement: typeof React.createElement;
     protected rootNode: any;
     jsxRender(jsx: any, domNode: any): void;
 }
-//# sourceMappingURL=JSXWidget.d.ts.map

types/reactD3.d.ts

@@ -31,2 +31,1 @@ export type ReactFn = (attrs: {
 }
-//# sourceMappingURL=reactD3.d.ts.map

types/SimpleTable.d.ts

@@ -16,2 +16,1 @@ import { HTMLWidget } from "@hpcc-js/common";
 }
-//# sourceMappingURL=SimpleTable.d.ts.map

types/StatsTable.d.ts

@@ -1,2 +0,2 @@
-import { StyledTable } from "./StyledTable";
+import { StyledTable } from "./StyledTable.ts";
 export declare class StatsTable extends StyledTable {
@@ -30,2 +30,1 @@ protected transformData(): any;
 }
-//# sourceMappingURL=StatsTable.d.ts.map

types/StyledTable.d.ts

@@ -1,2 +0,2 @@
-import { SimpleTable } from "./SimpleTable";
+import { SimpleTable } from "./SimpleTable.ts";
 export declare class StyledTable extends SimpleTable {
@@ -49,2 +49,1 @@ constructor();
 }
-//# sourceMappingURL=StyledTable.d.ts.map

types/TitleBar.d.ts

 import { HTMLWidget } from "@hpcc-js/common";
-import { JSXWidget } from "./JSXWidget";
+import { JSXWidget } from "./JSXWidget.ts";
 import "../src/TitleBar.css";
@@ -9,3 +9,2 @@ export interface IClickHandler {
     protected _owner: IClickHandler;
-    protected _element: any;
     constructor(owner: IClickHandler);
@@ -44,2 +43,1 @@ }
 }
-//# sourceMappingURL=TitleBar.d.ts.map

types/VizComponent.d.ts

@@ -1,2 +0,3 @@
-import { JSXWidget } from "./JSXWidget";
+import React from "react";
+import { JSXWidget } from "./JSXWidget.ts";
 export declare class VizComponent extends JSXWidget.Component<any, any> {
@@ -7,5 +8,4 @@ widget: any;
     componentWillUnmount(): void;
-    render(): any;
+    render(): React.JSX.Element;
     componentDidUpdate(): void;
 }
-//# sourceMappingURL=VizComponent.d.ts.map

types/VizInstance.d.ts

@@ -1,2 +0,3 @@
-import { JSXWidget } from "./JSXWidget";
+import React from "react";
+import { JSXWidget } from "./JSXWidget.ts";
 export declare class VizInstance extends JSXWidget.Component<any, any> {
@@ -7,5 +8,4 @@ widget: any;
     componentWillUnmount(): void;
-    render(): any;
+    render(): React.JSX.Element;
     componentDidUpdate(): void;
 }
-//# sourceMappingURL=VizInstance.d.ts.map

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Number of low supply chain risk alerts

0

decreased by-100%

Is type module

Yes

Worsened metrics

Total package byte prevSize

154479

decreased by-82.29%

Dependency count

4

increased by33.33%

Dev dependency count

5

increased by25%

Number of package files

29

decreased by-49.12%

Lines of code

1686

decreased by-59.39%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@hpcc-js/common@3.3.0(transitive)

• + Added@hpcc-js/util@3.3.0(transitive)

• + Added@types/d3-selection@1.4.7(transitive)

• + Added@types/d3-transition@1.3.6(transitive)

• + Added@xmldom/xmldom@0.9.5(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removed@hpcc-js/preact-shim@^2.18.0

• - Removed@hpcc-js/common@2.73.0(transitive)

• - Removed@hpcc-js/preact-shim@2.18.0(transitive)

• - Removed@hpcc-js/util@2.53.0(transitive)

• - Removed@types/d3-selection@1.4.6(transitive)

• - Removed@types/d3-transition@1.3.5(transitive)

• - Removedpreact@10.24.0(transitive)

• - Removedtslib@2.7.0(transitive)

• Updated@hpcc-js/common@^3.2.0

• Updated@hpcc-js/util@^3.2.0