From 5387f2a57e6c33512d4f8b520e9ca36370f7cd93 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 9 Aug 2022 12:07:02 +0200
Subject: [PATCH] feat(ui) - overview - components

---
 .../Session_/OverviewPanel/OverviewPanel.tsx  | 112 ++++--------------
 .../TimelinePointer/TimelinePointer.tsx       | 101 ++++++++++++++++
 .../components/TimelinePointer/index.ts       |   1 +
 .../VerticalPointerLine.tsx                   |  17 +++
 .../components/VerticalPointerLine/index.ts   |   1 +
 .../app/components/Session_/Player/Player.js  |   4 +-
 6 files changed, 146 insertions(+), 90 deletions(-)
 create mode 100644 frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
 create mode 100644 frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/index.ts
 create mode 100644 frontend/app/components/Session_/OverviewPanel/components/VerticalPointerLine/VerticalPointerLine.tsx
 create mode 100644 frontend/app/components/Session_/OverviewPanel/components/VerticalPointerLine/index.ts

diff --git a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
index a982e6fd8..02421b6f9 100644
--- a/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
@@ -1,16 +1,14 @@
-import { connectPlayer, Controls } from 'App/player';
+import { connectPlayer } from 'App/player';
 import { toggleBottomBlock, NETWORK, EXCEPTIONS } from 'Duck/components/player';
 import React from 'react';
 import BottomBlock from '../BottomBlock';
 import EventRow from './components/EventRow';
 import { TYPES } from 'Types/session/event';
-import { Icon, Checkbox, ErrorDetails } from 'UI';
-import { Tooltip } from 'react-tippy';
-import stl from './overviewPanel.module.css';
 import { connect } from 'react-redux';
 import TimelineScale from './components/TimelineScale';
 import FeatureSelection from './components/FeatureSelection/FeatureSelection';
-import { useModal } from 'App/components/Modal';
+import TimelinePointer from './components/TimelinePointer';
+import VerticalPointerLine from './components/VerticalPointerLine';
 
 interface Props {
     resourceList: any[];
@@ -26,78 +24,6 @@ function OverviewPanel(props: Props) {
     }, [eventsList]);
     const scale = 100 / endTime;
     const selectedFeatures = React.useMemo(() => ['NETWORK', 'ERRORS', 'EVENTS'], []);
