Remove padding in viz details pane in arc

To allow custom padding when overriding content.

Removed PaneContainer since not used.

Author: eijawerner

src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx

@@ -23,7 +23,7 @@ import { ClipboardCopier, PropertiesTable, upperFirst } from 'neo4j-arc/common'
 
 import { StyleableNodeLabel } from './StyleableNodeLabel'
 import { StyleableRelType } from './StyleableRelType'
-import { PaneBody, PaneHeader, PaneTitle } from './styled'
+import { PaneBody, PaneHeader, PaneTitle, PaneWrapper } from './styled'
 import { DetailsPaneProps } from 'neo4j-arc'
 
 export const DETAILS_PANE_STEP_SIZE = 1000
@@ -51,7 +51,7 @@ export function DetailsPane({
   }
 
   return (
-    <>
+    <PaneWrapper>
       <PaneHeader>
         <PaneTitle>
           <span>{`${upperFirst(vizItem.type)} properties`}</span>
@@ -95,6 +95,6 @@ export function DetailsPane({
           nodeInspectorWidth={nodeInspectorWidth}
         />
       </PaneBody>
-    </>
+    </PaneWrapper>
   )
 }

src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/OverviewPane.tsx

@@ -34,6 +34,7 @@ import {
   PaneBodySectionSmallText,
   PaneBodySectionTitle,
   PaneHeader,
+  PaneWrapper,
   StyledLegendInlineList
 } from './styled'
 
@@ -92,7 +93,7 @@ export default function OverviewPane({
   const totalNumOfRelTypes = relTypes ? Object.keys(relTypes).length : 0
 
   return (
-    <>
+    <PaneWrapper>
       <PaneHeader>{'Overview'}</PaneHeader>
       <PaneBody>
         {labels && visibleLabelKeys.length !== 0 && (
@@ -172,6 +173,6 @@ export default function OverviewPane({
             )} nodes, ${numberToUSLocale(relationshipCount)} relationships.`}
         </div>
       </PaneBody>
-    </>
+    </PaneWrapper>
   )
 }

src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/styled.tsx

@@ -138,11 +138,8 @@ export const StyledNodeInspectorContainer = styled.div<{
   box-shadow: ${props => props.theme.standardShadow};
 `
 
-export const PaneContainer = styled.div`
+export const PaneWrapper = styled.div`
   padding: 0 14px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
 `
 
 export const PaneHeader = styled.div`

src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultDetailsPane.tsx

@@ -22,7 +22,7 @@ import React, { useState } from 'react'
 import { ClipboardCopier, PropertiesTable, upperFirst } from 'neo4j-arc/common'
 import { NodeItem, RelationshipItem } from '../../types'
 
-import { PaneBody, PaneHeader, PaneTitle } from './styled'
+import { PaneBody, PaneHeader, PaneTitle, PaneWrapper } from './styled'
 import { NodeLabel } from './NodeLabel'
 import { RelType } from './RelType'
 import { GraphStyleModel } from '../../models/GraphStyle'
@@ -57,7 +57,7 @@ export function DefaultDetailsPane({
   }
 
   return (
-    <>
+    <PaneWrapper>
       <PaneHeader>
         <PaneTitle>
           <span>{`${upperFirst(vizItem.type)} properties`}</span>
@@ -101,6 +101,6 @@ export function DefaultDetailsPane({
           nodeInspectorWidth={nodeInspectorWidth}
         />
       </PaneBody>
-    </>
+    </PaneWrapper>
   )
 }

src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultOverviewPane.tsx

@@ -33,7 +33,8 @@ import {
   PaneBodySectionHeaderWrapper,
   PaneBodySectionSmallText,
   PaneBodySectionTitle,
-  StyledLegendInlineList
+  StyledLegendInlineList,
+  PaneWrapper
 } from './styled'
 
 import { NodeLabel } from './NodeLabel'
@@ -103,7 +104,7 @@ function DefaultOverviewPane({
   const totalNumOfRelTypes = relTypes ? Object.keys(relTypes).length : 0
 
   return (
-    <>
+    <PaneWrapper>
       <PaneHeader>{'Overview'}</PaneHeader>
       <PaneBody>
         {labels && visibleLabelKeys.length !== 0 && (
@@ -183,7 +184,7 @@ function DefaultOverviewPane({
             )} nodes, ${numberToUSLocale(relationshipCount)} relationships.`}
         </div>
       </PaneBody>
-    </>
+    </PaneWrapper>
   )
 }
 

src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/styled.tsx

@@ -44,6 +44,10 @@ export const NonClickableRelTypeChip = styled(StyledRelationshipChip)`
   cursor: default;
 `
 
+export const PaneWrapper = styled.div`
+  padding: 0 14px;
+`
+
 export const PaneHeader = styled.div`
   font-size: 16px;
   margin-top: 10px;

src/neo4j-arc/graph-visualization/GraphVisualizer/styled.tsx

@@ -68,7 +68,6 @@ export const PaneContainer = styled.div<{
   paneWidth: number
 }>`
   width: ${props => props.paneWidth}px;
-  padding: 0 14px;
   height: 100%;
   display: flex;
   flex-direction: column;

src/neo4j-arc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-devtools/arc",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "main": "dist/neo4j-arc.js",
   "author": "Neo4j Inc.",
   "license": "GPL-3.0",