neo4j · OskarDamkjaer · Mar 1, 2023 · Mar 1, 2023 · Mar 1, 2023
diff --git a/package.json b/package.json
@@ -142,8 +142,8 @@
     "ncp": "^2.0.0",
     "nock": "^12.0.3",
     "postcss": "^6.0.11",
-    "postcss-preset-env": "^3.0.2",
     "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^3.0.2",
     "precss": "^2.0.0",
     "prettier-eslint": "^13.0.0",
     "prettier-eslint-cli": "^5.0.0",
@@ -169,6 +169,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.2.0",
+    "@heroicons/react": "^2.0.16",
     "@juggle/resize-observer": "^3.3.1",
     "@neo4j-devtools/word-color": "^0.0.7",
     "@neo4j-ndl/base": "^0.8.7",

diff --git a/...odules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/StyleableNodeLabel.tsx b/...odules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/StyleableNodeLabel.tsx
@@ -62,9 +62,7 @@ export function StyleableNodeLabel({
           }}
           data-testid={`property-details-overview-node-label-${selectedLabel.label}`}
         >
-          {count !== undefined
-            ? `${selectedLabel.label} (${count})`
-            : `${selectedLabel.label}`}
+          {`${selectedLabel.label}${count || count === 0 ? ` (${count})` : ''}`}
         </StyledLabelChip>
       }
     >

diff --git a/src/neo4j-arc/common/icons/Icons.tsx b/src/neo4j-arc/common/icons/Icons.tsx
@@ -1,4 +1,12 @@
-import { HeroIcon, CustomIcon } from '@neo4j-ndl/react'
+import {
+  ChevronRightIcon as ChevronRightIconSolid,
+  ChevronLeftIcon as ChevronLeftIconSolid,
+  InformationCircleIcon,
+  MagnifyingGlassPlusIcon,
+  MagnifyingGlassMinusIcon,
+  ExclamationTriangleIcon
+} from '@heroicons/react/24/solid'
+import { DocumentDuplicateIcon } from '@heroicons/react/24/outline'
 import React from 'react'
 
 const SMALL_SIZE = 15
@@ -10,33 +18,17 @@ export type IconBaseProps = { size?: IconSize }
 const getSize = (size?: IconSize) =>
   size && size === 'large' ? LARGE_SIZE : SMALL_SIZE
 
-export const ChevronRightIcon = (): JSX.Element => (
-  <HeroIcon iconName="ChevronRightIcon" type="solid" />
-)
+export const ChevronRightIcon = (): JSX.Element => <ChevronRightIconSolid />
 
-export const ChevronLeftIcon = (): JSX.Element => (
-  <HeroIcon iconName="ChevronLeftIcon" type="solid" />
-)
+export const ChevronLeftIcon = (): JSX.Element => <ChevronLeftIconSolid />
 
 type WidthProps = { width?: number }
 export const CopyIcon = ({ width = SMALL_SIZE }: WidthProps): JSX.Element => (
-  <HeroIcon
-    iconName="DocumentDuplicateIcon"
-    type="outline"
-    width={width}
-    height={width}
-  />
+  <DocumentDuplicateIcon width={width} height={width} />
 )
 
 export const InfoIcon = ({ size }: IconBaseProps): JSX.Element => {
-  return (
-    <HeroIcon
-      iconName="InformationCircleIcon"
-      type="solid"
-      width={getSize(size)}
-      height={getSize(size)}
-    />
-  )
+  return <InformationCircleIcon width={getSize(size)} height={getSize(size)} />
 }
 
 const ZOOM_ICONS_DEFAULT_SIZE_IN_PX = SMALL_SIZE
