Add color to relationships in sidebar (#1232)

* Add color to relationships in sidebar
neo4j · Nov 3, 2020 · 71b4019 · 71b4019
1 parent 79a02ef
commit 71b4019
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 19 deletions.
diff --git a/src/browser/modules/DBMSInfo/DBMSInfo.jsx b/src/browser/modules/DBMSInfo/DBMSInfo.jsx
@@ -87,6 +87,7 @@ export function DBMSInfo(props) {
           totalNumItems={relationshipTypes.length}
           onMoreClick={onMoreClick('relationships', relationshipsMax)}
           moreStep={moreStep}
+          graphStyleData={props.graphStyleData}
         />
         <PropertyItems
           properties={properties.slice(0, propertiesMax).map(l => l.val)}

diff --git a/src/browser/modules/DBMSInfo/MetaItems.jsx b/src/browser/modules/DBMSInfo/MetaItems.jsx
@@ -56,14 +56,57 @@ const ShowMore = ({ total, shown, moreStep, onMore }) => {
   )
 }
 
+function createStyleGetter(graphStyleData, kind) {
+  const graphStyle = neoGraphStyle()
+  if (graphStyleData) {
+    graphStyle.loadRules(deepmerge(graphStyle.toSheet(), graphStyleData || {}))
+  }
+
+  if (kind === 'node') {
+    return function(text) {
+      if (graphStyleData) {
+        const styleForItem = graphStyle.forNode({
+          labels: [text]
+        })
+        return {
+          backgroundColor: styleForItem.get('color'),
+          color: styleForItem.get('text-color-internal')
+        }
+      }
+      return {}
+    }
+  }
+  if (kind === 'relationship') {
+    return function(text) {
+      if (graphStyleData) {
+        const styleForItem = graphStyle.forRelationship({
+          type: text
+        })
+        return {
+          backgroundColor: styleForItem.get('color'),
+          color: styleForItem.get('text-color-internal')
+        }
+      }
+      return {}
+    }
+  }
+  throw new Error(`Unsupported argument: ${kind}`)
+}
+function createNodeStyleGetter(graphStyleData) {
+  return createStyleGetter(graphStyleData, 'node')
+}
+function createRelationshipStyleGetter(graphStyleData) {
+  return createStyleGetter(graphStyleData, 'relationship')
+}
+
 const createItems = (
   originalList,
   onItemClick,
   RenderType,
   editorCommandTemplate,
   showStar = true,
   count,
-  graphStyleData
+  styleGetter = () => ({})
 ) => {
   const items = [...originalList]
   if (showStar) {
@@ -73,29 +116,15 @@ const createItems = (
     }
     items.unshift(str)
   }
-  const graphStyle = neoGraphStyle()
-  if (graphStyleData) {
-    graphStyle.loadRules(deepmerge(graphStyle.toSheet(), graphStyleData || {}))
-  }
 
   return items.map((text, index) => {
-    let style = {}
-    if (graphStyleData) {
-      const styleForItem = graphStyle.forNode({
-        labels: [text]
-      })
-      style = {
-        backgroundColor: styleForItem.get('color'),
-        color: styleForItem.get('text-color-internal')
-      }
-    }
     const getNodesCypher = editorCommandTemplate(text, index)
     return (
       <RenderType.component
         data-testid="sidebarMetaItem"
         key={index}
         onClick={() => onItemClick(getNodesCypher)}
-        style={style}
+        style={styleGetter(text)}
       >
         {text}
       </RenderType.component>
@@ -127,7 +156,7 @@ const LabelItems = ({
       editorCommandTemplate,
       true,
       count,
-      graphStyleData
+      createNodeStyleGetter(graphStyleData)
     )
   }
   return (
@@ -151,7 +180,8 @@ const RelationshipItems = ({
   onItemClick,
   moreStep,
   onMoreClick,
-  count
+  count,
+  graphStyleData
 }) => {
   let relationshipItems = <p>No relationships in database</p>
   if (relationshipTypes.length > 0) {
@@ -169,7 +199,8 @@ const RelationshipItems = ({
       { component: StyledRelationship },
       editorCommandTemplate,
       true,
-      count
+      count,
+      createRelationshipStyleGetter(graphStyleData)
     )
   }
   return (