2c:null 2d:["$","title",null,{"children":"Mouse Brain Experiment with Cells and Transcripts | Nicolas Fernandez | Observable"}] 32:T924,calc_viewport = async ({ height, width, zoom, target }) => { const zoomFactor = Math.pow(2, zoom); const [targetX, targetY] = target; const halfWidthZoomed = width / (2 * zoomFactor); const halfHeightZoomed = height / (2 * zoomFactor); const minX = targetX - halfWidthZoomed; const maxX = targetX + halfWidthZoomed; const minY = targetY - halfHeightZoomed; const maxY = targetY + halfHeightZoomed; // Calculate visible tiles based on the viewport const tiles_in_view = visibleTiles(minX, maxX, minY, maxY, tileSize); var num_tiles_to_viz = tiles_in_view.length if (num_tiles_to_viz < max_tiles_to_view) { // console.log('visualizing', num_tiles_to_viz) const tile_urls = tiles_in_view.map(tile => { return `${ROOT_URL}mouse_brain_cell_data/real_transcript_tiles_mosaic/transcripts_tile_${tile.tileX}_${tile.tileY}.parquet`; }); var tile_tables = await fetch_all_tables(tile_urls) console.log('visualize', tile_tables.length, 'tiles') var trx_arrow_table = concatenate_arrow_tables(tile_tables) mutable trx_names_array = trx_arrow_table.getChild("name").toArray(); var trx_scatter_data = get_scatter_data(trx_arrow_table) const trx_layer_new = new deck.ScatterplotLayer({ ...trx_layer.props, // Re-use existing layer props data: trx_scatter_data, // Set new data }); console.log('about to set props with new layer') mutable layers = [tile_layer, cell_layer, trx_layer_new] // Update layers // deckgl.setProps({ // // layers: [cell_layer, trx_layer_new] // Update layers - with no tile // layers: [tile_layer, cell_layer, trx_layer_new] // Update layers // }); } else { console.log('too many tiles', num_tiles_to_viz) mutable layers = [tile_layer, cell_layer] // Update layers // deckgl.setProps({ // layers: [tile_layer, cell_layer] // Update layers // }); } }33:[] 30:{"id":"3599d0a526b29ee1","slug":null,"title":"Mouse Brain Experiment with Cells and Transcripts","thumbnail":"66b4e232296434904aed5ca15f8640508be8aecb2c5ab4fe4fab54918069e528","access_level":"unlisted","create_time":"$D2024-03-01T03:02:48.316Z","update_time":"$D2024-03-04T21:19:14.558Z","view_time":null,"first_public_time":"$D2024-03-01T03:02:48.316Z","has_unpublished_edits":null,"fork":{"id":"4a0a214ebb8f82ad","slug":"mouse-brain-experiment","title":"Mouse Brain Experiment","owner":{"id":"af71373e0c91bad2","login":"cornhundred","name":"Nicolas Fernandez"}},"stars":0,"starred":false,"owner":{"type":"team","id":"af71373e0c91bad2","login":"cornhundred","name":"Nicolas Fernandez","avatar_url":"https://avatars-next.observableusercontent.com/9888273c23a5365d2edce739b22a48aedef4de807d37f9c6b57075a5cea7c629","tier":"starter_2024"},"version":540,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"aefbf7d3f53da9ac","login":"cornhundred","name":"Nicolas Fernandez","avatar_url":"https://avatars-next.observableusercontent.com/6a0620ec8671efd62cd94e584df7ed5723764d18d66874047ef300659d254e73","tier":null}],"members":[{"type":"individual","id":"aefbf7d3f53da9ac","login":"cornhundred","name":"Nicolas Fernandez","avatar_url":"https://avatars-next.observableusercontent.com/6a0620ec8671efd62cd94e584df7ed5723764d18d66874047ef300659d254e73","tier":null,"role":"editor"},{"type":"team","id":"af71373e0c91bad2","login":"cornhundred","name":"Nicolas Fernandez","avatar_url":"https://avatars-next.observableusercontent.com/9888273c23a5365d2edce739b22a48aedef4de807d37f9c6b57075a5cea7c629","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Mouse Brain Experiment with Cells and Transcripts","cells":[{"id":0,"value":"md`# Mouse Brain Experiment with Cells and Transcripts\nData obtained from the Vizgen Mouse Brain Showcase https://vizgen.com/\n\nAdapted from this [example](https://github.com/visgl/deck.gl/blob/8.9-release/examples/website/image-tile/app.jsx)\n\n### Documentation:\n* docs: https://deck.gl/docs/api-reference/geo-layers/tile-layer\n* data: https://github.com/visgl/deck.gl-data/tree/master/website/image-tiles/moon.image/moon.image_files\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"container = html `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"// ROOT_URL = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/image-tiles/moon.image'\n\n//deck.gl-data/website/image-tiles/moon.image/\nROOT_URL = 'https://raw.githubusercontent.com/cornhundred/test_vips/main/'\n// https://github.com/cornhundred/test_vips/tree/main/brain.image_files","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"## Load Data","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":470,"value":"cell_url = ROOT_URL + 'mouse_brain_cell_data/real_cells_mosaic.parquet'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"cell_arrow_table = await get_arrow_table(cell_url)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"cell_scatter_data = get_scatter_data(cell_arrow_table)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"cell_names_array = cell_arrow_table.getChild(\"name\").toArray();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"## Deck.gl","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":335,"value":"autoHighlight = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"tile_layer = new deck.TileLayer({\n pickable: autoHighlight,\n tileSize: dimensions.tileSize,\n autoHighlight,\n highlightColor: [0, 0, 255, 25],\n minZoom: -7,\n maxZoom: 0,\n extent: [0, 0, dimensions.width, dimensions.height],\n getTileData: getTileData,\n // onViewportLoad: getMetaData,\n renderSubLayers: renderSubLayers,\n // opacity: 0.2\n }); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"mutable trx_data = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"trx_layer = new deck.ScatterplotLayer({\n id: 'trx-layer',\n data: trx_data,\n getRadius: 1,\n pickable: true,\n getColor: [255, 0, 0, 100],\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"cell_layer = new deck.ScatterplotLayer({\n id: 'cell-layer',\n data: cell_scatter_data,\n getRadius: 10.0,\n pickable: true,\n getColor: [0, 0, 255, 150],\n onClick: info => {\n console.log('click!!')\n console.log(info.index)\n console.log(cell_names_array[info.index])\n }, \n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"mutable layers = [tile_layer, cell_layer, trx_layer] \n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"deckgl.setProps({layers: layers});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"deckgl = {\n \n // This is an Observable hack: clear previously generated content\n // reference: https://observablehq.com/@tomvantilburg/deckgl-mapbox-and-3d-tiles \n container.innerHTML = '';\n \n const view = new deck.OrthographicView({id: 'ortho'})\n \n return new deck.DeckGL({\n container,\n views:[view],\n initialViewState:INITIAL_VIEW_STATE,\n controller: true,\n onViewStateChange: ({viewState}) => {\n debounced_calc_viewport(viewState)\n return viewState\n }, \n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"deckgl.setProps({getTooltip: make_tooltip});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`## Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"inst_height = 850","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"// original_url = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/image-tiles/moon.image'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"// new_url = 'https://raw.githubusercontent.com/cornhundred/deck.gl-data/master/website/image-tiles/moon.image'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"INITIAL_VIEW_STATE = ({\n target: [13000, 13000, 0],\n zoom: -6\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"max_zoom = 16","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"image_name = 'brain'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"tileSize = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"max_tiles_to_view = 32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"mutable trx_names_array = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"debounced_calc_viewport = debounce(calc_viewport, 250)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"debounce = (func, wait, immediate) => {\n let timeout;\n return (...args) => {\n const context = this;\n const later = () => {\n timeout = null;\n if (!immediate) func.apply(context, args);\n };\n const callNow = immediate && !timeout;\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n if (callNow) func.apply(context, args);\n };\n };","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"visibleTiles = (minX, maxX, minY, maxY, tileSize) => {\n const startTileX = Math.floor(minX / tileSize);\n const endTileX = Math.floor(maxX / tileSize);\n const startTileY = Math.floor(minY / tileSize);\n const endTileY = Math.floor(maxY / tileSize);\n \n const tiles = [];\n for (let x = startTileX; x <= endTileX; x++) {\n for (let y = startTileY; y <= endTileY; y++) {\n tiles.push({ tileX: x, tileY: y });\n }\n }\n return tiles;\n } ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"get_arrow_table = async (url) => {\n try {\n const response = await fetch(url);\n const arrayBuffer = await response.arrayBuffer();\n const arr = new Uint8Array(arrayBuffer);\n const arrowIPC = pq.readParquet(arr);\n const arrowTable = arrow.tableFromIPC(arrowIPC);\n \n return arrowTable\n } catch (error) {\n console.error(\"Error loading data:\", error);\n return [];\n } \n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"fetch_all_tables = async (urls) => {\n try {\n const promises = urls.map(url => get_arrow_table(url));\n const tables = await Promise.all(promises);\n return tables;\n } catch (error) {\n console.error(\"Error fetching tables:\", error);\n return [];\n }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"concatenate_arrow_tables = (tables) => {\n if (tables.length === 0) return null; // No tables to concatenate\n let baseTable = tables[0]; // Use the first table as the base\n for (let i = 1; i < tables.length; i++) { // Start from the second table\n baseTable = baseTable.concat(tables[i]); // Concatenate each table to the base table\n }\n return baseTable; // Return the concatenated result\n };","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"get_scatter_data = (arrow_table) => {\n try {\n\n const flatCoordinateArray = arrow_table.getChild(\"geometry\").getChildAt(0).data\n .map(x => x.values)\n .reduce((acc, val) => {\n const combined = new Float64Array(acc.length + val.length);\n combined.set(acc);\n combined.set(val, acc.length);\n return combined;\n }, new Float64Array(0)); \n\n const scatter_data = {\n length: arrow_table.numRows,\n attributes: {\n getPosition: { value: flatCoordinateArray, size: 2 },\n }\n };\n\n return scatter_data\n } catch (error) {\n console.error(\"Error loading data:\", error);\n return [];\n }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"make_tooltip = (info) => {\n \n // Check if there's a valid index\n if (info.index === -1 || !info.layer) return null;\n \n // Assuming `myData` is your original dataset accessible in this scope\n const dataIndex = info.index; // Index of the hovered item\n\n let inst_name\n\n if (info.layer.id === 'cell-layer'){\n inst_name = cell_names_array[info.index]\n \n } else if (info.layer.id === 'trx-layer') {\n inst_name = trx_names_array[info.index]\n }\n\n \n // Construct the tooltip content\n // Make sure to check that `dataItem` and the property you want to display exist\n return {\n // html: `

${dataIndex}

${inst_name}${inst_name} {\n\n const {x, y, z} = index;\n\n var full_url = `${ROOT_URL}/brain.image_files/${max_zoom + z}/${x}_${y}.jpeg`\n\n return loaders.load(full_url);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"renderSubLayers = props => {\n\n // console.log('renderSubLayers')\n const {\n bbox: {left, bottom, right, top}\n } = props.tile;\n const {width, height} = dimensions;\n return new deck.BitmapLayer(props, {\n data: null,\n image: props.data,\n bounds: [\n clamp(left, 0, width),\n clamp(bottom, 0, height),\n clamp(right, 0, width),\n clamp(top, 0, height)\n ]\n });\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"response = await fetch(`${ROOT_URL}/brain.image.dzi`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"xmlText = response.text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":" dziXML = new DOMParser().parseFromString(xmlText, 'text/xml')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"dimensions = {\nvar dimensions = {}\n dimensions.height = Number(dziXML.getElementsByTagName('Size')[0].attributes.Height.value),\n dimensions.width = Number(dziXML.getElementsByTagName('Size')[0].attributes.Width.value),\n dimensions.tileSize = Number(dziXML.getElementsByTagName('Image')[0].attributes.TileSize.value)\n return dimensions\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"deck = require.alias({\n // optional dependencies\n h3: {}\n})('deck.gl@latest/dist.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"// https://observablehq.com/@jamesleesaunders/calculating-vector-rotations\nmathGl = require('https://bundle.run/math.gl@2.3.3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"clamp = mathGl.clamp","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"loaders = deck && window.loaders","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"// Load the parquet-wasm library\n// readParquet = {\npq = {\n const parquetModule = await import(\n \"https://unpkg.com/parquet-wasm@0.4.0-beta.5/esm/arrow2.js\"\n );\n // Need to await the default export first to initialize the WebAssembly code\n await parquetModule.default();\n return parquetModule;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"pq","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"arrow = require(\"apache-arrow\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"