From 3f40bdaf2d44eb7b73c19ce7fd9a7a0b51ac6775 Mon Sep 17 00:00:00 2001 From: Jaco Date: Thu, 12 Jan 2023 11:41:43 +0200 Subject: [PATCH] Adjust explorer links (#8772) * Adjust explorer links * Fix build * Add chart key * title extraction * maxItems * fully loaded --- packages/apps/public/index.html | 12 +--- packages/page-explorer/src/BlockHeader.tsx | 4 +- packages/page-explorer/src/Events.tsx | 51 +++++++-------- packages/page-explorer/src/Latency/index.tsx | 65 +++++++++++-------- packages/page-explorer/src/Latency/types.ts | 1 + .../page-explorer/src/Latency/useLatency.ts | 2 + packages/react-components/src/styles/index.ts | 4 ++ 7 files changed, 74 insertions(+), 65 deletions(-) diff --git a/packages/apps/public/index.html b/packages/apps/public/index.html index e1be380b78..874651b8a6 100644 --- a/packages/apps/public/index.html +++ b/packages/apps/public/index.html @@ -13,14 +13,8 @@ --font-sans: 1em "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* - 1.125 (8:9) factor (https://www.modularscale.com/?1&rem&1.067, https://type-scale.com/) - - - 1.424rem - 1.266rem - 1.125rem - 1rem - 0.889rem - 0.79rem + From https://www.modularscale.com/?1&rem&1.125 and https://type-scale.com/ - + 1.125 (8:9) factor: 1.424rem, 1.266rem, 1.125rem, 1rem, 0.889rem, 0.79rem */ --font-percent-small: 88.9%; --font-percent-tiny: 79.0%; @@ -31,7 +25,7 @@ --font-size-small: 0.889rem; --font-size-tiny: 0.79rem; - --font-weight-bold: 700; /* semi-bold = 600 */ + --font-weight-bold: 600; /* semi */ --font-weight-light: 200; --font-weight-normal: 400; diff --git a/packages/page-explorer/src/BlockHeader.tsx b/packages/page-explorer/src/BlockHeader.tsx index 04084a34f6..48cb933117 100644 --- a/packages/page-explorer/src/BlockHeader.tsx +++ b/packages/page-explorer/src/BlockHeader.tsx @@ -23,7 +23,9 @@ function BlockHeader ({ value }: Props): React.ReactElement | null { return ( - #{formatNumber(value.number)} +

+ {formatNumber(value.number)} +

{hashHex} diff --git a/packages/page-explorer/src/Events.tsx b/packages/page-explorer/src/Events.tsx index 127e719b25..86625da439 100644 --- a/packages/page-explorer/src/Events.tsx +++ b/packages/page-explorer/src/Events.tsx @@ -5,7 +5,6 @@ import type { KeyedEvent } from '@polkadot/react-hooks/ctx/types'; import React, { useMemo } from 'react'; import { Link } from 'react-router-dom'; -import styled from 'styled-components'; import { MarkError, Table } from '@polkadot/react-components'; import { formatNumber } from '@polkadot/util'; @@ -15,13 +14,32 @@ import { useTranslation } from './translate'; interface Props { className?: string; - error?: Error; + error?: Error | null; emptyLabel?: React.ReactNode; events?: KeyedEvent[] | null; eventClassName?: string; label?: React.ReactNode; } +function renederEvent (className: string | undefined, { blockHash, blockNumber, indexes, key, record }: KeyedEvent): React.ReactNode { + return ( + + + + {blockNumber && ( +
+ {indexes.length !== 1 && {formatNumber(indexes.length)}x } + {formatNumber(blockNumber)}-{indexes[0].toString().padStart(2, '0')} +
+ )} + + + ); +} + function Events ({ className = '', emptyLabel, error, eventClassName, events, label }: Props): React.ReactElement { const { t } = useTranslation(); @@ -47,35 +65,10 @@ function Events ({ className = '', emptyLabel, error, eventClassName, events, la ('Unable to decode the block events. {{error}}', { replace: { error: error.message } })} /> ) - : events && events.map(({ blockHash, blockNumber, indexes, key, record }): React.ReactNode => ( - - - - {blockNumber && ( -
- {indexes.length !== 1 && ({formatNumber(indexes.length)}x) } - {formatNumber(blockNumber)}-{indexes[0]} -
- )} - - - )) + : events && events.map((e) => renederEvent(eventClassName, e)) } ); } -export default React.memo(styled(Events)` - td.overflow { - position: relative; - - .event-link { - position: absolute; - right: 0.75rem; - top: 0.5rem; - } - } -`); +export default React.memo(Events); diff --git a/packages/page-explorer/src/Latency/index.tsx b/packages/page-explorer/src/Latency/index.tsx index 66561a8bb8..2e63520e0b 100644 --- a/packages/page-explorer/src/Latency/index.tsx +++ b/packages/page-explorer/src/Latency/index.tsx @@ -93,24 +93,33 @@ function formatTime (time: number, divisor = 1000): React.ReactNode { function Latency ({ className }: Props): React.ReactElement { const { t } = useTranslation(); - const { details, stdDev, timeAvg, timeMax, timeMin } = useLatency(); + const { details, maxItems, stdDev, timeAvg, timeMax, timeMin } = useLatency(); - const { blockLast, blocks, events, extrinsics, times } = useMemo( + const points = useMemo( () => getPoints(details, timeAvg), [details, timeAvg] ); - const { blocksLegend, eventsLegend, extrinsicsLegend, timesLegend } = useMemo( - () => ({ - blocksLegend: [t('bytes'), t('average')], - eventsLegend: [t('events'), t('system'), t('average')], - extrinsicsLegend: [t('extrinsics'), t('average')], - timesLegend: [t('blocktime'), t('average')] - }), [t] + const [legend, title] = useMemo( + () => [ + { + blocks: [t('bytes'), t('average')], + events: [t('events'), t('system'), t('average')], + extrinsics: [t('extrinsics'), t('average')], + times: [t('blocktime'), t('average')] + }, + { + blocks: t('blocksize (last {{n}} blocks)', { replace: { n: maxItems } }), + events: t('events (last {{n}} blocks)', { replace: { n: maxItems } }), + extrinsics: t('extrinsics (last {{n}} blocks)', { replace: { n: maxItems } }), + times: t('blocktimes (last {{n}} blocks)', { replace: { n: maxItems } }) + } + ], + [maxItems, t] ); - const isLoaded = details.length > 2; - const EMPTY_TIME = 0.000 s; + const isLoaded = details.length === maxItems; + const EMPTY_TIME = 0.000 s; return (
@@ -145,38 +154,42 @@ function Latency ({ className }: Props): React.ReactElement { ('last')}> {isLoaded - ? formatTime(blockLast, 1) + ? formatTime(points.blockLast, 1) : EMPTY_TIME} {isLoaded ? ( - <> +
('blocktimes (last {{num}} blocks)', { replace: { num: times.labels.length } })} - value={times} + key='times' + legends={legend.times} + title={title.times} + value={points.times} /> ('blocksize (last {{num}} blocks)', { replace: { num: blocks.labels.length } })} - value={blocks} + key='blocks' + legends={legend.blocks} + title={title.blocks} + value={points.blocks} /> ('extrinsics (last {{num}} blocks)', { replace: { num: extrinsics.labels.length } })} - value={extrinsics} + key='extrinsics' + legends={legend.extrinsics} + title={title.extrinsics} + value={points.extrinsics} /> ('events (last {{num}} blocks)', { replace: { num: events.labels.length } })} - value={events} + key='events' + legends={legend.events} + title={title.events} + value={points.events} /> - +
) : } diff --git a/packages/page-explorer/src/Latency/types.ts b/packages/page-explorer/src/Latency/types.ts index 5454db8314..ecaa3775b5 100644 --- a/packages/page-explorer/src/Latency/types.ts +++ b/packages/page-explorer/src/Latency/types.ts @@ -23,6 +23,7 @@ export interface Detail { export interface Result { details: Detail[]; + maxItems: number; stdDev: number; timeAvg: number; timeMax: number; diff --git a/packages/page-explorer/src/Latency/useLatency.ts b/packages/page-explorer/src/Latency/useLatency.ts index 1ab2e97d97..9da3a77791 100644 --- a/packages/page-explorer/src/Latency/useLatency.ts +++ b/packages/page-explorer/src/Latency/useLatency.ts @@ -15,6 +15,7 @@ const INITIAL_ITEMS = 50; const MAX_ITEMS = INITIAL_ITEMS; const EMPTY: Result = { details: [], + maxItems: MAX_ITEMS, stdDev: 0, timeAvg: 0, timeMax: 0, @@ -171,6 +172,7 @@ function useLatencyImpl (): Result { return { details, + maxItems: MAX_ITEMS, stdDev, timeAvg, timeMax: Math.max(...delays), diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts index a6e1721f06..7830118fcb 100644 --- a/packages/react-components/src/styles/index.ts +++ b/packages/react-components/src/styles/index.ts @@ -512,6 +512,10 @@ export default createGlobalStyle(({ theme, uiHighlight }: Pr font-size: var(--font-size-h3); } + h4 { + font-size: var(--font-size-h4); + } + header { margin-bottom: 1.5rem; text-align: center;