Added children count label next to the node key

src/components/CustomNode/TextNode.tsx

@@ -44,6 +44,7 @@ const TextNode: React.FC<CustomNodeProps> = ({
   const { id, text, width, height, data } = node;
   const ref = React.useRef(null);
   const hideCollapse = useStored(state => state.hideCollapse);
+  const hideChildrenCount = useStored(state => state.hideChildrenCount);
   const expandNodes = useGraph(state => state.expandNodes);
   const collapseNodes = useGraph(state => state.collapseNodes);
   const isExpanded = useGraph(state => state.collapsedParents.includes(id));
@@ -81,6 +82,12 @@ const TextNode: React.FC<CustomNodeProps> = ({
           </Styled.StyledKey>
         )}
 
+        {data.isParent && data.childrenCount > 0 && !hideChildrenCount && (
+          <Styled.StyledChildrenCount>
+            ({data.childrenCount})
+          </Styled.StyledChildrenCount>
+        )}
+
         {inViewport && data.isParent && hasCollapse && !hideCollapse && (
           <StyledExpand onClick={handleExpand}>
             {isExpanded ? <MdLinkOff size={18} /> : <MdLink size={18} />}

src/components/CustomNode/index.tsx

@@ -30,7 +30,7 @@ export const CustomNode = (nodeProps: NodeProps) => {
         return (
           <TextNode
             node={node as NodeData}
-            hasCollapse={data.hasChild}
+            hasCollapse={data.childrenCount > 0}
             x={x}
             y={y}
           />

src/components/CustomNode/styles.tsx

@@ -88,3 +88,9 @@ export const StyledRow = styled.span.attrs<{
   white-space: nowrap;
   padding: 0 auto;
 `;
+
+export const StyledChildrenCount = styled.span`
+  color: ${({ theme }) => theme.TEXT_POSITIVE};
+  padding: 10px;
+  margin-left: -15px;
+`;

src/containers/Modals/SettingsModal/index.tsx

@@ -26,6 +26,10 @@ export const SettingsModal: React.FC<{
     state => [state.toggleHideCollapse, state.hideCollapse],
     shallow
   );
+  const [toggleHideChildrenCount, hideChildrenCount] = useStored(
+    state => [state.toggleHideChildrenCount, state.hideChildrenCount],
+    shallow
+  );
 
   return (
     <Modal visible={visible} setVisible={setVisible}>
@@ -35,6 +39,12 @@ export const SettingsModal: React.FC<{
           <StyledToggle onChange={toggleHideCollapse} checked={hideCollapse}>
             Hide Collapse/Expand Button
           </StyledToggle>
+          <StyledToggle
+            onChange={toggleHideChildrenCount}
+            checked={hideChildrenCount}
+          >
+            Hide Children Count
+          </StyledToggle>
           <StyledToggle
             onChange={() => setLightTheme(!lightmode)}
             checked={lightmode}

src/hooks/store/useStored.tsx

@@ -18,6 +18,7 @@ function getTomorrow() {
 export interface Config {
   lightmode: boolean;
   hideCollapse: boolean;
+  hideChildrenCount: boolean;
   sponsors: {
     users: Sponsor[];
     nextDate: number;
@@ -25,6 +26,7 @@ export interface Config {
   setSponsors: (sponsors: Sponsor[]) => void;
   setLightTheme: (theme: boolean) => void;
   toggleHideCollapse: (value: boolean) => void;
+  toggleHideChildrenCount: (value: boolean) => void;
 }
 
 const useStored = create(
@@ -32,6 +34,7 @@ const useStored = create(
     set => ({
       lightmode: false,
       hideCollapse: false,
+      hideChildrenCount: true,
       sponsors: {
         users: [],
         nextDate: Date.now(),
@@ -48,6 +51,7 @@ const useStored = create(
           },
         }),
       toggleHideCollapse: (value: boolean) => set({ hideCollapse: value }),
+      toggleHideChildrenCount: (value: boolean) => set({ hideChildrenCount: value }),
     }),
     {
       name: "config",

src/typings/types.d.ts

@@ -2,7 +2,7 @@ type CanvasDirection = "LEFT" | "RIGHT" | "DOWN" | "UP";
 
 interface CustomNodeData {
   isParent: true;
-  hasChild: number;
+  childrenCount: children.length;
   children: NodeData[];
 }
 

src/utils/jsonParser.ts

@@ -63,7 +63,7 @@ function generateChildren(object: Object, isExpanded = true, nextId: () => strin
           height,
           data: {
             isParent: true,
-            hasChild: !!children.length,
+            childrenCount: children.length,
           },
         },
       ];
@@ -101,7 +101,7 @@ const extract = (
       children: generateChildren(o, isExpanded, nextId),
       data: {
         isParent: false,
-        hasChild: false,
+        childrenCount: 0,
         isEmpty: !text.length,
       },
     };