certusone
/
wormhole
mirror of https://github.com/certusone/wormhole.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

explorer: load data sooner 

Change-Id: I52afde5d252330d8d8bfdf2f4b72c8d3672af857
This commit is contained in:
justinschuldt 2021-10-29 07:25:58 -05:00 committed by Justin Schuldt
parent 4b510d8aa1
commit 84de7c2fd0
3 changed files with 34 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
explorer/src/components/ExplorerStats/DailyCountLineChart.tsx
View File

@ -98,9 +98,9 @@ const DailyCountLineChart = (props: DailyCountProps) => {
colors={({ color }) => color}
data={data}
curve={"monotoneX"}
margin={{ top: 10, right: 40, bottom: 160, left: 40 }}
margin={{ top: 10, right: 40, bottom: 160, left: 60 }}
xScale={{ type: 'point' }}
yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: false, reverse: false }}
yScale={{ type: 'linear', min: 0, max: 'auto', stacked: false, reverse: false }}
enableGridX={false}
axisTop={null}
axisRight={null}
@ -109,9 +109,6 @@ const DailyCountLineChart = (props: DailyCountProps) => {
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'count',
legendOffset: -40,
legendPosition: 'middle'
}}
pointSize={4}
pointColor={{ theme: 'background' }}

57
explorer/src/components/ExplorerStats/ExplorerStats.tsx
View File

@ -44,7 +44,8 @@ const Stats: React.FC<StatsProps> = ({ emitterChain, emitterAddress }) => {
const [totals, setTotals] = useState<Totals>()
const [recent, setRecent] = useState<Recent>()
const [polling, setPolling] = useState(true);
const [address, setAddress] = useState<StatsProps["emitterAddress"]>()
const [chain, setChain] = useState<StatsProps["emitterChain"]>()
const [lastFetched, setLastFetched] = useState<number>()
const [pollInterval, setPollInterval] = useState<NodeJS.Timeout>()
const [controller, setController] = useState<AbortController>(new AbortController())
@ -125,29 +126,34 @@ const Stats: React.FC<StatsProps> = ({ emitterChain, emitterAddress }) => {
clearInterval(pollInterval)
setPollInterval(undefined)
}
if (polling) {
// abort any in-flight requests
controller.abort()
// create a new controller for the new fetches, add it to state
const newController = new AbortController();
setController(newController)
// create a signal for requests
const { signal } = newController;
// start polling
let interval = setInterval(() => {
getData({ emitterChain, emitterAddress }, baseUrl, signal).catch(err => {
console.error('failed fetching data. err: ', err)
})
}, 5000)
setPollInterval(interval)
}
// abort any in-flight requests
controller.abort()
// create a new controller for the new fetches, add it to state
const newController = new AbortController();
setController(newController)
// create a signal for requests
const { signal } = newController;
// start polling
let interval = setInterval(() => {
getData({ emitterChain, emitterAddress }, baseUrl, signal)
}, 5000)
setPollInterval(interval)
}
useEffect(() => {
// getData if first load (no totals or recents), or emitterAddress/emitterChain changed.
if (!totals && !recent || emitterAddress !== address || emitterChain !== chain) {
getData({ emitterChain, emitterAddress }, activeNetwork.endpoints.bigtableFunctionsBase, new AbortController().signal)
}
controller.abort()
setTotals(undefined)
setRecent(undefined)
pollingController(emitterChain, emitterAddress, activeNetwork.endpoints.bigtableFunctionsBase)
// hold chain & address in state to detect changes
setChain(emitterChain)
setAddress(emitterAddress)
}, [emitterChain, emitterAddress, activeNetwork.endpoints.bigtableFunctionsBase])
useEffect(() => {
@ -156,7 +162,7 @@ const Stats: React.FC<StatsProps> = ({ emitterChain, emitterAddress }) => {
clearInterval(pollInterval)
}
};
}, [polling, pollInterval, activeNetwork.endpoints.bigtableFunctionsBase])
}, [pollInterval, activeNetwork.endpoints.bigtableFunctionsBase])
let title = "Recent messages"
let hideTableTitles = false
@ -179,20 +185,19 @@ const Stats: React.FC<StatsProps> = ({ emitterChain, emitterAddress }) => {
<ChainOverviewCard totalDays={daysSinceDataStart} totals={totals} dataKey="5" title={ChainID[5]} Icon={PolygonIcon} />
</div>
}
<Spin spinning={!totals && !recent} style={{ width: '100%', height: 500 }} />
<div>
{totals?.DailyTotals &&
<Spin spinning={!totals && !recent} style={{ width: '100%', height: 500 }} >
<div>
<DailyCountLineChart
dailyCount={totals?.DailyTotals}
dailyCount={totals?.DailyTotals || {}}
lastFetched={lastFetched}
title="messages/day"
emitterChain={emitterChain}
emitterAddress={emitterAddress}
/>}
</div>
{recent && <RecentMessages recent={recent} lastFetched={lastFetched} title={title} hideTableTitles={hideTableTitles} />}
/>
</div>
{recent && <RecentMessages recent={recent} lastFetched={lastFetched} title={title} hideTableTitles={hideTableTitles} />}
</Spin>
</>
)
}

2
explorer/src/components/Payload/DecodePayload.tsx
View File

@ -260,7 +260,7 @@ const DecodePayload = (props: DecodePayloadProps) => {
{props.showSummary && payloadBundle ? (
payloadBundle.type === "assetMeta" ? (<>
{chainEnums[payloadBundle.payload.tokenChain]}&nbsp; {payloadBundle.payload.symbol} {payloadBundle.payload.name}
{"AssetMeta:"}&nbsp;{chainEnums[payloadBundle.payload.tokenChain]}&nbsp; {payloadBundle.payload.symbol} {payloadBundle.payload.name}
</>) :
payloadBundle.type === "tokenTransfer" ? (<>
{"native "}{chainEnums[payloadBundle.payload.originChain]}{' asset -> '}{chainEnums[payloadBundle.payload.targetChain]}