From 57abff32818b9600f16d4fd1229b9969ea04d04f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Thu, 26 May 2022 16:02:32 -0300 Subject: [PATCH 1/4] add opacity to show nodes placed on background --- src/apps/explorer/components/TransanctionBatchGraph/styled.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts index 7f969c297..039e26579 100644 --- a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts +++ b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts @@ -87,6 +87,7 @@ export function STYLESHEET(theme: DefaultTheme): Stylesheet[] { style: { 'border-style': 'dashed', 'border-opacity': 0.8, + opacity: 0.8, }, }, ] From a41d2e16435a5b6d69aa1c3c811ddca250991037 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Mon, 30 May 2022 12:12:52 -0300 Subject: [PATCH 2/4] nodes overlapping --- package.json | 3 ++- .../components/TransanctionBatchGraph/index.tsx | 4 ++++ src/env.d.ts | 1 + yarn.lock | 12 ++++++++++++ 4 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 src/env.d.ts diff --git a/package.json b/package.json index a8cd5d7c6..520815377 100644 --- a/package.json +++ b/package.json @@ -77,6 +77,7 @@ "bn.js": "^4.11.9", "combine-reducers": "^1.0.0", "cytoscape": "^3.21.0", + "cytoscape-no-overlap": "^1.0.1", "cytoscape-popper": "^2.0.0", "date-fns": "^2.9.0", "detect-browser": "^5.1.0", @@ -129,6 +130,7 @@ "@types/bn.js": "^4.11.6", "@types/combine-reducers": "^1.0.0", "@types/cytoscape": "^3.19.4", + "@types/cytoscape-popper": "^2.0.0", "@types/enzyme": "^3.10.4", "@types/enzyme-adapter-react-16": "^1.0.5", "@types/hapi__joi": "^16.0.12", @@ -142,7 +144,6 @@ "@types/react-router-dom": "^5.1.3", "@types/styled-components": "^5.0.1", "@types/webpack-env": "^1.15.2", - "@types/cytoscape-popper": "^2.0.0", "@typescript-eslint/eslint-plugin": "^4.3.0", "@typescript-eslint/parser": "^4.3.0", "babel-jest": "^26.1.0", diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx index 3173a7560..4f93264e4 100644 --- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx +++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx @@ -6,6 +6,7 @@ import Cytoscape, { EventObject, } from 'cytoscape' import popper from 'cytoscape-popper' +import noOverlap from 'cytoscape-no-overlap' import React, { useState, useEffect, useRef, useCallback } from 'react' import CytoscapeComponent from 'react-cytoscapejs' import styled, { useTheme } from 'styled-components' @@ -27,6 +28,8 @@ import { media } from 'theme/styles/media' import { EmptyItemWrapper } from 'components/common/StyledUserDetailsTable' Cytoscape.use(popper) +Cytoscape.use(noOverlap) + const PROTOCOL_NAME = APP_NAME const WrapperCytoscape = styled(CytoscapeComponent)` background-color: ${({ theme }): string => theme.bg1}; @@ -242,6 +245,7 @@ function TransanctionBatchGraph({ cy.on('mouseout', 'edge', (event): void => { event.target.removeClass('hover') }) + cy.nodes().noOverlap({ padding: 5 }) }, [cytoscapeRef, elements.length]) if (isLoading) diff --git a/src/env.d.ts b/src/env.d.ts new file mode 100644 index 000000000..6108dc477 --- /dev/null +++ b/src/env.d.ts @@ -0,0 +1 @@ +declare module 'cytoscape-no-overlap' diff --git a/yarn.lock b/yarn.lock index aa0ef57c8..aac0dcad3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7839,6 +7839,13 @@ cyclist@^1.0.1: resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk= +cytoscape-no-overlap@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/cytoscape-no-overlap/-/cytoscape-no-overlap-1.0.1.tgz#e677147b357f4ec2aac9c05e04e7c6b9e0ff822b" + integrity sha512-fbNqkSvXFJi6JRdDeVFHAuqnQpNObURvaUS763JYnnm1vakjk1D+/ZxjTtVagg24po+InhJNjBeO8CzpsY4EbQ== + dependencies: + user "0.0.0" + cytoscape-popper@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/cytoscape-popper/-/cytoscape-popper-2.0.0.tgz#d93917695a9b8af3dbda1d8ee433618ac4d4e359" @@ -20128,6 +20135,11 @@ use@^3.1.0: resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ== +user@0.0.0: + version "0.0.0" + resolved "https://registry.yarnpkg.com/user/-/user-0.0.0.tgz#f27f1b23fc511f2a8efa40db55cfba123824e02a" + integrity sha1-8n8bI/xRHyqO+kDbVc+6Ejgk4Co= + utf-8-validate@^5.0.2: version "5.0.5" resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.5.tgz#dd32c2e82c72002dc9f02eb67ba6761f43456ca1" From ff4eded82e68d37e4e58682915137d23718fe74c Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Tue, 31 May 2022 16:50:51 -0300 Subject: [PATCH 3/4] Cast Cytoscape NodeCollection --- .../explorer/components/TransanctionBatchGraph/index.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx index 4f93264e4..e75628f51 100644 --- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx +++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx @@ -4,6 +4,7 @@ import Cytoscape, { NodeDataDefinition, EdgeDataDefinition, EventObject, + NodeCollection, } from 'cytoscape' import popper from 'cytoscape-popper' import noOverlap from 'cytoscape-no-overlap' @@ -190,6 +191,10 @@ interface GraphBatchTxParams { networkId: Network | undefined } +type NodeCollectionTyped = NodeCollection & { + noOverlap: ({ padding }: { padding: number }) => void +} + function getLayout(): Cytoscape.LayoutOptions { return { name: 'grid', @@ -245,7 +250,8 @@ function TransanctionBatchGraph({ cy.on('mouseout', 'edge', (event): void => { event.target.removeClass('hover') }) - cy.nodes().noOverlap({ padding: 5 }) + const nodes = cy.nodes() as NodeCollectionTyped + nodes.noOverlap({ padding: 5 }) }, [cytoscapeRef, elements.length]) if (isLoading) From bafe4aaf5cf506db6dc38dc43d79aa80cfc72119 Mon Sep 17 00:00:00 2001 From: Henry Palacios Date: Fri, 3 Jun 2022 19:44:09 -0300 Subject: [PATCH 4/4] Merge declarations from develop --- .../explorer/components/TransanctionBatchGraph/index.tsx | 8 +------- src/declarations.d.ts | 2 ++ src/env.d.ts | 1 - src/types/cytoscape.d.ts | 4 ++++ 4 files changed, 7 insertions(+), 8 deletions(-) delete mode 100644 src/env.d.ts diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx index 1f0a83f9f..a2349a19f 100644 --- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx +++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx @@ -4,7 +4,6 @@ import Cytoscape, { NodeDataDefinition, EdgeDataDefinition, EventObject, - NodeCollection, } from 'cytoscape' import popper from 'cytoscape-popper' import noOverlap from 'cytoscape-no-overlap' @@ -194,10 +193,6 @@ interface GraphBatchTxParams { networkId: Network | undefined } -type NodeCollectionTyped = NodeCollection & { - noOverlap: ({ padding }: { padding: number }) => void -} - function getLayout(): Cytoscape.LayoutOptions { return { name: 'grid', @@ -263,8 +258,7 @@ function TransanctionBatchGraph({ cy.on('mouseout', 'edge', (event): void => { event.target.removeClass('hover') }) - const nodes = cy.nodes() as NodeCollectionTyped - nodes.noOverlap({ padding: 5 }) + cy.nodes().noOverlap({ padding: 5 }) return (): void => cy.removeAllListeners() }, [cytoscapeRef, elements.length]) diff --git a/src/declarations.d.ts b/src/declarations.d.ts index 4550cd640..214dddb26 100644 --- a/src/declarations.d.ts +++ b/src/declarations.d.ts @@ -160,3 +160,5 @@ declare module '*.md' { } declare module 'eth-json-rpc-middleware/*' + +declare module 'cytoscape-no-overlap' diff --git a/src/env.d.ts b/src/env.d.ts deleted file mode 100644 index 6108dc477..000000000 --- a/src/env.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module 'cytoscape-no-overlap' diff --git a/src/types/cytoscape.d.ts b/src/types/cytoscape.d.ts index 49e9a53b0..e62a28c1a 100644 --- a/src/types/cytoscape.d.ts +++ b/src/types/cytoscape.d.ts @@ -6,4 +6,8 @@ declare module 'cytoscape' { interface Core { removeAllListeners: () => void } + + interface NodeCollection { + noOverlap: ({ padding }: { padding: number }) => void + } }