Code clean up and fix node menu collisions

Signed-off-by: Everett Ross <[email protected]>

packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/index.css

@@ -14,6 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+/*
+ * Because .plexus-Digraph--MeasurableHtmlNode is `position: absolute`, adding a z-index to DdgNodeContent
+ * would have no effect on layering.
+ */
+.plexus-Digraph--MeasurableHtmlNode:hover {
+  z-index: 1;
+}
+
 .DdgNodeContent--core {
   background: #eee;
   border-radius: 100%;
@@ -66,6 +74,7 @@ limitations under the License.
 }
 
 .DdgNodeContent--actionsItemIconWrapper {
+  flex: none;
   height: 16px;
   width: 16px;
 }

packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/index.test.js

@@ -142,10 +142,10 @@ describe('<DdgNodeContent>', () => {
 
     it('cancels delayed set state if mouse re-enters before timeout runs', () => {
       wrapper.simulate('mouseleave', { type: 'mouseleave' });
-      expect(wrapper.instance().timeout).toEqual(expect.any(Number));
+      expect(wrapper.instance().hoverClearDelay).toEqual(expect.any(Number));
 
       wrapper.simulate('mouseenter', { type: 'mouseenter' });
-      expect(wrapper.instance().timeout).toBeUndefined();
+      expect(wrapper.instance().hoverClearDelay).toBeUndefined();
 
       jest.runAllTimers();
       expect(wrapper.state('hovered')).toBe(true);

packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/index.tsx

@@ -62,7 +62,7 @@ type TProps = {
 };
 
 export default class DdgNodeContent extends React.PureComponent<TProps> {
-  timeout?: number;
+  hoverClearDelay?: number;
 
   state = {
     hovered: false,
@@ -186,16 +186,16 @@ export default class DdgNodeContent extends React.PureComponent<TProps> {
     const hovered = event.type === 'mouseenter';
     setViewModifier(vertexKey, EViewModifier.Hovered, hovered);
     if (hovered) {
-      if (this.timeout) {
-        clearTimeout(this.timeout);
-        this.timeout = undefined;
+      if (this.hoverClearDelay) {
+        clearTimeout(this.hoverClearDelay);
+        this.hoverClearDelay = undefined;
       } else {
         this.setState({ hovered });
       }
     } else {
-      this.timeout = setTimeout(() => {
+      this.hoverClearDelay = setTimeout(() => {
         this.setState({ hovered });
-        this.timeout = undefined;
+        this.hoverClearDelay = undefined;
       }, 150);
     }
   };

packages/jaeger-ui/src/components/DeepDependencies/index.test.js

@@ -76,6 +76,7 @@ describe('DeepDependencyGraphPage', () => {
     };
     const ddgPageImpl = new DeepDependencyGraphPageImpl(props);
     const ddgWithoutGraph = new DeepDependencyGraphPageImpl(propsWithoutGraph);
+    const setIdx = visibilityIdx => ({ visibilityIdx });
 
     describe('constructor', () => {
       beforeEach(() => {
@@ -195,17 +196,17 @@ describe('DeepDependencyGraphPage', () => {
           expect(trackFocusPathsSpy).not.toHaveBeenCalled();
         });
 
-        it('udates url state and tracks focus paths', () => {
+        it('updates url state and tracks focus paths', () => {
           const indices = [4, 8, 15, 16, 23, 42];
           const elems = [
             {
               memberOf: {
-                members: indices.slice(0, indices.length / 2).map(visibilityIdx => ({ visibilityIdx })),
+                members: indices.slice(0, indices.length / 2).map(setIdx),
               },
             },
             {
               memberOf: {
-                members: indices.slice(indices.length / 2).map(visibilityIdx => ({ visibilityIdx })),
+                members: indices.slice(indices.length / 2).map(setIdx),
               },
             },
           ];
@@ -235,10 +236,14 @@ describe('DeepDependencyGraphPage', () => {
           expect(trackHideSpy).not.toHaveBeenCalled();
         });
 
-        it('udates url state and tracks hide', () => {
+        it('updates url state and tracks hide', () => {
           props.graph.getVisWithoutVertex.mockReturnValueOnce(visEncoding);
           ddgPageImpl.hideVertex(vertexKey);
 
+          expect(props.graph.getVisWithoutVertex).toHaveBeenLastCalledWith(
+            vertexKey,
+            props.urlState.visEncoding
+          );
           expect(getUrlSpy).toHaveBeenLastCalledWith(
             Object.assign({}, props.urlState, { visEncoding }),
             undefined
@@ -417,13 +422,18 @@ describe('DeepDependencyGraphPage', () => {
           expect(trackShowSpy).not.toHaveBeenCalled();
         });
 
-        it('udates url state and tracks hide if result.status is ECheckedStatus.Empty', () => {
+        it('updates url state and tracks hide if result.status is ECheckedStatus.Empty', () => {
           props.graph.getVisWithUpdatedGeneration.mockReturnValueOnce({
             visEncoding,
             update: ECheckedStatus.Empty,
           });
           ddgPageImpl.updateGenerationVisibility(vertexKey, direction);
 
+          expect(props.graph.getVisWithUpdatedGeneration).toHaveBeenLastCalledWith(
+            vertexKey,
+            direction,
+            props.urlState.visEncoding
+          );
           expect(getUrlSpy).toHaveBeenLastCalledWith(
             Object.assign({}, props.urlState, { visEncoding }),
             undefined
@@ -433,13 +443,18 @@ describe('DeepDependencyGraphPage', () => {
           expect(trackShowSpy).not.toHaveBeenCalled();
         });
 
-        it('udates url state and tracks show if result.status is ECheckedStatus.Full', () => {
+        it('updates url state and tracks show if result.status is ECheckedStatus.Full', () => {
           props.graph.getVisWithUpdatedGeneration.mockReturnValueOnce({
             visEncoding,
             update: ECheckedStatus.Full,
           });
           ddgPageImpl.updateGenerationVisibility(vertexKey, direction);
 
+          expect(props.graph.getVisWithUpdatedGeneration).toHaveBeenLastCalledWith(
+            vertexKey,
+            direction,
+            props.urlState.visEncoding
+          );
           expect(getUrlSpy).toHaveBeenLastCalledWith(
             Object.assign({}, props.urlState, { visEncoding }),
             undefined
@@ -457,10 +472,8 @@ describe('DeepDependencyGraphPage', () => {
       let warnSpy;
 
       beforeAll(() => {
-        props.graph.getVertexVisiblePathElems.mockReturnValue(
-          visibilityIndices.map(visibilityIdx => ({ visibilityIdx }))
-        );
-        warnSpy = jest.spyOn(console, 'warn').mockImplementation();
+        props.graph.getVertexVisiblePathElems.mockReturnValue(visibilityIndices.map(setIdx));
+        warnSpy = jest.spyOn(console, 'warn').mockImplementationOnce();
       });
 
       beforeEach(() => {

packages/jaeger-ui/src/components/DeepDependencies/index.tsx

@@ -142,10 +142,9 @@ export class DeepDependencyGraphPageImpl extends React.PureComponent<TProps> {
 
   hideVertex = (vertexKey: string) => {
     const { graph, urlState } = this.props;
-    const { visEncoding: currVisEncoding } = urlState;
     if (!graph) return;
 
-    const visEncoding = graph.getVisWithoutVertex(vertexKey, currVisEncoding);
+    const visEncoding = graph.getVisWithoutVertex(vertexKey, urlState.visEncoding);
     if (!visEncoding) return;
 
     trackHide();
@@ -219,10 +218,9 @@ export class DeepDependencyGraphPageImpl extends React.PureComponent<TProps> {
 
   updateGenerationVisibility = (vertexKey: string, direction: EDirection) => {
     const { graph, urlState } = this.props;
-    const { visEncoding: currVisEncoding } = urlState;
     if (!graph) return;
 
-    const result = graph.getVisWithUpdatedGeneration(vertexKey, direction, currVisEncoding);
+    const result = graph.getVisWithUpdatedGeneration(vertexKey, direction, urlState.visEncoding);
     if (!result) return;
 
     const { visEncoding, update } = result;