Service map updates

public/components/trace_analytics/components/common/helper_functions.tsx

@@ -184,8 +184,12 @@
       const percent = (value - ticks[0]) / (ticks[ticks.length - 1] - ticks[0]);
       const color = getServiceMapScaleColor(percent, idSelected);
       styleOptions = {
-        borderWidth: 0,
-        color: relatedServices!.indexOf(service) >= 0 ? `rgba(${color}, 1)` : `rgba(${color}, 0.2)`,
+        borderWidth: 3,
+        color: {
+          border: '#4A4A4A',
+          background:
+            relatedServices!.indexOf(service) >= 0 ? `rgba(${color}, 1)` : `rgba(${color}, 0.2)`,
+        },
         font: {
           color:
             relatedServices!.indexOf(service) >= 0
@@ -195,10 +199,10 @@
       };
     } else {
       styleOptions = {
-        borderWidth: 1.0,
+        borderWidth: 3,
         chosen: false,
         color: {
-          border: '#DADADC',
+          border: '#4A4A4A',
           background: '#FFFFFF',
         },
       };
@@ -325,7 +329,7 @@
   percentileMaps: Array<{ traceGroupName: string; durationFilter: { gte?: number; lte?: number } }>,
   conditionString: string // >= 95th, < 95th
 ): FilterType => {
   const DSL: any = {
     query: {
       bool: {
         must: [],
@@ -370,12 +374,12 @@
   mode: TraceAnalyticsMode,
   filters: FilterType[],
   query: string,
   startTime: any,
   endTime: any,
   page?: string,
   appConfigs: FilterType[] = []
 ) => {
   const DSL: any = {
     query: {
       bool: {
         must: [],

public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`Service map component renders service map 1`] = `
       buttonSize="s"
       color="text"
       idSelected="latency"
+      legend="Select metric for service map display"
       onChange={[Function]}
       options={
         Array [
@@ -34,25 +35,70 @@ exports[`Service map component renders service map 1`] = `
     <EuiHorizontalRule
       margin="m"
     />
-    <EuiFlexGroup
-      justifyContent="spaceBetween"
-    >
+    <EuiFlexGroup>
       <EuiFlexItem
         grow={7}
       >
-        <EuiCompressedFieldSearch
-          compressed={true}
-          fullWidth={false}
-          incremental={false}
-          isClearable={true}
-          isInvalid={false}
-          isLoading={false}
-          onChange={[Function]}
-          onSearch={[Function]}
-          placeholder="Service name"
-          prepend="Focus on"
-          value=""
-        />
+        <EuiPopover
+          anchorPosition="downLeft"
+          button={
+            <EuiFieldSearch
+              append={
+                <EuiButtonIcon
+                  iconType="refresh"
+                  onClick={[Function]}
+                  size="s"
+                />
+              }
+              aria-controls="service-select-dropdown"
+              compressed={true}
+              fullWidth={false}
+              incremental={false}
+              isClearable={true}
+              isInvalid={false}
+              isLoading={false}
+              onChange={[Function]}
+              onClick={[Function]}
+              placeholder="Service name"
+              prepend="Focus on"
+              value=""
+            />
+          }
+          closePopover={[Function]}
+          display="inlineBlock"
+          hasArrow={true}
+          id="service-select-dropdown"
+          isOpen={false}
+          ownFocus={false}
+          panelPaddingSize="none"
+          repositionOnScroll={true}
+        >
+          <EuiSelectable
+            isPreFiltered={false}
+            listProps={
+              Object {
+                "bordered": true,
+                "style": Object {
+                  "width": "300px",
+                },
+              }
+            }
+            onChange={[Function]}
+            options={Array []}
+            searchProps={
+              Object {
+                "autoFocus": true,
+                "isClearable": true,
+                "onInput": [Function],
+                "value": "",
+              }
+            }
+            searchable={true}
+            singleSelection={true}
+          >
+            <Component />
+          </EuiSelectable>
+        </EuiPopover>
       </EuiFlexItem>
     </EuiFlexGroup>
     <EuiSpacer />
@@ -67,7 +113,28 @@ exports[`Service map component renders service map 1`] = `
               "position": "relative",
             }
           }
-        />
+        >
+          <div
+            style={
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "rgba(255, 255, 255, 0.8)",
+                "bottom": 0,
+                "display": "flex",
+                "justifyContent": "center",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 1000,
+              }
+            }
+          >
+            <EuiLoadingSpinner
+              size="xl"
+            />
+          </div>
+        </div>
       </EuiFlexItem>
       <EuiFlexItem
         grow={false}