@hpcc-js/timeline 3.2.0 → 3.2.1

package/dist/index.js

@@ -1,310 +1,324 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { ITooltip } from "@hpcc-js/api";
 import { Axis } from "@hpcc-js/chart";
-import { EntityPin, EntityRect, SVGWidget, SVGZoomWidget, Utility, d3Event, extent, local, max, min, scaleBand, scaleLinear, select, timeFormat, timeParse, zoom, zoomIdentity } from "@hpcc-js/common";
+import { Utility, SVGWidget, local, scaleBand, extent, timeParse, timeFormat, zoomIdentity, d3Event, zoom, select, EntityPin, EntityRect, SVGZoomWidget, scaleLinear, min, max } from "@hpcc-js/common";
 import { HTMLTooltip } from "@hpcc-js/html";
 import { LabelledRect, render } from "@hpcc-js/react";
 import { Border2 } from "@hpcc-js/layout";
-
-//#region src/__package__.ts
 const PKG_NAME = "@hpcc-js/timeline";
-const PKG_VERSION = "3.2.0";
-const BUILD_VERSION = "3.15.0";
-
-//#endregion
-//#region src/MiniGantt.ts
-var MiniGantt = class extends SVGWidget {
-	tlAxis;
-	brAxis;
-	verticalBands;
-	_zoom;
-	gUpperContent;
-	gUpperAxis;
-	gMiddleContent;
-	gLowerAxis;
-	gLowerContent;
-	localRect = local();
-	localEntityPin = local();
-	tooltipFormatter;
-	_dateCache;
-	rootExtent;
-	_title_idx = 0;
-	_startDate_idx = 1;
-	_endDate_idx = 2;
-	_icon_idx = -1;
-	_color_idx = -1;
-	_yoffset_idx = -1;
-	constructor() {
-		super();
-		ITooltip.call(this);
-		Utility.SimpleSelectionMixin.call(this);
-		this._drawStartPos = "origin";
-		this.tooltipHTML((d) => `<center>${d[this._title_idx]}</center><br>${this.tooltipFormatter(this.brAxis.parse(d[this._startDate_idx]))} -> ${this.tooltipFormatter(this.brAxis.parse(d[this._endDate_idx]))}`);
-		this.tlAxis = new Axis().type("time");
-		this.brAxis = new Axis().type("time");
-		this.verticalBands = scaleBand().paddingOuter(.2).paddingInner(.2);
-	}
-	isHorizontal() {
-		return this.orientation() === "horizontal";
-	}
-	fullExtent() {
-		return extent([...this.data().map((d) => d[this._startDate_idx]), ...this.data().filter((d) => !!d[this._endDate_idx]).map((d) => d[this._endDate_idx])]);
-	}
-	extent() {
-		const extent$1 = this.rootExtent ? [this.rootExtent[1], this.rootExtent[2]] : this.fullExtent();
-		if (extent$1[0] !== void 0 && extent$1[1] !== void 0) {
-			if (extent$1[0] === extent$1[1] || this.centerOnMostRecent()) {
-				const parser = timeParse(this.timePattern());
-				const formatter = timeFormat(this.timePattern());
-				const date1 = parser(extent$1[0]);
-				const date2 = parser(extent$1[1]);
-				if (extent$1[0] === extent$1[1]) {
-					extent$1[0] = formatter(new Date(date1.setFullYear(date1.getFullYear() - 1)));
-					extent$1[1] = formatter(new Date(date1.setFullYear(date1.getFullYear() + 2)));
-				} else {
-					const time1 = date1.getTime();
-					const timeDiff = date2.getTime() - time1;
-					extent$1[0] = formatter(date1);
-					extent$1[1] = formatter(new Date(time1 + timeDiff * 2));
-				}
-			}
-		}
-		return extent$1;
-	}
-	dataStartPos(d) {
-		if (typeof this._dateCache[d[this._startDate_idx]] !== "undefined") return this._dateCache[d[this._startDate_idx]];
-		const pos = this.brAxis.scalePos(d[this._startDate_idx]);
-		this._dateCache[d[this._startDate_idx]] = pos;
-		return pos;
-	}
-	dataEndPos(d) {
-		if (typeof this._dateCache[d[this._endDate_idx]] !== "undefined") return this._dateCache[d[this._endDate_idx]];
-		const pos = this.brAxis.scalePos(d[this._endDate_idx]);
-		this._dateCache[d[this._endDate_idx]] = pos;
-		return pos;
-	}
-	dataWidth(d) {
-		return this.dataEndPos(d) - this.dataStartPos(d);
-	}
-	transform;
-	resetZoom() {
-		this._zoom.transform(this.element(), zoomIdentity.translate(0, this.isHorizontal() ? 0 : this.height()));
-	}
-	zoomed() {
-		this.transform = d3Event().transform;
-		this.render();
-	}
-	background;
-	enter(domNode, element) {
-		super.enter(domNode, element);
-		this._zoom = zoom().scaleExtent([0, this.maxZoom()]).on("zoom", () => {
-			this.zoomed();
-		});
-		this.background = element.append("rect").attr("fill", "white").attr("opacity", 0).on("dblclick", () => {
-			d3Event().stopPropagation();
-			delete this.rootExtent;
-			this.resetZoom();
-		});
-		this.gUpperContent = element.append("g").attr("class", "gUpperContent");
-		this.gUpperAxis = element.append("g").attr("class", "gUpperAxis");
-		this.gMiddleContent = element.append("g").attr("class", "gMiddleContent");
-		this.gLowerAxis = element.append("g").attr("class", "gLowerAxis");
-		this.gLowerContent = element.append("g").attr("class", "gLowerContent");
-		this.tlAxis.target(this.gUpperAxis.node()).tickFormat(this.tickFormat()).guideTarget(this.gUpperAxis.append("g").node()).shrinkToFit("none").overlapMode(this.tickFormat_exists() ? "stagger" : "none").extend(.1);
-		this.brAxis.target(this.gLowerAxis.node()).tickFormat(this.tickFormat()).guideTarget(this.gLowerAxis.append("g").node()).shrinkToFit("none").overlapMode(this.tickFormat_exists() ? "stagger" : "none").extend(.1);
-		element.call(this._zoom);
-		this._selection.widgetElement(this.gMiddleContent);
-	}
-	_prevIsHorizontal;
-	update(domNode, element) {
-		super.update(domNode, element);
-		this._dateCache = {};
-		this._title_idx = this.titleColumn() !== null ? this.columns().indexOf(this.titleColumn()) : this._title_idx;
-		this._startDate_idx = this.startDateColumn() !== null ? this.columns().indexOf(this.startDateColumn()) : this._startDate_idx;
-		this._endDate_idx = this.endDateColumn() !== null ? this.columns().indexOf(this.endDateColumn()) : this._endDate_idx;
-		this._icon_idx = this.iconColumn() !== null ? this.columns().indexOf(this.iconColumn()) : this._icon_idx;
-		this._color_idx = this.colorColumn() !== null ? this.columns().indexOf(this.colorColumn()) : this._color_idx;
-		this._yoffset_idx = this.yOffsetColumn() !== null ? this.columns().indexOf(this.yOffsetColumn()) : this._yoffset_idx;
-		if (this._prevIsHorizontal !== this.isHorizontal()) {
-			this._prevIsHorizontal = this.isHorizontal();
-			this.resetZoom();
-			return;
-		}
-		this.tooltipFormatter = timeFormat(this.tooltipTimeFormat());
-		const width = this.width();
-		const height = this.height();
-		this.background.attr("x", 0).attr("y", 0).attr("width", width).attr("height", height);
-		const extent$1 = this.extent();
-		this.tlAxis.x(width / 2).orientation(this.isHorizontal() ? "top" : "left").reverse(!this.isHorizontal()).timePattern(this.timePattern()).width(width - 1).low(extent$1[0]).high(extent$1[1]).updateScale();
-		this.brAxis.x(width / 2).y(height / 2).orientation(this.isHorizontal() ? "bottom" : "right").reverse(!this.isHorizontal()).timePattern(this.timePattern()).width(width - 1).height(height).low(extent$1[0]).high(extent$1[1]).updateScale();
-		if (this.transform) {
-			let low;
-			let hi;
-			if (this.isHorizontal()) {
-				low = this.tlAxis.parseInvert(this.tlAxis.invert(this.transform.invertX(0)));
-				hi = this.tlAxis.parseInvert(this.tlAxis.invert(this.transform.invertX(width - 1)));
-			} else {
-				low = this.tlAxis.parseInvert(this.tlAxis.invert(-this.transform.invertY(0)));
-				hi = this.tlAxis.parseInvert(this.tlAxis.invert(-this.transform.invertY(height - 1)));
-			}
-			this.tlAxis.low(low).high(hi).updateScale();
-			this.brAxis.low(low).high(hi).updateScale();
-		}
-		const data = this.data().sort(this.isHorizontal() ? (l, r) => {
-			const retVal = this.brAxis.scalePos(l[1]) - this.brAxis.scalePos(r[1]);
-			if (retVal === 0) return ("" + l[0]).localeCompare("" + r[0]);
-			return retVal;
-		} : (l, r) => {
-			return this.brAxis.scalePos(r[1]) - this.brAxis.scalePos(l[1]);
-		});
-		const events = data.filter((d) => !d[this._endDate_idx]);
-		const ranges = data.filter((d) => !!d[this._endDate_idx]);
-		this.tlAxis.render();
-		this.brAxis.render();
-		const brAxisBBox = this.brAxis.getBBox();
-		let upperContentHeight = this.updateEntityPins(events);
-		const lowerAxisHeight = brAxisBBox.height;
-		let lowerHeight = height - upperContentHeight;
-		const minYOffset = this._yoffset_idx !== -1 ? Math.min.apply(void 0, this.data().filter((row) => !isNaN(row[this._yoffset_idx])).map((row) => row[this._yoffset_idx])) : 0;
-		if (events.length > 0 && ranges.length === 0) {
-			this.tlAxis.visible(false);
-			let y_offset = upperContentHeight / 4;
-			if (y_offset > height / 2 - lowerAxisHeight) y_offset = height / 2 - lowerAxisHeight;
-			const upperContentYOffset = height / 2 + y_offset;
-			const lowerAxisYOffset = (height / 2 - lowerAxisHeight - y_offset) * -1;
-			const halfMinYOffset = minYOffset !== 0 ? minYOffset / 2 : 0;
-			this.gUpperContent.attr("transform", `translate(0, ${upperContentYOffset - halfMinYOffset})`);
-			this.gLowerAxis.attr("transform", `translate(0, ${lowerAxisYOffset - halfMinYOffset})`);
-		} else if (events.length === 0 && ranges.length > 0) {
-			this.tlAxis.visible(true);
-			this.gUpperContent.attr("transform", `translate(0, ${upperContentHeight})`);
-			this.gUpperAxis.attr("transform", `translate(0, ${upperContentHeight})`);
-		} else {
-			upperContentHeight -= minYOffset;
-			lowerHeight += minYOffset;
-			this.tlAxis.visible(true);
-			this.gUpperContent.attr("transform", `translate(0, ${upperContentHeight})`);
-			this.gUpperAxis.attr("transform", `translate(0, ${upperContentHeight})`);
-			this.gMiddleContent.attr("transform", `translate(0, ${upperContentHeight})`);
-		}
-		this.tlAxis.render();
-		const tlAxisBBox = this.tlAxis.getBBox();
-		const bucketData = [];
-		const bucketIndex = {};
-		for (const range of ranges) {
-			for (let i = 0; i < bucketData.length; ++i) {
-				const bucket = bucketData[i];
-				if (bucket.endPos + this.overlapTolerence() <= this.dataStartPos(range)) {
-					bucketIndex[range] = i;
-					bucket.endPos = this.dataEndPos(range);
-					break;
-				}
-			}
-			if (bucketIndex[range] === void 0) {
-				bucketIndex[range] = bucketData.length;
-				bucketData.push({ endPos: this.dataEndPos(range) });
-			}
-		}
-		const vbLower = this.isHorizontal() ? 0 + tlAxisBBox.height : 0 + tlAxisBBox.width;
-		const vbHigher = this.isHorizontal() ? lowerHeight - brAxisBBox.height : width - brAxisBBox.width;
-		this.verticalBands.range([vbLower, vbHigher]).domain(bucketData.map((_d, i) => i));
-		if (ranges.length > 0) this.updateEventRanges(events, ranges, bucketIndex, lowerHeight, tlAxisBBox, brAxisBBox, width);
-	}
-	updateEntityPins(events) {
-		let event_height = 0;
-		const context = this;
-		const entityPins = this.gUpperContent.selectAll(".entity_pin").data(events, (d) => d[0] + ":" + d[1]);
-		const eventFontColor_idx = this.eventFontColorColumn() ? this.columns().indexOf(this.eventFontColorColumn()) : -1;
-		const eventBorderColor_idx = this.eventBorderColorColumn() ? this.columns().indexOf(this.eventBorderColorColumn()) : -1;
-		const eventBackgroundColor_idx = this.eventBackgroundColorColumn() ? this.columns().indexOf(this.eventBackgroundColorColumn()) : -1;
-		const title_counts = {};
-		for (const d of events) {
-			const type = typeof d[context._title_idx] !== "undefined" ? d[context._title_idx] : d[0];
-			title_counts[type] = title_counts[type] ? title_counts[type] + 1 : 1;
-		}
-		const title_types = Object.keys(title_counts);
-		const title_group_offset = context.eventGroupOffset();
-		const entityPinsEnter = entityPins.enter().append("g").attr("class", "entity_pin");
-		entityPinsEnter.append("line").attr("class", "entity_line");
-		entityPinsEnter.on("mouseover", function(d) {
-			select(this).raise();
-		}).each(function(d, i) {
-			const entityPin = new EntityPin().target(this).icon("").iconOnlyShowOnHover(context.hideIconWhenCollapsed()).titleOnlyShowOnHover(context.hideTitleWhenCollapsed()).descriptionOnlyShowOnHover(context.hideDescriptionWhenCollapsed()).annotationOnlyShowOnHover(context.hideAnnotationsWhenCollapsed()).iconDiameter(18).iconPaddingPercent(1).titleFontSize(14).descriptionColor("#333").descriptionFontSize(15).iconColor(eventFontColor_idx === -1 ? "#333" : d[eventFontColor_idx]).titleColor(eventFontColor_idx === -1 ? "#333" : d[eventFontColor_idx]).descriptionColor(eventFontColor_idx === -1 ? "#333" : d[eventFontColor_idx]).backgroundShape("pin").backgroundColorFill(eventFontColor_idx === -1 ? "#f8f8f8" : d[eventBackgroundColor_idx]).backgroundColorStroke(eventFontColor_idx === -1 ? "#ccc" : d[eventBorderColor_idx]).cornerRadius(5).arrowHeight(10).arrowWidth(16);
-			context.localEntityPin.set(this, entityPin);
-		}).merge(entityPins).each(function(d, i) {
-			const entityPin = context.localEntityPin.get(this);
-			const _title = typeof d[context._title_idx] !== "undefined" ? d[context._title_idx] : entityPin.title();
-			const x_offset = context.dataStartPos(d) - 0;
-			let y_offset = title_types.indexOf(_title) % context.eventGroupMod() * title_group_offset - 5;
-			if (typeof d[context._yoffset_idx] !== "undefined") y_offset += d[context._yoffset_idx] ? d[context._yoffset_idx] : 0;
-			if (d[context._title_idx] !== entityPin.title() && d[context._startDate_idx] !== entityPin.description()) {
-				const parsed_start_time = context.brAxis.parse(d[context._startDate_idx]);
-				const formatted_start_time = context.tooltipFormatter(parsed_start_time);
-				entityPin.x(x_offset).y(y_offset).iconOnlyShowOnHover(context.hideIconWhenCollapsed()).titleOnlyShowOnHover(context.hideTitleWhenCollapsed()).descriptionOnlyShowOnHover(context.hideDescriptionWhenCollapsed()).annotationOnlyShowOnHover(context.hideAnnotationsWhenCollapsed()).icon(typeof d[context._icon_idx] !== "undefined" ? d[context._icon_idx] : entityPin.icon()).title(_title).description(formatted_start_time).animationFrameRender();
-			} else entityPin.move({
-				x: x_offset,
-				y: y_offset
-			});
-			const calc_height = entityPin.calcHeight();
-			if (event_height < calc_height) event_height = calc_height;
-			select(this).selectAll(".entity_line").attr("x1", x_offset).attr("x2", x_offset).attr("y1", 0).attr("y2", y_offset).style("stroke", eventFontColor_idx === -1 ? "#ccc" : d[eventBorderColor_idx]).style("stroke-width", 1);
-		});
-		entityPins.exit().each(function(d, i) {
-			context.localEntityPin.get(this).target(null);
-		}).remove();
-		const event_offset = Math.abs(Math.min(events.length, context.eventGroupMod()) * context.eventGroupOffset());
-		return event_height + event_offset;
-	}
-	updateEventRanges(events, ranges, bucketIndex, eventRangeHeight, tlAxisBBox, brAxisBBox, width) {
-		const context = this;
-		const lines = this.gMiddleContent.selectAll(".line").data(events, (d) => {
-			return d[context._title_idx];
-		});
-		lines.enter().append("line").attr("class", "line").merge(lines).attr(this.isHorizontal() ? "x1" : "y1", (d) => this.dataStartPos(d) - 0).attr(this.isHorizontal() ? "x2" : "y2", (d) => this.dataStartPos(d) - 0).attr(this.isHorizontal() ? "y1" : "x1", this.isHorizontal() ? tlAxisBBox.height : tlAxisBBox.width).attr(this.isHorizontal() ? "y2" : "x2", this.isHorizontal() ? eventRangeHeight - brAxisBBox.height : width - brAxisBBox.width);
-		lines.exit().remove();
-		const buckets = this.gMiddleContent.selectAll(".buckets").data(ranges, (d) => d[context._title_idx]);
-		buckets.enter().append("g").attr("class", "buckets").call(this._selection.enter.bind(this._selection)).each(function(d) {
-			const entityRect = new EntityRect().target(this).iconDiameter(28).iconPaddingPercent(0).titleFontSize(28).titleColor(context.rangeFontColor()).descriptionColor(context.rangeFontColor()).iconColor(context.rangeFontColor()).backgroundShape("rect").backgroundColorFill(d[context._color_idx]);
-			context.localRect.set(this, entityRect);
-			context.enterEntityRect(entityRect, d);
-		}).on("click", function(d) {
-			context.click(context.rowToObj(d), "range", context._selection.selected(this));
-		}, false).on("dblclick", function(d) {
-			context.rootExtent = d;
-			context.resetZoom();
-			context.dblclick(context.rowToObj(d), "range", context._selection.selected(this));
-		}, true).on("mouseout.tooltip", this.tooltip.hide).on("mousemove.tooltip", this.tooltip.show).merge(buckets).attr("transform", (d) => context.isHorizontal() ? `translate(${this.dataStartPos(d)}, ${this.verticalBands(bucketIndex[d])}) ` : `translate(${this.verticalBands(bucketIndex[d])}, ${this.dataStartPos(d)}) `).each(function(d) {
-			const textBox = context.localRect.get(this);
-			const x = context.dataWidth(d) / 2;
-			const y = context.verticalBands.bandwidth() / 2;
-			const rectWidth = Math.max(context.dataWidth(d), 2);
-			const rectHeight = Math.max(context.verticalBands.bandwidth(), 2);
-			const fontHeightRatio = .618;
-			const paddingSize = (1 - fontHeightRatio) / 2 * rectHeight;
-			const fontSize = rectHeight * fontHeightRatio;
-			const iconSize = fontSize;
-			textBox.pos(context.isHorizontal() ? {
-				x,
-				y
-			} : {
-				x: y,
-				y: x
-			}).fixedHeight(context.isHorizontal() ? rectHeight : rectWidth).fixedWidth(context.isHorizontal() ? rectWidth : rectHeight).icon(typeof d[context._icon_idx] !== "undefined" ? d[context._icon_idx] : "").title(typeof d[context._title_idx] !== "undefined" ? d[context._title_idx] : "").padding(paddingSize).iconDiameter(iconSize).titleFontSize(fontSize);
-			if (iconSize * 1.5 > rectWidth) textBox.icon(null);
-			context.updateEntityRect(textBox, d[context._icon_idx]);
-			textBox.render();
-		});
-		buckets.exit().remove();
-	}
-	exit(domNode, element) {
-		this.brAxis.target(null);
-		this.tlAxis.target(null);
-		super.exit(domNode, element);
-	}
-	click(row, col, sel) {}
-	dblclick(row, col, sel) {}
-	enterEntityRect(textbox, d) {}
-	updateEntityRect(textbox, d) {}
+const PKG_VERSION = "3.2.1";
+const BUILD_VERSION = "3.15.1";
+const _MiniGantt = class _MiniGantt extends SVGWidget {
+  tlAxis;
+  brAxis;
+  verticalBands;
+  _zoom;
+  gUpperContent;
+  gUpperAxis;
+  gMiddleContent;
+  gLowerAxis;
+  gLowerContent;
+  localRect = local();
+  localEntityPin = local();
+  tooltipFormatter;
+  _dateCache;
+  rootExtent;
+  _title_idx = 0;
+  _startDate_idx = 1;
+  _endDate_idx = 2;
+  _icon_idx = -1;
+  _color_idx = -1;
+  _yoffset_idx = -1;
+  constructor() {
+    super();
+    ITooltip.call(this);
+    Utility.SimpleSelectionMixin.call(this);
+    this._drawStartPos = "origin";
+    this.tooltipHTML((d) => `<center>${d[this._title_idx]}</center><br>${this.tooltipFormatter(this.brAxis.parse(d[this._startDate_idx]))} -> ${this.tooltipFormatter(this.brAxis.parse(d[this._endDate_idx]))}`);
+    this.tlAxis = new Axis().type("time");
+    this.brAxis = new Axis().type("time");
+    this.verticalBands = scaleBand().paddingOuter(0.2).paddingInner(0.2);
+  }
+  isHorizontal() {
+    return this.orientation() === "horizontal";
+  }
+  fullExtent() {
+    const data = [...this.data().map((d) => d[this._startDate_idx]), ...this.data().filter((d) => !!d[this._endDate_idx]).map((d) => d[this._endDate_idx])];
+    return extent(data);
+  }
+  extent() {
+    const extent2 = this.rootExtent ? [this.rootExtent[1], this.rootExtent[2]] : this.fullExtent();
+    if (extent2[0] !== void 0 && extent2[1] !== void 0) {
+      if (extent2[0] === extent2[1] || this.centerOnMostRecent()) {
+        const parser = timeParse(this.timePattern());
+        const formatter = timeFormat(this.timePattern());
+        const date1 = parser(extent2[0]);
+        const date2 = parser(extent2[1]);
+        if (extent2[0] === extent2[1]) {
+          extent2[0] = formatter(new Date(date1.setFullYear(date1.getFullYear() - 1)));
+          extent2[1] = formatter(new Date(date1.setFullYear(date1.getFullYear() + 2)));
+        } else {
+          const time1 = date1.getTime();
+          const timeDiff = date2.getTime() - time1;
+          extent2[0] = formatter(date1);
+          extent2[1] = formatter(new Date(time1 + timeDiff * 2));
+        }
+      }
+    }
+    return extent2;
+  }
+  dataStartPos(d) {
+    if (typeof this._dateCache[d[this._startDate_idx]] !== "undefined") {
+      return this._dateCache[d[this._startDate_idx]];
+    }
+    const pos = this.brAxis.scalePos(d[this._startDate_idx]);
+    this._dateCache[d[this._startDate_idx]] = pos;
+    return pos;
+  }
+  dataEndPos(d) {
+    if (typeof this._dateCache[d[this._endDate_idx]] !== "undefined") {
+      return this._dateCache[d[this._endDate_idx]];
+    }
+    const pos = this.brAxis.scalePos(d[this._endDate_idx]);
+    this._dateCache[d[this._endDate_idx]] = pos;
+    return pos;
+  }
+  dataWidth(d) {
+    return this.dataEndPos(d) - this.dataStartPos(d);
+  }
+  transform;
+  resetZoom() {
+    this._zoom.transform(this.element(), zoomIdentity.translate(0, this.isHorizontal() ? 0 : this.height()));
+  }
+  zoomed() {
+    this.transform = d3Event().transform;
+    this.render();
+  }
+  background;
+  enter(domNode, element) {
+    super.enter(domNode, element);
+    this._zoom = zoom().scaleExtent([0, this.maxZoom()]).on("zoom", () => {
+      this.zoomed();
+    });
+    this.background = element.append("rect").attr("fill", "white").attr("opacity", 0).on("dblclick", () => {
+      d3Event().stopPropagation();
+      delete this.rootExtent;
+      this.resetZoom();
+    });
+    this.gUpperContent = element.append("g").attr("class", "gUpperContent");
+    this.gUpperAxis = element.append("g").attr("class", "gUpperAxis");
+    this.gMiddleContent = element.append("g").attr("class", "gMiddleContent");
+    this.gLowerAxis = element.append("g").attr("class", "gLowerAxis");
+    this.gLowerContent = element.append("g").attr("class", "gLowerContent");
+    this.tlAxis.target(this.gUpperAxis.node()).tickFormat(this.tickFormat()).guideTarget(this.gUpperAxis.append("g").node()).shrinkToFit("none").overlapMode(this.tickFormat_exists() ? "stagger" : "none").extend(0.1);
+    this.brAxis.target(this.gLowerAxis.node()).tickFormat(this.tickFormat()).guideTarget(this.gLowerAxis.append("g").node()).shrinkToFit("none").overlapMode(this.tickFormat_exists() ? "stagger" : "none").extend(0.1);
+    element.call(this._zoom);
+    this._selection.widgetElement(this.gMiddleContent);
+  }
+  _prevIsHorizontal;
+  update(domNode, element) {
+    super.update(domNode, element);
+    this._dateCache = {};
+    this._title_idx = this.titleColumn() !== null ? this.columns().indexOf(this.titleColumn()) : this._title_idx;
+    this._startDate_idx = this.startDateColumn() !== null ? this.columns().indexOf(this.startDateColumn()) : this._startDate_idx;
+    this._endDate_idx = this.endDateColumn() !== null ? this.columns().indexOf(this.endDateColumn()) : this._endDate_idx;
+    this._icon_idx = this.iconColumn() !== null ? this.columns().indexOf(this.iconColumn()) : this._icon_idx;
+    this._color_idx = this.colorColumn() !== null ? this.columns().indexOf(this.colorColumn()) : this._color_idx;
+    this._yoffset_idx = this.yOffsetColumn() !== null ? this.columns().indexOf(this.yOffsetColumn()) : this._yoffset_idx;
+    if (this._prevIsHorizontal !== this.isHorizontal()) {
+      this._prevIsHorizontal = this.isHorizontal();
+      this.resetZoom();
+      return;
+    }
+    this.tooltipFormatter = timeFormat(this.tooltipTimeFormat());
+    const width = this.width();
+    const height = this.height();
+    this.background.attr("x", 0).attr("y", 0).attr("width", width).attr("height", height);
+    const extent2 = this.extent();
+    this.tlAxis.x(width / 2).orientation(this.isHorizontal() ? "top" : "left").reverse(!this.isHorizontal()).timePattern(this.timePattern()).width(width - 1).low(extent2[0]).high(extent2[1]).updateScale();
+    this.brAxis.x(width / 2).y(height / 2).orientation(this.isHorizontal() ? "bottom" : "right").reverse(!this.isHorizontal()).timePattern(this.timePattern()).width(width - 1).height(height).low(extent2[0]).high(extent2[1]).updateScale();
+    if (this.transform) {
+      let low;
+      let hi;
+      if (this.isHorizontal()) {
+        low = this.tlAxis.parseInvert(this.tlAxis.invert(this.transform.invertX(0)));
+        hi = this.tlAxis.parseInvert(this.tlAxis.invert(this.transform.invertX(width - 1)));
+      } else {
+        low = this.tlAxis.parseInvert(this.tlAxis.invert(-this.transform.invertY(0)));
+        hi = this.tlAxis.parseInvert(this.tlAxis.invert(-this.transform.invertY(height - 1)));
+      }
+      this.tlAxis.low(low).high(hi).updateScale();
+      this.brAxis.low(low).high(hi).updateScale();
+    }
+    const data = this.data().sort(this.isHorizontal() ? (l, r) => {
+      const retVal = this.brAxis.scalePos(l[1]) - this.brAxis.scalePos(r[1]);
+      if (retVal === 0) {
+        return ("" + l[0]).localeCompare("" + r[0]);
+      }
+      return retVal;
+    } : (l, r) => {
+      return this.brAxis.scalePos(r[1]) - this.brAxis.scalePos(l[1]);
+    });
+    const events = data.filter((d) => !d[this._endDate_idx]);
+    const ranges = data.filter((d) => !!d[this._endDate_idx]);
+    this.tlAxis.render();
+    this.brAxis.render();
+    const brAxisBBox = this.brAxis.getBBox();
+    let upperContentHeight = this.updateEntityPins(events);
+    const lowerAxisHeight = brAxisBBox.height;
+    let lowerHeight = height - upperContentHeight;
+    const minYOffset = this._yoffset_idx !== -1 ? Math.min.apply(void 0, this.data().filter((row) => !isNaN(row[this._yoffset_idx])).map((row) => row[this._yoffset_idx])) : 0;
+    if (events.length > 0 && ranges.length === 0) {
+      this.tlAxis.visible(false);
+      let y_offset = upperContentHeight / 4;
+      if (y_offset > height / 2 - lowerAxisHeight) {
+        y_offset = height / 2 - lowerAxisHeight;
+      }
+      const upperContentYOffset = height / 2 + y_offset;
+      const lowerAxisYOffset = (height / 2 - lowerAxisHeight - y_offset) * -1;
+      const halfMinYOffset = minYOffset !== 0 ? minYOffset / 2 : 0;
+      this.gUpperContent.attr("transform", `translate(0, ${upperContentYOffset - halfMinYOffset})`);
+      this.gLowerAxis.attr("transform", `translate(0, ${lowerAxisYOffset - halfMinYOffset})`);
+    } else if (events.length === 0 && ranges.length > 0) {
+      this.tlAxis.visible(true);
+      this.gUpperContent.attr("transform", `translate(0, ${upperContentHeight})`);
+      this.gUpperAxis.attr("transform", `translate(0, ${upperContentHeight})`);
+    } else {
+      upperContentHeight -= minYOffset;
+      lowerHeight += minYOffset;
+      this.tlAxis.visible(true);
+      this.gUpperContent.attr("transform", `translate(0, ${upperContentHeight})`);
+      this.gUpperAxis.attr("transform", `translate(0, ${upperContentHeight})`);
+      this.gMiddleContent.attr("transform", `translate(0, ${upperContentHeight})`);
+    }
+    this.tlAxis.render();
+    const tlAxisBBox = this.tlAxis.getBBox();
+    const bucketData = [];
+    const bucketIndex = {};
+    for (const range of ranges) {
+      for (let i = 0; i < bucketData.length; ++i) {
+        const bucket = bucketData[i];
+        if (bucket.endPos + this.overlapTolerence() <= this.dataStartPos(range)) {
+          bucketIndex[range] = i;
+          bucket.endPos = this.dataEndPos(range);
+          break;
+        }
+      }
+      if (bucketIndex[range] === void 0) {
+        bucketIndex[range] = bucketData.length;
+        bucketData.push({
+          endPos: this.dataEndPos(range)
+        });
+      }
+    }
+    const vbLower = this.isHorizontal() ? 0 + tlAxisBBox.height : 0 + tlAxisBBox.width;
+    const vbHigher = this.isHorizontal() ? lowerHeight - brAxisBBox.height : width - brAxisBBox.width;
+    this.verticalBands.range([vbLower, vbHigher]).domain(bucketData.map((_d, i) => i));
+    if (ranges.length > 0) {
+      this.updateEventRanges(events, ranges, bucketIndex, lowerHeight, tlAxisBBox, brAxisBBox, width);
+    }
+  }
+  updateEntityPins(events) {
+    let event_height = 0;
+    const context = this;
+    const entityPins = this.gUpperContent.selectAll(".entity_pin").data(events, (d) => d[0] + ":" + d[1]);
+    const eventFontColor_idx = this.eventFontColorColumn() ? this.columns().indexOf(this.eventFontColorColumn()) : -1;
+    const eventBorderColor_idx = this.eventBorderColorColumn() ? this.columns().indexOf(this.eventBorderColorColumn()) : -1;
+    const eventBackgroundColor_idx = this.eventBackgroundColorColumn() ? this.columns().indexOf(this.eventBackgroundColorColumn()) : -1;
+    const title_counts = {};
+    for (const d of events) {
+      const type = typeof d[context._title_idx] !== "undefined" ? d[context._title_idx] : d[0];
+      title_counts[type] = title_counts[type] ? title_counts[type] + 1 : 1;
+    }
+    const title_types = Object.keys(title_counts);
+    const title_group_offset = context.eventGroupOffset();
+    const entityPinsEnter = entityPins.enter().append("g").attr("class", "entity_pin");
+    entityPinsEnter.append("line").attr("class", "entity_line");
+    entityPinsEnter.on("mouseover", function(d) {
+      select(this).raise();
+    }).each(function(d, i) {
+      const entityPin = new EntityPin().target(this).icon("").iconOnlyShowOnHover(context.hideIconWhenCollapsed()).titleOnlyShowOnHover(context.hideTitleWhenCollapsed()).descriptionOnlyShowOnHover(context.hideDescriptionWhenCollapsed()).annotationOnlyShowOnHover(context.hideAnnotationsWhenCollapsed()).iconDiameter(18).iconPaddingPercent(1).titleFontSize(14).descriptionColor("#333").descriptionFontSize(15).iconColor(eventFontColor_idx === -1 ? "#333" : d[eventFontColor_idx]).titleColor(eventFontColor_idx === -1 ? "#333" : d[eventFontColor_idx]).descriptionColor(eventFontColor_idx === -1 ? "#333" : d[eventFontColor_idx]).backgroundShape("pin").backgroundColorFill(eventFontColor_idx === -1 ? "#f8f8f8" : d[eventBackgroundColor_idx]).backgroundColorStroke(eventFontColor_idx === -1 ? "#ccc" : d[eventBorderColor_idx]).cornerRadius(5).arrowHeight(10).arrowWidth(16);
+      context.localEntityPin.set(this, entityPin);
+    }).merge(entityPins).each(function(d, i) {
+      const entityPin = context.localEntityPin.get(this);
+      const _title = typeof d[context._title_idx] !== "undefined" ? d[context._title_idx] : entityPin.title();
+      const x_offset = context.dataStartPos(d) - 0;
+      let y_offset = title_types.indexOf(_title) % context.eventGroupMod() * title_group_offset - 5;
+      if (typeof d[context._yoffset_idx] !== "undefined") y_offset += d[context._yoffset_idx] ? d[context._yoffset_idx] : 0;
+      if (d[context._title_idx] !== entityPin.title() && d[context._startDate_idx] !== entityPin.description()) {
+        const parsed_start_time = context.brAxis.parse(d[context._startDate_idx]);
+        const formatted_start_time = context.tooltipFormatter(parsed_start_time);
+        entityPin.x(x_offset).y(y_offset).iconOnlyShowOnHover(context.hideIconWhenCollapsed()).titleOnlyShowOnHover(context.hideTitleWhenCollapsed()).descriptionOnlyShowOnHover(context.hideDescriptionWhenCollapsed()).annotationOnlyShowOnHover(context.hideAnnotationsWhenCollapsed()).icon(typeof d[context._icon_idx] !== "undefined" ? d[context._icon_idx] : entityPin.icon()).title(_title).description(formatted_start_time).animationFrameRender();
+      } else {
+        entityPin.move({ x: x_offset, y: y_offset });
+      }
+      const calc_height = entityPin.calcHeight();
+      if (event_height < calc_height) event_height = calc_height;
+      select(this).selectAll(".entity_line").attr("x1", x_offset).attr("x2", x_offset).attr("y1", 0).attr("y2", y_offset).style("stroke", eventFontColor_idx === -1 ? "#ccc" : d[eventBorderColor_idx]).style("stroke-width", 1);
+    });
+    entityPins.exit().each(function(d, i) {
+      const entityPin = context.localEntityPin.get(this);
+      entityPin.target(null);
+    }).remove();
+    const event_offset = Math.abs(Math.min(events.length, context.eventGroupMod()) * context.eventGroupOffset());
+    return event_height + event_offset;
+  }
+  updateEventRanges(events, ranges, bucketIndex, eventRangeHeight, tlAxisBBox, brAxisBBox, width) {
+    const context = this;
+    const lines = this.gMiddleContent.selectAll(".line").data(events, (d) => {
+      return d[context._title_idx];
+    });
+    lines.enter().append("line").attr("class", "line").merge(lines).attr(this.isHorizontal() ? "x1" : "y1", (d) => this.dataStartPos(d) - 0).attr(this.isHorizontal() ? "x2" : "y2", (d) => this.dataStartPos(d) - 0).attr(this.isHorizontal() ? "y1" : "x1", this.isHorizontal() ? tlAxisBBox.height : tlAxisBBox.width).attr(this.isHorizontal() ? "y2" : "x2", this.isHorizontal() ? eventRangeHeight - brAxisBBox.height : width - brAxisBBox.width);
+    lines.exit().remove();
+    const buckets = this.gMiddleContent.selectAll(".buckets").data(ranges, (d) => d[context._title_idx]);
+    buckets.enter().append("g").attr("class", "buckets").call(this._selection.enter.bind(this._selection)).each(function(d) {
+      const entityRect = new EntityRect().target(this).iconDiameter(28).iconPaddingPercent(0).titleFontSize(28).titleColor(context.rangeFontColor()).descriptionColor(context.rangeFontColor()).iconColor(context.rangeFontColor()).backgroundShape("rect").backgroundColorFill(d[context._color_idx]);
+      context.localRect.set(this, entityRect);
+      context.enterEntityRect(entityRect, d);
+    }).on("click", function(d) {
+      context.click(context.rowToObj(d), "range", context._selection.selected(this));
+    }, false).on("dblclick", function(d) {
+      context.rootExtent = d;
+      context.resetZoom();
+      context.dblclick(context.rowToObj(d), "range", context._selection.selected(this));
+    }, true).on("mouseout.tooltip", this.tooltip.hide).on("mousemove.tooltip", this.tooltip.show).merge(buckets).attr("transform", (d) => context.isHorizontal() ? `translate(${this.dataStartPos(d)}, ${this.verticalBands(bucketIndex[d])}) ` : `translate(${this.verticalBands(bucketIndex[d])}, ${this.dataStartPos(d)}) `).each(function(d) {
+      const textBox = context.localRect.get(this);
+      const x = context.dataWidth(d) / 2;
+      const y = context.verticalBands.bandwidth() / 2;
+      const rectWidth = Math.max(context.dataWidth(d), 2);
+      const rectHeight = Math.max(context.verticalBands.bandwidth(), 2);
+      const fontHeightRatio = 0.618;
+      const paddingRatio = (1 - fontHeightRatio) / 2;
+      const paddingSize = paddingRatio * rectHeight;
+      const fontSize = rectHeight * fontHeightRatio;
+      const iconSize = fontSize;
+      textBox.pos(context.isHorizontal() ? { x, y } : { x: y, y: x }).fixedHeight(context.isHorizontal() ? rectHeight : rectWidth).fixedWidth(context.isHorizontal() ? rectWidth : rectHeight).icon(typeof d[context._icon_idx] !== "undefined" ? d[context._icon_idx] : "").title(typeof d[context._title_idx] !== "undefined" ? d[context._title_idx] : "").padding(paddingSize).iconDiameter(iconSize).titleFontSize(fontSize);
+      if (iconSize * 1.5 > rectWidth) {
+        textBox.icon(null);
+      }
+      context.updateEntityRect(textBox, d[context._icon_idx]);
+      textBox.render();
+    });
+    buckets.exit().remove();
+  }
+  exit(domNode, element) {
+    this.brAxis.target(null);
+    this.tlAxis.target(null);
+    super.exit(domNode, element);
+  }
+  //  Events  ---
+  click(row, col, sel) {
+  }
+  dblclick(row, col, sel) {
+  }
+  enterEntityRect(textbox, d) {
+  }
+  updateEntityRect(textbox, d) {
+  }
 };
+__name(_MiniGantt, "MiniGantt");
+let MiniGantt = _MiniGantt;
 MiniGantt.prototype._class += " timeline_MiniGantt";
 MiniGantt.prototype.implements(ITooltip.prototype);
 MiniGantt.prototype.mixin(Utility.SimpleSelectionMixin);
@@ -331,414 +345,497 @@ MiniGantt.prototype.publish("hideTitleWhenCollapsed", false, "boolean", "hideTit
 MiniGantt.prototype.publish("hideDescriptionWhenCollapsed", false, "boolean", "hideDescriptionWhenCollapsed");
 MiniGantt.prototype.publish("hideAnnotationsWhenCollapsed", true, "boolean", "hideAnnotationsWhenCollapsed");
 MiniGantt.prototype.publish("centerOnMostRecent", false, "boolean", "If true, the timeline will be centered on the most recent data point");
-
-//#endregion
-//#region src/ReactGantt.ts
-var ReactGantt = class extends SVGZoomWidget {
-	_selection = new Utility.Selection(this);
-	_buckets;
-	_interpolateX;
-	_interpolateY;
-	_bucketsBySeries;
-	_dataBySeries;
-	_origIdxMap;
-	_seriesBackgrounds;
-	_maxFontSize;
-	_tooltip;
-	_minStart;
-	_maxEnd;
-	_title_idx = 0;
-	_startDate_idx = 1;
-	_endDate_idx = 2;
-	_icon_idx = -1;
-	_color_idx = -1;
-	_series_idx = -1;
-	_bucket_idx = -1;
-	_yoffset_idx = -1;
-	_maxX;
-	_maxY;
-	_rangeOptions = {
-		rangePadding: 2,
-		fontFamily: "Verdana",
-		fontSize: 12,
-		fill: "white",
-		stroke: "black",
-		textFill: "black",
-		cornerRadius: 3,
-		strokeWidth: 0
-	};
-	constructor(drawStartPosition = "origin") {
-		super();
-		this._drawStartPos = drawStartPosition;
-		this.showToolbar_default(false);
-		this._tooltip = new HTMLTooltip();
-		this._tooltip.tooltipHTML((d) => {
-			return `<div style="text-align:center;">${d[0]}<br/><br/>${d[1]} -&gt; ${d[2]}</div>`;
-		});
-		this._tooltip.followCursor(true);
-	}
-	selection(_) {
-		if (!arguments.length) return this._selection.get();
-		this._selection.set(_);
-		return this;
-	}
-	_rangeRenderer = LabelledRect;
-	rangeRenderer(_) {
-		if (!arguments.length) return this._rangeRenderer;
-		this._rangeRenderer = _;
-		return this._rangeRenderer;
-	}
-	enter(domNode, element) {
-		super.enter(domNode, element);
-		const context = this;
-		element.on("click", function(d) {
-			context._selection.clear();
-		});
-		this._tooltip.target(domNode);
-	}
-	update(domNode, element) {
-		super.update(domNode, element);
-		this.zoomExtent([.05, this.maxZoom()]);
-		this._title_idx = this.titleColumn() !== null ? this.columns().indexOf(this.titleColumn()) : this._title_idx;
-		this._startDate_idx = this.startDateColumn() !== null ? this.columns().indexOf(this.startDateColumn()) : this._startDate_idx;
-		this._endDate_idx = this.endDateColumn() !== null ? this.columns().indexOf(this.endDateColumn()) : this._endDate_idx;
-		this._icon_idx = this.iconColumn() !== null ? this.columns().indexOf(this.iconColumn()) : this._icon_idx;
-		this._color_idx = this.colorColumn() !== null ? this.columns().indexOf(this.colorColumn()) : this._color_idx;
-		this._series_idx = this.seriesColumn() !== null ? this.columns().indexOf(this.seriesColumn()) : this._series_idx;
-		this._bucket_idx = this.bucketColumn() !== null ? this.columns().indexOf(this.bucketColumn()) : -1;
-		const context = this;
-		const w = this.width();
-		const x0 = 0;
-		const x1 = w;
-		this._interpolateX = scaleLinear().domain([this._minStart, this._maxEnd]).range([x0, x1]);
-		this.data().sort((a, b) => a[1] - b[1]);
-		if (this._series_idx > -1) {
-			this._origIdxMap = {};
-			this._dataBySeries = {};
-			this._bucketsBySeries = {};
-			this.data().forEach((dataRow, origIdx) => {
-				const seriesKey = dataRow[this._series_idx];
-				if (!this._dataBySeries[seriesKey]) {
-					this._origIdxMap[seriesKey] = {};
-					this._dataBySeries[seriesKey] = [];
-				}
-				this._dataBySeries[seriesKey].push({
-					dataRow,
-					origIdx
-				});
-			});
-			const gutter = this.gutter();
-			let bucketOffset = 0;
-			const seriesKeys = Object.keys(this._dataBySeries);
-			seriesKeys.forEach((seriesKey) => {
-				this._dataBySeries[seriesKey].sort((a, b) => a.dataRow[1] - b.dataRow[1]);
-				this._bucketsBySeries[seriesKey] = this.calcBuckets(this._dataBySeries[seriesKey].map((n) => n.dataRow), 1, 2);
-				this._bucketsBySeries[seriesKey].bucketHeight = this.bucketHeight();
-				this._bucketsBySeries[seriesKey].bucketOffset = bucketOffset;
-				bucketOffset += (this._bucketsBySeries[seriesKey].bucketHeight + this.strokeWidth() + this.gutter()) * (this._bucketsBySeries[seriesKey].maxBucket + 1);
-				this._dataBySeries[seriesKey].forEach((n, i) => {
-					this._origIdxMap[seriesKey][n.origIdx] = i;
-				});
-			});
-			this._seriesBackgrounds = this._renderElement.selectAll(".series-background").data(seriesKeys.map((key) => {
-				return this._bucketsBySeries[key];
-			}));
-			this._seriesBackgrounds.join((enter) => enter.append("rect").attr("class", "series-background"), (update) => update, (exit) => exit.each(function(d) {
-				delete d.element;
-			}).remove()).attr("opacity", (d) => d.props && d.props.hidden ? 0 : 1).each(function(d, i) {
-				select(this).attr("x", 0).attr("y", d.bucketOffset - gutter / 2).attr("width", w).attr("height", (d.bucketHeight + gutter) * (d.maxBucket + 1) + gutter).attr("fill", i % 2 ? context.oddSeriesBackground() : context.evenSeriesBackground());
-			});
-		} else if (this._bucket_idx !== -1) this._buckets = this.calcBuckets(this.data(), this._startDate_idx, this._endDate_idx, this._bucket_idx);
-		else this._buckets = this.calcBuckets(this.data(), this._startDate_idx, this._endDate_idx);
-		const interpedStart = this._interpolateX(this._minStart);
-		this.zoomTo([interpedStart, 0], 1);
-		const bucketHeight = this.bucketHeight();
-		this.setRangeOptions();
-		this._maxFontScale = bucketHeight - this.rangePadding() * 2;
-		this.measureDataText();
-		const itemSelection = this._renderElement.selectAll(".item").data(this.data());
-		const borderOffset1 = this.strokeWidth();
-		const borderOffset2 = borderOffset1 * 2;
-		itemSelection.join((enter) => enter.append("g").attr("class", "item").on("click.selectionBag", function(d, i) {
-			const _id = d.id === void 0 ? i : d.id;
-			if (context._selection.isSelected({
-				_id,
-				element: d.element
-			})) context._selection.clear();
-			else context._selection.click({
-				_id,
-				element: () => d.element
-			}, d3Event);
-			context.selectionChanged();
-			d3Event().stopPropagation();
-		}).on("click", function(d) {
-			const selected = d.element.classed("selected");
-			if (d[context.columns().length]) d.__lparam = d[context.columns().length];
-			context.click(d, "", selected);
-		}).on("dblclick", function(d) {
-			const selected = d.element.classed("selected");
-			if (d[context.columns().length]) d.__lparam = d[context.columns().length];
-			context.click(d, "", selected);
-		}).on("mousein", function(d) {
-			context.highlightItem(select(this), d);
-			const selected = d.element.classed("selected");
-			context.mousein(d, "", selected);
-		}).on("mouseover", function(d) {
-			const d3evt = d3Event();
-			context._tooltip._triggerElement = d.element;
-			context._tooltip._cursorLoc = [d3evt.clientX, d3evt.clientY];
-			context._tooltip.data(d).visible(true).fitContent(true).render();
-			context.highlightItem(select(this), d);
-			const selected = d.element.classed("selected");
-			context.mouseover(d, "", selected);
-		}).on("mouseout", function(d) {
-			context._tooltip.visible(false).render();
-			context.highlightItem(null, null);
-			const selected = d.element.classed("selected");
-			context.mouseout(d, "", selected);
-		}).each(function(d, i) {
-			d.that = this;
-			d.element = select(this);
-			d.x = context._interpolateX(d[1]);
-			const endX = context._interpolateX(d[2]);
-			if (context._series_idx > -1) {
-				const seriesKey = d[context._series_idx];
-				const bucket = context._bucketsBySeries[seriesKey].bucketMap[context._origIdxMap[seriesKey][i]];
-				d.y = context._bucketsBySeries[seriesKey].interpolateY(bucket) + context._bucketsBySeries[seriesKey].bucketOffset;
-			} else {
-				const _i = context._bucket_idx === -1 ? i : d[context._bucket_idx];
-				d.y = context._buckets.interpolateY(context._buckets.bucketMap[_i]);
-			}
-			d.props = {
-				...d[3],
-				text: d[0]
-			};
-			d.props.width = endX - d.x;
-			d.props.height = bucketHeight;
-			d.x += borderOffset1;
-			d.y += borderOffset1;
-			d.props.width -= borderOffset2;
-			d.props.height -= borderOffset2;
-			d.element.attr("transform", `translate(${d.x + d.props.width / 2} ${d.y + d.props.height / 2})`);
-		}), (update) => update, (exit) => exit.each(function(d) {
-			delete d.element;
-		}).remove()).attr("opacity", (d) => d.props && d.props.hidden ? 0 : 1).each(function(d, i) {
-			d.that = this;
-			if (context._series_idx > -1) {
-				const seriesKey = d[context._series_idx];
-				d.x = context.renderRangeElement(d, i, false, context._rangeOptions, seriesKey);
-			} else d.x = context.renderRangeElement(d, i, false, context._rangeOptions);
-		}).on("dblclick.zoom", (d) => {
-			const x1$1 = this._interpolateX(d[1]);
-			const xScale = w / (this._interpolateX(d[2]) - x1$1);
-			this.zoomTo([-x1$1 * xScale, 0], xScale);
-		});
-		element.on("dblclick.zoom", null);
-	}
-	exit(domNode, element) {
-		this._tooltip.target(null);
-		super.exit(domNode, element);
-	}
-	renderRangeElement(d, i, transformEach = false, options = {}, seriesKey) {
-		const borderOffset1 = options.strokeWidth;
-		const borderOffset2 = borderOffset1 * 2;
-		const padding = options.rangePadding;
-		let endX;
-		const x = isNaN(this._transform.x) ? 0 : this._transform.x;
-		const k = isNaN(this._transform.k) ? 1 : this._transform.k;
-		let b;
-		const bucketHeight = this.bucketHeight();
-		d.that.setAttribute("data-series", seriesKey);
-		if (this._color_idx > -1) d.that.setAttribute("data-color", d[this._color_idx]);
-		if (seriesKey !== void 0) {
-			b = this._bucketsBySeries[seriesKey].bucketMap[this._origIdxMap[seriesKey][i]];
-			d.that.setAttribute("data-b", b);
-			d.that.setAttribute("data-bucketOffset", this._bucketsBySeries[seriesKey].bucketOffset);
-			d.y = this._bucketsBySeries[seriesKey].interpolateY(b) + this._bucketsBySeries[seriesKey].bucketOffset;
-			d.that.setAttribute("data-dy", d.y);
-		} else {
-			b = this._buckets.bucketMap[i];
-			d.y = this._buckets.interpolateY(b);
-		}
-		if (this._color_idx > -1) options.fill = d[this._color_idx];
-		if (!transformEach) {
-			d.x = this._interpolateX(d[1]);
-			endX = this._interpolateX(d[2]);
-			d.props = {
-				...d[3],
-				text: d[0]
-			};
-			d.props.width = (endX - d.x) / k;
-		} else {
-			d.x = this._interpolateX(d[1]) * k;
-			endX = this._interpolateX(d[2]) * k;
-			d.props = {
-				...d[3],
-				text: d[0]
-			};
-			d.props.width = (endX - d.x) / k;
-			d.x += x;
-			d.props.width *= k;
-		}
-		d.props.height = bucketHeight;
-		if (seriesKey === void 0 && this._buckets.bucketScale < 1) d.props.height = this._buckets.bucketScale * bucketHeight;
-		if (d.element === void 0 && d.that) d.element = select(d.that);
-		d.element.attr("transform", `translate(${d.x + d.props.width / 2} ${d.y + d.props.height / 2})`);
-		d.x += borderOffset1;
-		d.y += borderOffset1;
-		d.props.width -= borderOffset2;
-		d.props.height -= borderOffset2;
-		d.props.width = d.props.width < 1 ? 1 : d.props.width;
-		d.props.height = d.props.height < 1 ? 1 : d.props.height;
-		let text = this.truncateText(d.props.text, d.props.width - padding, this._maxFontScale);
-		if (text !== d.props.text) text = this.truncateText(d.props.text, d.props.width - padding);
-		else d.props.fontSize = this._maxFontScale * options.fontSize;
-		if (seriesKey === void 0 && this._buckets.bucketScale < 1) d.props.fontSize = Math.min(this._maxFontScale, this._buckets.bucketScale) * options.fontSize;
-		if (!this._maxY || this._maxY < d.y + d.props.height) this._maxY = d.y + d.props.height;
-		if (!this._maxX || this._maxX < d.x + d.props.width) this._maxX = d.x + d.props.width;
-		render(this._rangeRenderer, {
-			...options,
-			...d.props,
-			text
-		}, d.that);
-	}
-	setRangeOptions() {
-		this._rangeOptions = {
-			rangePadding: this.rangePadding(),
-			fontFamily: this.fontFamily(),
-			fontSize: this.fontSize(),
-			strokeWidth: this.strokeWidth(),
-			fill: this.fill(),
-			stroke: this.stroke(),
-			textFill: this.rangeFontColor(),
-			cornerRadius: this.cornerRadius()
-		};
-	}
-	_transform = {
-		k: 1,
-		x: 0,
-		y: 0
-	};
-	zoomed(transform) {
-		this._transform = transform;
-		switch (this.renderMode()) {
-			case "scale-all":
-				this._zoomScale = transform.k;
-				this._zoomTranslate = [transform.x, 0];
-				this._zoomG.attr("transform", `translate(${transform.x} 0)scale(${transform.k} 1)`);
-				break;
-			default:
-				const options = this._rangeOptions;
-				this.data().forEach((d, i) => {
-					if (this._color_idx > -1) options.fill = d[this._color_idx];
-					if (this._series_idx > -1) {
-						const seriesKey = d[this._series_idx];
-						this.renderRangeElement(d, i, true, options, seriesKey);
-					} else this.renderRangeElement(d, i, true, options);
-				});
-		}
-		this.zoomedHook(transform);
-	}
-	zoomedHook(transform) {}
-	calcBuckets(data, startKey, endKey, bucketKey) {
-		const bucketMap = {};
-		const bucketKeyMap = {};
-		const tol = this.overlapTolerence();
-		const buckets = [{ end: -Infinity }];
-		let maxBucket = 0;
-		if (bucketKey !== void 0) {
-			data.forEach((d, i) => {
-				bucketMap[i] = d[bucketKey];
-				bucketKeyMap[d[bucketKey]] = true;
-			});
-			maxBucket = Object.keys(bucketKeyMap).length;
-		} else data.forEach((d, i) => {
-			for (let i2 = 0; i2 < buckets.length; ++i2) if (i === 0 || buckets[i2][endKey] + tol <= d[startKey]) {
-				bucketMap[i] = i2;
-				if (maxBucket < i2) maxBucket = i2;
-				buckets[i2][endKey] = d[endKey];
-				break;
-			}
-			if (bucketMap[i] === void 0) {
-				bucketMap[i] = buckets.length;
-				const b = {};
-				b[endKey] = d[endKey];
-				buckets.push(b);
-			}
-			if (maxBucket < bucketMap[i]) maxBucket = bucketMap[i];
-		});
-		const height = (maxBucket + 1) * (this.bucketHeight() + this.gutter());
-		return {
-			bucketMap,
-			maxBucket,
-			bucketScale: this.height() / height,
-			interpolateY: scaleLinear().domain([0, maxBucket + 1]).range([0, Math.min(this.height(), height)])
-		};
-	}
-	data(_) {
-		const retVal = super.data.apply(this, arguments);
-		if (arguments.length > 0) {
-			this._minStart = Math.min(...this.data().map((n) => n[1])) ?? 0;
-			this._maxEnd = Math.max(...this.data().map((n) => n[2])) ?? 1;
-			this.measureDataText(true);
-		}
-		return retVal;
-	}
-	_textWidths;
-	_maxFontScale;
-	_characterWidths;
-	_prevFontFamily;
-	_prevFontSize;
-	measureDataText(forceMeasure = false) {
-		const textWidths = {};
-		const characterWidths = {};
-		const fontFamily = this.fontFamily();
-		const fontSize = this.fontSize();
-		const bucketHeight = this.bucketHeight();
-		if (bucketHeight) this._maxFontScale = (bucketHeight - this.rangePadding() * 2) / fontSize;
-		if (forceMeasure || this._prevFontFamily !== fontFamily || this._prevFontSize !== fontSize) {
-			characterWidths["."] = Utility.textSize(".", fontFamily, fontSize).width;
-			this.data().forEach((d) => {
-				if (!textWidths[d[0]]) textWidths[d[0]] = Utility.textSize(d[0], fontFamily, fontSize).width;
-				d[0].split("").forEach((char) => {
-					if (!characterWidths[char]) characterWidths[char] = Utility.textSize(char, fontFamily, fontSize).width;
-				});
-			});
-			this._textWidths = textWidths;
-			this._characterWidths = characterWidths;
-		}
-		this._prevFontFamily = fontFamily;
-		this._prevFontSize = fontSize;
-	}
-	truncateText(text, width, scale = 1) {
-		if (this._textWidths[text] * scale < width) return text;
-		let ret = "";
-		let sum = 0;
-		const _width = width - this._characterWidths["."] * 3;
-		for (const char of text) {
-			sum += this._characterWidths[char];
-			if (sum < _width) ret += char;
-			else break;
-		}
-		return _width < 0 ? "" : ret + "...";
-	}
-	resize(_size) {
-		let retVal;
-		if (this.fitWidthToContent() || this.fitHeightToContent()) retVal = super.resize.call(this, {
-			width: _size.width,
-			height: this._maxY
-		});
-		else retVal = super.resize.apply(this, arguments);
-		return retVal;
-	}
-	selectionChanged() {}
-	highlightItem(_element, d) {}
-	click(row, _col, sel) {}
-	dblclick(row, _col, sel) {}
-	mousein(row, _col, sel) {}
-	mouseover(row, _col, sel) {}
-	mouseout(row, _col, sel) {}
+const _ReactGantt = class _ReactGantt extends SVGZoomWidget {
+  _selection = new Utility.Selection(this);
+  _buckets;
+  _interpolateX;
+  _interpolateY;
+  _bucketsBySeries;
+  _dataBySeries;
+  _origIdxMap;
+  _seriesBackgrounds;
+  _maxFontSize;
+  _tooltip;
+  _minStart;
+  _maxEnd;
+  _title_idx = 0;
+  _startDate_idx = 1;
+  _endDate_idx = 2;
+  _icon_idx = -1;
+  _color_idx = -1;
+  _series_idx = -1;
+  _bucket_idx = -1;
+  _yoffset_idx = -1;
+  _maxX;
+  _maxY;
+  _rangeOptions = {
+    rangePadding: 2,
+    fontFamily: "Verdana",
+    fontSize: 12,
+    fill: "white",
+    stroke: "black",
+    textFill: "black",
+    cornerRadius: 3,
+    strokeWidth: 0
+  };
+  constructor(drawStartPosition = "origin") {
+    super();
+    this._drawStartPos = drawStartPosition;
+    this.showToolbar_default(false);
+    this._tooltip = new HTMLTooltip();
+    this._tooltip.tooltipHTML((d) => {
+      return `<div style="text-align:center;">${d[0]}<br/><br/>${d[1]} -&gt; ${d[2]}</div>`;
+    });
+    this._tooltip.followCursor(true);
+  }
+  selection(_) {
+    if (!arguments.length) return this._selection.get();
+    this._selection.set(_);
+    return this;
+  }
+  _rangeRenderer = LabelledRect;
+  rangeRenderer(_) {
+    if (!arguments.length) return this._rangeRenderer;
+    this._rangeRenderer = _;
+    return this._rangeRenderer;
+  }
+  enter(domNode, element) {
+    super.enter(domNode, element);
+    const context = this;
+    element.on("click", function(d) {
+      context._selection.clear();
+    });
+    this._tooltip.target(domNode);
+  }
+  update(domNode, element) {
+    super.update(domNode, element);
+    this.zoomExtent([0.05, this.maxZoom()]);
+    this._title_idx = this.titleColumn() !== null ? this.columns().indexOf(this.titleColumn()) : this._title_idx;
+    this._startDate_idx = this.startDateColumn() !== null ? this.columns().indexOf(this.startDateColumn()) : this._startDate_idx;
+    this._endDate_idx = this.endDateColumn() !== null ? this.columns().indexOf(this.endDateColumn()) : this._endDate_idx;
+    this._icon_idx = this.iconColumn() !== null ? this.columns().indexOf(this.iconColumn()) : this._icon_idx;
+    this._color_idx = this.colorColumn() !== null ? this.columns().indexOf(this.colorColumn()) : this._color_idx;
+    this._series_idx = this.seriesColumn() !== null ? this.columns().indexOf(this.seriesColumn()) : this._series_idx;
+    this._bucket_idx = this.bucketColumn() !== null ? this.columns().indexOf(this.bucketColumn()) : -1;
+    const context = this;
+    const w = this.width();
+    const x0 = 0;
+    const x1 = w;
+    this._interpolateX = scaleLinear().domain([this._minStart, this._maxEnd]).range([x0, x1]);
+    this.data().sort((a, b) => a[1] - b[1]);
+    if (this._series_idx > -1) {
+      this._origIdxMap = {};
+      this._dataBySeries = {};
+      this._bucketsBySeries = {};
+      this.data().forEach((dataRow, origIdx) => {
+        const seriesKey = dataRow[this._series_idx];
+        if (!this._dataBySeries[seriesKey]) {
+          this._origIdxMap[seriesKey] = {};
+          this._dataBySeries[seriesKey] = [];
+        }
+        this._dataBySeries[seriesKey].push({
+          dataRow,
+          origIdx
+        });
+      });
+      const gutter = this.gutter();
+      let bucketOffset = 0;
+      const seriesKeys = Object.keys(this._dataBySeries);
+      seriesKeys.forEach((seriesKey) => {
+        this._dataBySeries[seriesKey].sort((a, b) => a.dataRow[1] - b.dataRow[1]);
+        this._bucketsBySeries[seriesKey] = this.calcBuckets(this._dataBySeries[seriesKey].map((n) => n.dataRow), 1, 2);
+        this._bucketsBySeries[seriesKey].bucketHeight = this.bucketHeight();
+        this._bucketsBySeries[seriesKey].bucketOffset = bucketOffset;
+        bucketOffset += (this._bucketsBySeries[seriesKey].bucketHeight + this.strokeWidth() + this.gutter()) * (this._bucketsBySeries[seriesKey].maxBucket + 1);
+        this._dataBySeries[seriesKey].forEach((n, i) => {
+          this._origIdxMap[seriesKey][n.origIdx] = i;
+        });
+      });
+      this._seriesBackgrounds = this._renderElement.selectAll(".series-background").data(seriesKeys.map((key) => {
+        return this._bucketsBySeries[key];
+      }));
+      this._seriesBackgrounds.join(
+        (enter) => enter.append("rect").attr("class", "series-background"),
+        (update) => update,
+        (exit) => exit.each(function(d) {
+          delete d.element;
+        }).remove()
+      ).attr("opacity", (d) => d.props && d.props.hidden ? 0 : 1).each(function(d, i) {
+        select(this).attr("x", 0).attr("y", d.bucketOffset - gutter / 2).attr("width", w).attr("height", (d.bucketHeight + gutter) * (d.maxBucket + 1) + gutter).attr("fill", i % 2 ? context.oddSeriesBackground() : context.evenSeriesBackground());
+      });
+    } else {
+      if (this._bucket_idx !== -1) {
+        this._buckets = this.calcBuckets(this.data(), this._startDate_idx, this._endDate_idx, this._bucket_idx);
+      } else {
+        this._buckets = this.calcBuckets(this.data(), this._startDate_idx, this._endDate_idx);
+      }
+    }
+    const interpedStart = this._interpolateX(this._minStart);
+    this.zoomTo(
+      [interpedStart, 0],
+      1
+    );
+    const bucketHeight = this.bucketHeight();
+    this.setRangeOptions();
+    this._maxFontScale = bucketHeight - this.rangePadding() * 2;
+    this.measureDataText();
+    const itemSelection = this._renderElement.selectAll(".item").data(this.data());
+    const borderOffset1 = this.strokeWidth();
+    const borderOffset2 = borderOffset1 * 2;
+    itemSelection.join(
+      (enter) => enter.append("g").attr("class", "item").on("click.selectionBag", function(d, i) {
+        const _id = d.id === void 0 ? i : d.id;
+        if (context._selection.isSelected({ _id, element: d.element })) {
+          context._selection.clear();
+        } else {
+          context._selection.click(
+            {
+              _id,
+              element: /* @__PURE__ */ __name(() => d.element, "element")
+            },
+            d3Event
+          );
+        }
+        context.selectionChanged();
+        d3Event().stopPropagation();
+      }).on("click", function(d) {
+        const selected = d.element.classed("selected");
+        if (d[context.columns().length]) {
+          d.__lparam = d[context.columns().length];
+        }
+        context.click(d, "", selected);
+      }).on("dblclick", function(d) {
+        const selected = d.element.classed("selected");
+        if (d[context.columns().length]) {
+          d.__lparam = d[context.columns().length];
+        }
+        context.click(d, "", selected);
+      }).on("mousein", function(d) {
+        context.highlightItem(select(this), d);
+        const selected = d.element.classed("selected");
+        context.mousein(d, "", selected);
+      }).on("mouseover", function(d) {
+        const d3evt = d3Event();
+        context._tooltip._triggerElement = d.element;
+        context._tooltip._cursorLoc = [
+          d3evt.clientX,
+          d3evt.clientY
+        ];
+        context._tooltip.data(d).visible(true).fitContent(true).render();
+        context.highlightItem(select(this), d);
+        const selected = d.element.classed("selected");
+        context.mouseover(d, "", selected);
+      }).on("mouseout", function(d) {
+        context._tooltip.visible(false).render();
+        context.highlightItem(null, null);
+        const selected = d.element.classed("selected");
+        context.mouseout(d, "", selected);
+      }).each(function(d, i) {
+        d.that = this;
+        d.element = select(this);
+        d.x = context._interpolateX(d[1]);
+        const endX = context._interpolateX(d[2]);
+        if (context._series_idx > -1) {
+          const seriesKey = d[context._series_idx];
+          const bucket = context._bucketsBySeries[seriesKey].bucketMap[context._origIdxMap[seriesKey][i]];
+          d.y = context._bucketsBySeries[seriesKey].interpolateY(bucket) + context._bucketsBySeries[seriesKey].bucketOffset;
+        } else {
+          const _i = context._bucket_idx === -1 ? i : d[context._bucket_idx];
+          d.y = context._buckets.interpolateY(context._buckets.bucketMap[_i]);
+        }
+        d.props = {
+          ...d[3],
+          text: d[0]
+        };
+        d.props.width = endX - d.x;
+        d.props.height = bucketHeight;
+        d.x += borderOffset1;
+        d.y += borderOffset1;
+        d.props.width -= borderOffset2;
+        d.props.height -= borderOffset2;
+        d.element.attr("transform", `translate(${d.x + d.props.width / 2} ${d.y + d.props.height / 2})`);
+      }),
+      (update) => update,
+      (exit) => exit.each(function(d) {
+        delete d.element;
+      }).remove()
+    ).attr("opacity", (d) => d.props && d.props.hidden ? 0 : 1).each(function(d, i) {
+      d.that = this;
+      if (context._series_idx > -1) {
+        const seriesKey = d[context._series_idx];
+        d.x = context.renderRangeElement(d, i, false, context._rangeOptions, seriesKey);
+      } else {
+        d.x = context.renderRangeElement(d, i, false, context._rangeOptions);
+      }
+    }).on("dblclick.zoom", (d) => {
+      const x12 = this._interpolateX(d[1]);
+      const x2 = this._interpolateX(d[2]);
+      const xRange = x2 - x12;
+      const xScale = w / xRange;
+      this.zoomTo(
+        [
+          -x12 * xScale,
+          0
+        ],
+        xScale
+      );
+    });
+    element.on("dblclick.zoom", null);
+  }
+  exit(domNode, element) {
+    this._tooltip.target(null);
+    super.exit(domNode, element);
+  }
+  renderRangeElement(d, i, transformEach = false, options = {}, seriesKey) {
+    const borderOffset1 = options.strokeWidth;
+    const borderOffset2 = borderOffset1 * 2;
+    const padding = options.rangePadding;
+    let endX;
+    const x = isNaN(this._transform.x) ? 0 : this._transform.x;
+    const k = isNaN(this._transform.k) ? 1 : this._transform.k;
+    let b;
+    const bucketHeight = this.bucketHeight();
+    d.that.setAttribute("data-series", seriesKey);
+    if (this._color_idx > -1) {
+      d.that.setAttribute("data-color", d[this._color_idx]);
+    }
+    if (seriesKey !== void 0) {
+      b = this._bucketsBySeries[seriesKey].bucketMap[this._origIdxMap[seriesKey][i]];
+      d.that.setAttribute("data-b", b);
+      d.that.setAttribute("data-bucketOffset", this._bucketsBySeries[seriesKey].bucketOffset);
+      d.y = this._bucketsBySeries[seriesKey].interpolateY(b) + this._bucketsBySeries[seriesKey].bucketOffset;
+      d.that.setAttribute("data-dy", d.y);
+    } else {
+      b = this._buckets.bucketMap[i];
+      d.y = this._buckets.interpolateY(b);
+    }
+    if (this._color_idx > -1) {
+      options.fill = d[this._color_idx];
+    }
+    if (!transformEach) {
+      d.x = this._interpolateX(d[1]);
+      endX = this._interpolateX(d[2]);
+      d.props = {
+        ...d[3],
+        text: d[0]
+      };
+      d.props.width = (endX - d.x) / k;
+    } else {
+      d.x = this._interpolateX(d[1]) * k;
+      endX = this._interpolateX(d[2]) * k;
+      d.props = {
+        ...d[3],
+        text: d[0]
+      };
+      d.props.width = (endX - d.x) / k;
+      d.x += x;
+      d.props.width *= k;
+    }
+    d.props.height = bucketHeight;
+    if (seriesKey === void 0 && this._buckets.bucketScale < 1) {
+      d.props.height = this._buckets.bucketScale * bucketHeight;
+    }
+    if (d.element === void 0 && d.that) {
+      d.element = select(d.that);
+    }
+    d.element.attr("transform", `translate(${d.x + d.props.width / 2} ${d.y + d.props.height / 2})`);
+    d.x += borderOffset1;
+    d.y += borderOffset1;
+    d.props.width -= borderOffset2;
+    d.props.height -= borderOffset2;
+    d.props.width = d.props.width < 1 ? 1 : d.props.width;
+    d.props.height = d.props.height < 1 ? 1 : d.props.height;
+    let text = this.truncateText(d.props.text, d.props.width - padding, this._maxFontScale);
+    if (text !== d.props.text) {
+      text = this.truncateText(d.props.text, d.props.width - padding);
+    } else {
+      d.props.fontSize = this._maxFontScale * options.fontSize;
+    }
+    if (seriesKey === void 0 && this._buckets.bucketScale < 1) {
+      d.props.fontSize = Math.min(this._maxFontScale, this._buckets.bucketScale) * options.fontSize;
+    }
+    if (!this._maxY || this._maxY < d.y + d.props.height) {
+      this._maxY = d.y + d.props.height;
+    }
+    if (!this._maxX || this._maxX < d.x + d.props.width) {
+      this._maxX = d.x + d.props.width;
+    }
+    render(
+      this._rangeRenderer,
+      {
+        ...options,
+        ...d.props,
+        text
+      },
+      d.that
+    );
+  }
+  setRangeOptions() {
+    this._rangeOptions = {
+      rangePadding: this.rangePadding(),
+      fontFamily: this.fontFamily(),
+      fontSize: this.fontSize(),
+      strokeWidth: this.strokeWidth(),
+      fill: this.fill(),
+      stroke: this.stroke(),
+      textFill: this.rangeFontColor(),
+      cornerRadius: this.cornerRadius()
+    };
+  }
+  _transform = { k: 1, x: 0, y: 0 };
+  zoomed(transform) {
+    this._transform = transform;
+    switch (this.renderMode()) {
+      case "scale-all":
+        this._zoomScale = transform.k;
+        this._zoomTranslate = [transform.x, 0];
+        this._zoomG.attr("transform", `translate(${transform.x} ${0})scale(${transform.k} 1)`);
+        break;
+      default:
+        const options = this._rangeOptions;
+        this.data().forEach((d, i) => {
+          if (this._color_idx > -1) {
+            options.fill = d[this._color_idx];
+          }
+          if (this._series_idx > -1) {
+            const seriesKey = d[this._series_idx];
+            this.renderRangeElement(d, i, true, options, seriesKey);
+          } else {
+            this.renderRangeElement(d, i, true, options);
+          }
+        });
+    }
+    this.zoomedHook(transform);
+  }
+  zoomedHook(transform) {
+  }
+  calcBuckets(data, startKey, endKey, bucketKey) {
+    const bucketMap = {};
+    const bucketKeyMap = {};
+    const tol = this.overlapTolerence();
+    const buckets = [{ end: -Infinity }];
+    let maxBucket = 0;
+    if (bucketKey !== void 0) {
+      data.forEach((d, i) => {
+        bucketMap[i] = d[bucketKey];
+        bucketKeyMap[d[bucketKey]] = true;
+      });
+      maxBucket = Object.keys(bucketKeyMap).length;
+    } else {
+      data.forEach((d, i) => {
+        for (let i2 = 0; i2 < buckets.length; ++i2) {
+          if (i === 0 || buckets[i2][endKey] + tol <= d[startKey]) {
+            bucketMap[i] = i2;
+            if (maxBucket < i2) maxBucket = i2;
+            buckets[i2][endKey] = d[endKey];
+            break;
+          }
+        }
+        if (bucketMap[i] === void 0) {
+          bucketMap[i] = buckets.length;
+          const b = {};
+          b[endKey] = d[endKey];
+          buckets.push(b);
+        }
+        if (maxBucket < bucketMap[i]) maxBucket = bucketMap[i];
+      });
+    }
+    const height = (maxBucket + 1) * (this.bucketHeight() + this.gutter());
+    return {
+      bucketMap,
+      maxBucket,
+      bucketScale: this.height() / height,
+      interpolateY: scaleLinear().domain([0, maxBucket + 1]).range([0, Math.min(this.height(), height)])
+    };
+  }
+  data(_) {
+    const retVal = super.data.apply(this, arguments);
+    if (arguments.length > 0) {
+      this._minStart = Math.min(...this.data().map((n) => n[1])) ?? 0;
+      this._maxEnd = Math.max(...this.data().map((n) => n[2])) ?? 1;
+      this.measureDataText(true);
+    }
+    return retVal;
+  }
+  _textWidths;
+  _maxFontScale;
+  _characterWidths;
+  _prevFontFamily;
+  _prevFontSize;
+  measureDataText(forceMeasure = false) {
+    const textWidths = {};
+    const characterWidths = {};
+    const fontFamily = this.fontFamily();
+    const fontSize = this.fontSize();
+    const bucketHeight = this.bucketHeight();
+    if (bucketHeight) {
+      this._maxFontScale = (bucketHeight - this.rangePadding() * 2) / fontSize;
+    }
+    if (forceMeasure || this._prevFontFamily !== fontFamily || this._prevFontSize !== fontSize) {
+      characterWidths["."] = Utility.textSize(".", fontFamily, fontSize).width;
+      this.data().forEach((d) => {
+        if (!textWidths[d[0]]) {
+          textWidths[d[0]] = Utility.textSize(d[0], fontFamily, fontSize).width;
+        }
+        d[0].split("").forEach((char) => {
+          if (!characterWidths[char]) {
+            characterWidths[char] = Utility.textSize(char, fontFamily, fontSize).width;
+          }
+        });
+      });
+      this._textWidths = textWidths;
+      this._characterWidths = characterWidths;
+    }
+    this._prevFontFamily = fontFamily;
+    this._prevFontSize = fontSize;
+  }
+  truncateText(text, width, scale = 1) {
+    const textFits = this._textWidths[text] * scale < width;
+    if (textFits) {
+      return text;
+    }
+    let ret = "";
+    let sum = 0;
+    const _width = width - this._characterWidths["."] * 3;
+    for (const char of text) {
+      sum += this._characterWidths[char];
+      if (sum < _width) {
+        ret += char;
+      } else {
+        break;
+      }
+    }
+    return _width < 0 ? "" : ret + "...";
+  }
+  resize(_size) {
+    let retVal;
+    if (this.fitWidthToContent() || this.fitHeightToContent()) {
+      retVal = super.resize.call(this, {
+        width: _size.width,
+        height: this._maxY
+      });
+    } else {
+      retVal = super.resize.apply(this, arguments);
+    }
+    return retVal;
+  }
+  selectionChanged() {
+  }
+  highlightItem(_element, d) {
+  }
+  click(row, _col, sel) {
+  }
+  dblclick(row, _col, sel) {
+  }
+  mousein(row, _col, sel) {
+  }
+  mouseover(row, _col, sel) {
+  }
+  mouseout(row, _col, sel) {
+  }
 };
+__name(_ReactGantt, "ReactGantt");
+let ReactGantt = _ReactGantt;
 ReactGantt.prototype._class += " timeline_ReactGantt";
 ReactGantt.prototype.publish("fitWidthToContent", false, "boolean", "If true, resize will simply reapply the bounding box width");
 ReactGantt.prototype.publish("fitHeightToContent", false, "boolean", "If true, resize will simply reapply the bounding box height");
@@ -765,134 +862,131 @@ ReactGantt.prototype.publish("gutter", 2, "number", "Space between range buckets
 ReactGantt.prototype.publish("maxZoom", 16, "number", "Maximum zoom");
 ReactGantt.prototype.publish("evenSeriesBackground", "#FFFFFF", "html-color", "Background color of even series rows");
 ReactGantt.prototype.publish("oddSeriesBackground", "#DDDDDD", "html-color", "Background color of odd series rows");
-
-//#endregion
-//#region src/ReactAxisGantt.ts
-var ReactAxisGantt = class extends SVGWidget {
-	_topAxis = new Axis("center").orientation("top").type("linear").shrinkToFit("none").overlapMode("hide").extend(0).tickFormat("d");
-	_gantt = new ReactGantt("center").stroke("#000000");
-	_bottomAxis = new Axis("center").orientation("bottom").type("linear").shrinkToFit("none").overlapMode("hide").extend(0).tickFormat("d");
-	_topAxisElement;
-	_contentElement;
-	_bottomAxisElement;
-	_topRect;
-	_contentRect;
-	_bottomRect;
-	rangeRenderer;
-	constructor() {
-		super();
-		this._drawStartPos = "origin";
-		this.rangeRenderer = function() {
-			const ret = this._gantt.rangeRenderer.apply(this._gantt, arguments);
-			if (!arguments.length) return ret;
-			return this;
-		};
-	}
-	selection(_) {
-		if (!arguments.length) return this._gantt.selection();
-		this._gantt.selection(_);
-		return this;
-	}
-	resizeWrappers() {
-		const w = this.width();
-		const h = this.height();
-		const axisHeight = this.axisHeight();
-		const contentHeight = h - axisHeight * 2;
-		const borderOffset1 = this.strokeWidth();
-		this._topRect.attr("height", axisHeight).attr("width", w).attr("fill", "transparent");
-		this._topAxisElement.attr("transform", "translate(0 0)");
-		this._topAxis.resize({
-			height: axisHeight,
-			width: w
-		});
-		this._contentRect.attr("height", contentHeight).attr("width", w).attr("fill", "transparent");
-		this._contentElement.attr("transform", `translate(0 ${axisHeight + borderOffset1})`);
-		this._gantt.resize({
-			height: contentHeight,
-			width: w
-		});
-		this._bottomRect.attr("height", axisHeight).attr("width", w).attr("fill", "transparent");
-		this._bottomAxisElement.attr("transform", `translate(0 ${axisHeight + contentHeight + borderOffset1})`);
-		this._bottomAxis.resize({
-			height: axisHeight,
-			width: w
-		});
-	}
-	enter(domNode, element) {
-		super.enter(domNode, element);
-		this._gantt.click = (row, col, sel) => {
-			this.click(row, col, sel);
-		};
-		this._gantt.dblclick = (row, col, sel) => {
-			this.dblclick(row, col, sel);
-		};
-		this._topAxisElement = element.append("g").attr("class", "top-axis-wrapper");
-		this._topRect = this._topAxisElement.append("rect").attr("class", "top-axis-rect");
-		this._contentElement = element.append("g").attr("class", "content-wrapper");
-		this._contentRect = this._contentElement.append("rect").attr("class", "content-rect");
-		this._bottomAxisElement = element.append("g").attr("class", "bottom-axis-wrapper");
-		this._bottomRect = this._bottomAxisElement.append("rect").attr("class", "top-axis-rect");
-		this._topAxis.target(this._topAxisElement.node());
-		this._gantt.target(this._contentElement.node()).bucketHeight(30);
-		this._bottomAxis.target(this._bottomAxisElement.node());
-		this.resizeWrappers();
-		this._gantt.zoomedHook = (transform) => {
-			this.onzoom(transform);
-		};
-	}
-	onzoom(transform) {
-		const w = this.width();
-		const low = this._gantt._minStart;
-		const range = this._gantt._maxEnd - low;
-		const wpp = range / w;
-		const nextLow = Math.floor(low - wpp * (transform.x / transform.k));
-		const nextHigh = Math.ceil(range / transform.k + nextLow);
-		this._topAxis.fontFamily(this.axisFontFamily()).fontSize(this.axisFontSize()).tickLength(this.axisTickLength()).low(nextLow).high(nextHigh).render();
-		this._bottomAxis.fontFamily(this.axisFontFamily()).fontSize(this.axisFontSize()).tickLength(this.axisTickLength()).low(nextLow).high(nextHigh).render();
-	}
-	update(domNode, element) {
-		super.update(domNode, element);
-		this._topAxis.tickFormat(this.tickFormat()).render();
-		this._bottomAxis.tickFormat(this.tickFormat()).render();
-		this._gantt.render();
-	}
-	exit(domNode, element) {
-		this._bottomAxis.target(null);
-		this._gantt.target(null);
-		this._topAxis.target(null);
-		super.exit(domNode, element);
-	}
-	columns(_) {
-		const retVal = super.columns.apply(this, arguments);
-		if (arguments.length > 0) this._gantt.columns(_);
-		return retVal;
-	}
-	data(_) {
-		const retVal = super.data.apply(this, arguments);
-		if (arguments.length > 0) {
-			const ganttData = this.data().map((n) => {
-				const ret = [...n];
-				ret[1] = isNaN(n[1]) ? new Date(n[1]).getTime() : Number(n[1]);
-				ret[2] = isNaN(n[2]) ? new Date(n[2]).getTime() : Number(n[2]);
-				return ret;
-			});
-			this._gantt._minStart = Math.min(...ganttData.map((n) => n[1])) ?? 0;
-			this._gantt._maxEnd = Math.max(...ganttData.map((n) => n[2])) ?? 1;
-			this._gantt.data(ganttData);
-		}
-		return retVal;
-	}
-	resize(_size) {
-		const retVal = super.resize.apply(this, arguments);
-		if (this._topAxisElement) this.resizeWrappers();
-		return retVal;
-	}
-	click(row, col, sel) {}
-	dblclick(row, col, sel) {}
-	tooltip() {
-		return this._gantt._tooltip;
-	}
+const _ReactAxisGantt = class _ReactAxisGantt extends SVGWidget {
+  _topAxis = new Axis("center").orientation("top").type("linear").shrinkToFit("none").overlapMode("hide").extend(0).tickFormat("d");
+  _gantt = new ReactGantt("center").stroke("#000000");
+  _bottomAxis = new Axis("center").orientation("bottom").type("linear").shrinkToFit("none").overlapMode("hide").extend(0).tickFormat("d");
+  _topAxisElement;
+  _contentElement;
+  _bottomAxisElement;
+  _topRect;
+  _contentRect;
+  _bottomRect;
+  rangeRenderer;
+  constructor() {
+    super();
+    this._drawStartPos = "origin";
+    this.rangeRenderer = function() {
+      const ret = this._gantt.rangeRenderer.apply(this._gantt, arguments);
+      if (!arguments.length) return ret;
+      return this;
+    };
+  }
+  selection(_) {
+    if (!arguments.length) return this._gantt.selection();
+    this._gantt.selection(_);
+    return this;
+  }
+  resizeWrappers() {
+    const w = this.width();
+    const h = this.height();
+    const axisHeight = this.axisHeight();
+    const contentHeight = h - axisHeight * 2;
+    const borderOffset1 = this.strokeWidth();
+    this._topRect.attr("height", axisHeight).attr("width", w).attr("fill", "transparent");
+    this._topAxisElement.attr("transform", "translate(0 0)");
+    this._topAxis.resize({ height: axisHeight, width: w });
+    this._contentRect.attr("height", contentHeight).attr("width", w).attr("fill", "transparent");
+    this._contentElement.attr("transform", `translate(0 ${axisHeight + borderOffset1})`);
+    this._gantt.resize({ height: contentHeight, width: w });
+    this._bottomRect.attr("height", axisHeight).attr("width", w).attr("fill", "transparent");
+    this._bottomAxisElement.attr("transform", `translate(0 ${axisHeight + contentHeight + borderOffset1})`);
+    this._bottomAxis.resize({ height: axisHeight, width: w });
+  }
+  enter(domNode, element) {
+    super.enter(domNode, element);
+    this._gantt.click = (row, col, sel) => {
+      this.click(row, col, sel);
+    };
+    this._gantt.dblclick = (row, col, sel) => {
+      this.dblclick(row, col, sel);
+    };
+    this._topAxisElement = element.append("g").attr("class", "top-axis-wrapper");
+    this._topRect = this._topAxisElement.append("rect").attr("class", "top-axis-rect");
+    this._contentElement = element.append("g").attr("class", "content-wrapper");
+    this._contentRect = this._contentElement.append("rect").attr("class", "content-rect");
+    this._bottomAxisElement = element.append("g").attr("class", "bottom-axis-wrapper");
+    this._bottomRect = this._bottomAxisElement.append("rect").attr("class", "top-axis-rect");
+    this._topAxis.target(this._topAxisElement.node());
+    this._gantt.target(this._contentElement.node()).bucketHeight(30);
+    this._bottomAxis.target(this._bottomAxisElement.node());
+    this.resizeWrappers();
+    this._gantt.zoomedHook = (transform) => {
+      this.onzoom(transform);
+    };
+  }
+  onzoom(transform) {
+    const w = this.width();
+    const low = this._gantt._minStart;
+    const high = this._gantt._maxEnd;
+    const range = high - low;
+    const wpp = range / w;
+    const nextLow = Math.floor(low - wpp * (transform.x / transform.k));
+    const nextHigh = Math.ceil(range / transform.k + nextLow);
+    this._topAxis.fontFamily(this.axisFontFamily()).fontSize(this.axisFontSize()).tickLength(this.axisTickLength()).low(nextLow).high(nextHigh).render();
+    this._bottomAxis.fontFamily(this.axisFontFamily()).fontSize(this.axisFontSize()).tickLength(this.axisTickLength()).low(nextLow).high(nextHigh).render();
+  }
+  update(domNode, element) {
+    super.update(domNode, element);
+    this._topAxis.tickFormat(this.tickFormat()).render();
+    this._bottomAxis.tickFormat(this.tickFormat()).render();
+    this._gantt.render();
+  }
+  exit(domNode, element) {
+    this._bottomAxis.target(null);
+    this._gantt.target(null);
+    this._topAxis.target(null);
+    super.exit(domNode, element);
+  }
+  columns(_) {
+    const retVal = super.columns.apply(this, arguments);
+    if (arguments.length > 0) {
+      this._gantt.columns(_);
+    }
+    return retVal;
+  }
+  data(_) {
+    const retVal = super.data.apply(this, arguments);
+    if (arguments.length > 0) {
+      const ganttData = this.data().map((n) => {
+        const ret = [...n];
+        ret[1] = isNaN(n[1]) ? new Date(n[1]).getTime() : Number(n[1]);
+        ret[2] = isNaN(n[2]) ? new Date(n[2]).getTime() : Number(n[2]);
+        return ret;
+      });
+      this._gantt._minStart = Math.min(...ganttData.map((n) => n[1])) ?? 0;
+      this._gantt._maxEnd = Math.max(...ganttData.map((n) => n[2])) ?? 1;
+      this._gantt.data(ganttData);
+    }
+    return retVal;
+  }
+  resize(_size) {
+    const retVal = super.resize.apply(this, arguments);
+    if (this._topAxisElement) {
+      this.resizeWrappers();
+    }
+    return retVal;
+  }
+  click(row, col, sel) {
+  }
+  dblclick(row, col, sel) {
+  }
+  tooltip() {
+    return this._gantt._tooltip;
+  }
 };
+__name(_ReactAxisGantt, "ReactAxisGantt");
+let ReactAxisGantt = _ReactAxisGantt;
 ReactAxisGantt.prototype._class += " timeline_ReactAxisGantt";
 ReactAxisGantt.prototype.publish("tickFormat", null, "string", "Format rule applied to axis tick labels", void 0, { optional: true });
 ReactAxisGantt.prototype.publish("axisHeight", 22, "number", "Height of axes (pixels)");
@@ -916,119 +1010,125 @@ ReactAxisGantt.prototype.publishProxy("colorColumn", "_gantt");
 ReactAxisGantt.prototype.publishProxy("bucketColumn", "_gantt");
 ReactAxisGantt.prototype.publishProxy("maxZoom", "_gantt");
 ReactAxisGantt.prototype.publishProxy("bucketHeight", "_gantt");
-
-//#endregion
-//#region src/ReactAxisGanttSeries.ts
-var ReactAxisGanttSeries = class extends Border2 {
-	_topAxis = new Axis("origin").orientation("top").type("linear").shrinkToFit("none").overlapMode("hide").extend(0).tickFormat("d");
-	_gantt = new ReactGantt("origin").stroke("#000000").fitHeightToContent(true);
-	_bottomAxis = new Axis("origin").orientation("bottom").type("linear").shrinkToFit("none").overlapMode("hide").extend(0).tickFormat("d");
-	_topAxisElement;
-	_contentElement;
-	_bottomAxisElement;
-	_topRect;
-	_contentRect;
-	_bottomRect;
-	constructor() {
-		super();
-		this.centerOverflowX_default("hidden");
-		this.centerOverflowY_default("auto");
-	}
-	selection(_) {
-		if (!arguments.length) return this._gantt.selection();
-		this._gantt.selection(_);
-		return this;
-	}
-	rangeRenderer(_) {
-		const ret = this._gantt.rangeRenderer.apply(this._gantt, arguments);
-		if (!arguments.length) return ret;
-		return this;
-	}
-	resizeWrappers() {
-		const w = this.width();
-		const h = this.height();
-		const axisHeight = this.axisHeight();
-		const contentHeight = h - axisHeight * 2;
-		this.bottomHeight(axisHeight);
-		this._topWA.resize({
-			width: w,
-			height: axisHeight
-		});
-		this._centerWA.resize({
-			width: w,
-			height: contentHeight
-		});
-		this._bottomWA.resize({
-			width: w,
-			height: axisHeight
-		});
-		this.top().render();
-		this.bottom().render();
-		this.center().render();
-	}
-	enter(domNode, element) {
-		super.enter(domNode, element);
-		this._gantt.click = (row, col, sel) => {
-			this.click(row, col, sel);
-		};
-		this._gantt.dblclick = (row, col, sel) => {
-			this.dblclick(row, col, sel);
-		};
-		this.top(this._topAxis);
-		this.center(this._gantt);
-		this.bottom(this._bottomAxis);
-		this.resizeWrappers();
-		this._gantt.zoomedHook = (transform) => {
-			this.onzoom(transform);
-		};
-	}
-	onzoom(transform) {
-		const w = this.width();
-		const low = this._gantt._minStart;
-		const range = this._gantt._maxEnd - low;
-		const wpp = range / w;
-		const nextLow = Math.floor(low - wpp * (transform.x / transform.k));
-		const nextHigh = Math.ceil(range / transform.k + nextLow);
-		this._topAxis.fontFamily(this.axisFontFamily()).fontSize(this.axisFontSize()).tickLength(this.axisTickLength()).low(nextLow).high(nextHigh).lazyRender();
-		this._bottomAxis.fontFamily(this.axisFontFamily()).fontSize(this.axisFontSize()).tickLength(this.axisTickLength()).low(nextLow).high(nextHigh).lazyRender();
-	}
-	update(domNode, element) {
-		super.update(domNode, element);
-		this._topAxis.tickFormat(this.tickFormat()).render();
-		this._bottomAxis.tickFormat(this.tickFormat()).render();
-		this._gantt.render();
-	}
-	columns(_) {
-		const retVal = super.columns.apply(this, arguments);
-		if (arguments.length > 0) this._gantt.columns(_);
-		return retVal;
-	}
-	data(_) {
-		const retVal = super.data.apply(this, arguments);
-		if (arguments.length > 0) {
-			const ganttData = this.data().map((n) => {
-				const ret = [...n];
-				ret[1] = isNaN(n[1]) ? new Date(n[1]).getTime() : Number(n[1]);
-				ret[2] = isNaN(n[2]) ? new Date(n[2]).getTime() : Number(n[2]);
-				return ret;
-			});
-			this._gantt._minStart = min(ganttData, (n) => n[1]);
-			this._gantt._maxEnd = max(ganttData, (n) => n[2]);
-			this._gantt.data(ganttData);
-		}
-		return retVal;
-	}
-	resize(_size) {
-		const retVal = super.resize.apply(this, arguments);
-		if (this._topAxisElement) this.resizeWrappers();
-		return retVal;
-	}
-	click(row, col, sel) {}
-	dblclick(row, col, sel) {}
-	tooltip() {
-		return this._gantt._tooltip;
-	}
+const _ReactAxisGanttSeries = class _ReactAxisGanttSeries extends Border2 {
+  _topAxis = new Axis("origin").orientation("top").type("linear").shrinkToFit("none").overlapMode("hide").extend(0).tickFormat("d");
+  _gantt = new ReactGantt("origin").stroke("#000000").fitHeightToContent(true);
+  _bottomAxis = new Axis("origin").orientation("bottom").type("linear").shrinkToFit("none").overlapMode("hide").extend(0).tickFormat("d");
+  _topAxisElement;
+  _contentElement;
+  _bottomAxisElement;
+  _topRect;
+  _contentRect;
+  _bottomRect;
+  constructor() {
+    super();
+    this.centerOverflowX_default("hidden");
+    this.centerOverflowY_default("auto");
+  }
+  selection(_) {
+    if (!arguments.length) return this._gantt.selection();
+    this._gantt.selection(_);
+    return this;
+  }
+  rangeRenderer(_) {
+    const ret = this._gantt.rangeRenderer.apply(this._gantt, arguments);
+    if (!arguments.length) return ret;
+    return this;
+  }
+  resizeWrappers() {
+    const w = this.width();
+    const h = this.height();
+    const axisHeight = this.axisHeight();
+    const contentHeight = h - axisHeight * 2;
+    this.bottomHeight(axisHeight);
+    this._topWA.resize({
+      width: w,
+      height: axisHeight
+    });
+    this._centerWA.resize({
+      width: w,
+      height: contentHeight
+    });
+    this._bottomWA.resize({
+      width: w,
+      height: axisHeight
+    });
+    this.top().render();
+    this.bottom().render();
+    this.center().render();
+  }
+  enter(domNode, element) {
+    super.enter(domNode, element);
+    this._gantt.click = (row, col, sel) => {
+      this.click(row, col, sel);
+    };
+    this._gantt.dblclick = (row, col, sel) => {
+      this.dblclick(row, col, sel);
+    };
+    this.top(this._topAxis);
+    this.center(this._gantt);
+    this.bottom(this._bottomAxis);
+    this.resizeWrappers();
+    this._gantt.zoomedHook = (transform) => {
+      this.onzoom(transform);
+    };
+  }
+  onzoom(transform) {
+    const w = this.width();
+    const low = this._gantt._minStart;
+    const high = this._gantt._maxEnd;
+    const range = high - low;
+    const wpp = range / w;
+    const nextLow = Math.floor(low - wpp * (transform.x / transform.k));
+    const nextHigh = Math.ceil(range / transform.k + nextLow);
+    this._topAxis.fontFamily(this.axisFontFamily()).fontSize(this.axisFontSize()).tickLength(this.axisTickLength()).low(nextLow).high(nextHigh).lazyRender();
+    this._bottomAxis.fontFamily(this.axisFontFamily()).fontSize(this.axisFontSize()).tickLength(this.axisTickLength()).low(nextLow).high(nextHigh).lazyRender();
+  }
+  update(domNode, element) {
+    super.update(domNode, element);
+    this._topAxis.tickFormat(this.tickFormat()).render();
+    this._bottomAxis.tickFormat(this.tickFormat()).render();
+    this._gantt.render();
+  }
+  columns(_) {
+    const retVal = super.columns.apply(this, arguments);
+    if (arguments.length > 0) {
+      this._gantt.columns(_);
+    }
+    return retVal;
+  }
+  data(_) {
+    const retVal = super.data.apply(this, arguments);
+    if (arguments.length > 0) {
+      const ganttData = this.data().map((n) => {
+        const ret = [...n];
+        ret[1] = isNaN(n[1]) ? new Date(n[1]).getTime() : Number(n[1]);
+        ret[2] = isNaN(n[2]) ? new Date(n[2]).getTime() : Number(n[2]);
+        return ret;
+      });
+      this._gantt._minStart = min(ganttData, (n) => n[1]);
+      this._gantt._maxEnd = max(ganttData, (n) => n[2]);
+      this._gantt.data(ganttData);
+    }
+    return retVal;
+  }
+  resize(_size) {
+    const retVal = super.resize.apply(this, arguments);
+    if (this._topAxisElement) {
+      this.resizeWrappers();
+    }
+    return retVal;
+  }
+  click(row, col, sel) {
+  }
+  dblclick(row, col, sel) {
+  }
+  tooltip() {
+    return this._gantt._tooltip;
+  }
 };
+__name(_ReactAxisGanttSeries, "ReactAxisGanttSeries");
+let ReactAxisGanttSeries = _ReactAxisGanttSeries;
 ReactAxisGanttSeries.prototype._class += " timeline_ReactAxisGanttSeries";
 ReactAxisGanttSeries.prototype.publish("tickFormat", null, "string", "Format rule applied to axis tick labels", void 0, { optional: true });
 ReactAxisGanttSeries.prototype.publish("axisHeight", 22, "number", "Height of axes (pixels)");
@@ -1055,155 +1155,169 @@ ReactAxisGanttSeries.prototype.publishProxy("maxZoom", "_gantt");
 ReactAxisGanttSeries.prototype.publishProxy("evenSeriesBackground", "_gantt");
 ReactAxisGanttSeries.prototype.publishProxy("oddSeriesBackground", "_gantt");
 ReactAxisGanttSeries.prototype.publishProxy("bucketHeight", "_gantt");
-
-//#endregion
-//#region src/ReactTimeline.ts
-var ReactTimeline = class extends ReactAxisGantt {
-	_axisLabelFormatter;
-	constructor() {
-		super();
-		this._drawStartPos = "origin";
-		this._topAxis.type("time");
-		this._bottomAxis.type("time");
-		this.tooltipHTML((d) => {
-			const parser = timeParse("%Q");
-			const startTime = parser(d[1]);
-			const endTime = parser(d[2]);
-			const formatter = timeFormat(this.tooltipTimeFormat());
-			return `<div style="text-align:center;">${d[0]}<br/><br/>${formatter(startTime)} -&gt; ${formatter(endTime)}</div>`;
-		});
-	}
-	update(domNode, element) {
-		super.update(domNode, element);
-		if (this.timePattern_exists()) {
-			let minTimestamp = Infinity;
-			let maxTimestamp = -Infinity;
-			let lowDateStr = "";
-			let highDateStr = "";
-			this.data().map((n) => {
-				const start = new Date(n[1]).getTime();
-				const end = new Date(n[2]).getTime();
-				if (minTimestamp > start) {
-					minTimestamp = start;
-					lowDateStr = "" + n[1];
-				}
-				if (maxTimestamp < end) {
-					maxTimestamp = end;
-					highDateStr = "" + n[2];
-				}
-			});
-			const axisTickFormat = this._axisLabelFormatter ? this._axisLabelFormatter : this.tickFormat_exists && this.tickFormat_exists() ? this.tickFormat() : void 0;
-			this._topAxis.type("time").timePattern(this.timePattern()).overlapMode("none").low(lowDateStr).high(highDateStr);
-			this._bottomAxis.type("time").timePattern(this.timePattern()).overlapMode("none").low(lowDateStr).high(highDateStr);
-			if (axisTickFormat) {
-				this._topAxis.tickFormat(axisTickFormat);
-				this._bottomAxis.tickFormat(axisTickFormat);
-			} else {
-				this._topAxis.tickFormat_reset();
-				this._bottomAxis.tickFormat_reset();
-			}
-			this._gantt._minStart = minTimestamp;
-			this._gantt._maxEnd = maxTimestamp;
-		}
-	}
-	tooltipHTML(callback) {
-		this._tooltipHTML = callback;
-		this.tooltip().tooltipHTML(this._tooltipHTML);
-		return this;
-	}
-	parseAxisValue(v) {
-		const parsedTime = timeParse("%Q")(v);
-		return timeFormat(this.timePattern())(parsedTime);
-	}
-	onzoom(transform) {
-		const w = this.width();
-		const low = this._gantt._minStart;
-		const range = this._gantt._maxEnd - low;
-		const wpp = range / w;
-		const nextLow = Math.floor(low - wpp * (transform.x / transform.k));
-		const nextHigh = Math.ceil(range / transform.k + nextLow);
-		this._topAxis.low(this.parseAxisValue(nextLow)).high(this.parseAxisValue(nextHigh)).render();
-		this._bottomAxis.low(this.parseAxisValue(nextLow)).high(this.parseAxisValue(nextHigh)).render();
-	}
+const _ReactTimeline = class _ReactTimeline extends ReactAxisGantt {
+  _axisLabelFormatter;
+  //TODO: add a type to this? d3 time formatting function type?
+  constructor() {
+    super();
+    this._drawStartPos = "origin";
+    this._topAxis.type("time");
+    this._bottomAxis.type("time");
+    this.tooltipHTML((d) => {
+      const parser = timeParse("%Q");
+      const startTime = parser(d[1]);
+      const endTime = parser(d[2]);
+      const formatter = timeFormat(this.tooltipTimeFormat());
+      return `<div style="text-align:center;">${d[0]}<br/><br/>${formatter(startTime)} -&gt; ${formatter(endTime)}</div>`;
+    });
+  }
+  update(domNode, element) {
+    super.update(domNode, element);
+    if (this.timePattern_exists()) {
+      let minTimestamp = Infinity;
+      let maxTimestamp = -Infinity;
+      let lowDateStr = "";
+      let highDateStr = "";
+      this.data().map((n) => {
+        const start = new Date(n[1]).getTime();
+        const end = new Date(n[2]).getTime();
+        if (minTimestamp > start) {
+          minTimestamp = start;
+          lowDateStr = "" + n[1];
+        }
+        if (maxTimestamp < end) {
+          maxTimestamp = end;
+          highDateStr = "" + n[2];
+        }
+      });
+      const axisTickFormat = this._axisLabelFormatter ? this._axisLabelFormatter : this.tickFormat_exists && this.tickFormat_exists() ? this.tickFormat() : void 0;
+      this._topAxis.type("time").timePattern(this.timePattern()).overlapMode("none").low(lowDateStr).high(highDateStr);
+      this._bottomAxis.type("time").timePattern(this.timePattern()).overlapMode("none").low(lowDateStr).high(highDateStr);
+      if (axisTickFormat) {
+        this._topAxis.tickFormat(axisTickFormat);
+        this._bottomAxis.tickFormat(axisTickFormat);
+      } else {
+        this._topAxis.tickFormat_reset();
+        this._bottomAxis.tickFormat_reset();
+      }
+      this._gantt._minStart = minTimestamp;
+      this._gantt._maxEnd = maxTimestamp;
+    }
+  }
+  tooltipHTML(callback) {
+    this._tooltipHTML = callback;
+    this.tooltip().tooltipHTML(this._tooltipHTML);
+    return this;
+  }
+  parseAxisValue(v) {
+    const parseTime2 = timeParse("%Q");
+    const parsedTime = parseTime2(v);
+    const formatTime = timeFormat(this.timePattern());
+    return formatTime(parsedTime);
+  }
+  onzoom(transform) {
+    const w = this.width();
+    const low = this._gantt._minStart;
+    const high = this._gantt._maxEnd;
+    const range = high - low;
+    const wpp = range / w;
+    const nextLow = Math.floor(low - wpp * (transform.x / transform.k));
+    const nextHigh = Math.ceil(range / transform.k + nextLow);
+    this._topAxis.low(this.parseAxisValue(nextLow)).high(this.parseAxisValue(nextHigh)).render();
+    this._bottomAxis.low(this.parseAxisValue(nextLow)).high(this.parseAxisValue(nextHigh)).render();
+  }
 };
+__name(_ReactTimeline, "ReactTimeline");
+let ReactTimeline = _ReactTimeline;
 ReactTimeline.prototype._class += " timeline_ReactTimeline";
 ReactTimeline.prototype.publish("timePattern", "%Y-%m-%d", "string", "Time pattern used for parsing datetime strings on each data row", null, { optional: true });
 ReactTimeline.prototype.publish("tooltipTimeFormat", "%Y-%m-%d", "string", "Time format used in the default html tooltip");
-
-//#endregion
-//#region src/ReactTimelineSeries.ts
-var parseTime = timeParse("%Q");
-var ReactTimelineSeries = class extends ReactAxisGanttSeries {
-	_axisLabelFormatter;
-	constructor() {
-		super();
-		this._topAxis.type("time");
-		this._bottomAxis.type("time");
-		this.tooltipHTML((d) => {
-			const startTime = parseTime(d[1]);
-			const endTime = parseTime(d[2]);
-			const formatter = timeFormat(this.tooltipTimeFormat());
-			return `<div style="text-align:center;">${d[0]}<br/><br/>${formatter(startTime)} -&gt; ${formatter(endTime)}</div>`;
-		});
-	}
-	update(domNode, element) {
-		super.update(domNode, element);
-		if (this.timePattern_exists()) {
-			let minTimestamp = Infinity;
-			let maxTimestamp = -Infinity;
-			let lowDateStr = "";
-			let highDateStr = "";
-			this.data().forEach((n) => {
-				const start = new Date(n[1]).getTime();
-				const end = new Date(n[2]).getTime();
-				if (minTimestamp > start) {
-					minTimestamp = start;
-					lowDateStr = "" + n[1];
-				}
-				if (maxTimestamp < end) {
-					maxTimestamp = end;
-					highDateStr = "" + n[2];
-				}
-			});
-			const axisTickFormat = this._axisLabelFormatter ? this._axisLabelFormatter : this.tickFormat_exists && this.tickFormat_exists() ? this.tickFormat() : void 0;
-			this._topAxis.type("time").timePattern(this.timePattern()).overlapMode("none").low(lowDateStr).high(highDateStr);
-			this._bottomAxis.type("time").timePattern(this.timePattern()).overlapMode("none").low(lowDateStr).high(highDateStr);
-			if (axisTickFormat) {
-				this._topAxis.tickFormat(axisTickFormat);
-				this._bottomAxis.tickFormat(axisTickFormat);
-			} else {
-				this._topAxis.tickFormat_reset();
-				this._bottomAxis.tickFormat_reset();
-			}
-			this._gantt._minStart = minTimestamp;
-			this._gantt._maxEnd = maxTimestamp;
-		}
-	}
-	tooltipHTML(callback) {
-		this._tooltipHTML = callback;
-		this.tooltip().tooltipHTML(this._tooltipHTML);
-		return this;
-	}
-	parseAxisValue(v) {
-		const parsedTime = parseTime(v);
-		return timeFormat(this.timePattern())(parsedTime);
-	}
-	onzoom(transform) {
-		const w = this.width();
-		const low = this._gantt._minStart;
-		const range = this._gantt._maxEnd - low;
-		const wpp = range / w;
-		const nextLow = Math.floor(low - wpp * (transform.x / transform.k));
-		const nextHigh = Math.ceil(range / transform.k + nextLow);
-		this._topAxis.low(this.parseAxisValue(nextLow)).high(this.parseAxisValue(nextHigh)).render();
-		this._bottomAxis.low(this.parseAxisValue(nextLow)).high(this.parseAxisValue(nextHigh)).render();
-	}
-	_tooltipHTML;
+const parseTime = timeParse("%Q");
+const _ReactTimelineSeries = class _ReactTimelineSeries extends ReactAxisGanttSeries {
+  _axisLabelFormatter;
+  //TODO: add a type to this? d3 time formatting function type?
+  constructor() {
+    super();
+    this._topAxis.type("time");
+    this._bottomAxis.type("time");
+    this.tooltipHTML((d) => {
+      const startTime = parseTime(d[1]);
+      const endTime = parseTime(d[2]);
+      const formatter = timeFormat(this.tooltipTimeFormat());
+      return `<div style="text-align:center;">${d[0]}<br/><br/>${formatter(startTime)} -&gt; ${formatter(endTime)}</div>`;
+    });
+  }
+  update(domNode, element) {
+    super.update(domNode, element);
+    if (this.timePattern_exists()) {
+      let minTimestamp = Infinity;
+      let maxTimestamp = -Infinity;
+      let lowDateStr = "";
+      let highDateStr = "";
+      this.data().forEach((n) => {
+        const start = new Date(n[1]).getTime();
+        const end = new Date(n[2]).getTime();
+        if (minTimestamp > start) {
+          minTimestamp = start;
+          lowDateStr = "" + n[1];
+        }
+        if (maxTimestamp < end) {
+          maxTimestamp = end;
+          highDateStr = "" + n[2];
+        }
+      });
+      const axisTickFormat = this._axisLabelFormatter ? this._axisLabelFormatter : this.tickFormat_exists && this.tickFormat_exists() ? this.tickFormat() : void 0;
+      this._topAxis.type("time").timePattern(this.timePattern()).overlapMode("none").low(lowDateStr).high(highDateStr);
+      this._bottomAxis.type("time").timePattern(this.timePattern()).overlapMode("none").low(lowDateStr).high(highDateStr);
+      if (axisTickFormat) {
+        this._topAxis.tickFormat(axisTickFormat);
+        this._bottomAxis.tickFormat(axisTickFormat);
+      } else {
+        this._topAxis.tickFormat_reset();
+        this._bottomAxis.tickFormat_reset();
+      }
+      this._gantt._minStart = minTimestamp;
+      this._gantt._maxEnd = maxTimestamp;
+    }
+  }
+  tooltipHTML(callback) {
+    this._tooltipHTML = callback;
+    this.tooltip().tooltipHTML(this._tooltipHTML);
+    return this;
+  }
+  parseAxisValue(v) {
+    const parsedTime = parseTime(v);
+    const formatTime = timeFormat(this.timePattern());
+    return formatTime(parsedTime);
+  }
+  onzoom(transform) {
+    const w = this.width();
+    const low = this._gantt._minStart;
+    const high = this._gantt._maxEnd;
+    const range = high - low;
+    const wpp = range / w;
+    const nextLow = Math.floor(low - wpp * (transform.x / transform.k));
+    const nextHigh = Math.ceil(range / transform.k + nextLow);
+    this._topAxis.low(this.parseAxisValue(nextLow)).high(this.parseAxisValue(nextHigh)).render();
+    this._bottomAxis.low(this.parseAxisValue(nextLow)).high(this.parseAxisValue(nextHigh)).render();
+  }
+  _tooltipHTML;
 };
+__name(_ReactTimelineSeries, "ReactTimelineSeries");
+let ReactTimelineSeries = _ReactTimelineSeries;
 ReactTimelineSeries.prototype._class += " timeline_ReactTimelineSeries";
 ReactTimelineSeries.prototype.publish("timePattern", "%Y-%m-%d", "string", "Time pattern used for parsing datetime strings on each data row", null, { optional: true });
 ReactTimelineSeries.prototype.publish("tooltipTimeFormat", "%Y-%m-%d", "string", "Time format used in the default html tooltip");
-
-//#endregion
-export { BUILD_VERSION, MiniGantt, PKG_NAME, PKG_VERSION, ReactAxisGantt, ReactAxisGanttSeries, ReactGantt, ReactTimeline, ReactTimelineSeries };
-//# sourceMappingURL=index.js.map!function(){try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".timeline_MiniGantt .line{fill:none;stroke:#d3d3d3;opacity:.7}.timeline_MiniGantt .common_TextBox .rect{fill:#87cefa;stroke:#00f;opacity:.5}.timeline_MiniGantt .buckets .entity_shape rect{stroke:#333}.timeline_MiniGantt .buckets.selected .common_EntityRect .common_Shape>rect{stroke:red}.timeline_MiniGantt .common_TextBox .rect text{fill:#000;stroke:none}.timeline_MiniGantt .over{stroke:#0000;opacity:.8}.timeline_MiniGantt rect{shape-rendering:crispEdges}\n/*$vite$:1*/")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
+export {
+  BUILD_VERSION,
+  MiniGantt,
+  PKG_NAME,
+  PKG_VERSION,
+  ReactAxisGantt,
+  ReactAxisGanttSeries,
+  ReactGantt,
+  ReactTimeline,
+  ReactTimelineSeries
+};
+//# sourceMappingURL=index.js.map
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".timeline_MiniGantt .line{fill:none;stroke:#d3d3d3;opacity:.7}.timeline_MiniGantt .common_TextBox .rect{fill:#87cefa;stroke:#00f;opacity:.5}.timeline_MiniGantt .buckets .entity_shape rect{stroke:#333}.timeline_MiniGantt .buckets.selected .common_EntityRect .common_Shape>rect{stroke:red}.timeline_MiniGantt .common_TextBox .rect text{fill:#000;stroke:none}.timeline_MiniGantt .over{stroke:transparent;opacity:.8}.timeline_MiniGantt rect{shape-rendering:crispEdges}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();