UMAP-Spatial-Heatmap-Lasso Single-Cell 0.2.0 / vizgen

mutable save_lasso = false

default_name_lasso = 'region-0'

mutable saved_lasso_name = ''

lasso_scale_x = d3.scaleLinear()

.domain([0, deckgl_width])

.range([view_bounds[0], view_bounds[1]])

lasso_scale_y = d3.scaleLinear()

.domain([0, deckgl_height])

.range([view_bounds[2], view_bounds[3]])

drawn_polygon_scaled

import {colorPicker} from "@vizgen/color-picker"

color_picker

// d3.select('#container').empty()

visible_heatmap = true

{if (visible_heatmap === true){

d3.select('#heatmap_container').style('display', 'block')

} else {

d3.select('#heatmap_container').style('display', 'none')

}}

mutable delete_lasso = false

mutable clicked_lasso = null

dashboard = html`

<div>

<div style="margin-left: 0px; margin-right: -20px; border:1px; text-align:right;">${viewof map_type} </div>

<div style="margin-left: 0px; margin-right: -20px; border:1px; text-align:right;">${viewof draw_controls} </div>

<div style='display: none; ', id='Color-Picker'> ${viewof color_picker} </div>

</div>

<div id="meta_dropdown", style="margin-right: 15px; border:1px; text-align:right;">${viewof select_meta_dropdown} </div>

<div style="margin-right: 15px; border:1px; text-align:left;">${viewof cell_min_radius} </div>

</div>

${container}

</div>

${viewof state}

</div>

<div id='heatmap_container' style="margin-top:-10px; ">${viewof cgm}</div>

</div>

`

// <div style="display: flex; margin-top: 20px">

// <div style="margin-left: 15px; margin-right: -20px; border:1px; text-align:right;">${viewof map_type} </div>

// <div id="meta_dropdown", style="margin-right: 15px; border:1px; text-align:right;">${viewof select_meta_dropdown} </div>

// <div style="margin-right: 15px; border:1px; text-align:left;">${viewof cell_min_radius} </div>

// </div>

// ; position: absolute; left: 0; top: 0; border:2px;

// <div> ${viewof color_picker} </div>

drawn_polygon_scaled

// mutable saved_polygon = [] // drawn_polygon

drawn_polygon_scaled = drawn_polygon.map(x => [lasso_scale_x(x[0]), lasso_scale_y(x[1])])

python_polygon = []

deckgl_polygon = ({"coordinates":python_polygon, "name": default_name_lasso, "color":'red'})

deckgl_polygons = [deckgl_polygon]

// default_color_lasso = 'red'

