From 3d2107fe98a71f853be11b8b444dc60c036e4020 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 15 Sep 2022 15:34:49 +0200
Subject: [PATCH] change(ui): remove dead code

---
 .../Session_/Player/Controls/Controls.js      |   1 -
 .../Session_/Player/Controls/Timeline.js      | 597 ++++++------------
 2 files changed, 197 insertions(+), 401 deletions(-)

diff --git a/frontend/app/components/Session_/Player/Controls/Controls.js b/frontend/app/components/Session_/Player/Controls/Controls.js
index 4cc09b77a..5109bf96b 100644
--- a/frontend/app/components/Session_/Player/Controls/Controls.js
+++ b/frontend/app/components/Session_/Player/Controls/Controls.js
@@ -482,7 +482,6 @@ export default class Controls extends React.Component {
                   containerClassName="mx-2"
                 />
               )}
-              {/* {!live && <div className={cn('h-14 border-r bg-gray-light ml-6')} />} */}
               {!live && (
                 <Tooltip title="Fullscreen" delay={0} position="top-end" className="mx-4">
                   {this.controlIcon(
diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.js b/frontend/app/components/Session_/Player/Controls/Timeline.js
index fb7009727..ee1c92f49 100644
--- a/frontend/app/components/Session_/Player/Controls/Timeline.js
+++ b/frontend/app/components/Session_/Player/Controls/Timeline.js
@@ -12,427 +12,224 @@ import TooltipContainer from './components/TooltipContainer';
 const BOUNDRY = 0;
 
 function getTimelinePosition(value, scale) {
-    const pos = value * scale;
+  const pos = value * scale;
 
-    return pos > 100 ? 99 : pos;
+  return pos > 100 ? 99 : pos;
 }
 
-const getPointerIcon = (type) => {
-    // exception,
-    switch (type) {
-        case 'fetch':
-            return 'funnel/file-earmark-minus-fill';
-        case 'exception':
-            return 'funnel/exclamation-circle-fill';
-        case 'log':
-            return 'funnel/exclamation-circle-fill';
-        case 'stack':
-            return 'funnel/patch-exclamation-fill';
-        case 'resource':
-            return 'funnel/file-earmark-minus-fill';
-
-        case 'dead_click':
-            return 'funnel/dizzy';
-        case 'click_rage':
-            return 'funnel/dizzy';
-        case 'excessive_scrolling':
-            return 'funnel/mouse';
-        case 'bad_request':
-            return 'funnel/file-medical-alt';
-        case 'missing_resource':
-            return 'funnel/file-earmark-minus-fill';
-        case 'memory':
-            return 'funnel/sd-card';
-        case 'cpu':
-            return 'funnel/microchip';
-        case 'slow_resource':
-            return 'funnel/hourglass-top';
-        case 'slow_page_load':
-            return 'funnel/hourglass-top';
-        case 'crash':
-            return 'funnel/file-exclamation';
-        case 'js_exception':
-            return 'funnel/exclamation-circle-fill';
-    }
-
-    return 'info';
-};
-
 let deboucneJump = () => null;
 let debounceTooltipChange = () => null;
 @connectPlayer((state) => ({
-    playing: state.playing,
-    time: state.time,
-    skipIntervals: state.skipIntervals,
-    events: state.eventList,
-    skip: state.skip,
-    // not updating properly rn
-    // skipToIssue: state.skipToIssue,
-    disabled: state.cssLoading || state.messagesLoading || state.markedTargets,
-    endTime: state.endTime,
-    live: state.live,
-    logList: state.logList,
-    exceptionsList: state.exceptionsList,
-    resourceList: state.resourceList,
-    stackList: state.stackList,
-    fetchList: state.fetchList,
+  playing: state.playing,
+  time: state.time,
+  skipIntervals: state.skipIntervals,
+  events: state.eventList,
+  skip: state.skip,
+  // not updating properly rn
+  // skipToIssue: state.skipToIssue,
+  disabled: state.cssLoading || state.messagesLoading || state.markedTargets,
+  endTime: state.endTime,
+  live: state.live,
+  logList: state.logList,
+  exceptionsList: state.exceptionsList,
+  resourceList: state.resourceList,
+  stackList: state.stackList,
+  fetchList: state.fetchList,
 }))
 @connect(
-    (state) => ({
-        issues: state.getIn(['sessions', 'current', 'issues']),
-        startedAt: state.getIn(['sessions', 'current', 'startedAt']),
-        clickRageTime: state.getIn(['sessions', 'current', 'clickRage']) && state.getIn(['sessions', 'current', 'clickRageTime']),
-        returningLocationTime:
-            state.getIn(['sessions', 'current', 'returningLocation']) && state.getIn(['sessions', 'current', 'returningLocationTime']),
-        tooltipVisible: state.getIn(['sessions', 'timeLineTooltip', 'isVisible']),
-    }),
-    { setTimelinePointer, setTimelineHoverTime }
+  (state) => ({
+    issues: state.getIn(['sessions', 'current', 'issues']),
+    startedAt: state.getIn(['sessions', 'current', 'startedAt']),
+    clickRageTime:
+      state.getIn(['sessions', 'current', 'clickRage']) &&
+      state.getIn(['sessions', 'current', 'clickRageTime']),
+    returningLocationTime:
+      state.getIn(['sessions', 'current', 'returningLocation']) &&
+      state.getIn(['sessions', 'current', 'returningLocationTime']),
+    tooltipVisible: state.getIn(['sessions', 'timeLineTooltip', 'isVisible']),
+  }),
+  { setTimelinePointer, setTimelineHoverTime }
 )
 export default class Timeline extends React.PureComponent {
-    progressRef = React.createRef();
-    timelineRef = React.createRef();
-    wasPlaying = false;
+  progressRef = React.createRef();
+  timelineRef = React.createRef();
+  wasPlaying = false;
 
-    seekProgress = (e) => {
-        const time = this.getTime(e);
-        this.props.jump(time);
-        this.hideTimeTooltip();
-    };
+  seekProgress = (e) => {
+    const time = this.getTime(e);
+    this.props.jump(time);
+    this.hideTimeTooltip();
+  };
 
-    loadAndSeek = async (e) => {
-        e.persist();
-        await toggleTimetravel();
+  loadAndSeek = async (e) => {
+    e.persist();
+    await toggleTimetravel();
 
-        setTimeout(() => {
-            this.seekProgress(e)
-        })
+    setTimeout(() => {
+      this.seekProgress(e);
+    });
+  };
+
+  jumpToTime = (e) => {
+    if (this.props.live && !this.props.liveTimeTravel) {
+      this.loadAndSeek(e);
+    } else {
+      this.seekProgress(e);
+    }
+  };
+
+  getTime = (e, customEndTime) => {
+    const { endTime } = this.props;
+    const p = e.nativeEvent.offsetX / e.target.offsetWidth;
+    const targetTime = customEndTime || endTime;
+    const time = Math.max(Math.round(p * targetTime), 0);
+
+    return time;
+  };
+
+  createEventClickHandler = (pointer) => (e) => {
+    e.stopPropagation();
+    this.props.jump(pointer.time);
+    this.props.setTimelinePointer(pointer);
+  };
+
+  componentDidMount() {
+    const { issues } = this.props;
+    const skipToIssue = Controls.updateSkipToIssue();
+    const firstIssue = issues.get(0);
+    deboucneJump = debounce(this.props.jump, 500);
+    debounceTooltipChange = debounce(this.props.setTimelineHoverTime, 50);
+
+    if (firstIssue && skipToIssue) {
+      this.props.jump(firstIssue.time);
+    }
+  }
+
+  onDragEnd = () => {
+    const { live, liveTimeTravel } = this.props;
+    if (live && !liveTimeTravel) return;
+
+    if (this.wasPlaying) {
+      this.props.togglePlay();
+    }
+  };
+
+  onDrag = (offset) => {
+    const { endTime, live, liveTimeTravel } = this.props;
+    if (live && !liveTimeTravel) return;
+
+    const p = (offset.x - BOUNDRY) / this.progressRef.current.offsetWidth;
+    const time = Math.max(Math.round(p * endTime), 0);
+    deboucneJump(time);
+    this.hideTimeTooltip();
+    if (this.props.playing) {
+      this.wasPlaying = true;
+      this.props.pause();
+    }
+  };
+
+  getLiveTime = (e) => {
+    const { startedAt } = this.props;
+    const duration = new Date().getTime() - startedAt;
+    const p = e.nativeEvent.offsetX / e.target.offsetWidth;
+    const time = Math.max(Math.round(p * duration), 0);
+
+    return [time, duration];
+  };
+
+  showTimeTooltip = (e) => {
+    if (e.target !== this.progressRef.current && e.target !== this.timelineRef.current) {
+      return this.props.tooltipVisible && this.hideTimeTooltip();
     }
 
-    jumpToTime = (e) => {
-        if (this.props.live && !this.props.liveTimeTravel) {
-            this.loadAndSeek(e)
-        } else {
-            this.seekProgress(e)
-        }
+    const { live } = this.props;
+    let timeLineTooltip;
+
+    if (live) {
+      const [time, duration] = this.getLiveTime(e);
+      timeLineTooltip = {
+        time: duration - time,
+        offset: e.nativeEvent.offsetX,
+        isVisible: true,
+      };
+    } else {
+      const time = this.getTime(e);
+      timeLineTooltip = {
+        time: time,
+        offset: e.nativeEvent.offsetX,
+        isVisible: true,
+      };
     }
 
-    getTime = (e, customEndTime) => {
-        const { endTime } = this.props;
-        const p = e.nativeEvent.offsetX / e.target.offsetWidth;
-        const targetTime = customEndTime || endTime
-        const time = Math.max(Math.round(p * targetTime), 0);
+    debounceTooltipChange(timeLineTooltip);
+  };
 
-        return time;
-    };
+  hideTimeTooltip = () => {
+    const timeLineTooltip = { isVisible: false };
+    debounceTooltipChange(timeLineTooltip);
+  };
 
-    createEventClickHandler = (pointer) => (e) => {
-        e.stopPropagation();
-        this.props.jump(pointer.time);
-        this.props.setTimelinePointer(pointer);
-    };
+  render() {
+    const { events, skip, skipIntervals, disabled, endTime, live } = this.props;
 
-    componentDidMount() {
-        const { issues } = this.props;
-        const skipToIssue = Controls.updateSkipToIssue();
-        const firstIssue = issues.get(0);
-        deboucneJump = debounce(this.props.jump, 500);
-        debounceTooltipChange = debounce(this.props.setTimelineHoverTime, 50);
+    const scale = 100 / endTime;
 
-        if (firstIssue && skipToIssue) {
-            this.props.jump(firstIssue.time);
-        }
-    }
+    return (
+      <div
+        className="flex items-center absolute w-full"
+        style={{
+          top: '-4px',
+          zIndex: 100,
+          padding: `0 ${BOUNDRY}px`,
+          maxWidth: 'calc(100% - 1rem)',
+          left: '0.5rem',
+        }}
+      >
+        <div
+          className={stl.progress}
+          onClick={disabled ? null : this.jumpToTime}
+          ref={this.progressRef}
+          role="button"
+          onMouseMoveCapture={this.showTimeTooltip}
+          onMouseEnter={this.showTimeTooltip}
+          onMouseLeave={this.hideTimeTooltip}
+        >
+          <TooltipContainer live={live} />
+          {/* custo color is live */}
+          <DraggableCircle
+            left={this.props.time * scale}
+            onDrop={this.onDragEnd}
+            live={this.props.live}
+          />
+          <CustomDragLayer
+            onDrag={this.onDrag}
+            minX={BOUNDRY}
+            maxX={this.progressRef.current && this.progressRef.current.offsetWidth + BOUNDRY}
+          />
+          <TimeTracker scale={scale} />
 
-    onDragEnd = () => {
-        const { live, liveTimeTravel } = this.props;
-        if (live && !liveTimeTravel) return;
+          {skip &&
+            skipIntervals.map((interval) => (
+              <div
+                key={interval.start}
+                className={stl.skipInterval}
+                style={{
+                  left: `${getTimelinePosition(interval.start, scale)}%`,
+                  width: `${(interval.end - interval.start) * scale}%`,
+                }}
+              />
+            ))}
+          <div className={stl.timeline} ref={this.timelineRef} />
 
-        if (this.wasPlaying) {
-            this.props.togglePlay();
-        }
-    };
-
-    onDrag = (offset) => {
-        const { endTime, live, liveTimeTravel } = this.props;
-        if (live && !liveTimeTravel) return;
-
-        const p = (offset.x - BOUNDRY) / this.progressRef.current.offsetWidth;
-        const time = Math.max(Math.round(p * endTime), 0);
-        deboucneJump(time);
-        this.hideTimeTooltip();
-        if (this.props.playing) {
-            this.wasPlaying = true;
-            this.props.pause();
-        }
-    };
-
-    getLiveTime = (e) => {
-        const { startedAt } = this.props;
-        const duration = new Date().getTime() - startedAt
-        const p = e.nativeEvent.offsetX / e.target.offsetWidth;
-        const time = Math.max(Math.round(p * duration), 0);
-
-        return [time, duration];
-    };
-
-    showTimeTooltip = (e) => {
-        if (e.target !== this.progressRef.current && e.target !== this.timelineRef.current) {
-            return this.props.tooltipVisible && this.hideTimeTooltip();
-        }
-
-        const { live } = this.props;
-        let timeLineTooltip;
-
-        if (live) {
-            const [time, duration] = this.getLiveTime(e);
-            timeLineTooltip = {
-                time: (duration - time),
-                offset: e.nativeEvent.offsetX,
-                isVisible: true,
-            };
-        } else {
-            const time = this.getTime(e);
-            timeLineTooltip = {
-                time: time,
-                offset: e.nativeEvent.offsetX,
-                isVisible: true,
-            }
-        }
-
-        debounceTooltipChange(timeLineTooltip);
-    };
-
-    hideTimeTooltip = () => {
-        const timeLineTooltip = { isVisible: false };
-        debounceTooltipChange(timeLineTooltip);
-    };
-
-    render() {
-        const {
-            events,
-            skip,
-            skipIntervals,
-            disabled,
-            endTime,
-            live,
-        } = this.props;
-
-        const scale = 100 / endTime;
-
-        return (
-            <div className="flex items-center absolute w-full" style={{ top: '-4px', zIndex: 100, padding: `0 ${BOUNDRY}px`, maxWidth: 'calc(100% - 1rem)', left: '0.5rem' }}>
-                <div
-                    className={stl.progress}
-                    onClick={disabled ? null : this.jumpToTime}
-                    ref={this.progressRef}
-                    role="button"
-                    onMouseMoveCapture={this.showTimeTooltip}
-                    onMouseEnter={this.showTimeTooltip}
-                    onMouseLeave={this.hideTimeTooltip}
-                >
-                    <TooltipContainer live={live} />
-                    {/* custo color is live */}
-                    <DraggableCircle left={this.props.time * scale} onDrop={this.onDragEnd} live={this.props.live} />
-                    <CustomDragLayer
-                        onDrag={this.onDrag}
-                        minX={BOUNDRY}
-                        maxX={this.progressRef.current && this.progressRef.current.offsetWidth + BOUNDRY}
-                    />
-                    <TimeTracker scale={scale}  />
-
-                    {skip &&
-                        skipIntervals.map((interval) => (
-                            <div
-                                key={interval.start}
-                                className={stl.skipInterval}
-                                style={{
-                                    left: `${getTimelinePosition(interval.start, scale)}%`,
-                                    width: `${(interval.end - interval.start) * scale}%`,
-                                }}
-                            />
-                        ))}
-                    <div className={stl.timeline} ref={this.timelineRef} />
-
-                    {events.map((e) => (
-                        <div key={e.key} className={stl.event} style={{ left: `${getTimelinePosition(e.time, scale)}%` }} />
-                    ))}
-                    {/* {issues.map((iss) => (
-                        <div
-                            style={{
-                                left: `${getTimelinePosition(iss.time, scale)}%`,
-                                top: '0px',
-                                zIndex: 11,
-                                width: 16,
-                                height: 16,
-                            }}
-                            key={iss.key}
-                            className={stl.clickRage}
-                            onClick={this.createEventClickHandler(iss)}
-                        >
-                            <Tooltip
-                                delay={0}
-                                position="top"
-                                html={
-                                    <div className={stl.popup}>
-                                        <b>{iss.name}</b>
-                                    </div>
-                                }
-                            >
-                                <Icon className="rounded-full bg-white" name={iss.icon} size="16" />
-                            </Tooltip>
-                        </div>
-                    ))}
-                    {events
-                        .filter((e) => e.type === TYPES.CLICKRAGE)
-                        .map((e) => (
-                            <div
-                                style={{
-                                    left: `${getTimelinePosition(e.time, scale)}%`,
-                                    top: '0px',
-                                    zIndex: 11,
-                                    width: 16,
-                                    height: 16,
-                                }}
-                                key={e.key}
-                                className={stl.clickRage}
-                                onClick={this.createEventClickHandler(e)}
-                            >
-                                <Tooltip
-                                    delay={0}
-                                    position="top"
-                                    html={
-                                        <div className={stl.popup}>
-                                            <b>{'Click Rage'}</b>
-                                        </div>
-                                    }
-                                >
-                                    <Icon className="bg-white" name={getPointerIcon('click_rage')} color="red" size="16" />
-                                </Tooltip>
-                            </div>
-                        ))}
-                    {typeof clickRageTime === 'number' && (
-                        <div
-                            style={{
-                                left: `${getTimelinePosition(clickRageTime, scale)}%`,
-                                top: '-0px',
-                                zIndex: 11,
-                                width: 16,
-                                height: 16,
-                            }}
-                            className={stl.clickRage}
-                        >
-                            <Tooltip
-                                delay={0}
-                                position="top"
-                                html={
-                                    <div className={stl.popup}>
-                                        <b>{'Click Rage'}</b>
-                                    </div>
-                                }
-                            >
-                                <Icon className="rounded-full bg-white" name={getPointerIcon('click_rage')} color="red" size="16" />
-                            </Tooltip>
-                        </div>
-                    )}
-                    {exceptionsList.map((e) => (
-                        <div
-                            key={e.key}
-                            className={cn(stl.markup, stl.error)}
-                            style={{ left: `${getTimelinePosition(e.time, scale)}%`, top: '0px', zIndex: 10, width: 16, height: 16 }}
-                            onClick={this.createEventClickHandler(e)}
-                        >
-                            <Tooltip
-                                delay={0}
-                                position="top"
-                                html={
-                                    <div className={stl.popup}>
-                                        <b>{'Exception'}</b>
-                                        <br />
-                                        <span>{e.message}</span>
-                                    </div>
-                                }
-                            >
-                                <Icon className=" rounded-full bg-white" name={getPointerIcon('exception')} color="red" size="16" />
-                            </Tooltip>
-                        </div>
-                    ))}
-                    {resourceList
-                        .filter((r) => r.isRed() || r.isYellow())
-                        .map((r) => (
-                            <div
-                                key={r.key}
-                                className={cn(stl.markup, {
-                                    [stl.error]: r.isRed(),
-                                    [stl.warning]: r.isYellow(),
-                                })}
-                                style={{ left: `${getTimelinePosition(r.time, scale)}%`, top: '0px', zIndex: 10, width: 16, height: 16 }}
-                                onClick={this.createEventClickHandler(r)}
-                            >
-                                <Tooltip
-                                    delay={0}
-                                    position="top"
-                                    html={
-                                        <div className={stl.popup}>
-                                            <b>{r.success ? 'Slow resource: ' : 'Missing resource:'}</b>
-                                            <br />
-                                            {r.name}
-                                        </div>
-                                    }
-                                >
-                                    <Icon className=" rounded-full bg-white" name={getPointerIcon('resource')} size="16" />
-                                </Tooltip>
-                            </div>
-                        ))}
-                    {fetchList
-                        .filter((e) => e.isRed())
-                        .map((e) => (
-                            <div
-                                key={e.key}
-                                className={cn(stl.markup, stl.error)}
-                                style={{ left: `${getTimelinePosition(e.time, scale)}%`, top: '0px' }}
-                                onClick={this.createEventClickHandler(e)}
-                            >
-                                <Tooltip
-                                    delay={0}
-                                    position="top"
-                                    html={
-                                        <div className={stl.popup}>
-                                            <b>Failed Fetch</b>
-                                            <br />
-                                            {e.name}
-                                        </div>
-                                    }
-                                >
-                                    <Icon className=" rounded-full bg-white" name={getPointerIcon('fetch')} color="red" size="16" />
-                                </Tooltip>
-                            </div>
-                        ))}
-                    {stackList
-                        .filter((e) => e.isRed())
-                        .map((e) => (
-                            <div
-                                key={e.key}
-                                className={cn(stl.markup, stl.error)}
-                                style={{ left: `${getTimelinePosition(e.time, scale)}%`, top: '0px' }}
-                                onClick={this.createEventClickHandler(e)}
-                            >
-                                <Tooltip
-                                    delay={0}
-                                    position="top"
-                                    html={
-                                        <div className={stl.popup}>
-                                            <b>Stack Event</b>
-                                            <br />
-                                            {e.name}
-                                        </div>
-                                    }
-                                >
-                                    <Icon className=" rounded-full bg-white" name={getPointerIcon('stack')} size="16" />
-                                </Tooltip>
-                            </div>
-                        ))} */}
-                </div>
-            </div>
-        );
-    }
+          {events.map((e) => (
+            <div
+              key={e.key}
+              className={stl.event}
+              style={{ left: `${getTimelinePosition(e.time, scale)}%` }}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
 }