Flatten recurring events (same block) (#3201)

* Flattn recurring events (same block)

* Same-height event filter

* Display adjust

* Filter {balances, treasury}.Deposit

packages/page-explorer/src/BlockInfo/ByHash.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { EventRecord, SignedBlock } from '@polkadot/types/interfaces';
-import { KeyedEvent } from '../types';
+import { KeyedEvent } from '@polkadot/react-query/types';
 
 import React from 'react';
 import { Link } from 'react-router-dom';
@@ -29,6 +29,7 @@ function BlockByHash ({ className = '', value }: Props): React.ReactElement<Prop
     isSingle: true,
     transform: (events: EventRecord[]): KeyedEvent[] =>
       events.map((record, index) => ({
+        indexes: [index],
         key: `${Date.now()}-${index}-${record.hash.toHex()}`,
         record
       }))

packages/page-explorer/src/BlockInfo/Extrinsic.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { BlockNumber, Extrinsic } from '@polkadot/types/interfaces';
-import { KeyedEvent } from '../types';
+import { KeyedEvent } from '@polkadot/react-query/types';
 
 import React from 'react';
 import styled from 'styled-components';

packages/page-explorer/src/BlockInfo/Extrinsics.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { BlockNumber, Extrinsic } from '@polkadot/types/interfaces';
-import { KeyedEvent } from '../types';
+import { KeyedEvent } from '@polkadot/react-query/types';
 
 import React, { useMemo } from 'react';
 import { Table } from '@polkadot/react-components';

packages/page-explorer/src/Events.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { KeyedEvent } from './types';
+import { KeyedEvent } from '@polkadot/react-query/types';
 
 import React, { useMemo } from 'react';
 import { Link } from 'react-router-dom';
@@ -34,24 +34,22 @@ function Events ({ className = '', emptyLabel, eventClassName, events, label }:
       empty={emptyLabel || t<string>('No events available')}
       header={header}
     >
-      {events && events
-        .filter(({ record: { event: { method, section } } }) => !!method && !!section)
-        .map(({ blockHash, blockNumber, index, key, record }): React.ReactNode => (
-          <tr
-            className={eventClassName}
-            key={key}
-          >
-            <td className='overflow'>
-              <Event value={record} />
-              {blockNumber && (
-                <Link
-                  className='event-link'
-                  to={`/explorer/query/${blockHash || ''}`}>{formatNumber(blockNumber)}-{index}</Link>
-              )}
-            </td>
-          </tr>
-        ))
-      }
+      {events && events.map(({ blockHash, blockNumber, indexes, key, record }): React.ReactNode => (
+        <tr
+          className={eventClassName}
+          key={key}
+        >
+          <td className='overflow'>
+            <Event value={record} />
+            {blockNumber && (
+              <div className='event-link'>
+                {indexes.length !== 1 && <span>({formatNumber(indexes.length)}x)&nbsp;</span>}
+                <Link to={`/explorer/query/${blockHash || ''}`}>{formatNumber(blockNumber)}-{indexes[0]}</Link>
+              </div>
+            )}
+          </td>
+        </tr>
+      ))}
     </Table>
   );
 }

packages/page-explorer/src/Main.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { KeyedEvent } from './types';
+import { KeyedEvent } from '@polkadot/react-query/types';
 
 import React from 'react';
 import { HeaderExtended } from '@polkadot/api-derive';

packages/page-explorer/src/index.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { KeyedEvent } from './types';
+import { KeyedEvent } from '@polkadot/react-query/types';
 
 import React, { useContext, useMemo } from 'react';
 import { Route, Switch } from 'react-router';

packages/react-query/src/BlockAuthors.tsx

@@ -22,7 +22,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-const MAX_HEADERS = 50;
+const MAX_HEADERS = 75;
 
 const byAuthor: Record<string, string> = {};
 const eraPoints: Record<string, string> = {};