viewof draw_controls = {

const element = html`

<div id="draw-controls" style="display: inline-block; user-select: none;"></div>`;

// Draw Lasso

////////////////////////////

d3.select(element)

// d3.select('#draw-controls')

.style('padding-right', '25px')

.selectAll('div')

.data(['Draw Lasso'])

.join('span')

.on('click', function(d){

// draw-lasso id: start or cancel lasso

//////////////////////////////////////////////

if (d3.select(this).text() == 'Draw Lasso'){

// do not display previous lasso

d3.select('#lasso').style('display', 'none')

// switch draw lasso button to a cancel lasso button

d3.select('#Draw-Lasso')

.text('Cancel Lasso')

.style('color', 'red')

// turn on lasso_layer

d3.select('#lasso_layer')

.style('display', 'block')

mutable drawn_polygon = []

// set to not saving lasso

mutable save_lasso = false

// reset the name of the lasso selection

d3.select('#Name-Lasso').node().value = default_name_lasso

}

else if (d3.select(this).text() == 'Cancel Lasso'){

// switch cancel-lasso button back to a draw-lasso button

d3.select('#Draw-Lasso')

.text('Draw Lasso')

.style('color', default_draw_text_color)

// turn off name lasso input

d3.select('#Name-Lasso')

.style('display', 'none')

// turn off save lasso button

d3.select('#Save-Lasso')

.style('display', 'none')

// turn off color_picker

d3.select('#Color-Picker')

.style('display', 'none')

// turn off lasso_layer

d3.select('#lasso_layer')

.style('display', 'none')

mutable drawn_polygon = []

// set to not saving lasso

mutable save_lasso = false

}

})

.style('min-width', '200px')

.style('max-width', '200px')

.style('margin-right', '10px')

.text('Draw Lasso')

.style('font-weight', '550px')

.style("font-family", "sans-serif")

.style("font-size", "16")

.style("text-anchor", "end")

.style('font-weight', 'bold')

.style('color', d => d === ini_draw_state ? 'blue': default_draw_text_color) // 808080

// .attr('id', d => d.replace(' ', '-'))

.attr('id', 'Draw-Lasso')

// Name Lasso

//////////////////////

d3.select(element)

.append('input')

.attr('value', default_name_lasso)

.style('width', '100px')

.style('height', '12px')

.style('margin-right', '10px')

.style('display', 'none')

.attr('id', 'Name-Lasso')

// d3.select(element)

// .html("<div> ${viewof color_picker} </div>")

// d3.select('#Color-Picker')

// .style(

// // Color Lasso

// //////////////////////

// d3.select(element)

// .append('input')

// .attr('value', default_color_lasso)

// .style('width', '100px')

// .style('height', '12px')

// .style('margin-right', '10px')

// .style('display', 'none')

// .attr('id', 'Color-Lasso')

// Save Lasso

////////////////////////////

d3.select(element)

.style('padding-right', '25px')

.selectAll('div')

.data(['Save Lasso'])

.join('span')

.on('click', function(d){

// Save Lasso Button

// switch back to a draw-lasso button

d3.select('#Draw-Lasso')

.text('Draw Lasso')

.style('color', default_draw_text_color)

// turn off name lasso input

d3.select('#Name-Lasso')

.style('display', 'none')

// turn off save lasso button after pressing save lasso

d3.select('#Save-Lasso')

.style('display', 'none')

// turn off lasso_layer

d3.select('#lasso_layer')

.style('display', 'none')

element.dispatchEvent(new CustomEvent("input"));

mutable save_lasso = true

// console.log('save_lasso', save_lasso)

// hack to get the save_lasso variable back to false

// setting this in Python casuses it to no longer be an

// updatable value

setTimeout(() => {

mutable save_lasso = false

// console.log('something!!!!')

}, 100);

mutable saved_lasso_name = d3.select('#Name-Lasso').node().value

// // this causes updating issues with Observable

// // update saved_poygon

// mutable saved_polygon = drawn_polygon

// turn off color_picker

d3.select('#Color-Picker')

.style('display', 'none')

})

.style('min-width', '200px')

.style('max-width', '200px')

.style('margin-right', '10px')

.text('Save Lasso')

.style('display', 'none')

.style('font-weight', '550px')

.style("font-family", "sans-serif")

.style("font-size", "16")

.style("text-anchor", "end")

.style('font-weight', 'bold')

.style('color', d => d === ini_draw_state ? 'blue': default_draw_text_color) // 808080

// .attr('id', d => d.replace(' ', '-'))

.attr('id', 'Save-Lasso')

// Delete Lasso

////////////////////////////

d3.select(element)

.style('padding-right', '25px')

.selectAll('div')

.data(['Delete Lasso'])

.join('span')

.on('click', function(d){

console.log('delete lasso')

mutable delete_lasso = true

// hack to get the save_lasso variable back to false

// setting this in Python casuses it to no longer be an

// updatable value

setTimeout(() => {

mutable delete_lasso = false

// console.log('something!!!!')

}, 100);

})

.style('min-width', '200px')

.style('max-width', '200px')

.style('margin-right', '10px')

.text('Delete Lasso')

.style('display', 'none')

.style('font-weight', '550px')

.style("font-family", "sans-serif")

.style("font-size", "16")

.style("text-anchor", "end")

.style('font-weight', 'bold')

.style('color', 'red')

.attr('id', 'Delete-Lasso')

element.value = ini_draw_state

element.dispatchEvent(new CustomEvent("input"))

return element

}

