dashboard = html`
<div id='dashboard'>
<div id="meta_dropdown", style="margin-right: 15px; border:1px; text-align:left;">${viewof transcript_radius} </div>
<div style="margin-top: 50px; flex-basis:50%; border:1px ">${container} </div>
</div>
`
select_gene
transcript_data_ini = JSON.parse(decode_zipped_string(tmp1))
// transcript_data_ini = JSON.parse(tmp1)
// tmp1 = '[{"barcode_id": 0, "position": "[4827.31, 4176.69]", "color": "[206, 109, 189]"}, {"barcode_id": 0, "position": "[4698.01, 4148.36]", "color": "[206, 109, 189]"}, {"barcode_id": 0, "position": "[4809.01, 4196.75]", "color": "[206, 109, 189]"}, {"barcode_id": 0, "position": "[4753.14, 4080.71]", "color": "[206, 109, 189]"}, {"barcode_id": 0, "position": "[4748.22, 4159.53]", "color": "[206, 109, 189]"}, {"barcode_id": 0, "position": "[4746.27, 4101.38]", "color": "[206, 109, 189]"}, {"barcode_id": 1, "position": "[4702.77, 4186.85]", "color": "[214, 97, 107]"}, {"barcode_id": 1, "position": "[4724.2, 4154.57]", "color": "[214, 97, 107]"}, {"barcode_id": 1, "position": "[4790.28, 4141.16]", "color": "[214, 97, 107]"}, {"barcode_id": 1, "position": "[4795.07, 4138.86]", "color": "[214, 97, 107]"}]'
// tmp1 = 'eJytz00KwkAMhuGrDFkPIZmfTOIlPEDpQkSkoB2pLgTx7k6rK3dSN9m88PCle8ClXofbUEfYOOiShoKRvUtcBMV68A729VSnJQcS75isHX23cXc+zGl7P04MT+++QTFFWsCkGGU9qGQf0ARLXg+WHJFTA0kJC/8BbJ+GMC/Mhjn+CvYvDilm8Q=='
tmp1 = 'eJylz80KwjAMB/BXKT2X0KRNm3nzCXyAscP8YAzUShURxHe33cmJHsRDIORPfiTtXZ/SebyM6agXqo2RwYpRwRODSGeU3qR9yjUjh0ahBKOEanDsD7sy18vtkK+oH0a9WWIh+sly4MNfFtpI4MsO+9I4nGFNUyyqYXy1Vrchf6SEoZFKMQPTjMLojJrKz89Kuaf1l7tseZIZGYL8hHVPErtkQg=='
number_of_genes = Object.keys(unzip_json).length
unzip_json = JSON.parse(decode_zipped_string(zip_string))
zip_string = 'eJyrVspLLdfNTq1UslIAM8sSc0pTlWoBZN4ILw=='
pako = require('pako/dist/pako.min.js')
container = html `<div style="height:${height}px; border-style:solid; border-color:#d3d3d3; border-width:1px"></div>`
// transcript_data = transcript_data_ini.map(x => {
// var new_obj = ({
// '': x[''],
// 'name': x.name,
// 'position': eval(x.position),
// 'color': eval(x.color)
// })
// return new_obj
// })
transcript_data = transcript_data_ini
radius = 2
radius_min_pixels = 1.5
transitionDuration = 3000
transitions = ({
getPosition: {
duration:transitionDuration,
easing: d3.easeCubic
}
})
transcript_layer = new deck.ScatterplotLayer({
id: 'transcript_layer',
data: transcript_data,
pickable: is_pickable,
getPosition: d => d.position,
// getFillColor: d => d.color,
getFillColor: d => {
var inst_color
var unselected_color = [0, 0, 0, 0]
// allow transcript color filtering
if (select_gene === 'none'){
inst_color = d.color
} else {
inst_color = unselected_color
// check gege name
if (d.name === select_gene){
inst_color = d.color
}
}
return inst_color
},
getRadius: 0.25, // transcript_radius,
radiusMinPixels: transcript_radius, radius_min_pixels,
pickable: true,
visible: visible_transcripts,
updateTriggers: {
getFillColor: select_gene,
// getRadius: transcript_radius
},
onClick: (info, event) => {
console.log(info.object.name)
if (select_gene !== info.object.name){
mutable select_gene = info.object.name
// d3.select('#meta_dropdown').select('select').node().value = info.object.name
} else {
mutable select_gene = 'none'
// d3.select('#meta_dropdown').select('select').node().value = 'leiden'
}
}
})
mutable visible_transcripts = true
select_gene
mutable select_gene = 'none'
layers = [transcript_layer]
is_pickable = true
deckgl.setProps({layers: layers});
view = new deck.OrthographicView({id: 'ortho'})
deckgl = {
return new deck.DeckGL({
container,
views:[view],
initialViewState: initial_view_state,
// controller: true,
controller: {
doubleClickZoom: false,
// rotateLeft: -90
},
// getTooltip: ({object}) => {
// return object &&
// `${object['name']}`
// // `pos: ${object.x}, ${object['y']}\n`
// },
getTooltip: ({object}) => object && {
html: `${object.name}`,
style: {
fontSize: '0.8em',
padding: '5px',
}
},
// onViewStateChange: ({viewState}) => {
// debounced_something(viewState)
// return viewState
// },
// onClick: ({info}) => {
// console.log(info)
// return info
// }
});
}
initial_view_state = ({
target: [2000, 7000, 0],
zoom: -3.5,
minZoom: -3.75,
maxZoom:10
})
height = 800
detail_zoom_thresh = 1.25
visible_transcripts
mutable fovs = []
function decode_zipped_string(b64Data){
// Get some base64 encoded binary data from the server. Imagine we got this:
// Decode base64 (convert ascii to binary)
var strData = atob(b64Data);
// Convert binary string to character-number array
var charData = strData.split('').map(function(x){return x.charCodeAt(0);});
// Turn number array into byte-array
var binData = new Uint8Array(charData);
// Pako magic
var data = pako.inflate(binData);
// // Convert gunzipped byteArray back to ascii string:
// var strData = String.fromCharCode.apply(null, new Uint16Array(data));
// https://stackoverflow.com/questions/8936984/uint8array-to-string-in-javascript
var strData = new TextDecoder().decode(data);
// Output to console
// console.log(strData);
return strData
}
Requirements
deck = require.alias({
// optional dependencies
h3: {}
})('deck.gl@latest/dist.min.js')
import {select} from '@jashkenas/inputs'
viewof transcript_radius = slider({
value: 1.0,
min: 0.05,
max: 3.0,
precision: 2,
description: "transcript size"
})
d3 = require("d3@5")
import {slider} from "@jashkenas/inputs"
deck
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
