allotaxonometer-ui 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.js +1098 -493
  2. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1,505 +1,1110 @@
1
- import * as $ from "svelte/internal/server";
2
- import { scaleLinear } from "d3-scale";
3
- import { range, extent } from "d3-array";
4
- import * as d3 from "d3";
5
- import { extent as extent$1, InternSet, range as range$1, rollup, scaleLinear as scaleLinear$1, scaleBand, rgb, interpolateInferno, scaleOrdinal, max, scaleLog } from "d3";
6
- function Test($$payload, $$props) {
7
- $.push();
8
- let { message = "Hello World", data = [] } = $$props;
9
- let testData = data.length > 0 ? data : range(10).map((i) => ({
10
- x: i,
11
- y: Math.sin(i / 2) * 20 + 50,
12
- value: Math.random()
13
- }));
14
- let xScale = scaleLinear().domain(extent(testData, (d) => d.x)).range([20, 380]);
15
- let yScale = scaleLinear().domain(extent(testData, (d) => d.y)).range([180, 20]);
16
- let points = testData.map((d) => ({
17
- cx: xScale(d.x),
18
- cy: yScale(d.y),
19
- r: 4 + d.value * 6,
20
- fill: `hsl(${d.value * 360}, 70%, 50%)`
21
- }));
22
- const each_array = $.ensure_array_like(points);
23
- $$payload.out += `<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"><rect width="400" height="200" fill="#f8f9fa" stroke="#dee2e6"></rect><text x="200" y="25" text-anchor="middle" font-size="16" font-weight="bold">${$.escape(message)}</text><g class="chart"><!--[-->`;
24
- for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
25
- let point = each_array[$$index];
26
- $$payload.out += `<circle${$.attr("cx", point.cx)}${$.attr("cy", point.cy)}${$.attr("r", point.r)}${$.attr("fill", point.fill)} stroke="white" stroke-width="1"></circle>`;
27
- }
28
- $$payload.out += `<!--]--></g><line x1="20" y1="180" x2="380" y2="180" stroke="#666" stroke-width="1"></line><line x1="20" y1="20" x2="20" y2="180" stroke="#666" stroke-width="1"></line><text x="200" y="198" text-anchor="middle" font-size="12" fill="#666">X Axis</text><text x="12" y="100" text-anchor="middle" font-size="12" fill="#666" transform="rotate(-90, 12, 100)">Y Axis</text></svg>`;
29
- $.pop();
1
+ import 'svelte/internal/disclose-version';
2
+ import * as $ from 'svelte/internal/client';
3
+ import { scaleLinear } from 'd3-scale';
4
+ import { range, extent } from 'd3-array';
5
+ import * as d3 from 'd3';
6
+ import { extent as extent$1, InternSet, range as range$1, rollup, scaleLinear as scaleLinear$1, scaleBand, rgb, interpolateInferno, scaleOrdinal, max, scaleLog } from 'd3';
7
+
8
+ var root_1$8 = $.from_svg(`<circle stroke="white" stroke-width="1"></circle>`);
9
+ var root$9 = $.from_svg(`<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"><rect width="400" height="200" fill="#f8f9fa" stroke="#dee2e6"></rect><text x="200" y="25" text-anchor="middle" font-size="16" font-weight="bold"> </text><g class="chart"></g><line x1="20" y1="180" x2="380" y2="180" stroke="#666" stroke-width="1"></line><line x1="20" y1="20" x2="20" y2="180" stroke="#666" stroke-width="1"></line><text x="200" y="198" text-anchor="middle" font-size="12" fill="#666">X Axis</text><text x="12" y="100" text-anchor="middle" font-size="12" fill="#666" transform="rotate(-90, 12, 100)">Y Axis</text></svg>`);
10
+
11
+ function Test($$anchor, $$props) {
12
+ $.push($$props, true);
13
+
14
+ let message = $.prop($$props, 'message', 3, "Hello World"),
15
+ data = $.prop($$props, 'data', 19, () => []);
16
+
17
+ // If no data provided, generate some test data
18
+ let testData = data().length > 0
19
+ ? data()
20
+ : range(10).map((i) => ({
21
+ x: i,
22
+ y: Math.sin(i / 2) * 20 + 50,
23
+ value: Math.random()
24
+ }));
25
+ // Pure D3 calculations - no DOM manipulation
26
+ let xScale = scaleLinear().domain(extent(testData, (d) => d.x)).range([20, 380]);
27
+ let yScale = scaleLinear().domain(extent(testData, (d) => d.y)).range([180, 20]);
28
+
29
+ // Calculate positions
30
+ let points = testData.map((d) => ({
31
+ cx: xScale(d.x),
32
+ cy: yScale(d.y),
33
+ r: 4 + d.value * 6,
34
+ fill: `hsl(${d.value * 360}, 70%, 50%)`
35
+ }));
36
+
37
+ var svg = root$9();
38
+ var text = $.sibling($.child(svg));
39
+ var text_1 = $.child(text, true);
40
+
41
+ $.reset(text);
42
+
43
+ var g = $.sibling(text);
44
+
45
+ $.each(g, 21, () => points, $.index, ($$anchor, point) => {
46
+ var circle = root_1$8();
47
+
48
+ $.template_effect(() => {
49
+ $.set_attribute(circle, 'cx', $.get(point).cx);
50
+ $.set_attribute(circle, 'cy', $.get(point).cy);
51
+ $.set_attribute(circle, 'r', $.get(point).r);
52
+ $.set_attribute(circle, 'fill', $.get(point).fill);
53
+ });
54
+
55
+ $.append($$anchor, circle);
56
+ });
57
+
58
+ $.reset(g);
59
+ $.next(4);
60
+ $.reset(svg);
61
+ $.template_effect(() => $.set_text(text_1, message()));
62
+ $.append($$anchor, svg);
63
+ $.pop();
30
64
  }
