Skip to content

Commit 6c958c2

Browse files
keller-markkeller-mark
committed
Example HTML file
1 parent c188e60 commit 6c958c2

1 file changed

Lines changed: 119 additions & 0 deletions

File tree

‎example.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vitessce Example</title>
7+
<style>
8+
html, body {
9+
height: 100%;
10+
}
11+
body {
12+
margin: 0;
13+
text-align: left;
14+
display: flex;
15+
flex-direction: column;
16+
}
17+
#root {
18+
flex: 1;
19+
}
20+
#root .vitessce-container {
21+
height: max(100%,100vh);
22+
width: 100%;
23+
overflow: hidden;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<div id="root">Loading...</div>
29+
30+
<!-- Paste your Vitessce JSON configuration within the script tag below -->
31+
<script type="vitessce/json">
32+
{"version": "1.0.18", "name": "Initial Properties Example", "description": "", "datasets": [{"uid": "A", "name": "Kuppe et al 2022", "files": [{"fileType": "image.ome-zarr", "url": "https://vitessce-data.storage.googleapis.com/0.0.33/main/kuppe-2022/kuppe_2022_nature.visium.ome.zarr"}]}], "coordinationSpace": {"dataset": {"A": "A"}, "spatialZoom": {"A": -2}, "spatialTargetX": {"A": 300.0}, "spatialTargetY": {"A": 300.0}}, "layout": [{"component": "spatialBeta", "coordinationScopes": {"dataset": "A", "spatialZoom": "A", "spatialTargetX": "A", "spatialTargetY": "A"}, "x": 0, "y": 0, "w": 12, "h": 12}], "initStrategy": "auto"}
33+
</script>
34+
35+
36+
<!-- The code below loads React and Vitessce, and renders the Vitessce component using the config above -->
37+
<script type="module">
38+
let importWithMap;
39+
try {
40+
importWithMap = (await import('https://unpkg.com/dynamic-importmap@0.1.0')).importWithMap;
41+
} catch(e) {
42+
console.warn("Import of dynamic-importmap failed, trying fallback.");
43+
importWithMap = (await import('https://cdn.vitessce.io/dynamic-importmap@0.1.0/dist/index.js')).importWithMap;
44+
}
45+
46+
const jsPackageVersion = "3.9.11";
47+
48+
const successfulImportMap = {
49+
imports: {
50+
51+
},
52+
};
53+
const importMap = {
54+
imports: {
55+
"react": "https://esm.sh/react@18.2.0?dev",
56+
"react-dom": "https://esm.sh/react-dom@18.2.0?dev",
57+
"react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev",
58+
"vitessce": `https://unpkg.com/vitessce@${jsPackageVersion}`,
59+
},
60+
};
61+
const fallbackImportMap = {
62+
imports: {
63+
"react": "https://cdn.vitessce.io/react@18.2.0/index.js",
64+
"react-dom": "https://cdn.vitessce.io/react-dom@18.2.0/index.js",
65+
"react-dom/client": "https://cdn.vitessce.io/react-dom@18.2.0/es2022/client.mjs",
66+
"vitessce": `https://cdn.vitessce.io/vitessce@${jsPackageVersion}/dist/index.min.js`,
67+
},
68+
};
69+
70+
async function importWithMapAndFallback(moduleName, importMap, fallbackMap) {
71+
let result = null;
72+
if (!fallbackMap) {
73+
// fallbackMap is null, user may have provided custom JS URL.
74+
result = await importWithMap(moduleName, {
75+
imports: {
76+
...importMap.imports,
77+
...successfulImportMap.imports,
78+
},
79+
});
80+
successfulImportMap.imports[moduleName] = importMap.imports[moduleName];
81+
} else {
82+
try {
83+
result = await importWithMap(moduleName, {
84+
imports: {
85+
...importMap.imports,
86+
...successfulImportMap.imports,
87+
},
88+
});
89+
successfulImportMap.imports[moduleName] = importMap.imports[moduleName];
90+
} catch (e) {
91+
console.warn(`Importing ${moduleName} failed with importMap`, importMap, "trying fallback", fallbackMap, successfulImportMap);
92+
result = await importWithMap(moduleName, {
93+
imports: {
94+
...fallbackMap.imports,
95+
...successfulImportMap.imports,
96+
},
97+
});
98+
successfulImportMap.imports[moduleName] = fallbackMap.imports[moduleName];
99+
}
100+
}
101+
return result;
102+
}
103+
104+
const React = await importWithMapAndFallback("react", importMap, fallbackImportMap);
105+
const { createRoot } = await importWithMapAndFallback("react-dom/client", importMap, fallbackImportMap);
106+
const { Vitessce } = await importWithMapAndFallback("vitessce", importMap, fallbackImportMap);
107+
108+
const scriptElement = document.querySelector('script[type="vitessce/json"]');
109+
110+
const vitessceProps = {
111+
theme: 'light2',
112+
config: JSON.parse(scriptElement.textContent),
113+
};
114+
115+
const root = createRoot(document.getElementById('root'));
116+
root.render(React.createElement(Vitessce, vitessceProps));
117+
</script>
118+
</body>
119+
</html>

0 commit comments

Comments
 (0)