-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathxenium_landscape.html
135 lines (108 loc) · 3.33 KB
/
xenium_landscape.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Flexbox container for landscape and matrix */
#container {
display: flex;
width: 100%;
height: 100vh; /* Full viewport height */
}
/* Landscape (left) */
#landscape {
flex: 1;
width: 50%;
height: 100%;
border-right: 1px solid #ccc;
height: 77%;
margin: auto;
overflow: hidden;
position: relative;
line-height: 10px;
margin-top: 0em;
}
/* Matrix (right) */
#matrix {
flex: 1; /* Take up equal space */
width: 50%; /* Fallback for older browsers */
height: 100%;
}
</style>
</head>
<body>
<!-- <div id="landscape" style="width: 600px; height: 500px; position: relative;"></div>
<div id="matrix" style="width: 600px; height: 500px; position: relative; margin-top: 100px"></div> -->
<!-- Flex container -->
<div id="container">
<!-- Landscape visualization -->
<div id="landscape"></div>
<!-- Matrix visualization -->
<div id="matrix"></div>
</div>
<script type="module">
import celldega from './src/celldega/static/widget.js';
console.log(celldega);
// Use the imported functions
const token = '';
const ini_x = 15500;
const ini_y = 12200;
const ini_z = 0;
const ini_zoom = -6;
const base_url = 'http://127.0.0.1:8080/notebooks/data/xenium_landscapes/Xenium_Prime_Human_Skin_FFPE_outs';
let el = document.querySelector("#landscape");
const ist_callback = () => {
console.log('custom callback for ist');
}
const landscape = await celldega.landscape_ist(
el,
{},
token,
ini_x,
ini_y,
ini_z,
ini_zoom,
base_url,
'',
0.25,
'95%',
'85%',
ist_callback
);
// console.log(landscape);
// const inst_gene = 'EEF1G'
// landscape.update_matrix_gene(inst_gene)
// load a json file from this url
const net_url = 'http://127.0.0.1:808/notebooks/data/tmp.json'
const network = await fetch(net_url)
.then(response => response.json())
.then(data => {
console.log(data);
return data;
});
// Matrix
////////////////////////////////////////////
let matrix_container = document.querySelector("#matrix");
console.log(matrix_container)
console.log(landscape)
const size = 500;
celldega.matrix_viz(
{},
matrix_container,
network,
size,
size,
landscape.update_matrix_gene,
landscape.update_matrix_col,
landscape.update_matrix_dendro_col
);
const new_view_state = {
target: [ini_x, ini_y, 0],
zoom: ini_zoom + 4
}
console.log('trying to update the view state from the html')
landscape.update_view_state(new_view_state)
</script>
</body>
</html>