-    const { showModal } = useModal();
-
-    const createEventClickHandler = (pointer: any, type: any) => (e: any) => {
-        e.stopPropagation();
-        Controls.jump(pointer.time);
-        if (!type) {
-            return;
-        }
-
-        if (type === EXCEPTIONS) {
-            showModal(<ErrorDetails error={pointer} />, { right: true });
-        }
-        // props.toggleBottomBlock(type);
-    };
-
-    const renderNetworkElement = (item: any) => {
-        return (
-            <Tooltip
-                html={
-                    <div className={stl.popup}>
-                        <b>{item.success ? 'Slow resource: ' : 'Missing resource:'}</b>
-                        <br />
-                        {item.name}
-                    </div>
-                }
-                delay={0}
-                position="top"
-            >
-                <div onClick={createEventClickHandler(item, NETWORK)} className="cursor-pointer">
-                    <div className="h-2 w-2 rounded-full bg-red" />
-                </div>
-            </Tooltip>
-        );
-    };
-
-    const renderClickRageElement = (item: any) => {
-        return (
-            <Tooltip
-                html={
-                    <div className={stl.popup}>
-                        <b>{'Click Rage'}</b>
-                    </div>
-                }
-                delay={0}
-                position="top"
-            >
-                <div onClick={createEventClickHandler(item, null)} className="cursor-pointer">
-                    <Icon className="bg-white" name="funnel/emoji-angry" color="red" size="16" />
-                </div>
-            </Tooltip>
-        );
-    };
-
-    const renderExceptionElement = (item: any) => {
-        return (
-            <Tooltip
-                html={
-                    <div className={stl.popup}>
-                        <b>{'Exception'}</b>
-                        <br />
-                        <span>{item.message}</span>
-                    </div>
-                }
-                delay={0}
-                position="top"
-            >
-                <div onClick={createEventClickHandler(item, EXCEPTIONS)} className="cursor-pointer">
-                    <Icon className="rounded-full bg-white" name="funnel/exclamation-circle-fill" color="red" size="16" />
-                </div>
-            </Tooltip>
-        );
-    };
 
     return (
         <BottomBlock style={{ height: '260px' }}>
@@ -112,11 +38,29 @@ function OverviewPanel(props: Props) {
                     <TimelineScale />
                     <div style={{ width: '100%' }} className="transition relative">
                         <VerticalPointerLine />
-                        <EventRow title="Network" className="" list={resourceList} scale={scale} renderElement={renderNetworkElement} />
+                        <EventRow
+                            title="Network"
+                            className=""
+                            list={resourceList}
+                            scale={scale}
+                            renderElement={(pointer: any) => <TimelinePointer pointer={pointer} type={NETWORK} />}
+                        />
                         <div className="bg-white border-t border-b -mx-4 px-4">
-                            <EventRow title="Click Rage" className="" list={clickRageList} scale={scale} renderElement={renderClickRageElement} />
+                            <EventRow
+                                title="Click Rage"
+                                className=""
+                                list={clickRageList}
+                                scale={scale}
+                                renderElement={(pointer: any) => <TimelinePointer pointer={pointer} type={TYPES.CLICKRAGE} />}
+                            />
                         </div>
-                        <EventRow title="Errors & Issues" className="" list={exceptionsList} scale={scale} renderElement={renderExceptionElement} />
+                        <EventRow
+                            title="Errors & Issues"
+                            className=""
+                            list={exceptionsList}
+                            scale={scale}
+                            renderElement={(pointer: any) => <TimelinePointer pointer={pointer} type={EXCEPTIONS} />}
+                        />
                     </div>
                 </div>
             </BottomBlock.Content>
@@ -134,11 +78,3 @@ export default connect(null, {
         endTime: state.endTime,
     }))(OverviewPanel)
 );
