Merge pull request jaegertracing#488 from everett980/ddg-optional-ope…

…ration

Ddg optional operation

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

@@ -157,6 +157,23 @@ describe('calcPositioning', () => {
         );
         expect(svcMarginTop).toBe(radius - lineHeight - OP_PADDING_TOP / 2);
       });
+
+      it('treats multiple operations as a single word', () => {
+        const maxSvcLines = 2;
+        const operationCount = 10;
+        svcMeasurements = genWidths(new Array(maxSvcLines).fill(0.5));
+        opMeasurements = genWidths(new Array(operationCount).fill(3));
+        const { opWidth, radius, svcWidth, svcMarginTop } = calcPositioning(
+          genStr(maxSvcLines),
+          new Array(operationCount).fill(genStr(1))
+        );
+        expect(measureSvc).toHaveBeenCalledTimes(maxSvcLines);
+        expect(measureOp).toHaveBeenCalledTimes(1);
+        expect(svcWidth).toBe(1 * lineHeight);
+        expect(opWidth).toBe(3 * lineHeight);
+        expect(radius).toMatchInlineSnapshot(`34.51869478592516`);
+        expect(svcMarginTop).toBeCloseTo(radius - radius * Math.sin(Math.acos(svcWidth / 2 / radius)), 8);
+      });
     });
 
     describe('neglible service rectangle', () => {

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

@@ -149,11 +149,13 @@ function calcWidth(lengths: number[], lines: number, longestThusFar: number = 0)
  * @returns {TRect[]} - Possible bounding rectangles.
  */
 const calcRects = _memoize(
-  function calcRects(str: string, span: HTMLSpanElement): TRect[] {
-    const lengths = (str.match(WORD_RX) || [str]).map(s => {
-      span.innerHTML = s; // eslint-disable-line no-param-reassign
-      return span.getClientRects()[0].width;
-    });
+  function calcRects(str: string | string[], span: HTMLSpanElement): TRect[] {
+    const lengths = (Array.isArray(str) ? [`${str.length} Operations}`] : str.match(WORD_RX) || [str]).map(
+      s => {
+        span.innerHTML = s; // eslint-disable-line no-param-reassign
+        return span.getClientRects()[0].width;
+      }
+    );
 
     const rects: TRect[] = [];
     for (let lines = 1; lines <= lengths.length; lines++) {
@@ -240,8 +242,11 @@ function smallestRadius(svcRects: TRect[], opRects?: TRect[]): TSmallestRadiusRV
   return rv;
 }
 
-const calcPositioning: (service: string, operation?: string | null) => TSmallestRadiusRV = _memoize(
-  function calcPositioningImpl(service: string, operation?: string | null) {
+const calcPositioning: (
+  service: string,
+  operation?: string | string[] | null
+) => TSmallestRadiusRV = _memoize(
+  function calcPositioningImpl(service: string, operation?: string | string[] | null) {
     const svcRects = calcRects(service, _initSvcSpan());
     const opRects = operation ? calcRects(operation, _initOpSpan()) : undefined;
 

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

@@ -16,9 +16,17 @@ limitations under the License.
 
 /*
  * Because .plexus-Digraph--MeasurableHtmlNode is `position: absolute`, adding a z-index to DdgNodeContent
- * would have no effect on layering.
+ * would have no effect on layering between different nodes.
  */
+.plexus-Digraph--MeasurableHtmlNode {
+  /* transition-delay must equal .DdgNodeContent--actionsWrapper transition delay plus duration */
+  transition-delay: 250ms;
+  transition-property: z-index;
+  z-index: 0;
+}
+
 .plexus-Digraph--MeasurableHtmlNode:hover {
+  transition-delay: 0s;
   z-index: 1;
 }
 
@@ -60,7 +68,19 @@ limitations under the License.
   bottom: 100%;
   box-shadow: 0 0px 4px 1px rgba(0, 0, 0, 0.1);
   left: 1em;
+  opacity: 0;
+  pointer-events: none;
   position: absolute;
+  /* transition delay plus duration must equal .plexus-Digraph--MeasurableHtmlNode transition-delay  */
+  transition-delay: 150ms;
+  transition-duration: 0.1s;
+  transition-property: opacity;
+}
+
+.DdgNodeContent:hover > .DdgNodeContent--actionsWrapper {
+  opacity: 1;
+  pointer-events: all;
+  transition-delay: 0s;
 }
 
 .DdgNodeContent--actionsItem {