-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathNetPanorama.svelte
More file actions
100 lines (85 loc) · 3.04 KB
/
NetPanorama.svelte
File metadata and controls
100 lines (85 loc) · 3.04 KB
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
<script context="module">
// netpanorama needs a div id to render the network vis into
// this generates a unique id if this Svelte component is used multiple times on the same page
// id's will not be reused and keep going up if components are mounted/destroyed repeatedly
let i = 0;
const id = function () {
let name = 'netpanorama-div-' + i;
i += 1;
return name;
};
</script>
<script>
// export let data
export let params, conditions; // provided by responsive vis component from spec
export let context, display; // provided by responsive vis component
export let checkConditions; // exported for use in responsive vis component
import { onMount, tick } from 'svelte';
import { base } from '$app/paths';
import { waitFor } from '$lib/helpers.js';
$: height = context.height;
$: width = context.width;
$: display;
$: spec = params.spec;
$: spec.x = spec.x ? spec.x : 0;
$: spec.y = spec.y ? spec.y : 0;
// suppress console logs (the library logs a lot)
// console.log = function () {};
// get unique id for div
const div = id();
// hacky way to make the sizing work
let svg, g;
$: svg && (svg.style['max-width'] = null);
$: svg && (svg.style['max-height'] = null);
$: g &&
g.setAttribute(
'transform',
'translate(0,0) scale(' +
Math.min(height / (spec.height + spec.y), width / (spec.width + spec.x)) +
')'
);
let mounted = false;
onMount(() => {
mounted = true;
});
$: if (mounted) {
NetPanoramaTemplateViewer.render(spec, {}, div);
scaleVis(spec);
}
// let viewer;
async function scaleVis(spec) {
// viewer = await NetPanoramaTemplateViewer.render(spec, {}, div);
// console.log(viewer);
// window.viewer = viewer;
// hacky way to make the sizing work
await tick(); // wait for it to render the update
waitFor((_) => document.querySelector('#' + div + ' svg.marks')).then((_) => {
svg = document.querySelector('#' + div + ' svg.marks');
g = document.querySelector('#' + div + ' svg.marks > g');
});
}
// conditions -- only based on spec, does not require anything to be rendered
$: labelHeight = spec && spec.height - spec.y;
$: nNodes = spec.data[0].values.length;
checkConditions = function (w, h) {
let s = Math.min(h / (spec.height + spec.y), w / (spec.width + spec.x));
let c = [
conditions.minWidth ? w > conditions.minWidth : true,
conditions.minAspectRatio ? w / h > conditions.minAspectRatio : true,
conditions.minAdjacencyMatrixLabelSize
? s * (labelHeight / nNodes) > conditions.minAdjacencyMatrixLabelSize
: true,
conditions.minArcDiagramLabelSize
? s * (spec.height / nNodes) > conditions.minArcDiagramLabelSize
: true
];
return c.every(Boolean);
};
</script>
<svelte:head>
<script src="{base}/netpanorama-template-viewer/bundle.js"></script>
<!-- importing via import in the script doesn't work because window is not defined at that point -->
</svelte:head>
<!-- N.B. The closing tags are necessary - making this div tag self-closing will cause errors -->
<!-- prettier-ignore -->
<div id={div} style='display: {display? 'block' : 'none'}' ></div>