drawn_polygon

deckgl_width = 800

deckgl_height = 800

mutable inst_zoom = zoom

// initialize view_bounds

mutable view_bounds = {

var height = deckgl_height

var width = deckgl_width

var ini_zoom = Math.pow(2, zoom)

var target_x = ini_x

var target_y = ini_y

var min_x = target_x - width/(2 * ini_zoom)

var max_x = target_x + width/(2 * ini_zoom)

var min_y = target_y - height/(2 * ini_zoom)

var max_y = target_y + height/(2 * ini_zoom)

var ini_bounds = [min_x, max_x, min_y, max_y]

return ini_bounds

}

// initial_view_state = ({

// target: [ini_x, ini_y, 0],

// zoom: zoom,

// minZoom:min_zoom

// })

function something(viewState){

var height = viewState.height

var width = viewState.width

// log2 zoom for python

mutable inst_zoom = viewState.zoom

var zoom = Math.pow(2, viewState.zoom)

var target_x = viewState.target[0]

var target_y = viewState.target[1]

var min_x = target_x - width/(2*zoom)

var max_x = target_x + width/(2*zoom)

var min_y = target_y - height/(2*zoom)

var max_y = target_y + height/(2*zoom)

mutable view_bounds = [min_x, max_x, min_y, max_y]

// mutable visible_transcripts = true

// if (zoom > detail_zoom_thresh){

// } else {

// mutable view_bounds = null

// // mutable visible_transcripts = false

// // mutable fovs = []

// }

}

debounce_time = 250

debounced_something = debounce(something, debounce_time);