@@ -48,8 +40,7 @@ export const ZoomInIcon = ({
 }): JSX.Element => {
   const scale = large ? ZOOM_ICONS_LARGE_SCALE_FACTOR : 1
   return (
-    <HeroIcon
-      iconName="ZoomInIcon"
+    <MagnifyingGlassPlusIcon
       width={scale * ZOOM_ICONS_DEFAULT_SIZE_IN_PX}
       height={scale * ZOOM_ICONS_DEFAULT_SIZE_IN_PX}
     />
@@ -62,8 +53,7 @@ export const ZoomOutIcon = ({
 }): JSX.Element => {
   const scale = large ? ZOOM_ICONS_LARGE_SCALE_FACTOR : 1
   return (
-    <HeroIcon
-      iconName="ZoomOutIcon"
+    <MagnifyingGlassMinusIcon
       width={scale * ZOOM_ICONS_DEFAULT_SIZE_IN_PX}
       height={scale * ZOOM_ICONS_DEFAULT_SIZE_IN_PX}
     />
@@ -76,20 +66,23 @@ export const ZoomToFitIcon = ({
   large?: boolean
 }): JSX.Element => {
   const scale = large ? ZOOM_ICONS_LARGE_SCALE_FACTOR : 1
+
   return (
-    <CustomIcon
-      iconName="FitToScreen"
+    <svg
       width={scale * ZOOM_ICONS_DEFAULT_SIZE_IN_PX}
       height={scale * ZOOM_ICONS_DEFAULT_SIZE_IN_PX}
-    />
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.6162 17.6164L17.0859 17.0861L17.0859 17.0861L17.6162 17.6164ZM17.6162 6.38354L17.0859 6.91387L17.0859 6.91387L17.6162 6.38354ZM6.38339 6.38354L5.85306 5.85321H5.85306L6.38339 6.38354ZM6.38339 17.6164L6.91372 17.0861L6.91372 17.0861L6.38339 17.6164ZM20.341 3.65901L19.8107 4.18934L20.341 3.65901ZM3.65901 3.65901L4.18934 4.18934L3.65901 3.65901ZM3.65901 20.341L4.18934 19.8107L3.65901 20.341ZM21.75 14.3789C21.75 13.9646 21.4142 13.6289 21 13.6289C20.5858 13.6289 20.25 13.9646 20.25 14.3789H21.75ZM14.3723 20.25C13.9581 20.25 13.6223 20.5858 13.6223 21C13.6223 21.4142 13.9581 21.75 14.3723 21.75V20.25ZM9.75576 21.75C10.17 21.75 10.5058 21.4142 10.5058 21C10.5058 20.5858 10.17 20.25 9.75576 20.25V21.75ZM3.75 14.3789C3.75 13.9646 3.41421 13.6289 3 13.6289C2.58579 13.6289 2.25 13.9646 2.25 14.3789H3.75ZM2.25 9.94377C2.25 10.358 2.58579 10.6938 3 10.6938C3.41421 10.6938 3.75 10.358 3.75 9.94377H2.25ZM9.75576 3.75C10.17 3.75 10.5058 3.41421 10.5058 3C10.5058 2.58579 10.17 2.25 9.75576 2.25V3.75ZM14.3723 2.25C13.9581 2.25 13.6223 2.58579 13.6223 3C13.6223 3.41421 13.9581 3.75 14.3723 3.75V2.25ZM20.25 9.94377C20.25 10.358 20.5858 10.6938 21 10.6938C21.4142 10.6938 21.75 10.358 21.75 9.94377H20.25ZM7.45468 18.8101H16.5449V17.3101H7.45468V18.8101ZM16.5449 18.8101C17.1457 18.8101 17.7218 18.5715 18.1466 18.1467L17.0859 17.0861C16.9424 17.2295 16.7478 17.3101 16.5449 17.3101V18.8101ZM18.1466 18.1467C18.5713 17.7219 18.81 17.1458 18.81 16.5451H17.31C17.31 16.748 17.2294 16.9426 17.0859 17.0861L18.1466 18.1467ZM18.81 16.5451V7.45483H17.31V16.5451H18.81ZM18.81 7.45483C18.81 6.85411 18.5713 6.27798 18.1466 5.85321L17.0859 6.91387C17.2294 7.05734 17.31 7.25194 17.31 7.45483H18.81ZM18.1466 5.85321C17.7218 5.42843 17.1457 5.18979 16.5449 5.18979V6.68979C16.7478 6.68979 16.9424 6.77039 17.0859 6.91387L18.1466 5.85321ZM16.5449 5.18979H7.45468V6.68979H16.5449V5.18979ZM7.45468 5.18979C6.85396 5.18979 6.27784 5.42843 5.85306 5.85321L6.91372 6.91387C7.05719 6.7704 7.25178 6.68979 7.45468 6.68979V5.18979ZM5.85306 5.85321C5.42828 6.27799 5.18964 6.85411 5.18964 7.45483H6.68964C6.68964 7.25193 6.77024 7.05734 6.91372 6.91387L5.85306 5.85321ZM5.18964 7.45483V16.5451H6.68964V7.45483H5.18964ZM5.18964 16.5451C5.18964 17.1458 5.42828 17.7219 5.85306 18.1467L6.91372 17.0861C6.77024 16.9426 6.68964 16.748 6.68964 16.5451H5.18964ZM5.85306 18.1467C6.27783 18.5715 6.85396 18.8101 7.45468 18.8101V17.3101C7.25178 17.3101 7.05719 17.2295 6.91372 17.0861L5.85306 18.1467ZM18.75 21.75C19.5457 21.75 20.3087 21.4339 20.8713 20.8713L19.8107 19.8107C19.5294 20.092 19.1478 20.25 18.75 20.25V21.75ZM20.8713 20.8713C21.4339 20.3087 21.75 19.5457 21.75 18.75H20.25C20.25 19.1478 20.092 19.5294 19.8107 19.8107L20.8713 20.8713ZM21.75 5.25C21.75 4.45435 21.4339 3.69129 20.8713 3.12868L19.8107 4.18934C20.092 4.47064 20.25 4.85218 20.25 5.25H21.75ZM20.8713 3.12868C20.3087 2.56607 19.5457 2.25 18.75 2.25V3.75C19.1478 3.75 19.5294 3.90803 19.8107 4.18934L20.8713 3.12868ZM5.25 2.25C4.45435 2.25 3.69129 2.56607 3.12868 3.12868L4.18934 4.18934C4.47064 3.90804 4.85218 3.75 5.25 3.75V2.25ZM3.12868 3.12868C2.56607 3.69129 2.25 4.45435 2.25 5.25H3.75C3.75 4.85218 3.90804 4.47064 4.18934 4.18934L3.12868 3.12868ZM2.25 18.75C2.25 19.5457 2.56607 20.3087 3.12868 20.8713L4.18934 19.8107C3.90803 19.5294 3.75 19.1478 3.75 18.75H2.25ZM3.12868 20.8713C3.69129 21.4339 4.45435 21.75 5.25 21.75V20.25C4.85218 20.25 4.47064 20.092 4.18934 19.8107L3.12868 20.8713ZM21.75 18.75V14.3789H20.25V18.75H21.75ZM18.75 20.25H14.3723V21.75H18.75V20.25ZM5.25 21.75H9.75576V20.25H5.25V21.75ZM3.75 18.75V14.3789H2.25V18.75H3.75ZM2.25 5.25V9.94377H3.75V5.25H2.25ZM5.25 3.75H9.75576V2.25H5.25V3.75ZM18.75 2.25H14.3723V3.75H18.75V2.25ZM20.25 5.25V9.94377H21.75V5.25H20.25Z"
+        fill="currentColor"
+      />
+    </svg>
   )
 }
 
 export const WarningIcon = ({ size }: IconBaseProps): JSX.Element => (
-  <HeroIcon
-    iconName="ExclamationIcon"
-    type="solid"
-    width={getSize(size)}
-    height={getSize(size)}
-  />
+  <ExclamationTriangleIcon width={getSize(size)} height={getSize(size)} />
 )
diff --git a/src/neo4j-arc/common/styles/themes.tsx b/src/neo4j-arc/common/styles/themes.tsx
@@ -17,7 +17,6 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { palette as needlePalette } from '@neo4j-ndl/base/lib/tokens/js/tokens'
 import { ThemeProvider } from 'styled-components'
 import React from 'react'
 
@@ -47,16 +46,16 @@ export const baseArcTheme = {
   // Frame
   frameSidebarBackground: '#FFF',
   frameControlButtonTextColor: '#485662',
-  frameButtonTextColor: needlePalette.light.neutral.text.weaker,
-  frameButtonHoverBackground: needlePalette.light.neutral.hover,
-  frameButtonActiveBackground: needlePalette.light.neutral.pressed,
+  frameButtonTextColor: '#717780',
+  frameButtonHoverBackground: 'rgba(113,119,128,0.1)',
+  frameButtonActiveBackground: 'rgba(113,119,128,0.2)',
   frameNodePropertiesPanelIconTextColor: '#717172',
   frameBackground: '#F9FCFF',
 
   // Info message
-  infoBackground: needlePalette.light.primary.bg.weak,
-  infoBorder: `1px solid ${needlePalette.light.primary.border.weak}`,
-  infoIconColor: needlePalette.light.primary.icon
+  infoBackground: '#e6f8ff',
+  infoBorder: '1px solid #7ad1ff',
+  infoIconColor: '#006FD6'
 }
 
 export const light = {

diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/NodeLabel.tsx b/src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/NodeLabel.tsx
@@ -52,9 +52,7 @@ export function NodeLabel({
         color: graphStyleForLabel.get('text-color-internal')
       }}
     >
-      {count !== undefined
-        ? `${selectedLabel.label} (${count})`
-        : `${selectedLabel.label}`}
+      {`${selectedLabel.label}${count || count === 0 ? ` (${count})` : ''}`}
     </NonClickableLabelChip>
   )
 }
diff --git a/src/neo4j-arc/package.json b/src/neo4j-arc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-devtools/arc",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "main": "dist/neo4j-arc.js",
   "author": "Neo4j Inc.",
   "license": "GPL-3.0",
@@ -21,8 +21,6 @@
     "LICENSE"
   ],
   "devDependencies": {
-    "@neo4j-ndl/base": "^0.8.7",
-    "@neo4j-ndl/react": "^0.9.2",
     "@rollup/plugin-alias": "^3.1.9",
     "@types/react": "^17.0.40",
     "esbuild": "^0.14.26",
@@ -35,6 +33,7 @@
     "typescript": "^4.6.2"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.16",
     "@juggle/resize-observer": "^3.3.1",
     "@neo4j-devtools/word-color": "^0.0.7",
     "@types/d3-color": "^3.0.2",
@@ -66,8 +65,6 @@
     "styled-components": "^5.3.5"
   },
   "peerDependencies": {
-    "@neo4j-ndl/base": "^0.1.2",
-    "@neo4j-ndl/react": "^0.1.2",
     "neo4j-driver-core": "^5.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

diff --git a/src/neo4j-arc/rollup.config.js b/src/neo4j-arc/rollup.config.js
@@ -4,10 +4,11 @@ import alias from '@rollup/plugin-alias'
 import pkg from './package.json'
 
 const importsWithPaths = [
-  '@neo4j-ndl/base/lib/tokens/js/tokens',
   'monaco-editor/esm/vs/base/parts/quickinput/browser/quickInputList',
   'monaco-editor/esm/vs/editor/editor.api',
-  'monaco-editor/esm/vs/editor/editor.all.js'
+  'monaco-editor/esm/vs/editor/editor.all.js',
+  '@heroicons/react/24/solid',
+  '@heroicons/react/24/outline'
 ]
 
 const dependenciesNotToBundle = Object.keys({