From 05381538f0ccdd3811b2c81c72f7e8ce13587ae2 Mon Sep 17 00:00:00 2001 From: gerstej9 Date: Fri, 2 Sep 2022 11:41:31 -0700 Subject: [PATCH 1/2] multiple scatterplot functionality --- src/deepscatter.ts | 27 ++++++++++++++++----------- src/interaction.ts | 4 +++- 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/src/deepscatter.ts b/src/deepscatter.ts index 9edc52b4c..d3daa3b54 100644 --- a/src/deepscatter.ts +++ b/src/deepscatter.ts @@ -43,10 +43,10 @@ export default class Scatterplot { public click_handler : ClickFunction; public tooltip_handler : TooltipHTML; - constructor(selector : string, width : number, height: number) { + constructor(selector: string, width: number, height: number, plotId: string) { this.bound = false; if (selector !== undefined) { - this.bind(selector, width, height); + this.bind(selector, width, height, plotId); } this.width = width; this.height = height; @@ -69,12 +69,15 @@ export default class Scatterplot { * @param width Width of the plot, in pixels. * @param height Height of the plot, in pixels. */ - bind(selector : string, width : number, height : number) { + bind(selector: string, width: number, height: number, plotId: string) { // Attach a plot to a particular DOM element. // Binding is a permanent relationship. Maybe shouldn't be, but is. - + this.plotId = plotId; + this.base_elements = base_elements.map((element) => { + return { ...element, id: `${element.id}-${plotId}` }; + }); this.div = select(selector) - .selectAll('div.deepscatter_container') + .selectAll(`div.deepscatter_container-${plotId}`) .data([1]) .join('div') .attr('class', 'deepscatter_container') @@ -91,15 +94,17 @@ export default class Scatterplot { this.elements = []; - for (const d of base_elements) { + for (const d of this.base_elements) { const container = this.div .append('div') .attr('id', `container-for-${d.id}`) .style('position', 'absolute') .style('top', 0) .style('left', 0) - .style('pointer-events', d.id === 'deepscatter-svg' ? 'auto' : 'none'); - + .style( + "pointer-events", + d.id === `deepscatter-svg-${plotId}` ? "auto" : "none" + ); container .append(d.nodetype) .attr('id', d.id) @@ -124,19 +129,19 @@ export default class Scatterplot { await this._root.ready; this._renderer = new ReglRenderer( - '#container-for-webgl-canvas', + `#container-for-webgl-canvas-${this.plotId}`, this._root, this, ); - this._zoom = new Zoom('#deepscatter-svg', this.prefs, this); + this._zoom = new Zoom(`#deepscatter-svg-${this.plotId}`, this.prefs, this); this._zoom.attach_tiles(this._root); this._zoom.attach_renderer('regl', this._renderer); this._zoom.initialize_zoom(); // Needs the zoom built as well. - const bkgd = select('#container-for-canvas-2d-background').select('canvas'); + const bkgd = select(`#container-for-canvas-2d-background-${this.plotId}`).select('canvas'); const ctx = bkgd.node().getContext('2d'); ctx.fillStyle = prefs.background_color || 'rgba(133, 133, 111, .8)'; diff --git a/src/interaction.ts b/src/interaction.ts index 7d73b3784..b94464384 100644 --- a/src/interaction.ts +++ b/src/interaction.ts @@ -37,6 +37,8 @@ export default class Zoom { this.height = +this.canvas.attr('height'); this.renderers = new Map(); this.scatterplot = plot; + this.plotId = plot.plotId; + // A zoom keeps track of all the renderers // that it's in charge of adjusting. @@ -183,7 +185,7 @@ export default class Zoom { this.html_annotation(annotations); - const labelSet = select('#deepscatter-svg') + const labelSet = select(`#deepscatter-svg-${this.plotId}`) .selectAll('circle.label') .data(data, (d_) => d_.ix) .join( From d076e2743ce9c8904a924fe0406f1e2c466a2651 Mon Sep 17 00:00:00 2001 From: gerstej9 Date: Fri, 2 Sep 2022 11:46:20 -0700 Subject: [PATCH 2/2] ran build --- dist/deepscatter.js | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/dist/deepscatter.js b/dist/deepscatter.js index 2dd7f0a5d..6e86f1c85 100644 --- a/dist/deepscatter.js +++ b/dist/deepscatter.js @@ -5347,6 +5347,7 @@ class Zoom { this.height = +this.canvas.attr("height"); this.renderers = /* @__PURE__ */ new Map(); this.scatterplot = plot; + this.plotId = plot.plotId; this.renderers = /* @__PURE__ */ new Map(); } attach_tiles(tiles) { @@ -5431,7 +5432,7 @@ class Zoom { ] : []; const { x_, y_ } = this.scales(); this.html_annotation(annotations); - select("#deepscatter-svg").selectAll("circle.label").data(data, (d_) => d_.ix).join( + select(`#deepscatter-svg-${this.plotId}`).selectAll("circle.label").data(data, (d_) => d_.ix).join( (enter) => enter.append("circle").attr("class", "label").attr("stroke", "#110022").attr("r", 12).attr("fill", (dd) => this.renderers.get("regl").aes.dim("color").current.apply(dd)).attr("cx", (datum2) => x_(x_aes.value_for(datum2))).attr("cy", (datum2) => y_(y_aes.value_for(datum2))), (update) => update.attr("fill", (dd) => this.renderers.get("regl").aes.dim("color").current.apply(dd)), (exit) => exit.call((e) => e.remove()) @@ -28225,10 +28226,10 @@ const base_elements = [ } ]; class Scatterplot { - constructor(selector2, width, height) { + constructor(selector2, width, height, plotId) { this.bound = false; if (selector2 !== void 0) { - this.bind(selector2, width, height); + this.bind(selector2, width, height, plotId); } this.width = width; this.height = height; @@ -28245,15 +28246,22 @@ class Scatterplot { }; this.d3 = { select }; } - bind(selector2, width, height) { - this.div = select(selector2).selectAll("div.deepscatter_container").data([1]).join("div").attr("class", "deepscatter_container").style("position", "absolute"); + bind(selector2, width, height, plotId) { + this.plotId = plotId; + this.base_elements = base_elements.map((element) => { + return { ...element, id: `${element.id}-${plotId}` }; + }); + this.div = select(selector2).selectAll(`div.deepscatter_container-${plotId}`).data([1]).join("div").attr("class", "deepscatter_container").style("position", "absolute"); if (this.div.empty()) { console.error(selector2); throw "Must pass a valid div selector"; } this.elements = []; - for (const d of base_elements) { - const container = this.div.append("div").attr("id", `container-for-${d.id}`).style("position", "absolute").style("top", 0).style("left", 0).style("pointer-events", d.id === "deepscatter-svg" ? "auto" : "none"); + for (const d of this.base_elements) { + const container = this.div.append("div").attr("id", `container-for-${d.id}`).style("position", "absolute").style("top", 0).style("left", 0).style( + "pointer-events", + d.id === `deepscatter-svg-${plotId}` ? "auto" : "none" + ); container.append(d.nodetype).attr("id", d.id).attr("width", width || window.innerWidth).attr("height", height || window.innerHeight); this.elements.push(container); } @@ -28270,15 +28278,15 @@ class Scatterplot { } await this._root.ready; this._renderer = new ReglRenderer( - "#container-for-webgl-canvas", + `#container-for-webgl-canvas-${this.plotId}`, this._root, this ); - this._zoom = new Zoom("#deepscatter-svg", this.prefs, this); + this._zoom = new Zoom(`#deepscatter-svg-${this.plotId}`, this.prefs, this); this._zoom.attach_tiles(this._root); this._zoom.attach_renderer("regl", this._renderer); this._zoom.initialize_zoom(); - const bkgd = select("#container-for-canvas-2d-background").select("canvas"); + const bkgd = select(`#container-for-canvas-2d-background-${this.plotId}`).select("canvas"); const ctx = bkgd.node().getContext("2d"); ctx.fillStyle = prefs.background_color || "rgba(133, 133, 111, .8)"; ctx.fillRect(0, 0, window.innerWidth * 2, window.innerHeight * 2);