change(ui) - xray - feature tooltips

frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx

@@ -6,7 +6,7 @@ import EventRow from './components/EventRow';
 import { TYPES } from 'Types/session/event';
 import { connect } from 'react-redux';
 import TimelineScale from './components/TimelineScale';
-import FeatureSelection from './components/FeatureSelection/FeatureSelection';
+import FeatureSelection, { HELP_MESSAGE } from './components/FeatureSelection/FeatureSelection';
 import TimelinePointer from './components/TimelinePointer';
 import VerticalPointerLine from './components/VerticalPointerLine';
 import cn from 'classnames';
@@ -52,7 +52,7 @@ function OverviewPanel(props: Props) {
     return (
         dataLoaded && (
             <Wrapper {...props}>
-                <BottomBlock style={{ height: '250px' }}>
+                <BottomBlock style={{ height: '245px' }}>
                     <BottomBlock.Header>
                         <span className="font-semibold color-gray-medium mr-4">X-RAY</span>
                         <div className="flex items-center h-20">
@@ -62,7 +62,7 @@ function OverviewPanel(props: Props) {
                     <BottomBlock.Content>
                         <OverviewPanelContainer endTime={props.endTime}>
                             <TimelineScale endTime={props.endTime} />
-                            <div style={{ width: '100%', height: '200px' }} className="transition relative">
+                            <div style={{ width: '100%', height: '187px' }} className="transition relative">
                                 <NoContent show={selectedFeatures.length === 0} title={
                                 <div className="flex items-center mt-16">
                                     <Icon name="info-circle" className="mr-2" size="18" />
@@ -70,7 +70,7 @@ function OverviewPanel(props: Props) {
                                 </div>}>
                                     <VerticalPointerLine />
                                     {selectedFeatures.map((feature: any, index: number) => (
-                                        <div className={cn('border-b', { 'bg-white': index % 2 })}>
+                                        <div className={cn('border-b last:border-none', { 'bg-white': index % 2 })}>
                                             <EventRow
                                                 isGraph={feature === 'PERFORMANCE'}
                                                 key={feature}
@@ -78,6 +78,7 @@ function OverviewPanel(props: Props) {
                                                 list={resources[feature]}
                                                 renderElement={(pointer: any) => <TimelinePointer pointer={pointer} type={feature} />}
                                                 endTime={props.endTime}
+                                                message={HELP_MESSAGE[feature]}
                                             />
                                         </div>
                                     ))}

frontend/app/components/Session_/OverviewPanel/components/EventRow/EventRow.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import cn from 'classnames';
 import { getTimelinePosition } from 'App/utils';
-import { connectPlayer } from 'App/player';
+import { Icon, Popup } from 'UI';
 import PerformanceGraph from '../PerformanceGraph';
 interface Props {
     list?: any[];
     title: string;
+    message?: string;
     className?: string;
     endTime?: number;
     renderElement?: (item: any) => React.ReactNode;
     isGraph?: boolean;
 }
 const EventRow = React.memo((props: Props) => {
-    const { title, className, list = [], endTime = 0, isGraph = false } = props;
+    const { title, className, list = [], endTime = 0, isGraph = false, message = '' } = props;
     const scale = 100 / endTime;
     const _list =
         !isGraph &&
@@ -27,7 +28,10 @@ const EventRow = React.memo((props: Props) => {
 
     return (
         <div className={cn('w-full flex flex-col py-2', className)} style={{ height: '60px' }}>
-            <div className="uppercase color-gray-medium ml-4 text-sm">{title}</div>
+            <div className="uppercase color-gray-medium ml-4 text-sm flex items-center py-1">
+                <div className="mr-2 leading-none">{title}</div>
+                <RowInfo message={message} />
+            </div>
             <div className="relative w-full">
                 {isGraph ? (
                     <PerformanceGraph list={list} />
@@ -39,7 +43,7 @@ const EventRow = React.memo((props: Props) => {
                             </div>
                         );
                     }) : (
-                        <div className="ml-4 color-gray-medium text-sm pt-1">No records captured.</div>
+                        <div className="ml-4 color-gray-medium text-sm pt-2">No records captured.</div>
                     )
                 )}
             </div>
@@ -48,3 +52,11 @@ const EventRow = React.memo((props: Props) => {
 });
 
 export default EventRow;
+
+function RowInfo({ message} : any) {
+    return (
+     <Popup content={message} delay={0}>
+        <Icon name="info-circle" />
+     </Popup>   
+    )
+}

frontend/app/components/Session_/OverviewPanel/components/FeatureSelection/FeatureSelection.tsx

@@ -7,6 +7,14 @@ const EVENTS = 'EVENTS';
 const CLICKRAGE = 'CLICKRAGE';
 const PERFORMANCE = 'PERFORMANCE';
 
+export const HELP_MESSAGE: any = {
+    NETWORK: 'Network requests made in this session',
+    EVENTS: 'Visualizes the events that takes place in the DOM',
+    ERRORS: 'Visualizes native JS errors like Type, URI, Syntax etc.',
+    CLICKRAGE: 'Indicates user frustration when repeated clicks are recorded',
+    PERFORMANCE: 'Summary of this session’s memory, and CPU consumption on the timeline',
+}
+
 interface Props {
     list: any[];
     updateList: any;