Fix the scale of the search markers (#55731)

The search markers where placed on the minimap using a different scale than the density chart and time ruler. That made the log stream jump to unexpected time positions when the user clicked on a search marker. This also fixes an problem where the search markers didn't move alongside the rest of the minimap when the user dragged and dropped it.
elastic · Jan 24, 2020 · d40269c · d40269c
1 parent d315132
commit d40269c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx
@@ -215,6 +215,15 @@ export class LogMinimap extends React.Component<LogMinimapProps, LogMinimapState
             height={overscanHeight}
             tickCount={tickCount}
           />
+
+          <SearchMarkers
+            buckets={summaryHighlightBuckets || []}
+            start={minTime}
+            end={maxTime}
+            width={width}
+            height={overscanHeight}
+            jumpToTarget={jumpToTarget}
+          />
         </g>
         {highlightedInterval ? (
           <HighlightedInterval
@@ -225,16 +234,6 @@ export class LogMinimap extends React.Component<LogMinimapProps, LogMinimapState
             target={target}
           />
         ) : null}
-        <g transform={`translate(${width * 0.5}, 0)`}>
-          <SearchMarkers
-            buckets={summaryHighlightBuckets || []}
-            start={minTime}
-            end={maxTime}
-            width={width / 2}
-            height={height}
-            jumpToTarget={jumpToTarget}
-          />
-        </g>
         <TimeCursor x1={width / 3} x2={width} y1={timeCursorY} y2={timeCursorY} />
         <DragTargetArea
           isGrabbing={Boolean(drag)}

diff --git a/x-pack/legacy/plugins/infra/public/components/logging/log_minimap/search_markers.tsx b/x-pack/legacy/plugins/infra/public/components/logging/log_minimap/search_markers.tsx
@@ -36,7 +36,7 @@ export class SearchMarkers extends React.PureComponent<SearchMarkersProps, {}> {
       .range([0, height]);
 
     return (
-      <g className={classes}>
+      <g transform={`translate(${width / 2}, 0)`} className={classes}>
         {buckets.map(bucket => (
           <g
             key={`${bucket.representativeKey.time}:${bucket.representativeKey.tiebreaker}`}