31
- function AxisX($$payload, $$props) {
32
- $.push();
33
- let {
34
- height,
35
- scale,
36
- title
37
- } = $$props;
38
- let logFormat10 = scale.tickFormat();
39
- let xTicks = scale.ticks();
40
- const each_array = $.ensure_array_like(xTicks);
41
- $$payload.out += `<g class="axis x"${$.attr("transform", `translate(0, ${$.stringify(height)})`)}><!--[-->`;
42
- for (let index = 0, $$length = each_array.length; index < $$length; index++) {
43
- let tick = each_array[index];
44
- $$payload.out += `<g class="xtick"${$.attr("transform", `translate(${$.stringify(scale(tick))}, 0)`)}><line x1="0" x2="0" y1="0" y2="6" stroke="hsla(212, 10%, 53%, 1)"></line></g><g class="tick-text"${$.attr("transform", `translate(${$.stringify(scale(tick))}, 0) scale(-1,1) rotate(45)`)}><text font-size="10" dx="13" dy="13">${$.escape(logFormat10(tick))}</text></g>`;
45
- }
46
- $$payload.out += `<!--]--><g class="xlab svelte-1y8xk6i"${$.attr("transform", `scale(-1,1) translate(-${$.stringify(height)}, 0)`)}><text dy="45"${$.attr("x", height / 2)}>Rank r</text><text dy="63"${$.attr("x", height / 2)}>for</text><text dy="80"${$.attr("x", height / 2)}>${$.escape(title[1])}</text><text dy="60"${$.attr("x", height - 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">more →</text><text dy="75"${$.attr("x", height - 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text><text dy="60"${$.attr("x", 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">← less</text><text dy="75"${$.attr("x", 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text></g></g>`;
47
- $.pop();
65
+
66
+ var root_1$7 = $.from_svg(`<g class="xtick"><line x1="0" x2="0" y1="0" y2="6" stroke="hsla(212, 10%, 53%, 1)"></line></g><g class="tick-text"><text font-size="10" dx="13" dy="13"> </text></g>`, 1);
67
+ var root$8 = $.from_svg(`<g class="axis x"><!><g class="xlab svelte-1y8xk6i"><text dy="45">Rank r</text><text dy="63">for</text><text dy="80"> </text><text dy="60" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">more →</text><text dy="75" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text><text dy="60" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">← less</text><text dy="75" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text></g></g>`);
68
+
69
+ function AxisX($$anchor, $$props) {
70
+ $.push($$props, true);
71
+
72
+ let logFormat10 = $$props.scale.tickFormat();
73
+ let xTicks = $$props.scale.ticks();
74
+ var g = root$8();
75
+ var node = $.child(g);
76
+
77
+ $.each(node, 17, () => xTicks, $.index, ($$anchor, tick) => {
78
+ var fragment = root_1$7();
79
+ var g_1 = $.first_child(fragment);
80
+ var g_2 = $.sibling(g_1);
81
+ var text = $.child(g_2);
82
+ var text_1 = $.child(text, true);
83
+
84
+ $.reset(text);
85
+ $.reset(g_2);
86
+
87
+ $.template_effect(
88
+ ($0, $1, $2) => {
89
+ $.set_attribute(g_1, 'transform', `translate(${$0 ?? ''}, 0)`);
90
+ $.set_attribute(g_2, 'transform', `translate(${$1 ?? ''}, 0) scale(-1,1) rotate(45)`);
91
+ $.set_text(text_1, $2);
92
+ },
93
+ [
94
+ () => $$props.scale($.get(tick)),
95
+ () => $$props.scale($.get(tick)),
96
+ () => logFormat10($.get(tick))
97
+ ]
98
+ );
99
+
100
+ $.append($$anchor, fragment);
101
+ });
102
+
103
+ var g_3 = $.sibling(node);
104
+ var text_2 = $.child(g_3);
105
+ var text_3 = $.sibling(text_2);
106
+ var text_4 = $.sibling(text_3);
107
+ var text_5 = $.child(text_4, true);
108
+
109
+ $.reset(text_4);
110
+
111
+ var text_6 = $.sibling(text_4);
112
+ var text_7 = $.sibling(text_6);
113
+ var text_8 = $.sibling(text_7);
114
+
115
+ $.set_attribute(text_8, 'x', 40);
116
+
117
+ var text_9 = $.sibling(text_8);
118
+
119
+ $.set_attribute(text_9, 'x', 40);
120
+ $.reset(g_3);
121
+ $.reset(g);
122
+
123
+ $.template_effect(() => {
124
+ $.set_attribute(g, 'transform', `translate(0, ${$$props.height ?? ''})`);
125
+ $.set_attribute(g_3, 'transform', `scale(-1,1) translate(-${$$props.height ?? ''}, 0)`);
126
+ $.set_attribute(text_2, 'x', $$props.height / 2);
127
+ $.set_attribute(text_3, 'x', $$props.height / 2);
128
+ $.set_attribute(text_4, 'x', $$props.height / 2);
129
+ $.set_text(text_5, $$props.title[1]);
130
+ $.set_attribute(text_6, 'x', $$props.height - 40);
131
+ $.set_attribute(text_7, 'x', $$props.height - 40);
132
+ });
133
+
134
+ $.append($$anchor, g);
135
+ $.pop();
48
136
  }
49
- function AxisY($$payload, $$props) {
50
- $.push();
51
- let { height, scale, title } = $$props;
52
- let logFormat10 = scale.tickFormat();
53
- let yTicks = scale.ticks();
54
- const each_array = $.ensure_array_like(yTicks);
55
- $$payload.out += `<g class="axis y"${$.attr("transform", `translate(${$.stringify(height)}, 0) scale(-1, 1)`)}><!--[-->`;
56
- for (let index = 0, $$length = each_array.length; index < $$length; index++) {
57
- let tick = each_array[index];
58
- $$payload.out += `<g class="ytick"${$.attr("transform", `translate(0, ${$.stringify(scale(tick))})`)}><line x1="0" x2="-6" y1="0" y2="0" stroke="hsla(212, 10%, 53%, 1)"></line></g><g class="tick-text"${$.attr("transform", `translate(0, ${$.stringify(scale(tick))}) rotate(45)`)}><text font-size="10" dx="-23" dy="10">${$.escape(logFormat10(tick))}</text></g>`;
59
- }
60
- $$payload.out += `<!--]--><g class="ylab svelte-1y8visx" transform="rotate(90)"><text dy="45"${$.attr("x", height / 2)}>Rank r</text><text dy="63"${$.attr("x", height / 2)}>for</text><text dy="80"${$.attr("x", height / 2)}>${$.escape(title[0])}</text><text dy="60"${$.attr("x", height - 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">more →</text><text dy="75"${$.attr("x", height - 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text><text dy="60"${$.attr("x", 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">← less</text><text dy="75"${$.attr("x", 40)} fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text></g></g>`;
61
- $.pop();
137
+
138
+ var root_1$6 = $.from_svg(`<g class="ytick"><line x1="0" x2="-6" y1="0" y2="0" stroke="hsla(212, 10%, 53%, 1)"></line></g><g class="tick-text"><text font-size="10" dx="-23" dy="10"> </text></g>`, 1);
139
+ var root$7 = $.from_svg(`<g class="axis y"><!><g class="ylab svelte-1y8visx" transform="rotate(90)"><text dy="45">Rank r</text><text dy="63">for</text><text dy="80"> </text><text dy="60" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">more →</text><text dy="75" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text><text dy="60" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">← less</text><text dy="75" fill="hsla(212, 10%, 53%, 1)" opacity="0.7">frequent</text></g></g>`);
140
+
141
+ function AxisY($$anchor, $$props) {
142
+ $.push($$props, true);
143
+
144
+ let logFormat10 = $$props.scale.tickFormat();
145
+ let yTicks = $.derived(() => $$props.scale.ticks());
146
+ var g = root$7();
147
+ var node = $.child(g);
148
+
149
+ $.each(node, 17, () => $.get(yTicks), $.index, ($$anchor, tick) => {
150
+ var fragment = root_1$6();
151
+ var g_1 = $.first_child(fragment);
152
+ var g_2 = $.sibling(g_1);
153
+ var text = $.child(g_2);
154
+ var text_1 = $.child(text, true);
155
+
156
+ $.reset(text);
157
+ $.reset(g_2);
158
+
159
+ $.template_effect(
160
+ ($0, $1, $2) => {
161
+ $.set_attribute(g_1, 'transform', `translate(0, ${$0 ?? ''})`);
162
+ $.set_attribute(g_2, 'transform', `translate(0, ${$1 ?? ''}) rotate(45)`);
163
+ $.set_text(text_1, $2);
164
+ },
165
+ [
166
+ () => $$props.scale($.get(tick)),
167
+ () => $$props.scale($.get(tick)),
168
+ () => logFormat10($.get(tick))
169
+ ]
170
+ );
171
+
172
+ $.append($$anchor, fragment);
173
+ });
174
+
175
+ var g_3 = $.sibling(node);
176
+ var text_2 = $.child(g_3);
177
+ var text_3 = $.sibling(text_2);
178
+ var text_4 = $.sibling(text_3);
179
+ var text_5 = $.child(text_4, true);
180
+
181
+ $.reset(text_4);
182
+
183
+ var text_6 = $.sibling(text_4);
184
+ var text_7 = $.sibling(text_6);
185
+ var text_8 = $.sibling(text_7);
186
+
187
+ $.set_attribute(text_8, 'x', 40);
188
+
189
+ var text_9 = $.sibling(text_8);
190
+
191
+ $.set_attribute(text_9, 'x', 40);
192
+ $.reset(g_3);
193
+ $.reset(g);
194
+
195
+ $.template_effect(() => {
196
+ $.set_attribute(g, 'transform', `translate(${$$props.height ?? ''}, 0) scale(-1, 1)`);
197
+ $.set_attribute(text_2, 'x', $$props.height / 2);
198
+ $.set_attribute(text_3, 'x', $$props.height / 2);
199
+ $.set_attribute(text_4, 'x', $$props.height / 2);
200
+ $.set_text(text_5, $$props.title[0]);
201
+ $.set_attribute(text_6, 'x', $$props.height - 40);
202
+ $.set_attribute(text_7, 'x', $$props.height - 40);
203
+ });
204
+
205
+ $.append($$anchor, g);
206
+ $.pop();
62
207
  }
63
- function Grid($$payload, $$props) {
64
- $.push();
65
- let { scale, height, wxy, ncells } = $$props;
66
- let xygridLines = scale.ticks(ncells / 2);
67
- const each_array = $.ensure_array_like(xygridLines);
68
- $$payload.out += `<g class="grid"><!--[-->`;
69
- for (let index = 0, $$length = each_array.length; index < $$length; index++) {
70
- let yline = each_array[index];
71
- $$payload.out += `<g${$.attr("transform", `translate(${$.stringify(wxy(yline))}, 0)`)}><line${$.attr("y1", height)} y2="0" stroke="#d3d3d3" stroke-dasharray="3,3"${$.attr("opacity", index === 0 ? 0 : 1)}></line></g><g${$.attr("transform", `translate(0, ${$.stringify(wxy(yline))})`)}><line${$.attr("x1", height)} x2="0" stroke="#d3d3d3" stroke-dasharray="3,3"${$.attr("opacity", index === 0 ? 0 : 1)}></line></g>`;
72
- }
73
- $$payload.out += `<!--]--></g>`;
74
- $.pop();
208
+
209
+ var root_1$5 = $.from_svg(`<g><line y2="0" stroke="#d3d3d3" stroke-dasharray="3,3"></line></g><g><line x2="0" stroke="#d3d3d3" stroke-dasharray="3,3"></line></g>`, 1);
210
+ var root$6 = $.from_svg(`<g class="grid"></g>`);
211
+
212
+ function Grid($$anchor, $$props) {
213
+ $.push($$props, true);
214
+
215
+ let xygridLines = $.derived(() => $$props.scale.ticks($$props.ncells / 2));
216
+ var g = root$6();
217
+
218
+ $.each(g, 21, () => $.get(xygridLines), $.index, ($$anchor, yline, index) => {
219
+ var fragment = root_1$5();
220
+ var g_1 = $.first_child(fragment);
221
+ var line = $.child(g_1);
222
+
223
+ $.set_attribute(line, 'opacity', index === 0 ? 0 : 1);
224
+ $.reset(g_1);
225
+
226
+ var g_2 = $.sibling(g_1);
227
+ var line_1 = $.child(g_2);
228
+
229
+ $.set_attribute(line_1, 'opacity', index === 0 ? 0 : 1);
230
+ $.reset(g_2);
231
+
232
+ $.template_effect(
233
+ ($0, $1) => {
234
+ $.set_attribute(g_1, 'transform', `translate(${$0 ?? ''}, 0)`);
235
+ $.set_attribute(line, 'y1', $$props.height);
236
+ $.set_attribute(g_2, 'transform', `translate(0, ${$1 ?? ''})`);
237
+ $.set_attribute(line_1, 'x1', $$props.height);
238
+ },
239
+ [
240
+ () => $$props.wxy($.get(yline)),
241
+ () => $$props.wxy($.get(yline))
242
+ ]
243
+ );
244
+
245
+ $.append($$anchor, fragment);
246
+ });
247
+
248
+ $.reset(g);
249
+ $.append($$anchor, g);
250
+ $.pop();
75
251
  }
76
- function Contours($$payload, $$props) {
77
- $.push();
78
- let { alpha, maxlog10, rtd, DiamondInnerHeight } = $$props;
79
- function alpha_norm_type2(x1, x2, alpha2) {
80
- if (alpha2 == 0) {
81
- return Math.abs(Math.log(x1 / x2));
82
- } else if (alpha2 === Infinity) {
83
- return x1 === x2 ? 0 : Math.max(x1, x2);
84
- } else {
85
- const prefactor = (alpha2 + 1) / alpha2;
86
- const power = 1 / (alpha2 + 1);
87
- return prefactor * Math.abs(Math.pow(x1, alpha2) - Math.pow(x2, alpha2)) ** power;
88
- }
89
- }
90
- function make_grid(Ninset, tmpr1, tmpr2, alpha2, rtd2) {
91
- const deltamatrix = Array.from({ length: Ninset }, () => Array(Ninset).fill(0));
92
- for (let i = 0; i < Ninset; i++) {
93
- for (let j = 0; j < Ninset; j++) {
94
- const divElem = alpha_norm_type2(1 / tmpr1[i], 1 / tmpr2[j], alpha2);
95
- deltamatrix[i][j] = divElem / rtd2.normalization;
96
- }
97
- deltamatrix[i][i] = -1;
98
- if (i < Ninset - 1) {
99
- deltamatrix[i][i + 1] = -1;
100
- deltamatrix[i + 1][i] = -1;
101
- }
102
- }
103
- return deltamatrix;
104
- }
105
- function filter_contours(tmpcontours, Ninset, maxlog102) {
106
- const chart2val = d3.scaleLinear().domain([0, Ninset]).range([0, maxlog102]);
107
- let out = [];
108
- tmpcontours.forEach((contour) => {
109
- contour.coordinates.forEach((pair, i) => {
110
- const tmpr1 = pair[0].map((d) => d[0]);
111
- const tmpr2 = pair[0].map((d) => d[1]);
112
- const filteredPairs = [];
113
- for (let index = 0; index < tmpr1.length - 1; index++) {
114
- const x1 = chart2val(tmpr1[index]);
115
- const x2 = chart2val(tmpr2[index]);
116
- const tmpxrot = Math.abs(x2 - x1) / Math.sqrt(2);
117
- if (Math.abs(tmpxrot) >= 0.1 & x1 != maxlog102 & x2 != 0 & x1 != 0 & x2 != maxlog102) {
118
- filteredPairs.push([x1, x2]);
119
- }
120
- }
121
- if (filteredPairs.length > 0) {
122
- out.push(filteredPairs);
123
- }
124
- });
125
- });
126
- return out;
127
- }
128
- function get_contours(alpha2, maxlog102, rtd2) {
129
- const Ninset = 10 ** 3;
130
- const tmpr1 = d3.range(0, 1e3).map((d) => Math.pow(10, d / 999 * 5));
131
- const tmpr2 = d3.range(0, 1e3).map((d) => Math.pow(10, d / 999 * 5));
132
- const Ncontours = 10;
133
- const scale = d3.scaleLinear().domain([0, Ncontours + 1]).range([1, tmpr1.length]);
134
- const contour_indices = d3.range(Ncontours + 2).map((i) => Math.round(scale(i)));
135
- const grid = make_grid(Ninset, tmpr1, tmpr2, alpha2, rtd2);
136
- const indices = contour_indices.slice(1, -1);
137
- const lastRow = grid[grid.length - 1];
138
- const heights = indices.map((index) => lastRow[index]);
139
- const logTmpr = tmpr1.map(Math.log10);
140
- const contourGenerator = d3.contours().size([logTmpr.length, logTmpr.length]).thresholds(heights);
141
- const flatDeltamatrix = grid.flat();
142
- const tmpcontours = contourGenerator(flatDeltamatrix);
143
- return filter_contours(tmpcontours, Ninset, maxlog102);
144
- }
145
- let mycontours = get_contours(alpha, maxlog10, rtd);
146
- const x = d3.scaleLinear([0, maxlog10], [0, DiamondInnerHeight]);
147
- const y = d3.scaleLinear([maxlog10, 0], [DiamondInnerHeight, 0]);
148
- const pathData = d3.line().x((d, i) => x(d[0])).y((d, i) => y(d[1]));
149
- const each_array = $.ensure_array_like(mycontours);
150
- $$payload.out += `<g class="contours"><!--[-->`;
151
- for (let index = 0, $$length = each_array.length; index < $$length; index++) {
152
- let contour = each_array[index];
153
- $$payload.out += `<path fill="none" stroke="grey"${$.attr("d", pathData(contour))} stroke-width="0.9" stroke-opacity="0.9"></path>`;
154
- }
155
- $$payload.out += `<!--]--></g>`;
156
- $.pop();
252
+
253
+ var root_1$4 = $.from_svg(`<path fill="none" stroke="grey" stroke-width="0.9" stroke-opacity="0.9"></path>`);
254
+ var root$5 = $.from_svg(`<g class="contours"></g>`);
255
+
256
+ function Contours($$anchor, $$props) {
257
+ $.push($$props, true);
258
+
259
+ function alpha_norm_type2(x1, x2, alpha) {
260
+ if (alpha == 0) {
261
+ return Math.abs(Math.log(x1 / x2));
262
+ } else if (alpha === Infinity) {
263
+ return x1 === x2 ? 0 : Math.max(x1, x2);
264
+ } else {
265
+ const prefactor = (alpha + 1) / alpha;
266
+ const power = 1 / (alpha + 1);
267
+
268
+ return prefactor * Math.abs(Math.pow(x1, alpha) - Math.pow(x2, alpha)) ** power;
269
+ }
270
+ }
271
+
272
+ function make_grid(Ninset, tmpr1, tmpr2, alpha, rtd) {
273
+ const deltamatrix = Array.from({ length: Ninset }, () => Array(Ninset).fill(0));
274
+
275
+ for (let i = 0; i < Ninset; i++) {
276
+ for (let j = 0; j < Ninset; j++) {
277
+ const divElem = alpha_norm_type2(1 / tmpr1[i], 1 / tmpr2[j], alpha);
278
+
279
+ deltamatrix[i][j] = divElem / rtd.normalization;
280
+ }
281
+
282
+ deltamatrix[i][i] = -1;
283
+
284
+ if (i < Ninset - 1) {
285
+ deltamatrix[i][i + 1] = -1;
286
+ deltamatrix[i + 1][i] = -1;
287
+ }
288
+ }
289
+
290
+ return deltamatrix;
291
+ }
292
+
293
+ function filter_contours(tmpcontours, Ninset, maxlog10) {
294
+ const chart2val = d3.scaleLinear().domain([0, Ninset]).range([0, maxlog10]);
295
+ let out = [];
296
+
297
+ tmpcontours.forEach((contour) => {
298
+ contour.coordinates.forEach((pair, i) => {
299
+ const tmpr1 = pair[0].map((d) => d[0]);
300
+ const tmpr2 = pair[0].map((d) => d[1]);
301
+ const filteredPairs = [];
302
+
303
+ for (let index = 0; index < tmpr1.length - 1; index++) {
304
+ const x1 = chart2val(tmpr1[index]);
305
+ const x2 = chart2val(tmpr2[index]);
306
+ const tmpxrot = Math.abs(x2 - x1) / Math.sqrt(2);
307
+
308
+ if (Math.abs(tmpxrot) >= 0.1 & x1 != maxlog10 & x2 != 0 & x1 != 0 & x2 != maxlog10) {
309
+ filteredPairs.push([x1, x2]);
310
+ }
311
+ }
312
+
313
+ if (filteredPairs.length > 0) {
314
+ out.push(filteredPairs);
315
+ }
316
+ });
317
+ });
318
+
319
+ return out;
320
+ }
321
+
322
+ function get_contours(alpha, maxlog10, rtd) {
323
+ const Ninset = 10 ** 3;
324
+ const tmpr1 = d3.range(0, 1000).map((d) => Math.pow(10, d / 999 * 5));
325
+ const tmpr2 = d3.range(0, 1000).map((d) => Math.pow(10, d / 999 * 5));
326
+ const Ncontours = 10;
327
+ const scale = d3.scaleLinear().domain([0, Ncontours + 1]).range([1, tmpr1.length]);
328
+ const contour_indices = d3.range(Ncontours + 2).map((i) => Math.round(scale(i)));
329
+ const grid = make_grid(Ninset, tmpr1, tmpr2, alpha, rtd);
330
+ const indices = contour_indices.slice(1, -1);
331
+ const lastRow = grid[grid.length - 1];
332
+ const heights = indices.map((index) => lastRow[index]);
333
+ const logTmpr = tmpr1.map(Math.log10);
334
+ const contourGenerator = d3.contours().size([logTmpr.length, logTmpr.length]).thresholds(heights);
335
+ const flatDeltamatrix = grid.flat();
336
+ const tmpcontours = contourGenerator(flatDeltamatrix);
337
+
338
+ return filter_contours(tmpcontours, Ninset, maxlog10);
339
+ }
340
+
341
+ // Only calculate contours in browser
342
+ let mycontours = $.derived(() => get_contours($$props.alpha, $$props.maxlog10, $$props.rtd));
343
+ const x = $.derived(() => d3.scaleLinear([0, $$props.maxlog10], [0, $$props.DiamondInnerHeight]));
344
+ const y = $.derived(() => d3.scaleLinear([$$props.maxlog10, 0], [$$props.DiamondInnerHeight, 0]));
345
+ const pathData = d3.line().x((d, i) => $.get(x)(d[0])).y((d, i) => $.get(y)(d[1]));
346
+ var g = root$5();
347
+
348
+ $.each(g, 21, () => $.get(mycontours), $.index, ($$anchor, contour) => {
349
+ var path = root_1$4();
350
+
351
+ $.template_effect(($0) => $.set_attribute(path, 'd', $0), [() => pathData($.get(contour))]);
352
+ $.append($$anchor, path);
353
+ });
354
+
355
+ $.reset(g);
356
+ $.append($$anchor, g);
357
+ $.pop();
157
358
  }
158
- function Diamond($$payload, $$props) {
159
- $.push();
160
- let {
161
- diamond_count,
162
- diamond_dat,
163
- margin,
164
- DiamondInnerHeight,
165
- trueDiamondHeight,
166
- alpha,
167
- maxlog10,
168
- rtd,
169
- title
170
- } = $$props;
171
- function get_relevant_types(diamond_dat2) {
172
- const ncells2 = 60;
173
- const bin_size = 1.5;
174
- const cummulative_bin = d3.range(0, ncells2, bin_size);
175
- const relevant_types2 = [];
176
- for (let sys of ["right", "left"]) {
177
- for (let i = 1; i < cummulative_bin.length; i++) {
178
- const filtered_dat = diamond_dat2.filter((d) => d.value > 0 && d.which_sys == sys).filter((d) => d.coord_on_diag >= cummulative_bin[i - 1] && d.coord_on_diag < cummulative_bin[i]);
179
- if (filtered_dat.length > 0) {
180
- const cos_dists = filtered_dat.map((d) => d.cos_dist);
181
- const max_dist = cos_dists.reduce((a, b) => {
182
- return Math.max(a, b);
183
- });
184
- const max_dist_idx = cos_dists.indexOf(max_dist);
185
- const types = filtered_dat[max_dist_idx]["types"].split(",");
186
- const name = types[Math.floor(Math.random() * types.length)];
187
- relevant_types2.push(name);
188
- }
189
- }
190
- }
191
- return relevant_types2;
192
- }
193
- function rin(arr1, arr2) {
194
- return Array.from(arr1, (x) => {
195
- return arr2.indexOf(x) == -1 ? false : true;
196
- });
197
- }
198
- let relevant_types = get_relevant_types(diamond_dat);
199
- let max_rank_raw = d3.range(d3.max(diamond_count, (d) => d.x1));
200
- let max_rank = d3.max(diamond_dat, (d) => d.rank_L[1]);
201
- let rounded_max_rank = 10 ** Math.ceil(Math.max(Math.log10(max_rank)));
202
- let ncells = d3.max(max_rank_raw);
203
- let xyDomain = [1, rounded_max_rank];
204
- let linScale = d3.scaleLinear().domain([0, ncells - 1]).range([0, DiamondInnerHeight]);
205
- let wxy = d3.scaleBand().domain(max_rank_raw).range([0, DiamondInnerHeight]);
206
- let logScale = d3.scaleLog().domain(xyDomain).range([0, DiamondInnerHeight]).nice();
207
- let xy = d3.scaleBand().domain(max_rank_raw).range([0, trueDiamondHeight]);
208
- let color_scale = d3.scaleSequentialLog().domain([rounded_max_rank, 1]).interpolator(d3.interpolateInferno);
209
- let blue_triangle = [
210
- [DiamondInnerHeight, DiamondInnerHeight],
211
- [0, 0],
212
- [0, DiamondInnerHeight]
213
- ].join(" ");
214
- let grey_triangle = [
215
- [DiamondInnerHeight, DiamondInnerHeight],
216
- [0, 0],
217
- [DiamondInnerHeight, 0]
218
- ].join(" ");
219
- function filter_labs(d, relevant_types2) {
220
- return rin(relevant_types2, d.types.split(",")).some((x) => x === true);
221
- }
222
- const each_array = $.ensure_array_like(diamond_dat);
223
- const each_array_1 = $.ensure_array_like(diamond_dat.filter((d) => filter_labs(d, relevant_types)));
224
- $$payload.out += `<g class="diamond-chart"${$.attr("transform", `translate(360, 0) scale (-1,1) rotate(45) translate(${$.stringify(margin.inner / 2)}, ${$.stringify(margin.inner / 2)})`)}><polygon${$.attr("points", blue_triangle)} fill="#89CFF0" fill-opacity="0.2" stroke="black" stroke-width="0.5"></polygon><polygon${$.attr("points", grey_triangle)} fill="grey" fill-opacity="0.2" stroke="black" stroke-width="0.5"></polygon>`;
225
- AxisX($$payload, {
226
- height: DiamondInnerHeight,
227
- scale: logScale,
228
- title
229
- });
230
- $$payload.out += `<!---->`;
231
- AxisY($$payload, {
232
- height: DiamondInnerHeight,
233
- scale: logScale,
234
- title
235
- });
236
- $$payload.out += `<!---->`;
237
- Grid($$payload, {
238
- height: DiamondInnerHeight,
239
- wxy,
240
- ncells,
241
- scale: linScale
242
- });
243
- $$payload.out += `<!----><!--[-->`;
244
- for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
245
- let d = each_array[$$index];
246
- $$payload.out += `<rect${$.attr("x", xy(d.x1))}${$.attr("y", xy(d.y1))}${$.attr("width", xy.bandwidth())}${$.attr("height", xy.bandwidth())}${$.attr("fill", color_scale(d.value))}${$.attr("opacity", d.value === null ? 0 : 1)} stroke="black" stroke-width="0.2"></rect>`;
247
- }
248
- $$payload.out += `<!--]--><!--[-->`;
249
- for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
250
- let d = each_array_1[$$index_1];
251
- $$payload.out += `<g class="diamond-lab"${$.attr("transform", `
359
+
360
+ var root_1$3 = $.from_svg(`<rect stroke="black" stroke-width="0.2"></rect>`);
361
+ var root_2$3 = $.from_svg(`<g class="diamond-lab"><text dy="20" font-size="10"> </text></g>`);
362
+ var root$4 = $.from_svg(`<g class="diamond-chart"><polygon fill="#89CFF0" fill-opacity="0.2" stroke="black" stroke-width="0.5"></polygon><polygon fill="grey" fill-opacity="0.2" stroke="black" stroke-width="0.5"></polygon><!><!><!><!><!><!></g>`);
363
+
364
+ function Diamond($$anchor, $$props) {
365
+ $.push($$props, true);
366
+
367
+ function get_relevant_types(diamond_dat) {
368
+ const ncells = 60;
369
+ const bin_size = 1.5;
370
+ const cummulative_bin = d3.range(0, ncells, bin_size);
371
+ const relevant_types = [];
372
+
373
+ for (let sys of ["right", "left"]) {
374
+ for (let i = 1; i < cummulative_bin.length; i++) {
375
+ const filtered_dat = diamond_dat.filter((d) => d.value > 0 && d.which_sys == sys).filter((d) => d.coord_on_diag >= cummulative_bin[i - 1] && d.coord_on_diag < cummulative_bin[i]);
376
+
377
+ if (filtered_dat.length > 0) {
378
+ const cos_dists = filtered_dat.map((d) => d.cos_dist);
379
+
380
+ const max_dist = cos_dists.reduce((a, b) => {
381
+ return Math.max(a, b);
382
+ });
383
+
384
+ const max_dist_idx = cos_dists.indexOf(max_dist);
385
+ // Use a simple random selection instead of d3.shuffle during SSR
386
+ const types = filtered_dat[max_dist_idx]['types'].split(",");
387
+ const name = types[Math.floor(Math.random() * types.length)];
388
+
389
+ relevant_types.push(name);
390
+ }
391
+ }
392
+ }
393
+
394
+ return relevant_types;
395
+ }
396
+
397
+ function rin(arr1, arr2) {
398
+ return Array.from(arr1, (x) => {
399
+ return arr2.indexOf(x) == -1 ? false : true;
400
+ });
401
+ }
402
+
403
+ // Wrangling data
404
+ let relevant_types = $.derived(() => get_relevant_types($$props.diamond_dat));
405
+ // Extracting constants - all these should be SSR-safe
406
+ let max_rank_raw = $.derived(() => d3.range(d3.max($$props.diamond_count, (d) => d.x1)));
407
+ let max_rank = $.derived(() => d3.max($$props.diamond_dat, (d) => d.rank_L[1]));
408
+ let rounded_max_rank = $.derived(() => 10 ** Math.ceil(Math.max(Math.log10($.get(max_rank)))));
409
+ let ncells = $.derived(() => d3.max($.get(max_rank_raw)));
410
+ let xyDomain = $.derived(() => [1, $.get(rounded_max_rank)]);
411
+ // All the Scales! - These should be SSR-safe
412
+ let linScale = $.derived(() => d3.scaleLinear().domain([0, $.get(ncells) - 1]).range([0, $$props.DiamondInnerHeight]));
413
+ let wxy = $.derived(() => d3.scaleBand().domain($.get(max_rank_raw)).range([0, $$props.DiamondInnerHeight]));
414
+ let logScale = $.derived(() => d3.scaleLog().domain($.get(xyDomain)).range([0, $$props.DiamondInnerHeight]).nice());
415
+ let xy = $.derived(() => d3.scaleBand().domain($.get(max_rank_raw)).range([0, $$props.trueDiamondHeight]));
416
+ let color_scale = d3.scaleSequentialLog().domain([$.get(rounded_max_rank), 1]).interpolator(d3.interpolateInferno);
417
+
418
+ // Background colors
419
+ let blue_triangle = [
420
+ [
421
+ $$props.DiamondInnerHeight,
422
+ $$props.DiamondInnerHeight
423
+ ],
424
+ [0, 0],
425
+ [0, $$props.DiamondInnerHeight]
426
+ ].join(" ");
427
+
428
+ let grey_triangle = [
429
+ [
430
+ $$props.DiamondInnerHeight,
431
+ $$props.DiamondInnerHeight
432
+ ],
433
+ [0, 0],
434
+ [$$props.DiamondInnerHeight, 0]
435
+ ].join(" ");
436
+
437
+ function filter_labs(d, relevant_types) {
438
+ return rin(relevant_types, d.types.split(",")).some((x) => x === true);
439
+ }
440
+
441
+ var g = root$4();
442
+ var polygon = $.child(g);
443
+ var polygon_1 = $.sibling(polygon);
444
+ var node = $.sibling(polygon_1);
445
+
446
+ AxisX(node, {
447
+ get height() {
448
+ return $$props.DiamondInnerHeight;
449
+ },
450
+ get scale() {
451
+ return $.get(logScale);
452
+ },
453
+ get title() {
454
+ return $$props.title;
455
+ }
456
+ });
457
+
458
+ var node_1 = $.sibling(node);
459
+
460
+ AxisY(node_1, {
461
+ get height() {
462
+ return $$props.DiamondInnerHeight;
463
+ },
464
+ get scale() {
465
+ return $.get(logScale);
466
+ },
467
+ get title() {
468
+ return $$props.title;
469
+ }
470
+ });
471
+
472
+ var node_2 = $.sibling(node_1);
473
+
474
+ Grid(node_2, {
475
+ get height() {
476
+ return $$props.DiamondInnerHeight;
477
+ },
478
+ get wxy() {
479
+ return $.get(wxy);
480
+ },
481
+ get ncells() {
482
+ return $.get(ncells);
483
+ },
484
+ get scale() {
485
+ return $.get(linScale);
486
+ }
487
+ });
488
+
489
+ var node_3 = $.sibling(node_2);
490
+
491
+ $.each(node_3, 17, () => $$props.diamond_dat, $.index, ($$anchor, d) => {
492
+ var rect = root_1$3();
493
+
494
+ $.template_effect(
495
+ ($0, $1, $2, $3, $4) => {
496
+ $.set_attribute(rect, 'x', $0);
497
+ $.set_attribute(rect, 'y', $1);
498
+ $.set_attribute(rect, 'width', $2);
499
+ $.set_attribute(rect, 'height', $3);
500
+ $.set_attribute(rect, 'fill', $4);
501
+ $.set_attribute(rect, 'opacity', $.get(d).value === null ? 0 : 1.);
502
+ },
503
+ [
504
+ () => $.get(xy)($.get(d).x1),
505
+ () => $.get(xy)($.get(d).y1),
506
+ () => $.get(xy).bandwidth(),
507
+ () => $.get(xy).bandwidth(),
508
+ () => color_scale($.get(d).value)
509
+ ]
510
+ );
511
+
512
+ $.append($$anchor, rect);
513
+ });
514
+
515
+ var node_4 = $.sibling(node_3);
516
+
517
+ $.each(node_4, 17, () => $$props.diamond_dat.filter((d) => filter_labs(d, $.get(relevant_types))), $.index, ($$anchor, d) => {
518
+ var g_1 = root_2$3();
519
+ var text = $.child(g_1);
520
+ var text_1 = $.child(text, true);
521
+
522
+ $.reset(text);
523
+ $.reset(g_1);
524
+
525
+ $.template_effect(
526
+ ($0, $1, $2, $3, $4, $5) => {
527
+ $.set_attribute(g_1, 'transform', `
252
528
  scale(1,-1)
253
529
  rotate(-90)
254
- rotate(-45, ${$.stringify(xy(d.x1))}, ${$.stringify(xy(d.y1))})
255
- translate(${$.stringify(d.which_sys === "right" ? xy(Math.sqrt(d.cos_dist)) * 1.5 : -xy(Math.sqrt(d.cos_dist)) * 1.5)}, 0)
256
- `)}><text${$.attr("x", xy(d.x1))}${$.attr("y", Number.isInteger(d.coord_on_diag) ? xy(d.y1) : xy(d.y1) - 1)} dy="20" font-size="10"${$.attr("text-anchor", d.x1 - d.y1 <= 0 ? "start" : "end")}>${$.escape(d.types.split(",")[0])}</text></g>`;
257
- }
258
- $$payload.out += `<!--]-->`;
259
- Contours($$payload, { alpha, maxlog10, rtd, DiamondInnerHeight });
260
- $$payload.out += `<!----></g>`;
261
- $.pop();
530
+ rotate(-45, ${$0 ?? ''}, ${$1 ?? ''})
531
+ translate(${$2 ?? ''}, 0)
532
+ `);
533
+
534
+ $.set_attribute(text, 'x', $3);
535
+ $.set_attribute(text, 'y', $4);
536
+ $.set_attribute(text, 'text-anchor', $.get(d).x1 - $.get(d).y1 <= 0 ? "start" : "end");
537
+ $.set_text(text_1, $5);
538
+ },
539
+ [
540
+ () => $.get(xy)($.get(d).x1),
541
+ () => $.get(xy)($.get(d).y1),
542
+ () => $.get(d).which_sys === "right" ? $.get(xy)(Math.sqrt($.get(d).cos_dist)) * 1.5 : -$.get(xy)(Math.sqrt($.get(d).cos_dist)) * 1.5,
543
+ () => $.get(xy)($.get(d).x1),
544
+ () => Number.isInteger($.get(d).coord_on_diag) ? $.get(xy)($.get(d).y1) : $.get(xy)($.get(d).y1) - 1,
545
+ () => $.get(d).types.split(",")[0]
546
+ ]
547
+ );
548
+
549
+ $.append($$anchor, g_1);
550
+ });
551
+
552
+ var node_5 = $.sibling(node_4);
553
+
554
+ Contours(node_5, {
555
+ get alpha() {
556
+ return $$props.alpha;
557
+ },
558
+ get maxlog10() {
559
+ return $$props.maxlog10;
560
+ },
561
+ get rtd() {
562
+ return $$props.rtd;
563
+ },
564
+ get DiamondInnerHeight() {
565
+ return $$props.DiamondInnerHeight;
566
+ }
567
+ });
568
+
569
+ $.reset(g);
570
+
571
+ $.template_effect(() => {
572
+ $.set_attribute(g, 'transform', `translate(360, 0) scale (-1,1) rotate(45) translate(${$$props.margin.inner / 2}, ${$$props.margin.inner / 2})`);
573
+ $.set_attribute(polygon, 'points', blue_triangle);
574
+ $.set_attribute(polygon_1, 'points', grey_triangle);
575
+ });
576
+
577
+ $.append($$anchor, g);
578
+ $.pop();
262
579
  }
263
- function Wordshift($$payload, $$props) {
264
- $.push();
265
- let { barData, DashboardHeight, DashboardWidth } = $$props;
266
- let margin = { top: 80, left: 140, right: 50, bottom: 10 };
267
- let width = 640;
268
- let yPadding = 0.2;
269
- let Y = d3.map(barData, (d) => d.type);
270
- let max_shift = d3.max(barData, (d) => Math.abs(d.metric)) * 1.5;
271
- let xDomain = [-max_shift, max_shift];
272
- let yDomain = new d3.InternSet(Y);
273
- let xRange = [
274
- DashboardWidth - width + margin.left,
275
- DashboardWidth - margin.right
276
- ];
277
- let yRange = [margin.top, DashboardHeight - margin.bottom];
278
- let xScale = d3.scaleLinear().domain(xDomain).range(xRange);
279
- let yScale = d3.scaleBand(yDomain, yRange).padding(yPadding);
280
- let xTicks = xScale.ticks(width / 80);
281
- const colors = ["lightgrey", "lightblue"];
282
- const each_array = $.ensure_array_like(xTicks);
283
- const each_array_1 = $.ensure_array_like(barData);
284
- $$payload.out += `<g class="barChart-container svelte-37sv8o"><g class="axis x"${$.attr("transform", `translate(0, ${$.stringify(margin.top)})`)}><!--[-->`;
285
- for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
286
- let tick = each_array[$$index];
287
- $$payload.out += `<g class="tick"><line${$.attr("x1", xScale(tick))} y1="0"${$.attr("x2", xScale(tick))}${$.attr("y2", DashboardHeight - margin.top - margin.bottom)} stroke="hsla(212, 10%, 53%, 1)" stroke-opacity="0.2">${$.escape(tick)}</line><text${$.attr("x", xScale(tick))} y="-12" font-size="0.8em">${$.escape(tick * 100)}%</text></g>`;
288
- }
289
- $$payload.out += `<!--]--></g><!--[-->`;
290
- for (let i = 0, $$length = each_array_1.length; i < $$length; i++) {
291
- let d = each_array_1[i];
292
- $$payload.out += `<rect${$.attr("x", Math.min(xScale(0), xScale(d.metric)))}${$.attr("y", yScale(d.type))}${$.attr("fill", colors[d.metric > 0 ? colors.length - 1 : 0])}${$.attr("width", Math.abs(xScale(d.metric) - xScale(0)))}${$.attr("height", yScale.bandwidth())}></rect><text${$.attr("x", Math.min(xScale(0), xScale(d.metric)))}${$.attr("y", yScale(d.type))} dy="14" font-size="0.7em">${$.escape(d.type)}</text>`;
293
- }
294
- $$payload.out += `<!--]--></g>`;
295
- $.pop();
580
+
581
+ var root_1$2 = $.from_svg(`<g class="tick"><line y1="0" stroke="hsla(212, 10%, 53%, 1)" stroke-opacity="0.2"> </line><text y="-12" font-size="0.8em"> </text></g>`);
582
+ var root_2$2 = $.from_svg(`<rect></rect><text dy="14" font-size="0.7em"> </text>`, 1);
583
+ var root$3 = $.from_svg(`<g class="barChart-container svelte-37sv8o"><g class="axis x"></g><!></g>`);
584
+
585
+ function Wordshift($$anchor, $$props) {
586
+ $.push($$props, true);
587
+
588
+ let margin = { top: 80, left: 140, right: 50, bottom: 10 };
589
+ let width = 640;
590
+ let yPadding = 0.2;
591
+ let Y = $.derived(() => d3.map($$props.barData, (d) => d.type));
592
+ let max_shift = $.derived(() => d3.max($$props.barData, (d) => Math.abs(d.metric)) * 1.5);
593
+ let xDomain = $.derived(() => [-$.get(max_shift), $.get(max_shift)]);
594
+ let yDomain = $.derived(() => new d3.InternSet($.get(Y)));
595
+
596
+ let xRange = $.derived(() => [
597
+ $$props.DashboardWidth - width + margin.left,
598
+ $$props.DashboardWidth - margin.right
599
+ ]);
600
+
601
+ let yRange = $.derived(() => [
602
+ margin.top,
603
+ $$props.DashboardHeight - margin.bottom
604
+ ]);
605
+
606
+ let xScale = $.derived(() => d3.scaleLinear().domain($.get(xDomain)).range($.get(xRange)));
607
+ let yScale = $.derived(() => d3.scaleBand($.get(yDomain), $.get(yRange)).padding(yPadding));
608
+ let xTicks = $.derived(() => $.get(xScale).ticks(width / 80));
609
+ const colors = ["lightgrey", "lightblue"];
610
+ var g = root$3();
611
+ var g_1 = $.child(g);
612
+
613
+ $.each(g_1, 21, () => $.get(xTicks), $.index, ($$anchor, tick) => {
614
+ var g_2 = root_1$2();
615
+ var line = $.child(g_2);
616
+ var text = $.child(line, true);
617
+
618
+ $.reset(line);
619
+
620
+ var text_1 = $.sibling(line);
621
+ var text_2 = $.child(text_1);
622
+
623
+ $.reset(text_1);
624
+ $.reset(g_2);
625
+
626
+ $.template_effect(
627
+ ($0, $1, $2) => {
628
+ $.set_attribute(line, 'x1', $0);
629
+ $.set_attribute(line, 'x2', $1);
630
+ $.set_attribute(line, 'y2', $$props.DashboardHeight - margin.top - margin.bottom);
631
+ $.set_text(text, $.get(tick));
632
+ $.set_attribute(text_1, 'x', $2);
633
+ $.set_text(text_2, `${$.get(tick) * 100}%`);
634
+ },
635
+ [
636
+ () => $.get(xScale)($.get(tick)),
637
+ () => $.get(xScale)($.get(tick)),
638
+ () => $.get(xScale)($.get(tick))
639
+ ]
640
+ );
641
+
642
+ $.append($$anchor, g_2);
643
+ });
644
+
645
+ $.reset(g_1);
646
+
647
+ var node = $.sibling(g_1);
648
+
649
+ $.each(node, 17, () => $$props.barData, $.index, ($$anchor, d) => {
650
+ var fragment = root_2$2();
651
+ var rect = $.first_child(fragment);
652
+ var text_3 = $.sibling(rect);
653
+ var text_4 = $.child(text_3, true);
654
+
655
+ $.reset(text_3);
656
+
657
+ $.template_effect(
658
+ ($0, $1, $2, $3, $4, $5) => {
659
+ $.set_attribute(rect, 'x', $0);
660
+ $.set_attribute(rect, 'y', $1);
661
+ $.set_attribute(rect, 'fill', colors[$.get(d).metric > 0 ? colors.length - 1 : 0]);
662
+ $.set_attribute(rect, 'width', $2);
663
+ $.set_attribute(rect, 'height', $3);
664
+ $.set_attribute(text_3, 'x', $4);
665
+ $.set_attribute(text_3, 'y', $5);
666
+ $.set_text(text_4, $.get(d).type);
667
+ },
668
+ [
669
+ () => Math.min($.get(xScale)(0), $.get(xScale)($.get(d).metric)),
670
+ () => $.get(yScale)($.get(d).type),
671
+ () => Math.abs($.get(xScale)($.get(d).metric) - $.get(xScale)(0)),
672
+ () => $.get(yScale).bandwidth(),
673
+ () => Math.min($.get(xScale)(0), $.get(xScale)($.get(d).metric)),
674
+ () => $.get(yScale)($.get(d).type)
675
+ ]
676
+ );
677
+
678
+ $.append($$anchor, fragment);
679
+ });
680
+
681
+ $.reset(g);
682
+ $.template_effect(() => $.set_attribute(g_1, 'transform', `translate(0, ${margin.top})`));
683
+ $.append($$anchor, g);
684
+ $.pop();
296
685
  }
297
- function DivergingBarChart($$payload, $$props) {
298
- $.push();
299
- let {
300
- test_elem_1,
301
- test_elem_2,
302
- DiamondHeight,
303
- DiamondWidth
304
- } = $$props;
305
- const setdiff = (x, y) => {
306
- let a = new Set(x);
307
- let b = new Set(y);
308
- return new Set([...a].filter((x2) => !b.has(x2)));
309
- };
310
- const union = (x, y) => {
311
- let a = new Set(x);
312
- let b = new Set(y);
313
- return /* @__PURE__ */ new Set([...a, ...b]);
314
- };
315
- let types_1 = test_elem_1.map((d) => d.types);
316
- let types_2 = test_elem_2.map((d) => d.types);
317
- let union_types = union(types_1, types_2);
318
- let tot_types = types_1.length + types_2.length;
319
- let width = 200;
320
- let margin = { right: 40, top: 30, left: 40, bottom: 10 };
321
- let yPadding = 0.5;
322
- let colors = ["lightgrey", "lightblue"];
323
- let dat = [
324
- {
325
- y_coord: "total count",
326
- frequency: +(types_2.length / tot_types).toFixed(3)
327
- },
328
- {
329
- y_coord: "total count",
330
- frequency: -(types_1.length / tot_types).toFixed(3)
331
- },
332
- {
333
- y_coord: "all names",
334
- frequency: +(types_2.length / union_types.size).toFixed(3)
335
- },
336
- {
337
- y_coord: "all names",
338
- frequency: -(types_1.length / union_types.size).toFixed(3)
339
- },
340
- {
341
- y_coord: "exclusive names",
342
- frequency: +(setdiff(types_2, types_1).size / types_2.length).toFixed(3)
343
- },
344
- {
345
- y_coord: "exclusive names",
346
- frequency: -(setdiff(types_1, types_2).size / types_1.length).toFixed(3)
347
- }
348
- ];
349
- let X = dat.map((d) => d.frequency);
350
- let Y = dat.map((d) => d.y_coord);
351
- let xRange = [margin.left, width - margin.right];
352
- let xDomain = extent$1(X);
353
- let yDomain = new InternSet(Y);
354
- let height = Math.ceil((yDomain.size + yPadding) * 25) + margin.top + margin.bottom;
355
- let I = range$1(X.length).filter((i) => yDomain.has(Y[i]));
356
- rollup(I, ([i]) => X[i], (i) => Y[i]);
357
- let xScale = scaleLinear$1(xDomain, xRange);
358
- let yScale = scaleBand().domain(yDomain).range([margin.top, height - margin.bottom]).padding(yPadding);
359
- let format = xScale.tickFormat(100, "%");
360
- const each_array = $.ensure_array_like(dat);
361
- const each_array_1 = $.ensure_array_like(yScale.domain());
362
- $$payload.out += `<g class="balance-chart"${$.attr("transform", `translate(${$.stringify(DiamondWidth - 75)}, ${$.stringify(DiamondHeight + 75)})`)}><!--[-->`;
363
- for (let i = 0, $$length = each_array.length; i < $$length; i++) {
364
- let d = each_array[i];
365
- $$payload.out += `<rect${$.attr("x", Math.min(xScale(0), xScale(d.frequency)))}${$.attr("y", yScale(d.y_coord))}${$.attr("fill", colors[X[i] > 0 ? colors.length - 1 : 0])}${$.attr("width", Math.abs(xScale(d.frequency) - xScale(0)))}${$.attr("height", yScale.bandwidth())}></rect><text${$.attr("x", xScale(X[i]) + Math.sign(X[i] - 0) * 4)}${$.attr("y", yScale(Y[i]) + yScale.bandwidth() / 2)} opacity="0.5" dy="0.35em" font-size="10"${$.attr("text-anchor", d.frequency < 0 ? "end" : "start")}>${$.escape(format(Math.abs(d.frequency)))}</text>`;
366
- }
367
- $$payload.out += `<!--]--><!--[-->`;
368
- for (let i = 0, $$length = each_array_1.length; i < $$length; i++) {
369
- let text = each_array_1[i];
370
- $$payload.out += `<g class="diverging-ticks"><text${$.attr("x", xScale(0))}${$.attr("y", yScale(text) + yScale.bandwidth() / 2)} dy="-.9em" dx="-3em" font-size="10">${$.escape(text)}</text></g>`;
371
- }
372
- $$payload.out += `<!--]--></g>`;
373
- $.pop();
686
+
687
+ var root_1$1 = $.from_svg(`<rect></rect><text opacity="0.5" dy="0.35em" font-size="10"> </text>`, 1);
688
+ var root_2$1 = $.from_svg(`<g class="diverging-ticks"><text dy="-.9em" dx="-3em" font-size="10"> </text></g>`);
689
+ var root$2 = $.from_svg(`<g class="balance-chart"><!><!></g>`);
690
+
691
+ function DivergingBarChart($$anchor, $$props) {
692
+ $.push($$props, true);
693
+
694
+ const setdiff = (x, y) => {
695
+ let a = new Set(x);
696
+ let b = new Set(y);
697
+
698
+ return new Set([...a].filter((x) => !b.has(x)));
699
+ };
700
+
701
+ const union = (x, y) => {
702
+ let a = new Set(x);
703
+ let b = new Set(y);
704
+
705
+ return new Set([...a, ...b]);
706
+ };
707
+
708
+ let types_1 = $.derived(() => $$props.test_elem_1.map((d) => d.types));
709
+ let types_2 = $.derived(() => $$props.test_elem_2.map((d) => d.types));
710
+ let union_types = $.derived(() => union($.get(types_1), $.get(types_2)));
711
+ let tot_types = $.derived(() => $.get(types_1).length + $.get(types_2).length);
712
+ let width = 200;
713
+ let margin = { right: 40, top: 30, left: 40, bottom: 10 };
714
+ let yPadding = 0.5;
715
+ let colors = ["lightgrey", "lightblue"];
716
+
717
+ let dat = $.proxy([
718
+ {
719
+ y_coord: "total count",
720
+ frequency: +($.get(types_2).length / $.get(tot_types)).toFixed(3)
721
+ },
722
+ {
723
+ y_coord: "total count",
724
+ frequency: -($.get(types_1).length / $.get(tot_types)).toFixed(3)
725
+ },
726
+ {
727
+ y_coord: "all names",
728
+ frequency: +($.get(types_2).length / $.get(union_types).size).toFixed(3)
729
+ },
730
+ {
731
+ y_coord: "all names",
732
+ frequency: -($.get(types_1).length / $.get(union_types).size).toFixed(3)
733
+ },
734
+ {
735
+ y_coord: "exclusive names",
736
+ frequency: +(setdiff($.get(types_2), $.get(types_1)).size / $.get(types_2).length).toFixed(3)
737
+ },
738
+ {
739
+ y_coord: "exclusive names",
740
+ frequency: -(setdiff($.get(types_1), $.get(types_2)).size / $.get(types_1).length).toFixed(3)
741
+ }
742
+ ]);
743
+
744
+ let X = $.derived(() => dat.map((d) => d.frequency));
745
+ let Y = $.derived(() => dat.map((d) => d.y_coord));
746
+ let xRange = $.derived(() => [margin.left, width - margin.right]);
747
+ let xDomain = $.derived(() => extent$1($.get(X)));
748
+ let yDomain = $.derived(() => new InternSet($.get(Y)));
749
+ let height = $.derived(() => Math.ceil(($.get(yDomain).size + yPadding) * 25) + margin.top + margin.bottom);
750
+ let I = $.derived(() => range$1($.get(X).length).filter((i) => $.get(yDomain).has($.get(Y)[i])));
751
+ $.derived(() => rollup($.get(I), ([i]) => $.get(X)[i], (i) => $.get(Y)[i]));
752
+ let xScale = $.derived(() => scaleLinear$1($.get(xDomain), $.get(xRange)));
753
+ let yScale = $.derived(() => scaleBand().domain($.get(yDomain)).range([margin.top, $.get(height) - margin.bottom]).padding(yPadding));
754
+ let format = $.derived(() => $.get(xScale).tickFormat(100, "%"));
755
+ var g = root$2();
756
+ var node = $.child(g);
757
+
758
+ $.each(node, 17, () => dat, $.index, ($$anchor, d, i) => {
759
+ var fragment = root_1$1();
760
+ var rect = $.first_child(fragment);
761
+ var text_1 = $.sibling(rect);
762
+ var text_2 = $.child(text_1, true);
763
+
764
+ $.reset(text_1);
765
+
766
+ $.template_effect(
767
+ ($0, $1, $2, $3, $4, $5, $6) => {
768
+ $.set_attribute(rect, 'x', $0);
769
+ $.set_attribute(rect, 'y', $1);
770
+ $.set_attribute(rect, 'fill', colors[$.get(X)[i] > 0 ? colors.length - 1 : 0]);
771
+ $.set_attribute(rect, 'width', $2);
772
+ $.set_attribute(rect, 'height', $3);
773
+ $.set_attribute(text_1, 'x', $4);
774
+ $.set_attribute(text_1, 'y', $5);
775
+ $.set_attribute(text_1, 'text-anchor', $.get(d).frequency < 0 ? "end" : "start");
776
+ $.set_text(text_2, $6);
777
+ },
778
+ [
779
+ () => Math.min($.get(xScale)(0), $.get(xScale)($.get(d).frequency)),
780
+ () => $.get(yScale)($.get(d).y_coord),
781
+ () => Math.abs($.get(xScale)($.get(d).frequency) - $.get(xScale)(0)),
782
+ () => $.get(yScale).bandwidth(),
783
+ () => $.get(xScale)($.get(X)[i]) + Math.sign($.get(X)[i] - 0) * 4,
784
+ () => $.get(yScale)($.get(Y)[i]) + $.get(yScale).bandwidth() / 2,
785
+ () => $.get(format)(Math.abs($.get(d).frequency))
786
+ ]
787
+ );
788
+
789
+ $.append($$anchor, fragment);
790
+ });
791
+
792
+ var node_1 = $.sibling(node);
793
+
794
+ $.each(node_1, 17, () => $.get(yScale).domain(), $.index, ($$anchor, text) => {
795
+ var g_1 = root_2$1();
796
+ var text_3 = $.child(g_1);
797
+ var text_4 = $.child(text_3, true);
798
+
799
+ $.reset(text_3);
800
+ $.reset(g_1);
801
+
802
+ $.template_effect(
803
+ ($0, $1) => {
804
+ $.set_attribute(text_3, 'x', $0);
805
+ $.set_attribute(text_3, 'y', $1);
806
+ $.set_text(text_4, $.get(text));
807
+ },
808
+ [
809
+ () => $.get(xScale)(0),
810
+ () => $.get(yScale)($.get(text)) + $.get(yScale).bandwidth() / 2
811
+ ]
812
+ );
813
+
814
+ $.append($$anchor, g_1);
815
+ });
816
+
817
+ $.reset(g);
818
+ $.template_effect(() => $.set_attribute(g, 'transform', `translate(${$$props.DiamondWidth - 75}, ${$$props.DiamondHeight + 75})`));
819
+ $.append($$anchor, g);
820
+ $.pop();
374
821
  }
375
- function Legend($$payload, $$props) {
376
- $.push();
377
- let { diamond_dat, DiamondHeight } = $$props;
378
- const N_CATEGO = 20;
379
- const myramp = range$1(N_CATEGO).map((i) => rgb(interpolateInferno(i / (N_CATEGO - 1))).hex());
380
- const color = scaleOrdinal(range$1(N_CATEGO), myramp);
381
- let height = 370;
382
- const margin = { right: 40, top: 65, left: 10 };
383
- let innerHeight = height - margin.top - margin.right;
384
- let max_rank = max(diamond_dat, (d) => d.rank_L[1]);
385
- let y = scaleBand().domain(color.domain().reverse()).rangeRound([0, innerHeight]);
386
- let logY = scaleLog().domain([
387
- 1,
388
- 10 ** Math.ceil(Math.max(Math.log10(max_rank)) - 1)
389
- ]).rangeRound([0, innerHeight]).nice();
390
- let logFormat10 = logY.tickFormat();
391
- let yTicks = logY.ticks();
392
- const each_array = $.ensure_array_like(color.domain());
393
- const each_array_1 = $.ensure_array_like(yTicks);
394
- $$payload.out += `<g class="legend-container"${$.attr("transform", `translate(${$.stringify(margin.left)}, ${$.stringify(DiamondHeight - margin.top)})`)}><!--[-->`;
395
- for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
396
- let d = each_array[$$index];
397
- $$payload.out += `<rect${$.attr("x", 0)}${$.attr("y", y(d))}${$.attr("width", 14)}${$.attr("height", 13)}${$.attr("fill", color(d))} stroke="whitesmoke" stroke-width="1"></rect>`;
398
- }
399
- $$payload.out += `<!--]--></g><!--[-->`;
400
- for (let i = 0, $$length = each_array_1.length; i < $$length; i++) {
401
- let tick = each_array_1[i];
402
- $$payload.out += `<g class="legend-text"${$.attr("transform", `translate(${$.stringify(margin.left)}, ${$.stringify(DiamondHeight + logY(tick) - margin.top)})`)}><text font-size="10"${$.attr("dy", yTicks.length - 1 == i ? "-3" : "13")} dx="20">${$.escape(logFormat10(tick))}</text></g>`;
403
- if (i === yTicks.length - 1) {
404
- $$payload.out += "<!--[-->";
405
- $$payload.out += `<g class="legend-title"${$.attr("transform", `translate(${$.stringify(margin.left)}, ${$.stringify(DiamondHeight + logY(tick) - margin.top)})`)}><text font-size="13" dy="9">Counts per cell</text></g>`;
406
- } else {
407
- $$payload.out += "<!--[!-->";
408
- }
409
- $$payload.out += `<!--]-->`;
410
- }
411
- $$payload.out += `<!--]-->`;
412
- $.pop();
822
+
823
+ var root_1 = $.from_svg(`<rect stroke="whitesmoke" stroke-width="1"></rect>`);
824
+ var root_3 = $.from_svg(`<g class="legend-title"><text font-size="13">Counts per cell</text></g>`);
825
+ var root_2 = $.from_svg(`<g class="legend-text"><text font-size="10" dx="20"> </text></g><!>`, 1);
826
+ var root$1 = $.from_svg(`<g class="legend-container"></g><!>`, 1);
827
+
828
+ function Legend($$anchor, $$props) {
829
+ $.push($$props, true);
830
+
831
+ const N_CATEGO = 20;
832
+ const myramp = range$1(N_CATEGO).map((i) => rgb(interpolateInferno(i / (N_CATEGO - 1))).hex());
833
+ const color = scaleOrdinal(range$1(N_CATEGO), myramp);
834
+ let height = 370;
835
+ const margin = { right: 40, top: 65, left: 10 };
836
+ let innerHeight = $.derived(() => height - margin.top - margin.right);
837
+ let max_rank = $.derived(() => max($$props.diamond_dat, (d) => d.rank_L[1]));
838
+ let y = $.derived(() => scaleBand().domain(color.domain().reverse()).rangeRound([0, $.get(innerHeight)]));
839
+
840
+ let logY = $.derived(() => scaleLog().domain([
841
+ 1,
842
+ 10 ** Math.ceil(Math.max(Math.log10($.get(max_rank))) - 1)
843
+ ]).rangeRound([0, $.get(innerHeight)]).nice());
844
+
845
+ let logFormat10 = $.derived(() => $.get(logY).tickFormat());
846
+ let yTicks = $.derived(() => $.get(logY).ticks());
847
+ var fragment = root$1();
848
+ var g = $.first_child(fragment);
849
+
850
+ $.each(g, 21, () => color.domain(), $.index, ($$anchor, d) => {
851
+ var rect = root_1();
852
+
853
+ $.set_attribute(rect, 'x', 0);
854
+ $.set_attribute(rect, 'width', 14);
855
+ $.set_attribute(rect, 'height', 13);
856
+
857
+ $.template_effect(
858
+ ($0, $1) => {
859
+ $.set_attribute(rect, 'y', $0);
860
+ $.set_attribute(rect, 'fill', $1);
861
+ },
862
+ [
863
+ () => $.get(y)($.get(d)),
864
+ () => color($.get(d))
865
+ ]
866
+ );
867
+
868
+ $.append($$anchor, rect);
869
+ });
870
+
871
+ $.reset(g);
872
+
873
+ var node = $.sibling(g);
874
+
875
+ $.each(node, 17, () => $.get(yTicks), $.index, ($$anchor, tick, i) => {
876
+ var fragment_1 = root_2();
877
+ var g_1 = $.first_child(fragment_1);
878
+ var text = $.child(g_1);
879
+ var text_1 = $.child(text, true);
880
+
881
+ $.reset(text);
882
+ $.reset(g_1);
883
+
884
+ var node_1 = $.sibling(g_1);
885
+
886
+ {
887
+ var consequent = ($$anchor) => {
888
+ var g_2 = root_3();
889
+ var text_2 = $.child(g_2);
890
+
891
+ $.set_attribute(text_2, 'dy', "9");
892
+ $.reset(g_2);
893
+
894
+ $.template_effect(($0) => $.set_attribute(g_2, 'transform', `translate(${margin.left}, ${$0 ?? ''})`), [
895
+ () => $$props.DiamondHeight + $.get(logY)($.get(tick)) - margin.top
896
+ ]);
897
+
898
+ $.append($$anchor, g_2);
899
+ };
900
+
901
+ $.if(node_1, ($$render) => {
902
+ if (i === $.get(yTicks).length - 1) $$render(consequent);
903
+ });
904
+ }
905
+
906
+ $.template_effect(
907
+ ($0, $1) => {
908
+ $.set_attribute(g_1, 'transform', `translate(${margin.left}, ${$0 ?? ''})`);
909
+ $.set_attribute(text, 'dy', $.get(yTicks).length - 1 == i ? "-3" : "13");
910
+ $.set_text(text_1, $1);
911
+ },
912
+ [
913
+ () => $$props.DiamondHeight + $.get(logY)($.get(tick)) - margin.top,
914
+ () => $.get(logFormat10)($.get(tick))
915
+ ]
916
+ );
917
+
918
+ $.append($$anchor, fragment_1);
919
+ });
920
+
921
+ $.template_effect(() => $.set_attribute(g, 'transform', `translate(${margin.left}, ${$$props.DiamondHeight - margin.top})`));
922
+ $.append($$anchor, fragment);
923
+ $.pop();
413
924
  }
414
- function Dashboard($$payload, $$props) {
415
- let {
416
- diamond_count = [],
417
- diamond_dat = [],
418
- barData = [],
419
- test_elem_1 = null,
420
- test_elem_2 = null,
421
- height = 815,
422
- width = 1200,
423
- DiamondHeight = 600,
424
- DiamondWidth = 600,
425
- DiamondInnerHeight = 440,
426
- margin = { inner: 160, diamond: 40 },
427
- trueDiamondHeight = 400,
428
- alpha = 0.58,
429
- maxlog10 = 0,
430
- rtd = null,
431
- title = ["System 1", "System 2"],
432
- class: className = "",
433
- style = "",
434
- showDiamond = true,
435
- showWordshift = true,
436
- showDivergingBar = true,
437
- showLegend = true,
438
- $$slots,
439
- $$events,
440
- ...restProps
441
- } = $$props;
442
- $$payload.out += `<div${$.spread_attributes(
443
- {
444
- class: `allotaxonometer-dashboard ${$.stringify(className)}`,
445
- style,
446
- ...restProps
447
- },
448
- "svelte-n6o6ey"
449
- )}><svg id="allotaxonometer-svg"${$.attr("height", height)}${$.attr("width", width)} class="svelte-n6o6ey">`;
450
- if (showDiamond) {
451
- $$payload.out += "<!--[-->";
452
- Diamond($$payload, {
453
- diamond_count,
454
- diamond_dat,
455
- DiamondInnerHeight,
456
- margin,
457
- trueDiamondHeight,
458
- alpha,
459
- maxlog10,
460
- rtd,
461
- title
462
- });
463
- } else {
464
- $$payload.out += "<!--[!-->";
465
- }
466
- $$payload.out += `<!--]-->`;
467
- if (showWordshift) {
468
- $$payload.out += "<!--[-->";
469
- Wordshift($$payload, {
470
- barData,
471
- DashboardHeight: height,
472
- DashboardWidth: width
473
- });
474
- } else {
475
- $$payload.out += "<!--[!-->";
476
- }
477
- $$payload.out += `<!--]-->`;
478
- if (showDivergingBar) {
479
- $$payload.out += "<!--[-->";
480
- DivergingBarChart($$payload, {
481
- test_elem_1,
482
- test_elem_2,
483
- DiamondHeight,
484
- DiamondWidth
485
- });
486
- } else {
487
- $$payload.out += "<!--[!-->";
488
- }
489
- $$payload.out += `<!--]-->`;
490
- if (showLegend) {
491
- $$payload.out += "<!--[-->";
492
- Legend($$payload, { diamond_dat, DiamondHeight });
493
- } else {
494
- $$payload.out += "<!--[!-->";
495
- }
496
- $$payload.out += `<!--]--></svg></div>`;
925
+
926
+ var root = $.from_html(`<div><svg id="allotaxonometer-svg" class="svelte-n6o6ey"><!><!><!><!></svg></div>`);
927
+
928
+ function Dashboard($$anchor, $$props) {
929
+ let diamond_count = $.prop($$props, 'diamond_count', 19, () => []),
930
+ diamond_dat = $.prop($$props, 'diamond_dat', 19, () => []),
931
+ barData = $.prop($$props, 'barData', 19, () => []),
932
+ test_elem_1 = $.prop($$props, 'test_elem_1', 3, null),
933
+ test_elem_2 = $.prop($$props, 'test_elem_2', 3, null),
934
+ height = $.prop($$props, 'height', 3, 815),
935
+ width = $.prop($$props, 'width', 3, 1200),
936
+ DiamondHeight = $.prop($$props, 'DiamondHeight', 3, 600),
937
+ DiamondWidth = $.prop($$props, 'DiamondWidth', 3, 600),
938
+ DiamondInnerHeight = $.prop($$props, 'DiamondInnerHeight', 3, 440),
939
+ margin = $.prop($$props, 'margin', 19, () => ({ inner: 160, diamond: 40 })),
940
+ trueDiamondHeight = $.prop($$props, 'trueDiamondHeight', 3, 400),
941
+ alpha = $.prop($$props, 'alpha', 3, 0.58),
942
+ maxlog10 = $.prop($$props, 'maxlog10', 3, 0),
943
+ rtd = $.prop($$props, 'rtd', 3, null),
944
+ title = $.prop($$props, 'title', 19, () => ['System 1', 'System 2']),
945
+ className = $.prop($$props, 'class', 3, ''),
946
+ style = $.prop($$props, 'style', 3, ''),
947
+ showDiamond = $.prop($$props, 'showDiamond', 3, true),
948
+ showWordshift = $.prop($$props, 'showWordshift', 3, true),
949
+ showDivergingBar = $.prop($$props, 'showDivergingBar', 3, true),
950
+ showLegend = $.prop($$props, 'showLegend', 3, true),
951
+ restProps = $.rest_props($$props, [
952
+ '$$slots',
953
+ '$$events',
954
+ '$$legacy',
955
+ 'diamond_count',
956
+ 'diamond_dat',
957
+ 'barData',
958
+ 'test_elem_1',
959
+ 'test_elem_2',
960
+ 'height',
961
+ 'width',
962
+ 'DiamondHeight',
963
+ 'DiamondWidth',
964
+ 'DiamondInnerHeight',
965
+ 'margin',
966
+ 'trueDiamondHeight',
967
+ 'alpha',
968
+ 'maxlog10',
969
+ 'rtd',
970
+ 'title',
971
+ 'class',
972
+ 'style',
973
+ 'showDiamond',
974
+ 'showWordshift',
975
+ 'showDivergingBar',
976
+ 'showLegend'
977
+ ]);
978
+
979
+ var div = root();
980
+
981
+ $.attribute_effect(
982
+ div,
983
+ () => ({
984
+ class: `allotaxonometer-dashboard ${className() ?? ''}`,
985
+ style: style(),
986
+ ...restProps
987
+ }),
988
+ undefined,
989
+ 'svelte-n6o6ey'
990
+ );
991
+
992
+ var svg = $.child(div);
993
+ var node = $.child(svg);
994
+
995
+ {
996
+ var consequent = ($$anchor) => {
997
+ Diamond($$anchor, {
998
+ get diamond_count() {
999
+ return diamond_count();
1000
+ },
1001
+ get diamond_dat() {
1002
+ return diamond_dat();
1003
+ },
1004
+ get DiamondInnerHeight() {
1005
+ return DiamondInnerHeight();
1006
+ },
1007
+ get margin() {
1008
+ return margin();
1009
+ },
1010
+ get trueDiamondHeight() {
1011
+ return trueDiamondHeight();
1012
+ },
1013
+ get alpha() {
1014
+ return alpha();
1015
+ },
1016
+ get maxlog10() {
1017
+ return maxlog10();
1018
+ },
1019
+ get rtd() {
1020
+ return rtd();
1021
+ },
1022
+ get title() {
1023
+ return title();
1024
+ }
1025
+ });
1026
+ };
1027
+
1028
+ $.if(node, ($$render) => {
1029
+ if (showDiamond()) $$render(consequent);
1030
+ });
1031
+ }
1032
+
1033
+ var node_1 = $.sibling(node);
1034
+
1035
+ {
1036
+ var consequent_1 = ($$anchor) => {
1037
+ Wordshift($$anchor, {
1038
+ get barData() {
1039
+ return barData();
1040
+ },
1041
+ get DashboardHeight() {
1042
+ return height();
1043
+ },
1044
+ get DashboardWidth() {
1045
+ return width();
1046
+ }
1047
+ });
1048
+ };
1049
+
1050
+ $.if(node_1, ($$render) => {
1051
+ if (showWordshift()) $$render(consequent_1);
1052
+ });
1053
+ }
1054
+
1055
+ var node_2 = $.sibling(node_1);
1056
+
1057
+ {
1058
+ var consequent_2 = ($$anchor) => {
1059
+ DivergingBarChart($$anchor, {
1060
+ get test_elem_1() {
1061
+ return test_elem_1();
1062
+ },
1063
+ get test_elem_2() {
1064
+ return test_elem_2();
1065
+ },
1066
+ get DiamondHeight() {
1067
+ return DiamondHeight();
1068
+ },
1069
+ get DiamondWidth() {
1070
+ return DiamondWidth();
1071
+ }
1072
+ });
1073
+ };
1074
+
1075
+ $.if(node_2, ($$render) => {
1076
+ if (showDivergingBar()) $$render(consequent_2);
1077
+ });
1078
+ }
1079
+
1080
+ var node_3 = $.sibling(node_2);
1081
+
1082
+ {
1083
+ var consequent_3 = ($$anchor) => {
1084
+ Legend($$anchor, {
1085
+ get diamond_dat() {
1086
+ return diamond_dat();
1087
+ },
1088
+ get DiamondHeight() {
1089
+ return DiamondHeight();
1090
+ }
1091
+ });
1092
+ };
1093
+
1094
+ $.if(node_3, ($$render) => {
1095
+ if (showLegend()) $$render(consequent_3);
1096
+ });
1097
+ }
1098
+
1099
+ $.reset(svg);
1100
+ $.reset(div);
1101
+
1102
+ $.template_effect(() => {
1103
+ $.set_attribute(svg, 'height', height());
1104
+ $.set_attribute(svg, 'width', width());
1105
+ });
1106
+
1107
+ $.append($$anchor, div);
497
1108
  }
498
- export {
499
- Dashboard,
500
- Diamond,
501
- DivergingBarChart,
502
- Legend,
503
- Test,
504
- Wordshift
505
- };
1109
+
1110
+ export { Dashboard, Diamond, DivergingBarChart, Legend, Test, Wordshift };