Skip to content

Commit d0e5b3e

Browse files
guizzetticguizzettic
committed
reduces file size and unnecessary visual elements
1 parent f66482c commit d0e5b3e

File tree

3 files changed

+49
-252
lines changed

3 files changed

+49
-252
lines changed

‎src/app/components/History.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Component, useEffect, useState } from 'react';
22
import * as d3 from 'd3';
3-
import Example from './legend';
3+
import Legendary from './legend';
44

55
/**
66
* @var colors: Colors array for the diffrerent node branches, each color is for a different branch
@@ -255,7 +255,7 @@ function History(props) {
255255
return (
256256
<>
257257
<div ref={HistoryRef} className="history-d3-div" id="historyContainer" />
258-
{/* <Example /> */}
258+
{/* <Legendary /> */}
259259
</>
260260
);
261261
}

‎src/app/components/StateRoute.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,11 @@ const StateRoute = (props: StateRouteProps) => {
8080
const renderHistory = () => {
8181
if (hierarchy) {
8282
return (
83-
<History hierarchy={hierarchy} />;
84-
<Legendary />
83+
<div>
84+
{/* <History hierarchy={hierarchy}> */}
85+
<Legendary />
86+
{/* </History> */}
87+
</div>
8588
);
8689
}
8790
return <div className="noState">{NO_STATE_MSG}</div>;

‎src/app/components/legend.tsx

Lines changed: 42 additions & 248 deletions
Original file line numberDiff line numberDiff line change
@@ -1,216 +1,55 @@
11
import React from 'react';
2-
import { format } from 'd3-format';
3-
import {
4-
scaleLinear,
5-
scaleOrdinal,
6-
scaleThreshold,
7-
scaleQuantile,
8-
} from '@visx/scale';
9-
import { GlyphStar, GlyphWye, GlyphTriangle, GlyphDiamond } from '@visx/glyph';
10-
import {
11-
Legend,
12-
LegendLinear,
13-
LegendQuantile,
14-
LegendOrdinal,
15-
LegendSize,
16-
LegendThreshold,
17-
LegendItem,
18-
LegendLabel,
19-
} from '@visx/legend';
2+
// import { format } from "d3-format";
3+
import { scaleOrdinal } from '@visx/scale';
4+
// import { GlyphStar, GlyphWye, GlyphTriangle, GlyphDiamond } from "@visx/glyph";
5+
import { LegendOrdinal, LegendItem, LegendLabel } from '@visx/legend';
206

21-
const oneDecimalFormat = format('.1f');
22-
23-
const sizeScale = scaleLinear<number>({
24-
domain: [0, 10],
25-
range: [5, 13],
26-
});
27-
28-
const sizeColorScale = scaleLinear<string>({
29-
domain: [0, 10],
30-
range: ['#75fcfc', '#3236b8'],
31-
});
32-
33-
const quantileScale = scaleQuantile<string>({
34-
domain: [0, 0.15],
35-
range: ['#eb4d70', '#f19938', '#6ce18b', '#78f6ef', '#9096f8'],
36-
});
37-
38-
const linearScale = scaleLinear<string>({
39-
domain: [0, 10],
40-
range: ['#ed4fbb', '#e9a039'],
41-
});
42-
43-
const thresholdScale = scaleThreshold<number, string>({
44-
domain: [0.01, 0.02, 0.04, 0.06, 0.08],
45-
range: ['#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f'],
46-
});
47-
48-
const ordinalColorScale = scaleOrdinal<string, string>({
49-
domain: ['a', 'b', 'c', 'd'],
7+
// implement algorithm to check snapshot history and their respective colors
8+
const ordinalColorScale = scaleOrdinal<number, string>({
9+
domain: [1, 2, 3, 4],
10+
// sync in with the snapshot color chosen in history tab already
5011
range: ['#66d981', '#71f5ef', '#4899f1', '#7d81f6'],
5112
});
5213

53-
const ordinalColor2Scale = scaleOrdinal<string, string>({
54-
domain: ['a', 'b', 'c', 'd'],
55-
range: ['#fae856', '#f29b38', '#e64357', '#8386f7'],
56-
});
14+
// const ordinalColor2Scale = scaleOrdinal<string, string>({
15+
// domain: ["a", "b", "c", "d"],
16+
// range: ["#000", "#f29b38", "#e64357", "#8386f7"]
17+
// });
5718

58-
const shapeScale = scaleOrdinal<string, React.FC | React.ReactNode>({
59-
domain: ['a', 'b', 'c', 'd', 'e'],
60-
range: [
61-
<GlyphStar key="a" size={50} top={50 / 6} left={50 / 6} fill="#dd59b8" />,
62-
<GlyphWye key="b" size={50} top={50 / 6} left={50 / 6} fill="#de6a9a" />,
63-
<GlyphTriangle
64-
key="c"
65-
size={50}
66-
top={50 / 6}
67-
left={50 / 6}
68-
fill="#de7d7b"
69-
/>,
70-
<GlyphDiamond
71-
key="d"
72-
size={50}
73-
top={50 / 6}
74-
left={50 / 6}
75-
fill="#df905f"
76-
/>,
77-
() => (
78-
<text key="e" fontSize="12" dy="1em" dx=".33em" fill="#e0a346">
79-
$
80-
</text>
81-
),
82-
],
83-
});
19+
// const shapeScale = scaleOrdinal<string, React.FC | React.ReactNode>({
20+
// domain: ["a", "b", "c", "d", "e"],
21+
// range: [
22+
// <GlyphStar key="a" size={500} top={50 / 6} left={50 / 6} fill="#dd59b8" />,
23+
// <GlyphWye key="b" size={500} top={50 / 6} left={50 / 6} fill="#fff" />,
24+
// <GlyphTriangle
25+
// key="c"
26+
// size={50}
27+
// top={50 / 6}
28+
// left={50 / 6}
29+
// fill="#de7d7b"
30+
// />,
31+
// <GlyphDiamond
32+
// key="d"
33+
// size={50}
34+
// top={50 / 6}
35+
// left={50 / 6}
36+
// fill="#df905f"
37+
// />,
38+
// () => (
39+
// <text key="e" fontSize="12" dy="1em" dx=".33em" fill="#e0a346">
40+
// $
41+
// </text>
42+
// )
43+
// ]
44+
// });
8445

8546
const legendGlyphSize = 15;
8647

8748
export default function Legendary({ events = false }: { events?: boolean }) {
8849
return (
8950
<div className="legends">
90-
<LegendDemo title="Size">
91-
<LegendSize scale={sizeScale}>
92-
{(labels) =>
93-
labels.map((label) => {
94-
const size = sizeScale(label.datum);
95-
const color = sizeColorScale(label.datum);
96-
return (
97-
<LegendItem
98-
key={`legend-${label.text}-${label.index}`}
99-
onClick={() => {
100-
if (events) alert(`clicked: ${JSON.stringify(label)}`);
101-
}}
102-
>
103-
<svg width={size} height={size} style={{ margin: '5px 0' }}>
104-
<circle
105-
fill={color}
106-
r={size / 2}
107-
cx={size / 2}
108-
cy={size / 2}
109-
/>
110-
</svg>
111-
<LegendLabel align="left" margin="0 4px">
112-
{label.text}
113-
</LegendLabel>
114-
</LegendItem>
115-
);
116-
})
117-
}
118-
</LegendSize>
119-
</LegendDemo>
120-
<LegendDemo title="Quantile">
121-
<LegendQuantile scale={quantileScale}>
122-
{(labels) =>
123-
labels.map((label, i) => (
124-
<LegendItem
125-
key={`legend-${i}`}
126-
onClick={() => {
127-
if (events) alert(`clicked: ${JSON.stringify(label)}`);
128-
}}
129-
>
130-
<svg
131-
width={legendGlyphSize}
132-
height={legendGlyphSize}
133-
style={{ margin: '2px 0' }}
134-
>
135-
<circle
136-
fill={label.value}
137-
r={legendGlyphSize / 2}
138-
cx={legendGlyphSize / 2}
139-
cy={legendGlyphSize / 2}
140-
/>
141-
</svg>
142-
<LegendLabel align="left" margin="0 4px">
143-
{label.text}
144-
</LegendLabel>
145-
</LegendItem>
146-
))
147-
}
148-
</LegendQuantile>
149-
</LegendDemo>
150-
<LegendDemo title="Linear">
151-
<LegendLinear
152-
scale={linearScale}
153-
labelFormat={(d, i) => (i % 2 === 0 ? oneDecimalFormat(d) : '')}
154-
>
155-
{(labels) =>
156-
labels.map((label, i) => (
157-
<LegendItem
158-
key={`legend-quantile-${i}`}
159-
onClick={() => {
160-
if (events) alert(`clicked: ${JSON.stringify(label)}`);
161-
}}
162-
>
163-
<svg
164-
width={legendGlyphSize}
165-
height={legendGlyphSize}
166-
style={{ margin: '2px 0' }}
167-
>
168-
<circle
169-
fill={label.value}
170-
r={legendGlyphSize / 2}
171-
cx={legendGlyphSize / 2}
172-
cy={legendGlyphSize / 2}
173-
/>
174-
</svg>
175-
<LegendLabel align="left" margin="0 4px">
176-
{label.text}
177-
</LegendLabel>
178-
</LegendItem>
179-
))
180-
}
181-
</LegendLinear>
182-
</LegendDemo>
183-
<LegendDemo title="Threshold">
184-
<LegendThreshold scale={thresholdScale}>
185-
{(labels) =>
186-
labels.reverse().map((label, i) => (
187-
<LegendItem
188-
key={`legend-quantile-${i}`}
189-
margin="1px 0"
190-
onClick={() => {
191-
if (events) alert(`clicked: ${JSON.stringify(label)}`);
192-
}}
193-
>
194-
<svg width={legendGlyphSize} height={legendGlyphSize}>
195-
<rect
196-
fill={label.value}
197-
width={legendGlyphSize}
198-
height={legendGlyphSize}
199-
/>
200-
</svg>
201-
<LegendLabel align="left" margin="2px 0 0 10px">
202-
{label.text}
203-
</LegendLabel>
204-
</LegendItem>
205-
))
206-
}
207-
</LegendThreshold>
208-
</LegendDemo>
209-
<LegendDemo title="Ordinal">
210-
<LegendOrdinal
211-
scale={ordinalColorScale}
212-
labelFormat={(label) => `${label.toUpperCase()}`}
213-
>
51+
<LegendVisual title="State Snapshots">
52+
<LegendOrdinal scale={ordinalColorScale}>
21453
{(labels) => (
21554
<div style={{ display: 'flex', flexDirection: 'row' }}>
21655
{labels.map((label, i) => (
@@ -236,52 +75,7 @@ export default function Legendary({ events = false }: { events?: boolean }) {
23675
</div>
23776
)}
23877
</LegendOrdinal>
239-
</LegendDemo>
240-
<LegendDemo title="Custom Legend">
241-
<Legend scale={shapeScale}>
242-
{(labels) => (
243-
<div style={{ display: 'flex', flexDirection: 'row' }}>
244-
{labels.map((label, i) => {
245-
const color = ordinalColor2Scale(label.datum);
246-
const shape = shapeScale(label.datum);
247-
const isValidElement = React.isValidElement(shape);
248-
return (
249-
<LegendItem
250-
key={`legend-quantile-${i}`}
251-
margin="0 4px 0 0"
252-
flexDirection="column"
253-
onClick={() => {
254-
const { datum, index } = label;
255-
if (events)
256-
alert(
257-
`clicked: ${JSON.stringify({ datum, color, index })}`
258-
);
259-
}}
260-
>
261-
<svg
262-
width={legendGlyphSize}
263-
height={legendGlyphSize}
264-
style={{ margin: '0 0 8px 0' }}
265-
>
266-
{isValidElement
267-
? React.cloneElement(shape as React.ReactElement)
268-
: React.createElement(
269-
shape as React.ComponentType<{ fill: string }>,
270-
{
271-
fill: color,
272-
}
273-
)}
274-
</svg>
275-
<LegendLabel align="left" margin={0}>
276-
{label.text}
277-
</LegendLabel>
278-
</LegendItem>
279-
);
280-
})}
281-
</div>
282-
)}
283-
</Legend>
284-
</LegendDemo>
78+
</LegendVisual>
28579

28680
<style jsx>{`
28781
.legends {
@@ -301,7 +95,7 @@ export default function Legendary({ events = false }: { events?: boolean }) {
30195
);
30296
}
30397

304-
function LegendDemo({
98+
function LegendVisual({
30599
title,
306100
children,
307101
}: {

0 commit comments

Comments
 (0)