function debounce(func, wait, immediate) {

// 'private' variable for instance

// The returned function will be able to reference this due to closure.

// Each call to the returned function will share this common timer.

var timeout;

// Calling debounce returns a new anonymous function

return function() {

// reference the context and args for the setTimeout function

var context = this,

args = arguments;

// Should the function be called now? If immediate is true

// and not already in a timeout then the answer is: Yes

var callNow = immediate && !timeout;

// This is the basic debounce behaviour where you can call this

// function several times, but it will only execute once

// [before or after imposing a delay].

// Each time the returned function is called, the timer starts over.

clearTimeout(timeout);

// Set the new timeout

timeout = setTimeout(function() {

// Inside the timeout function, clear the timeout variable

// which will let the next execution run when in 'immediate' mode

timeout = null;

// Check if the function already ran with the immediate flag

if (!immediate) {

// Call the original function with apply

// apply lets you define the 'this' object as well as the arguments

// (both captured before setTimeout)

func.apply(context, args);

}

}, wait);

// Immediate mode and no wait timer? Execute the function..

if (callNow) func.apply(context, args);

}

mutable drawn_polygon = []

viewof state = {

const selection = d3.create("svg")

// .attr("viewBox", [0, 0, width, height])

.attr("viewBox", [0, 0, deckgl_width, deckgl_height])

.style('width', deckgl_width + 'px')

.style('height', deckgl_height + 'px');

var svg = selection.node();

var path = d3.geoPath();

var l = selection.append("path").attr("id", "lasso");

var g = selection.append("g");

selection

.append("defs")

.append("style")

.text(`

#lasso { fill-rule: evenodd; fill-opacity: 0.1; stroke-width: 1.5; stroke: #000; }

`);

function draw(polygon) {

l.datum({

type: "LineString",

coordinates: polygon

}).attr("d", path);

// svg.value = { polygon, selected };

svg.value = { polygon };

// svg.value = {};

mutable drawn_polygon = polygon

svg.dispatchEvent(new CustomEvent('input'));

}

selection.call(lasso().on("start lasso end", draw));

// // draw default lasso

// draw(default_lasso);

return svg;

}

function lasso() {

const dispatch = d3.dispatch("start", "lasso", "end");

const lasso = function(selection) {

const node = selection.node();

const polygon = [];

selection

.on("touchmove", e => e.preventDefault()) // prevent scrolling

.on("pointerdown", e => {

trackPointer(e, {

start: p => {

polygon.length = 0;

dispatch.call("start", node, polygon);

// start dispaying when lasso starts

d3.select('#lasso').style('display', 'block');

// display name lasso input

d3.select('#Name-Lasso')

.style('display', 'inline')

// turn on save lasso button

d3.select('#Save-Lasso')

.style('display', 'inline')

// .text('Save Lasso')

// turn on color_picker

d3.select('#Color-Picker')

.style('display', 'inline')

},

move: p => {

polygon.push(p.point);

dispatch.call("lasso", node, polygon);

},

end: p => {

dispatch.call("end", node, polygon);

}

});

};

lasso.on = function(type, _) {

return _ ? (dispatch.on(...arguments), lasso) : dispatch.on(...arguments);

};

return lasso;

}

// defaultLasso = [

// [366, 143],

// [351, 135],

// [337, 132],

// [318, 130],

// [294, 129],

// [268, 132],

// [247, 141],

// [227, 159],

// [209, 184],

// [197, 214],

// [192, 248],

// [192, 281],

// [201, 310],

// [219, 331],

// [263, 343],

// [315, 339],

// [370, 321],

// [393, 298]

// ]

default_lasso = []

lasso_data = {

const rngx = d3.randomNormal(width / 2, Math.min(width, height) / 3),

rngy = d3.randomNormal(height / 2, Math.min(width, height) / 3);

return Array.from({ length: 500 }, () => [rngx(), rngy()]);

}

// height = Math.min(500, width * 0.7)

import { trackPointer } from "@fil/pointer-events"

// container = {

// return html `<div id='the-container' style="height:800px; width:800px; border-style:solid; border-color:#d3d3d3; border-width:1px; position: relative;"></div>`

// }

container = html `<div id='the-container' style="height:800px; width:800px; border-style:solid; border-color:#d3d3d3; border-width:1px; position: relative;"></div>`

data_ini = obs_data['data']

// data = data_ini.map(x => x)

data = data_ini.map(x => {

var inst_obj = ({

'name': x['name'],

'leiden': x['leiden'],

'x': x['x'],

'y': x['y'],

'umap-x': x['umap-x'],

'umap-y': x['umap-y'],

'tooltip': x['leiden']

})

return inst_obj

})

// // cell_data = inputs['data'].map(x => {

// // x.tooltip_name = 'Leiden-' + x.leiden

// // return x

// // })

// cell_data = data.map(x => {

// x.tooltip_name = 'Leiden-' + x.leiden

// return x

// })

cat_name = 'leiden'

// cat_name = 'name'

mutable select_cat = 'all'

check_ini_cat = ini_cat

// radius_min_pixels = 5

cell_metadata = Object.keys(data[0]).filter(x => non_param_cols.includes(x) === false)

meta_data_cols = cell_metadata.concat(all_genes)

all_genes = Object.keys(gex_dict).sort()

mutable selected_leidens = []

zoom = 1

min_zoom = zoom - 1

cell_opacity = 0.9

// viewof cell_opacity = slider({

// value: 1.00,

// min: 0.0,

// max: 1.0,

// precision: 2,

// description: "cell opacity",

// })

ini_min_radius = 1

viewof cell_min_radius = slider({

value: ini_min_radius,

min: 0.1,

max: 5.0,

precision: 2,

description: "min cell size"

})

viewof select_meta_dropdown = select({'options':['none'].concat(meta_data_cols), value: ini_cat})

ini_draw_state = ''

default_draw_text_color = '#1e4057' //'#142b3a'

// // initialize Save Lasso button as not visible

// d3.select('#Save-Lasso')

// .style('display', 'none')

viewof map_type = {

const element = html`

<div style="display: inline-block; user-select: none;"></div>`;

d3.select(element)

.style('padding-right', '25px')

.selectAll('div')

.data(['UMAP', 'Spatial'])

.join('span')

.on('click', function(d){

d3.select(element).selectAll('span')

.style('color', '#808080')

d3.select(this)

.style('color', 'blue')

element.value = d3.select(this).attr('id'); // d//.replace(', ', '')

element.dispatchEvent(new CustomEvent("input"));

})

.style('min-width', '200px')

.style('max-width', '200px')

.style('margin-right', '10px')

.text(d => d)

.style('font-weight', '550px')

.style("font-family", "sans-serif")

.style("font-size", "16")

.style("text-anchor", "end")

.style('font-weight', 'bold')

.style('color', d => d === ini_map_type ? 'blue': '#808080')

.attr('id', d => d)

element.value = ini_map_type

element.dispatchEvent(new CustomEvent("input"))

return element

}

data

cell_layer = new deck.ScatterplotLayer({

id: 'cell_layer',

// data: cell_data,

data: data,

getPosition: apply_map_morph,

getFillColor: d => {

var inst_color = [0, 255, 0, 255]

if (select_meta === 'none'){

// default coloring

////////////////////////////////////////

inst_color = [50, 50, 50, 100]

} else if (select_meta === 'leiden') {

if (selected_leidens.length === 0){

// single leiden

///////////////////

var rgb = d3.color(cat_colors[d[select_meta]])

inst_color = [rgb.r, rgb.g, rgb.b, 255 * cat_opacity]

} else {

// multiple leidens

/////////////////////

if (selected_leidens.includes(d['leiden'])){

var rgb = d3.color(cat_colors[d[select_meta]])

inst_color = [rgb.r, rgb.g, rgb.b, 255 * cat_opacity]

} else {

inst_color = [50, 50, 50, 10]

}

} else if (select_meta === 'mean-gene') {

// mean gene expression

////////////////////////////////////////

inst_color = [0, 0, 0, 255]

} else {

// single gene expression

////////////////////////////////////////

if (all_genes.includes(select_meta)){

if (d.name in gex_dict[select_meta]){

var inst_expression = gex_dict[select_meta][d.name]

var inst_opacity = opacity_scale(inst_expression)

inst_color = [255, 0, 0, inst_opacity]

} else {

inst_color = [50, 50, 50, 2]

}

return inst_color

},

getRadius: cell_radius,

pickable: is_pickable,

highlightColor: d => [50, 50, 50],

radiusMinPixels: cell_min_radius,

opacity: cell_opacity,

updateTriggers: {

getFillColor: [select_meta, selected_leidens], // , mean_gene_data],

getPosition: map_type,

},

transitions: transitions,

onClick: (info, event) => {

console.log(info.object[cat_name])

if (mutable selected_leidens[0] !== info.object[cat_name]){

mutable select_meta = 'leiden'

mutable selected_leidens = [info.object[cat_name]]

d3.select('#meta_dropdown').select('select').node().value = 'none'

} else {

mutable select_meta = 'leiden'

mutable selected_leidens = []

d3.select('#meta_dropdown').select('select').node().value = 'leiden'

}

})

polygon_layer = new deck.PolygonLayer({

id: 'polygon_layer',

data: deckgl_polygons,

// getFillColor: [250, 0, 0, 255],

getFillColor: d => {

// var color_name = cluster_colors[d.neighborhood]

var color_name = d.color

var rgb_array = d3.color(color_name)

var rgb = [rgb_array.r, rgb_array.g, rgb_array.b]

var inst_color = rgb

console.log(inst_color)

// var inst_color

// if (select_cluster === 'none'){

// inst_color = rgb

// } else {

// inst_color = [rgb[0], rgb[1], rgb[2], unselected_opacity_255]

// // check gene name

// if (d[cat_name] === select_cluster){

// inst_color = rgb

// }

// if (selected_leidens.length === 0){

// inst_color = rgb

// } else {

// inst_color = [rgb[0], rgb[1], rgb[2], unselected_opacity_255]

// // check gene name

// if (selected_leidens.includes(d[cat_name])){

// inst_color = rgb

// }

return inst_color

},

// getLineColor: d => {

// var color_name = cluster_colors[d.neighborhood]

// var rgb_array = d3.color(color_name)

// var rgb = [rgb_array.r/2, rgb_array.g/2, rgb_array.b/2]

// return rgb

// },

// getLineWidth: d => poly_line_width,

lineWidthMinPixels: 1,

getPolygon: d => d.coordinates,

updateTriggers: {

// getFillColor: select_cluster,

getFillColor: selected_leidens,

},

stroked: false,

filled: true,

pickable: true,

// opacity: neighborhood_opacity,

onClick: (info, event) => {

if (d3.select('#Delete-Lasso').style('display') === 'none'){

d3.select('#Delete-Lasso')

.style('display', 'inline')

}

else if (d3.select('#Delete-Lasso').style('display') === 'inline'){

d3.select('#Delete-Lasso')

.style('display', 'none')

}

console.log('clicked lasso')

mutable clicked_lasso = info.object.name

// if (select_cluster !== info.object[cat_name]){

// mutable select_cluster = info.object[cat_name]

// mutable selected_leidens = [info.object[cat_name]]

// // mutable select_meta = cat_name

// // d3.select('#meta_dropdown').select('select').node().value = cat_name

// } else {

// mutable select_cluster = 'none'

// mutable selected_leidens = []

// // mutable select_meta = cat_name

// // d3.select('#meta_dropdown').select('select').node().value = cat_name

// }

}

});

d3.select('#Delete-Lasso').style('display')

layers = [polygon_layer, cell_layer]

deckgl.setProps({layers: layers});

deckgl = {

console.log('--- deckgl\n----------')

var deckgl = new deck.DeckGL({

container,

width: '800px',

height: '800px',

top: '175px',

views:[view],

initialViewState: initial_view_state,

// controller: true,

controller: {doubleClickZoom: false},

// getTooltip: ({object}) => {

// return object &&

// `${object['name']}`

// // `pos: ${object.x}, ${object['y']}\n`

// },

getTooltip: ({object}) => object && {

html: `${object.tooltip}`,

style: {

fontSize: '0.8em',

padding: '5px',

}

},

onViewStateChange: ({viewState}) => {

debounced_something(viewState)

return viewState

},

// onClick: ({info}) => {

// console.log(info)

// return info

// }

});

// // shift downwards

// console.log('wait to move down move down')

// console.log('is empty', d3.select('#the-container').empty())

// d3.select('#the-container div').style('top', '150px')

// d3.select('#the-container canvas').style('top', '150px')

return deckgl

}

gex_opacity_contrast_scale = 1

opacity_scale = d3.scaleLinear()

.domain([0, meta_max * gex_opacity_contrast_scale])

.range([0, 255])

meta_max = {

var meta_max

if (select_meta in gex_dict){

meta_max = d3.max(Object.values(gex_dict[select_meta]))

} else if (select_meta === 'mean-gene') {

// set up calculation of mean gene max

meta_max = 0

} else {

meta_max = 0

}

return meta_max

}

// row_selection = Generators.observe(notify => {

// const mousemove = () => {

// // if (cgm.params.tooltip.tooltip_type.includes('dendro')){

// if (cgm.params.tooltip.tooltip_type === 'row-dendro'){

// mutable select_meta = 'mean-gene'

// mutable dendro_selected_genes = cgm.params.dendro.selected_clust_names

// }

// viewof cgm.addEventListener("click", mousemove);

// // notify(cgm.params.dendro.selected_clust_names.map(x => x.replace('Leiden-', '')));

// return () => viewof cgm.removeEventListener("mousemove", mousemove);

// })

col_selection = Generators.observe(notify => {

const mousemove = () => {

if (cgm.params.tooltip.tooltip_type === 'col-dendro'){

mutable select_meta = 'leiden'

mutable dendro_selected_genes = []

mutable selected_leidens = cgm.params.dendro.selected_clust_names.map(x => x.replace('Leiden-', ''))

}

viewof cgm.addEventListener("click", mousemove);

notify(cgm.params.dendro.selected_clust_names.map(x => x.replace('Leiden-', '')));

return () => viewof cgm.removeEventListener("mousemove", mousemove);

})

heatmap_row = Generators.observe(notify => {

const mouse_click = () => {

// clicking gene row

//////////////////////////////

if (cgm.params.tooltip.tooltip_type === 'row-label'){

var inst_name = cgm.params.int.mouseover.row.name

mutable dendro_selected_genes = []

mutable select_meta = inst_name

d3.select('#meta_dropdown').select('select').node().value = inst_name

}

notify(cgm.params.int.mouseover.row.name)

}

viewof cgm.addEventListener("click", mouse_click);

notify(cgm.params.int.mouseover.row.name);

return () => viewof cgm.removeEventListener("mousemove", mouse_click);

})

heatmap_col = Generators.observe(notify => {

const mouse_click = () => {

// clicking cluster col

//////////////////////////////

if (cgm.params.tooltip.tooltip_type === 'col-label'){

mutable select_meta = 'leiden'

mutable dendro_selected_genes = []

mutable selected_leidens = [cgm.params.int.mouseover.col.name.replace('Leiden-', '')]

// if (mutable selected_leidens[0] !== info.object[cat_name]){

// mutable select_meta = 'leiden'

// mutable selected_leidens = [info.object[cat_name]]

// d3.select('#meta_dropdown').select('select').node().value = 'none'

// } else {

// mutable select_meta = 'leiden'

// mutable selected_leidens = []

// d3.select('#meta_dropdown').select('select').node().value = 'leiden'

// }

}

notify([cgm.params.int.mouseover.col.name])

}

viewof cgm.addEventListener("click", mouse_click);

notify([cgm.params.int.mouseover.col.name]);

return () => viewof cgm.removeEventListener("mousemove", mouse_click);

})

// d3 = require("d3@5")

// this is changing the behavior of D3 selections

// d3 = require("d3@5", "d3-selection@2.0.0-rc.2")

// d3 = require("d3@5", "d3-selection")

d3 = require('d3@5', 'd3-selection@2')

pako = require('pako/dist/pako.min.js')

import {slider, select} from '@jashkenas/inputs'

// mean_gene_data = Object.keys(mean_gene_data_ini).map(x => mean_gene_data_ini[x])

// gene_data_url = 'https://raw.githubusercontent.com/cornhundred/testing_something/master/per-gene-counts_slice-1_replicate-2/' + select_meta + '.csv'

// mean_opacity_scale = d3.scaleLinear()

// .domain([0, mean_gene_max])

// .range([0, 250])

// // the maximum opacity will happen when the value reaches 90% of the maximum

// gene_max = Math.max.apply(Math, gene_data.map(function(x) { return parseInt(x[select_meta]) })) * 0.90

// mean_gene_max = Math.max.apply(Math, mean_gene_data.map(function(x) { return parseInt(x['mean-gene']) })) * 0.90

// promised_selected_genes = Promise.all(dendro_selected_genes.map(gene => {

// const url = 'https://raw.githubusercontent.com/cornhundred/testing_something/master/per-gene-counts_slice-1_replicate-2_zip/' + String(gene) + '.csv.zip'

// const unzipped_csv = load_zip_csv(url)

// return unzipped_csv

// }))

// mean_gene_data_ini = {

// // selected dendro genes

// ///////////////////////////////

// var mean_gene_data_ini = {}

// promised_selected_genes.forEach((x, i) => {

// if (i === 0){

// // initialize gene_data after getting promised gene data (after dendrogram click)

// data.forEach((x,i) => {

// mean_gene_data_ini[i] = ({

// '': i,

// 'mean-gene': 0

// })

// }

// const gene_name = dendro_selected_genes[i]

// // var sum_gene = d3.sum(x, d => d[gene_name])

// x.forEach((cell_obj, cell_index) => {

// mean_gene_data_ini[cell_index]['mean-gene'] = mean_gene_data_ini[cell_index]['mean-gene'] + cell_obj[gene_name] // /sum_gene

// })

// return mean_gene_data_ini

// }

Purpose-built for displays of data