feat: dataloaders (#561)

package.json

@@ -63,6 +63,7 @@
     "crypto-js": "^4.1.1",
     "d3-array": "^3.2.4",
     "d3-time-format": "^4.1.0",
+    "dataloader": "^2.2.2",
     "date-fns": "^2.30.0",
     "dotenv": "^16.3.1",
     "echarts": "^5.4.3",

schema.gql

@@ -35,6 +35,11 @@ type BaseNode {
   socket: String!
 }
 
+type BaseNodeInfo {
+  alias: String!
+  public_key: String!
+}
+
 type BasePoints {
   alias: String!
   amount: Float!
@@ -168,6 +173,11 @@ type ChannelHealth {
   volumeNormalized: String
 }
 
+type ChannelInfo {
+  node1_info: BaseNodeInfo!
+  node2_info: BaseNodeInfo!
+}
+
 type ChannelReport {
   commit: Float!
   incomingPendingHtlc: Float!
@@ -310,8 +320,10 @@ type Forward {
   fee: Float!
   fee_mtokens: String!
   incoming_channel: String!
+  incoming_channel_info: ChannelInfo
   mtokens: String!
   outgoing_channel: String!
+  outgoing_channel_info: ChannelInfo
   tokens: Float!
 }
 

src/client/src/components/sankey/index.tsx

@@ -61,7 +61,7 @@ export const Sankey = ({ data, width, height }: SankeyProps) => {
           height,
           type: 'sankey',
           nodeAlign: 'justify',
-          nodeGap: 3,
+          nodeGap: 14,
           layoutIterations: 32,
           data: data.nodes,
           links: data.links,

src/client/src/graphql/queries/getForwards.ts

@@ -10,6 +10,22 @@ export const GET_FORWARDS = gql`
       mtokens
       outgoing_channel
       tokens
+      incoming_channel_info {
+        node1_info {
+          alias
+        }
+        node2_info {
+          alias
+        }
+      }
+      outgoing_channel_info {
+        node1_info {
+          alias
+        }
+        node2_info {
+          alias
+        }
+      }
     }
   }
 `;

src/client/src/graphql/types.ts

@@ -66,6 +66,12 @@ export type BaseNode = {
   socket: Scalars['String']['output'];
 };
 
+export type BaseNodeInfo = {
+  __typename?: 'BaseNodeInfo';
+  alias: Scalars['String']['output'];
+  public_key: Scalars['String']['output'];
+};
+
 export type BasePoints = {
   __typename?: 'BasePoints';
   alias: Scalars['String']['output'];
@@ -214,6 +220,12 @@ export type ChannelHealth = {
   volumeNormalized?: Maybe<Scalars['String']['output']>;
 };
 
+export type ChannelInfo = {
+  __typename?: 'ChannelInfo';
+  node1_info: BaseNodeInfo;
+  node2_info: BaseNodeInfo;
+};
+
 export type ChannelReport = {
   __typename?: 'ChannelReport';
   commit: Scalars['Float']['output'];
@@ -370,8 +382,10 @@ export type Forward = {
   fee: Scalars['Float']['output'];
   fee_mtokens: Scalars['String']['output'];
   incoming_channel: Scalars['String']['output'];
+  incoming_channel_info: ChannelInfo;
   mtokens: Scalars['String']['output'];
   outgoing_channel: Scalars['String']['output'];
+  outgoing_channel_info: ChannelInfo;
   tokens: Scalars['Float']['output'];
 };
 

src/client/src/views/dashboard/widgets/lightning/forwards.tsx

@@ -2,7 +2,6 @@ import { getDateDif } from '../../../../components/generic/helpers';
 import { Price } from '../../../../components/price/Price';
 import Table from '../../../../components/table';
 import { useGetForwardsQuery } from '../../../../graphql/queries/__generated__/getForwards.generated';
-import { ChannelAlias } from '../../../../views/home/reports/forwardReport/ChannelAlias';
 import styled from 'styled-components';
 
 const S = {
@@ -75,8 +74,8 @@ export const ForwardListWidget = () => {
             <Price amount={f.fee} />
           </S.nowrap>
         ),
-        incoming: <ChannelAlias id={f.incoming_channel} />,
-        outgoing: <ChannelAlias id={f.outgoing_channel} />,
+        incoming: f.incoming_channel_info.node2_info.alias || '',
+        outgoing: f.outgoing_channel_info.node2_info.alias || '',
       },
     ];
   }, [] as any);

src/client/src/views/forwards/ForwardTable.tsx

@@ -8,7 +8,6 @@ import { usePriceState } from '../../context/PriceContext';
 import { useGetForwardsQuery } from '../../graphql/queries/__generated__/getForwards.generated';
 import { Forward } from '../../graphql/types';
 import { getErrorContent } from '../../utils/error';
-import { ChannelAlias } from '../home/reports/forwardReport/ChannelAlias';
 import { sortByNode } from './helpers';
 import Table from '../../components/table';
 
@@ -86,7 +85,6 @@ export const ForwardTable: FC<{ days: number; order: string }> = ({
 
   const tableData = final.map(f => ({
     ...f,
-    alias: <ChannelAlias id={f.channel} />,
     incoming: format({ amount: f.incoming, noUnit: order === 'amount' }),
     outgoing: format({ amount: f.outgoing, noUnit: order === 'amount' }),
     incomingBar: <SingleBar value={getBar(f.incoming, maxIn)} height={16} />,

src/client/src/views/forwards/forwardSankey.tsx

@@ -35,9 +35,10 @@ export const ForwardSankey: FC<{
     const mapped = data.getForwards.map(d => ({
       ...d,
       group: `${d.incoming_channel}-${d.outgoing_channel}`,
+      groupAlias: `${d.incoming_channel_info.node2_info.alias}-${d.outgoing_channel_info.node2_info.alias}`,
     }));
 
-    const grouped = groupBy(mapped, 'group');
+    const grouped = groupBy(mapped, 'groupAlias');
 
     const aggregated: {
       incoming_channel: string;
@@ -55,8 +56,8 @@ export const ForwardSankey: FC<{
       const firstValue = value[0];
 
       aggregated.push({
-        incoming_channel: firstValue.incoming_channel,
-        outgoing_channel: firstValue.outgoing_channel,
+        incoming_channel: firstValue.incoming_channel_info.node2_info.alias,
+        outgoing_channel: firstValue.outgoing_channel_info.node2_info.alias,
         fee: totalFees,
         tokens: totalTokens,
         amount: totalAmount,
@@ -90,7 +91,7 @@ export const ForwardSankey: FC<{
     return null;
   }
 
-  const graphHeight = 800 + 10 * sankeyData.links.length;
+  const graphHeight = 800 + 16 * sankeyData.links.length;
 
   return (
     <Wrapper $height={graphHeight}>

src/client/src/views/forwards/helpers.tsx

@@ -1,4 +1,4 @@
-import { sortBy } from 'lodash';
+import { sortBy, uniqBy } from 'lodash';
 import { Forward } from '../../graphql/types';
 
 export const sortByNode = (order: string, forwardArray: Forward[]) => {
@@ -12,27 +12,36 @@ export const sortByNode = (order: string, forwardArray: Forward[]) => {
     }
 
     return {
+      incoming_alias: f.incoming_channel_info.node2_info.alias || '',
       incoming_channel: f.incoming_channel,
+      outgoing_alias: f.outgoing_channel_info.node2_info.alias || '',
       outgoing_channel: f.outgoing_channel,
       value,
     };
   });
 
-  const incomingNodes = cleaned.map(f => f.incoming_channel);
-  const outgoingNodes = cleaned.map(f => f.outgoing_channel);
+  const incomingNodes = cleaned.map(f => ({
+    alias: f.incoming_alias,
+    channel: f.incoming_channel,
+  }));
+  const outgoingNodes = cleaned.map(f => ({
+    alias: f.outgoing_alias,
+    channel: f.outgoing_channel,
+  }));
 
-  const uniqueNodes = [
-    ...Array.from(new Set(incomingNodes)),
-    ...Array.from(new Set(outgoingNodes)),
-  ];
+  const uniqueNodes = uniqBy([...incomingNodes, ...outgoingNodes], 'channel');
   const nodeLength = uniqueNodes.length;
 
-  const incoming = new Array(nodeLength).fill(0);
-  const outgoing = new Array(nodeLength).fill(0);
+  const incoming: number[] = new Array(nodeLength).fill(0);
+  const outgoing: number[] = new Array(nodeLength).fill(0);
 
   cleaned.forEach(f => {
-    const inIndex = uniqueNodes.indexOf(f.incoming_channel);
-    const outIndex = uniqueNodes.indexOf(f.outgoing_channel);
+    const inIndex = uniqueNodes.findIndex(
+      n => n.channel === f.incoming_channel
+    );
+    const outIndex = uniqueNodes.findIndex(
+      n => n.channel === f.outgoing_channel
+    );
 
     const currentIncoming = incoming[inIndex];
     const currentOutgoing = outgoing[outIndex];
@@ -52,7 +61,8 @@ export const sortByNode = (order: string, forwardArray: Forward[]) => {
     maxOut = Math.max(maxOut, outgoingValue);
 
     return {
-      channel: n,
+      alias: n.alias,
+      channel: n.channel,
       incoming: incomingValue,
       outgoing: outgoingValue,
     };