[Batch Viewer] Zoom and drag improvements

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",

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'
@@ -29,6 +30,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import useWindowSizes from 'hooks/useWindowSizes'
 
 Cytoscape.use(popper)
+Cytoscape.use(noOverlap)
+
 const PROTOCOL_NAME = APP_NAME
 const WrapperCytoscape = styled(CytoscapeComponent)`
   background-color: ${({ theme }): string => theme.bg1};
@@ -255,6 +258,7 @@ function TransanctionBatchGraph({
     cy.on('mouseout', 'edge', (event): void => {
       event.target.removeClass('hover')
     })
+    cy.nodes().noOverlap({ padding: 5 })
 
     return (): void => cy.removeAllListeners()
   }, [cytoscapeRef, elements.length])

src/apps/explorer/components/TransanctionBatchGraph/styled.ts

@@ -114,6 +114,7 @@ export function STYLESHEET(theme: DefaultTheme): Stylesheet[] {
       style: {
         'border-style': 'dashed',
         'border-opacity': 0.8,
+        opacity: 0.8,
       },
     },
   ]

src/declarations.d.ts

@@ -160,3 +160,5 @@ declare module '*.md' {
 }
 
 declare module 'eth-json-rpc-middleware/*'
+
+declare module 'cytoscape-no-overlap'

src/types/cytoscape.d.ts

@@ -6,4 +6,8 @@ declare module 'cytoscape' {
   interface Core {
     removeAllListeners: () => void
   }
+
+  interface NodeCollection {
+    noOverlap: ({ padding }: { padding: number }) => void
+  }
 }

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==
 
+[email protected]:
+  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"