@@ -66,7 +66,7 @@ function BlockAuthorsBase ({ children }: Props): React.ReactElement<Props> {
           }
 
           lastHeaders = lastHeaders
-            .filter((old, index): boolean => index < MAX_HEADERS && old.number.unwrap().lt(blockNumber))
+            .filter((old, index) => index < MAX_HEADERS && old.number.unwrap().lt(blockNumber))
             .reduce((next, header): HeaderExtended[] => {
               next.push(header);
 

packages/react-query/src/Events.tsx

@@ -2,31 +2,20 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BlockNumber, EventRecord } from '@polkadot/types/interfaces';
+import { IndexedEvent, KeyedEvent } from './types';
 
 import React, { useEffect, useState } from 'react';
 import { useApi } from '@polkadot/react-hooks';
 import { stringToU8a } from '@polkadot/util';
 import { xxhashAsHex } from '@polkadot/util-crypto';
 
-interface IndexedEvent {
-  index: number;
-  record: EventRecord;
-}
-
-interface KeyedEvent extends IndexedEvent {
-  blockHash: string;
-  blockNumber: BlockNumber;
-  key: string;
-}
-
 type Events = KeyedEvent[];
 
 interface Props {
   children: React.ReactNode;
 }
 
-const MAX_EVENTS = 50;
+const MAX_EVENTS = 75;
 
 const EventsContext: React.Context<Events> = React.createContext<Events>([]);
 
@@ -42,8 +31,20 @@ function EventsBase ({ children }: Props): React.ReactElement<Props> {
 
       api.query.system.events((records): void => {
         const newEvents: IndexedEvent[] = records
-          .map((record, index) => ({ index, record }))
-          .filter(({ record: { event: { section } } }) => section !== 'system');
+          .map((record, index) => ({ indexes: [index], record }))
+          .filter(({ record: { event: { method, section } } }) => section !== 'system' && (method !== 'Deposit' || !['balances', 'treasury'].includes(section)))
+          .reduce((combined: IndexedEvent[], e): IndexedEvent[] => {
+            const prev = combined.find(({ record: { event: { method, section } } }) => e.record.event.section === section && e.record.event.method === method);
+
+            if (prev) {
+              prev.indexes.push(...e.indexes);
+            } else {
+              combined.push(e);
+            }
+
+            return combined;
+          }, [])
+          .reverse();
         const newEventHash = xxhashAsHex(stringToU8a(JSON.stringify(newEvents)));
 
         if (newEventHash !== prevEventHash && newEvents.length) {
@@ -58,14 +59,15 @@ function EventsBase ({ children }: Props): React.ReactElement<Props> {
               prevBlockHash = blockHash;
 
               setState((events) => [
-                ...newEvents.map(({ index, record }): KeyedEvent => ({
+                ...newEvents.map(({ indexes, record }): KeyedEvent => ({
                   blockHash,
                   blockNumber,
-                  index,
-                  key: `${blockNumber.toNumber()}-${blockHash}-${index}`,
+                  indexes,
+                  key: `${blockNumber.toNumber()}-${blockHash}-${indexes.join('.')}`,
                   record
                 })),
-                ...events
+                // remove all events for the previous same-height blockNumber
+                ...events.filter((p) => !p.blockNumber?.eq(blockNumber))
               ].slice(0, MAX_EVENTS));
             }
           }).catch(console.error);

packages/page-explorer/src/types.ts → packages/react-query/src/types.ts

@@ -1,13 +1,16 @@
-// Copyright 2017-2020 @polkadot/app-explorer authors & contributors
+// Copyright 2017-2020 @polkadot/react-query authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { BlockNumber, EventRecord } from '@polkadot/types/interfaces';
 
-export interface KeyedEvent {
+export interface IndexedEvent {
+  indexes: number[];
+  record: EventRecord;
+}
+
+export interface KeyedEvent extends IndexedEvent {
   blockHash?: string;
   blockNumber?: BlockNumber;
-  index?: number;
   key: string;
-  record: EventRecord;
 }