explorer: load data sooner

Change-Id: I52afde5d252330d8d8bfdf2f4b72c8d3672af857

explorer/src/components/ExplorerStats/DailyCountLineChart.tsx

@@ -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' }}

explorer/src/components/ExplorerStats/ExplorerStats.tsx

@@ -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,7 +126,6 @@ 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
@@ -135,19 +135,25 @@ const Stats: React.FC<StatsProps> = ({ emitterChain, emitterAddress }) => {
         const { signal } = newController;
         // start polling
         let interval = setInterval(() => {
-                getData({ emitterChain, emitterAddress }, baseUrl, signal).catch(err => {
-                    console.error('failed fetching data. err: ', err)
-                })
+            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 }} />
+            <Spin spinning={!totals && !recent} style={{ width: '100%', height: 500 }} >
                 <div>
-                {totals?.DailyTotals &&
                     <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} />}
-
+            </Spin>
         </>
     )
 }

explorer/src/components/Payload/DecodePayload.tsx

@@ -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]}