Skip to content

Commit f9fe280

Browse files
author
Alam, Maksudul
committed
Added checkbox for animation or arrow for Network Flow
1 parent 84970d2 commit f9fe280

File tree

4 files changed

+25
-19
lines changed

4 files changed

+25
-19
lines changed

‎viz/exago-logo.png‎

45 KB
Loading

‎viz/favicon.png‎

5.33 KB
Loading

‎viz/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>ExaGO viz</title>
6+
<link rel="icon" type="image/png" href="favicon.png">
67
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<link href="node_modules/react-widgets/styles.css" rel="stylesheet" />
89
<link href="index.css" rel="stylesheet" />

‎viz/src/App.jsx‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,8 @@ import { getCountyNodes, ExtractFirstTimeSlice, ExtractFlowData, getBarNet, getP
55

66
import { FlowmapLayer, PickingType } from "@flowmap.gl/layers";
77
import { getViewStateForLocations } from "@flowmap.gl/data";
8-
// import { Map as ReactMapGl } from "react-map-gl";
98

109
import maplibregl from "maplibre-gl";
11-
// import { MapboxOverlay } from "@deck.gl/mapbox";
1210
import { MapboxOverlay } from "@deck.gl/mapbox";
1311

1412
// MUI
@@ -30,7 +28,6 @@ import { Multiselect } from "react-widgets";
3028
import { Chart as ChartJS, RadialLinearScale, ArcElement, Tooltip, Legend } from "chart.js";
3129
import { PolarArea, Doughnut } from "react-chartjs-2";
3230

33-
import DeckGL from "@deck.gl/react";
3431
import { DataFilterExtension } from "@deck.gl/extensions";
3532

3633
import { ScatterplotLayer } from "deck.gl";
@@ -40,7 +37,7 @@ import { LinearInterpolator, FlyToInterpolator } from "deck.gl";
4037
import { center, convex, bbox } from "@turf/turf";
4138

4239
import { H3ClusterLayer } from '@deck.gl/geo-layers';
43-
import { LineLayer } from "@deck.gl/layers"; // your layers
40+
import { LineLayer } from "@deck.gl/layers";
4441

4542

4643
// import { Widget, addResponseMessage, toggleMsgLoader, deleteMessages } from "react-chat-widget";
@@ -162,7 +159,7 @@ const CASES = [
162159
{ label: "70K", file: "opflowout-70K.json" },
163160
];
164161

165-
function App({ refdata, refflowdata, refflowdata_reactive, ggdata, gendata, generation, areas, zones, countyload, countyloaddata, countymaxPd, mapStyle = MAP_STYLE }) {
162+
function App({ refdata, refflowdata, refflowdata_reactive, ggdata, gendata, generation, areas, zones, countyload, countyloaddata, countymaxPd, mapcenter, mapStyle = MAP_STYLE }) {
166163

167164
const mapRef = useRef(null);
168165

@@ -378,9 +375,6 @@ function App({ refdata, refflowdata, refflowdata_reactive, ggdata, gendata, gene
378375
});
379376
}
380377

381-
382-
383-
384378
const newflowdata = { locations: locations, flows: flows, maxloading: 120 };
385379
setFlowData(newflowdata);
386380

@@ -638,7 +632,7 @@ function App({ refdata, refflowdata, refflowdata_reactive, ggdata, gendata, gene
638632
}));
639633

640634
mapRef.current?.flyTo({
641-
center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
635+
center: [mapcenter.longitude, mapcenter.latitude],
642636
zoom: INITIAL_VIEW_STATE.zoom,
643637
pitch: INITIAL_VIEW_STATE.pitch,
644638
duration: 1200,
@@ -648,8 +642,12 @@ function App({ refdata, refflowdata, refflowdata_reactive, ggdata, gendata, gene
648642
}
649643

650644
const [netlayeractive, setNetLayerActive] = useState(true);
645+
651646
const [flowlayeractive, setFlowLayerActive] = useState(true);
647+
const [flowlayeranimate, setFlowLayerAnimate] = useState(false);
652648
const [reactiveflowlayeractive, setReactiveFlowLayerActive] = useState(false);
649+
const [reactiveflowlayeranimate, setReactiveFlowLayerAnimate] = useState(false);
650+
653651
const [loadlayeractive, setLoadLayerActive] = useState(false);
654652
const [genlayeractive, setGenLayerActive] = useState(false);
655653
const [genlayercapactive, setGenLayerCapActive] = useState(false);
@@ -760,11 +758,19 @@ function App({ refdata, refflowdata, refflowdata_reactive, ggdata, gendata, gene
760758
setFlowFilterValue([0, 120]);
761759
};
762760

761+
const handleFlowLayerAnimateChange = (event) => {
762+
setFlowLayerAnimate(event.target.checked);
763+
};
764+
763765
const handleReactiveFlowLayerChange = (event) => {
764766
setReactiveFlowLayerActive(event.target.checked);
765767
setFlowFilterReactiveValue([0, 120]);
766768
};
767769

770+
const handleReactiveFlowLayerAnimateChange = (event) => {
771+
setReactiveFlowLayerAnimate(event.target.checked);
772+
};
773+
768774

769775
const handleLoadLayerChange = (event) => {
770776
setLoadLayerActive(event.target.checked);
@@ -1024,8 +1030,8 @@ function App({ refdata, refflowdata, refflowdata_reactive, ggdata, gendata, gene
10241030
data: flowdata,
10251031
visible: flowlayeractive,
10261032
// animationEnabled: true, //control the animation effect of flow layer
1027-
animationEnabled: true,
1028-
// animationEnabled: false,
1033+
// animationEnabled: true,
1034+
animationEnabled: flowlayeranimate,
10291035
colorScheme: ["rgb(0,0,255)", "rgb(255,0,255)"],
10301036
// darkMode: true,
10311037
clusteringEnabled: true, //control the aggregate effect of flow layer
@@ -1054,8 +1060,8 @@ function App({ refdata, refflowdata, refflowdata_reactive, ggdata, gendata, gene
10541060
data: reactiveflowdata,
10551061
visible: reactiveflowlayeractive,
10561062
// animationEnabled: true, //control the animation effect of flow layer
1057-
animationEnabled: true,
1058-
// animationEnabled: false,
1063+
// animationEnabled: true,
1064+
animationEnabled: reactiveflowlayeranimate,
10591065
colorScheme: ["rgb(0,255,255)", "rgb(255,255,0)"],
10601066
// darkMode: true,
10611067
clusteringEnabled: true, //control the aggregate effect of flow layer
@@ -1708,6 +1714,7 @@ function App({ refdata, refflowdata, refflowdata_reactive, ggdata, gendata, gene
17081714
<Typography component="div">
17091715
{flowlayeractive && (
17101716
<div style={{ paddingRight: "40px" }}>
1717+
<Checkbox checked={flowlayeranimate} style={{ color: "primary" }} onChange={handleFlowLayerAnimateChange} /> Show Animation
17111718
<Slider style={{ padding: 2 }} value={flowfiltervalue} valueLabelDisplay="auto" onChange={handleFlowRangeFilterChange} getAriaValueText={valuetext} step={10} min={0} max={120}></Slider>
17121719
</div>
17131720
)}
@@ -1732,6 +1739,7 @@ function App({ refdata, refflowdata, refflowdata_reactive, ggdata, gendata, gene
17321739
<Typography component="div">
17331740
{reactiveflowlayeractive && (
17341741
<div style={{ paddingRight: "40px" }}>
1742+
<Checkbox checked={reactiveflowlayeranimate} style={{ color: "primary" }} onChange={handleReactiveFlowLayerAnimateChange} /> Show Animation
17351743
<Slider style={{ padding: 2 }} value={flowfilterreactivevalue} valueLabelDisplay="auto" onChange={handleReactiveFlowRangeFilterChange} getAriaValueText={valuetext} step={10} min={0} max={120}></Slider>
17361744
</div>
17371745
)}
@@ -1879,7 +1887,8 @@ function App({ refdata, refflowdata, refflowdata_reactive, ggdata, gendata, gene
18791887
footer: { text: "", buttons: [] },
18801888
tooltip: { text: "Ask me anything." },
18811889
voice: { disabled: false },
1882-
chatHistory: { storageKey: "example_basic_form" }
1890+
chatHistory: { storageKey: "example_basic_form" },
1891+
chatButton: { icon: "exago-logo.png" },
18831892
}} flow={flow} />
18841893

18851894

@@ -2010,11 +2019,6 @@ function AppContainer() {
20102019
const gendata = getGeneration(grid_data);
20112020
const generation = gendata.Gens;
20122021

2013-
console.log("Generation Data:", gendata);
2014-
2015-
// const gendata = getGeneration(grid_data);
2016-
// const generation = gendata.Gens;
2017-
20182022
const loaddata = getLoad(grid_data);
20192023

20202024
const loads = loaddata.Loads;
@@ -2093,6 +2097,7 @@ function AppContainer() {
20932097
countyload={derived.countyload}
20942098
countyloaddata={derived.countyloaddata}
20952099
countymaxPd={derived.countymaxPd}
2100+
mapcenter={derived.mapcenter}
20962101
// plus anything else you were using
20972102
/>
20982103
)}

0 commit comments

Comments
 (0)