-
-const VerticalPointerLine = connectPlayer((state: any) => ({
-    time: state.time,
-    scale: 100 / state.endTime,
-}))(({ time, scale }: any) => {
-    const left = time * scale;
-    return <div className="absolute border-r border-teal border-dashed z-10" style={{ left: `${left}%`, height: '250px', width: '1px' }} />;
-});
diff --git a/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx b/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
new file mode 100644
index 000000000..b74cd068d
--- /dev/null
+++ b/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { connectPlayer, Controls } from 'App/player';
+import { toggleBottomBlock, NETWORK, EXCEPTIONS } from 'Duck/components/player';
+import { useModal } from 'App/components/Modal';
+import { Icon, ErrorDetails } from 'UI';
+import { Tooltip } from 'react-tippy';
+import { TYPES as EVENT_TYPES } from 'Types/session/event';
+
+interface Props {
+    pointer: any;
+    type: any;
+}
+function TimelinePointer(props: Props) {
+    const { showModal } = useModal();
+    const createEventClickHandler = (pointer: any, type: any) => (e: any) => {
+        e.stopPropagation();
+        Controls.jump(pointer.time);
+        if (!type) {
+            return;
+        }
+
+        if (type === EXCEPTIONS) {
+            showModal(<ErrorDetails error={pointer} />, { right: true });
+        }
+        // props.toggleBottomBlock(type);
+    };
+
+    const renderNetworkElement = (item: any) => {
+        return (
+            <Tooltip
+                html={
+                    <div className="">
+                        <b>{item.success ? 'Slow resource: ' : 'Missing resource:'}</b>
+                        <br />
+                        {item.name}
+                    </div>
+                }
+                delay={0}
+                position="top"
+            >
+                <div onClick={createEventClickHandler(item, NETWORK)} className="cursor-pointer">
+                    <div className="h-2 w-2 rounded-full bg-red" />
+                </div>
+            </Tooltip>
+        );
+    };
+
+    const renderClickRageElement = (item: any) => {
+        return (
+            <Tooltip
+                html={
+                    <div className="">
+                        <b>{'Click Rage'}</b>
+                    </div>
+                }
+                delay={0}
+                position="top"
+            >
+                <div onClick={createEventClickHandler(item, null)} className="cursor-pointer">
+                    <Icon className="bg-white" name="funnel/emoji-angry" color="red" size="16" />
+                </div>
+            </Tooltip>
+        );
+    };
+
+    const renderExceptionElement = (item: any) => {
+        return (
+            <Tooltip
+                html={
+                    <div className="">
+                        <b>{'Exception'}</b>
+                        <br />
+                        <span>{item.message}</span>
+                    </div>
+                }
+                delay={0}
+                position="top"
+            >
+                <div onClick={createEventClickHandler(item, EXCEPTIONS)} className="cursor-pointer">
+                    <Icon className="rounded-full bg-white" name="funnel/exclamation-circle-fill" color="red" size="16" />
+                </div>
+            </Tooltip>
+        );
+    };
+
+    const render = () => {
+        const { pointer, type } = props;
+        if (type === NETWORK) {
+            return renderNetworkElement(pointer);
+        }
+        if (type === EVENT_TYPES.CLICKRAGE) {
+            return renderClickRageElement(pointer);
+        }
+        if (type === EXCEPTIONS) {
+            return renderExceptionElement(pointer);
+        }
+    };
+    return <div>{render()}</div>;
+}
+
+export default TimelinePointer;
diff --git a/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/index.ts b/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/index.ts
new file mode 100644
index 000000000..e0f9399ff
--- /dev/null
+++ b/frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/index.ts
@@ -0,0 +1 @@
+export { default } from './TimelinePointer'
\ No newline at end of file
diff --git a/frontend/app/components/Session_/OverviewPanel/components/VerticalPointerLine/VerticalPointerLine.tsx b/frontend/app/components/Session_/OverviewPanel/components/VerticalPointerLine/VerticalPointerLine.tsx
new file mode 100644
index 000000000..b8997e111
--- /dev/null
+++ b/frontend/app/components/Session_/OverviewPanel/components/VerticalPointerLine/VerticalPointerLine.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { connectPlayer } from 'App/player';
+
+interface Props {
+    time: number;
+    scale: number;
+}
+function VerticalPointerLine(props: Props) {
+    const { time, scale } = props;
+    const left = time * scale;
+    return <div className="absolute border-r border-teal border-dashed z-10" style={{ left: `${left}%`, height: '250px', width: '1px' }} />;
+}
+
+export default connectPlayer((state: any) => ({
+    time: state.time,
+    scale: 100 / state.endTime,
+}))(VerticalPointerLine);
diff --git a/frontend/app/components/Session_/OverviewPanel/components/VerticalPointerLine/index.ts b/frontend/app/components/Session_/OverviewPanel/components/VerticalPointerLine/index.ts
new file mode 100644
index 000000000..4a75fc048
--- /dev/null
+++ b/frontend/app/components/Session_/OverviewPanel/components/VerticalPointerLine/index.ts
@@ -0,0 +1 @@
+export { default } from './VerticalPointerLine'
\ No newline at end of file
diff --git a/frontend/app/components/Session_/Player/Player.js b/frontend/app/components/Session_/Player/Player.js
index 9a95121ac..ef69d5c2d 100644
--- a/frontend/app/components/Session_/Player/Player.js
+++ b/frontend/app/components/Session_/Player/Player.js
@@ -104,9 +104,9 @@ export default class Player extends React.PureComponent {
             ref={ this.screenWrapper }
           />
         </div>
-        { !fullscreen && !!bottomBlock &&
+        { // !fullscreen && !!bottomBlock &&
           <div style={{ maxWidth, width: '100%' }}>
-            { bottomBlock === OVERVIEW &&
+            { // bottomBlock === OVERVIEW &&
                <OverviewPanel />
             }
             { bottomBlock === CONSOLE &&