adjusted graph label rendering

dashboard/src/main/home/cluster-dashboard/expanded-chart/graph/Node.tsx

@@ -40,7 +40,9 @@ export default class Node extends Component<PropsType, StateType> {
         h={Math.round(h)}
       >
         <Kind>
-          {this.props.showKindLabels ? kind : null}
+          <StyledMark>
+            {this.props.showKindLabels ? kind : null}
+          </StyledMark>
         </Kind>
         <NodeBlock 
           onMouseDown={nodeMouseDown}
@@ -53,7 +55,9 @@ export default class Node extends Component<PropsType, StateType> {
           <i className="material-icons">{icon}</i>
         </NodeBlock>
         <NodeLabel>
-          {name}
+          <StyledMark>
+            {name}
+          </StyledMark>
         </NodeLabel>
       </StyledNode>
     );
@@ -74,7 +78,7 @@ const Kind = styled.div`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  z-index: 0;
+  z-index: 101;
 `;
 
 const NodeLabel = styled.div`
@@ -89,7 +93,7 @@ const NodeLabel = styled.div`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  z-index: 0;
+  z-index: 101;
 `;
 
 const NodeBlock = styled.div`
@@ -127,4 +131,9 @@ const StyledNode: any = styled.div.attrs((props: NodeType) => ({
   display: flex;
   flex-direction: column;
   align-items: center;
+`;
+
+const StyledMark = styled.mark`
+  background-color: #202227aa;
+  color: #aaaabb;
 `;