diff --git a/frontend/app/components/Session_/EventsBlock/Event.js b/frontend/app/components/Session_/EventsBlock/Event.js deleted file mode 100644 index a464fcc28..000000000 --- a/frontend/app/components/Session_/EventsBlock/Event.js +++ /dev/null @@ -1,195 +0,0 @@ -import React from 'react'; -import copy from 'copy-to-clipboard'; -import cn from 'classnames'; -import { Icon, TextEllipsis, Tooltip } from 'UI'; -import { TYPES } from 'Types/session/event'; -import { prorata } from 'App/utils'; -import withOverlay from 'Components/hocs/withOverlay'; -import LoadInfo from './LoadInfo'; -import cls from './event.module.css'; -import { numberWithCommas } from 'App/utils'; - -function isFrustrationEvent(evt) { - if (evt.type === 'mouse_thrashing' || evt.type === TYPES.CLICKRAGE) { - return true; - } - if (evt.type === TYPES.CLICK || evt.type === TYPES.INPUT) { - return evt.hesitation > 1000 - } - return false -} - -@withOverlay() -export default class Event extends React.PureComponent { - state = { - menuOpen: false, - } - - componentDidMount() { - this.wrapper.addEventListener('contextmenu', this.onContextMenu); - } - - onContextMenu = (e) => { - e.preventDefault(); - this.setState({ menuOpen: true }); - } - onMouseLeave = () => this.setState({ menuOpen: false }) - - copyHandler = (e) => { - e.stopPropagation(); - //const ctrlOrCommandPressed = e.ctrlKey || e.metaKey; - //if (ctrlOrCommandPressed && e.keyCode === 67) { - const { event } = this.props; - copy(event.getIn([ 'target', 'path' ]) || event.url || ''); - this.setState({ menuOpen: false }); - } - - toggleInfo = (e) => { - e.stopPropagation(); - this.props.toggleInfo(); - } - - // eslint-disable-next-line complexity - renderBody = () => { - const { event } = this.props; - let title = event.type; - let body; - let icon; - const isFrustration = isFrustrationEvent(event); - const tooltip = { disabled: true, text: '' } - - switch (event.type) { - case TYPES.LOCATION: - title = 'Visited'; - body = event.url; - icon = 'location'; - break; - case TYPES.CLICK: - title = 'Clicked'; - body = event.label; - icon = isFrustration ? 'click_hesitation' : 'click'; - isFrustration ? Object.assign(tooltip, { disabled: false, text: `User hesitated to click for ${Math.round(event.hesitation/1000)}s`, }) : null; - break; - case TYPES.INPUT: - title = 'Input'; - body = event.value; - icon = isFrustration ? 'input_hesitation' : 'input'; - isFrustration ? Object.assign(tooltip, { disabled: false, text: `User hesitated to enter a value for ${Math.round(event.hesitation/1000)}s`, }) : null; - break; - case TYPES.CLICKRAGE: - title = `${ event.count } Clicks`; - body = event.label; - icon = 'clickrage' - break; - case TYPES.IOS_VIEW: - title = 'View'; - body = event.name; - icon = 'ios_view' - break; - case 'mouse_thrashing': - title = 'Mouse Thrashing'; - icon = 'mouse_thrashing' - break; - } - const isLocation = event.type === TYPES.LOCATION; - - return ( - -
-
- { event.type && } -
-
-
- { title } - {/* { body && !isLocation &&
{ body }
} */} - { body && !isLocation && - - } -
- { isLocation && event.speedIndex != null && -
-
{"Speed Index"}
-
{ numberWithCommas(event.speedIndex || 0) }
-
- } -
- { event.target && event.target.label && -
{ event.target.label }
- } -
-
- { isLocation && -
- { body } -
- } -
- - ); - }; - - render() { - const { - event, - selected, - isCurrent, - onClick, - showSelection, - showLoadInfo, - toggleLoadInfo, - isRed, - presentInSearch = false, - whiteBg, - } = this.props; - const { menuOpen } = this.state; - - const isFrustration = isFrustrationEvent(event); - return ( -
{ this.wrapper = ref } } - onMouseLeave={ this.onMouseLeave } - data-openreplay-label="Event" - data-type={event.type} - className={ cn(cls.event, { - [ cls.menuClosed ]: !menuOpen, - [ cls.highlighted ]: showSelection ? selected : isCurrent, - [ cls.selected ]: selected, - [ cls.showSelection ]: showSelection, - [ cls.red ]: isRed, - [ cls.clickType ]: event.type === TYPES.CLICK, - [ cls.inputType ]: event.type === TYPES.INPUT, - [ cls.frustration ]: isFrustration, - [ cls.highlight ] : presentInSearch, - [ cls.lastInGroup ]: whiteBg, - }) } - onClick={ onClick } - > - { menuOpen && - - } -
-
- { this.renderBody() } -
-
- { event.type === TYPES.LOCATION && (event.fcpTime || event.visuallyComplete || event.timeToInteractive) && - elements / 1.2, - // eslint-disable-next-line no-mixed-operators - divisorFn: (elements, parts) => elements / (2 * parts + 1), - }) } - /> - } -
- ); - } -} diff --git a/frontend/app/components/Session_/EventsBlock/Event.tsx b/frontend/app/components/Session_/EventsBlock/Event.tsx new file mode 100644 index 000000000..2acfa187d --- /dev/null +++ b/frontend/app/components/Session_/EventsBlock/Event.tsx @@ -0,0 +1,215 @@ +import React, { useRef, useState } from 'react'; +import copy from 'copy-to-clipboard'; +import cn from 'classnames'; +import { Icon, TextEllipsis, Tooltip } from 'UI'; +import { TYPES } from 'Types/session/event'; +import { prorata } from 'App/utils'; +import withOverlay from 'Components/hocs/withOverlay'; +import LoadInfo from './LoadInfo'; +import cls from './event.module.css'; +import { numberWithCommas } from 'App/utils'; + +type Props = { + event: any; + selected?: boolean; + isCurrent?: boolean; + onClick?: () => void; + showSelection?: boolean; + showLoadInfo?: boolean; + toggleLoadInfo?: () => void; + isRed?: boolean; + presentInSearch?: boolean; + whiteBg?: boolean; +}; + +const isFrustrationEvent = (evt: any): boolean => { + if (evt.type === 'mouse_thrashing' || evt.type === TYPES.CLICKRAGE) { + return true; + } + if (evt.type === TYPES.CLICK || evt.type === TYPES.INPUT) { + return evt.hesitation > 1000; + } + return false; +}; + +const Event: React.FC = ({ + event, + selected = false, + isCurrent = false, + onClick, + showSelection = false, + showLoadInfo, + toggleLoadInfo, + isRed = false, + presentInSearch = false, + whiteBg, +}) => { + const wrapperRef = useRef(null); + const [menuOpen, setMenuOpen] = useState(false); + + const onContextMenu = (e: React.MouseEvent) => { + e.preventDefault(); + setMenuOpen(true); + }; + + const onMouseLeave = () => setMenuOpen(false); + + const copyHandler = (e: React.MouseEvent) => { + e.stopPropagation(); + const path = event.getIn(['target', 'path']) || event.url || ''; + copy(path); + setMenuOpen(false); + }; + + const renderBody = () => { + let title = event.type; + let body; + let icon; + const isFrustration = isFrustrationEvent(event); + const tooltip = { disabled: true, text: '' }; + + switch (event.type) { + case TYPES.LOCATION: + title = 'Visited'; + body = event.url; + icon = 'location'; + break; + case TYPES.CLICK: + title = 'Clicked'; + body = event.label; + icon = isFrustration ? 'click_hesitation' : 'click'; + isFrustration + ? Object.assign(tooltip, { + disabled: false, + text: `User hesitated to click for ${Math.round(event.hesitation / 1000)}s`, + }) + : null; + break; + case TYPES.INPUT: + title = 'Input'; + body = event.value; + icon = isFrustration ? 'input_hesitation' : 'input'; + isFrustration + ? Object.assign(tooltip, { + disabled: false, + text: `User hesitated to enter a value for ${Math.round(event.hesitation / 1000)}s`, + }) + : null; + break; + case TYPES.CLICKRAGE: + title = `${event.count} Clicks`; + body = event.label; + icon = 'clickrage'; + break; + case TYPES.IOS_VIEW: + title = 'View'; + body = event.name; + icon = 'ios_view'; + break; + case 'mouse_thrashing': + title = 'Mouse Thrashing'; + icon = 'mouse_thrashing'; + break; + } + const isLocation = event.type === TYPES.LOCATION; + + return ( + +
+
+ {event.type && } +
+
+
+ {title} + {body && !isLocation && ( + + )} +
+ {isLocation && event.speedIndex != null && ( +
+
{'Speed Index'}
+
{numberWithCommas(event.speedIndex || 0)}
+
+ )} +
+ {event.target && event.target.label && ( +
{event.target.label}
+ )} +
+
+ {isLocation && ( +
+ {body} +
+ )} +
+ + ); + }; + + const isFrustration = isFrustrationEvent(event); + + return ( +
+ {menuOpen && ( + + )} +
+
{renderBody()}
+
+ {event.type === TYPES.LOCATION && + (event.fcpTime || event.visuallyComplete || event.timeToInteractive) && ( + elements / 1.2, + divisorFn: (elements, parts) => elements / (2 * parts + 1), + })} + /> + )} +
+ ); +}; + +export default withOverlay()(Event); diff --git a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js index 924be9f2c..c66e9a2fe 100644 --- a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js +++ b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js @@ -1,13 +1,13 @@ import React from 'react'; import cn from 'classnames'; -import { connect } from 'react-redux' +import { connect } from 'react-redux'; import { TextEllipsis } from 'UI'; import withToggle from 'HOCs/withToggle'; import { TYPES } from 'Types/session/event'; -import Event from './Event' +import Event from './Event'; import stl from './eventGroupWrapper.module.css'; import NoteEvent from './NoteEvent'; -import { setEditNoteTooltip } from 'Duck/sessions';; +import { setEditNoteTooltip } from 'Duck/sessions'; // TODO: incapsulate toggler in LocationEvent @withToggle('showLoadInfo', 'toggleLoadInfo') @@ -66,65 +66,68 @@ class EventGroupWrapper extends React.Component { const safeRef = String(event.referrer || ''); return ( -
- {isFirst && isLocation && event.referrer && ( -
- - Referrer: {safeRef} - -
- )} - {isNote ? ( - - ) : isLocation ? ( - - ) : ( - - )} -
+ <> +
+ {isFirst && isLocation && event.referrer && ( + + +
+ Referrer: {safeRef} +
+ + )} + {isNote ? ( + + ) : isLocation ? ( + + ) : ( + + )} +
+ {isLastInGroup &&
} + ); } } -export default EventGroupWrapper +export default EventGroupWrapper; diff --git a/frontend/app/components/Session_/EventsBlock/EventSearch/EventSearch.js b/frontend/app/components/Session_/EventsBlock/EventSearch/EventSearch.js index 419434d22..9a3cefe86 100644 --- a/frontend/app/components/Session_/EventsBlock/EventSearch/EventSearch.js +++ b/frontend/app/components/Session_/EventsBlock/EventSearch/EventSearch.js @@ -1,43 +1,44 @@ -import React from 'react' -import { Input, Icon } from 'UI' +import React from 'react'; +import { Input, Button } from 'UI'; import { PlayerContext } from 'App/components/Session/playerContext'; function EventSearch(props) { - const { player } = React.useContext(PlayerContext) + const { player } = React.useContext(PlayerContext); const { onChange, value, header, setActiveTab } = props; - const toggleEvents = () => player.toggleEvents() + const toggleEvents = () => player.toggleEvents(); return (
-
- {header} -
{ setActiveTab(''); toggleEvents(); }} - className=" flex items-center justify-center bg-white cursor-pointer" - > - -
+
+ + +
-
- -
- ) + ); } -export default EventSearch +export default EventSearch; diff --git a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx index 82dedce8e..5ce52f3aa 100644 --- a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx +++ b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { connect } from 'react-redux'; import cn from 'classnames'; import { Icon } from 'UI'; -import { List, AutoSizer, CellMeasurer } from "react-virtualized"; +import { List, AutoSizer, CellMeasurer } from 'react-virtualized'; import { TYPES } from 'Types/session/event'; import { setEventFilter, filterOutNote } from 'Duck/sessions'; import EventGroupWrapper from './EventGroupWrapper'; @@ -10,33 +10,33 @@ import styles from './eventsBlock.module.css'; import EventSearch from './EventSearch/EventSearch'; import { PlayerContext } from 'App/components/Session/playerContext'; import { observer } from 'mobx-react-lite'; -import { RootStore } from 'App/duck' -import useCellMeasurerCache from 'App/hooks/useCellMeasurerCache' -import { InjectedEvent } from 'Types/session/event' -import Session from 'Types/session' +import { RootStore } from 'App/duck'; +import useCellMeasurerCache from 'App/hooks/useCellMeasurerCache'; +import { InjectedEvent } from 'Types/session/event'; +import Session from 'Types/session'; interface IProps { - setEventFilter: (filter: { query: string }) => void - filteredEvents: InjectedEvent[] - setActiveTab: (tab?: string) => void - query: string - events: Session['events'] - notesWithEvents: Session['notesWithEvents'] - filterOutNote: (id: string) => void - eventsIndex: number[] + setEventFilter: (filter: { query: string }) => void; + filteredEvents: InjectedEvent[]; + setActiveTab: (tab?: string) => void; + query: string; + events: Session['events']; + notesWithEvents: Session['notesWithEvents']; + filterOutNote: (id: string) => void; + eventsIndex: number[]; } function EventsBlock(props: IProps) { - const [mouseOver, setMouseOver] = React.useState(true) - const scroller = React.useRef(null) + const [mouseOver, setMouseOver] = React.useState(true); + const scroller = React.useRef(null); const cache = useCellMeasurerCache(undefined, { fixedWidth: true, - defaultHeight: 300 + defaultHeight: 300, }); - const { store, player } = React.useContext(PlayerContext) + const { store, player } = React.useContext(PlayerContext); - const { eventListNow, playing } = store.get() + const { eventListNow, playing } = store.get(); const { filteredEvents, @@ -46,23 +46,23 @@ function EventsBlock(props: IProps) { setActiveTab, events, notesWithEvents, - } = props + } = props; - const currentTimeEventIndex = eventListNow.length > 0 ? eventListNow.length - 1 : 0 - const usedEvents = filteredEvents || notesWithEvents + const currentTimeEventIndex = eventListNow.length > 0 ? eventListNow.length - 1 : 0; + const usedEvents = filteredEvents || notesWithEvents; const write = ({ target: { value } }: React.ChangeEvent) => { - props.setEventFilter({ query: value }) + props.setEventFilter({ query: value }); setTimeout(() => { if (!scroller.current) return; scroller.current.scrollToRow(0); - }, 100) - } + }, 100); + }; const clearSearch = () => { - props.setEventFilter({ query: '' }) + props.setEventFilter({ query: '' }); if (scroller.current) { scroller.current.forceUpdateGrid(); } @@ -71,14 +71,14 @@ function EventsBlock(props: IProps) { if (!scroller.current) return; scroller.current.scrollToRow(0); - }, 100) - } + }, 100); + }; React.useEffect(() => { return () => { - clearSearch() - } - }, []) + clearSearch(); + }; + }, []); React.useEffect(() => { if (scroller.current) { scroller.current.forceUpdateGrid(); @@ -86,40 +86,49 @@ function EventsBlock(props: IProps) { scroller.current.scrollToRow(currentTimeEventIndex); } } - }, [currentTimeEventIndex]) + }, [currentTimeEventIndex]); - const onEventClick = (_: React.MouseEvent, event: { time: number }) => player.jump(event.time) - const onMouseOver = () => setMouseOver(true) - const onMouseLeave = () => setMouseOver(false) + const onEventClick = (_: React.MouseEvent, event: { time: number }) => { + player.jump(event.time); + props.setEventFilter({ query: '' }); + }; + const onMouseOver = () => setMouseOver(true); + const onMouseLeave = () => setMouseOver(false); - const renderGroup = ({ index, key, style, parent }: { index: number; key: string; style: React.CSSProperties; parent: any }) => { + const renderGroup = ({ + index, + key, + style, + parent, + }: { + index: number; + key: string; + style: React.CSSProperties; + parent: any; + }) => { const isLastEvent = index === usedEvents.length - 1; const isLastInGroup = isLastEvent || usedEvents[index + 1]?.type === TYPES.LOCATION; const event = usedEvents[index]; - const isNote = 'noteId' in event + const isNote = 'noteId' in event; const isCurrent = index === currentTimeEventIndex; - const heightBug = index === 0 && event?.type === TYPES.LOCATION && 'referrer' in event ? { top: 2 } : {} + const heightBug = + index === 0 && event?.type === TYPES.LOCATION && 'referrer' in event ? { top: 2 } : {}; return ( - - {({measure, registerChild}) => ( + + {({ measure, registerChild }) => (
@@ -127,50 +136,44 @@ function EventsBlock(props: IProps) { )} ); - } + }; - const isEmptySearch = query && (usedEvents.length === 0 || !usedEvents) + const isEmptySearch = query && (usedEvents.length === 0 || !usedEvents); return ( <> -
-
- User Steps { events.length }
- } - /> +
+
+
+
Displaying {usedEvents.length} events
{isEmptySearch && ( -
+
- No Matching Results + No Matching Results
)} {({ height }) => ( )} @@ -179,14 +182,17 @@ function EventsBlock(props: IProps) { ); } -export default connect((state: RootStore) => ({ - session: state.getIn([ 'sessions', 'current' ]), - notesWithEvents: state.getIn([ 'sessions', 'current' ]).notesWithEvents, - events: state.getIn([ 'sessions', 'current' ]).events, - filteredEvents: state.getIn([ 'sessions', 'filteredEvents' ]), - query: state.getIn(['sessions', 'eventsQuery']), - eventsIndex: state.getIn([ 'sessions', 'eventsIndex' ]), -}), { - setEventFilter, - filterOutNote -})(observer(EventsBlock)) +export default connect( + (state: RootStore) => ({ + session: state.getIn(['sessions', 'current']), + notesWithEvents: state.getIn(['sessions', 'current']).notesWithEvents, + events: state.getIn(['sessions', 'current']).events, + filteredEvents: state.getIn(['sessions', 'filteredEvents']), + query: state.getIn(['sessions', 'eventsQuery']), + eventsIndex: state.getIn(['sessions', 'eventsIndex']), + }), + { + setEventFilter, + filterOutNote, + } +)(observer(EventsBlock)); diff --git a/frontend/app/components/Session_/EventsBlock/event.module.css b/frontend/app/components/Session_/EventsBlock/event.module.css index 6e05e1b59..76d9d9e44 100644 --- a/frontend/app/components/Session_/EventsBlock/event.module.css +++ b/frontend/app/components/Session_/EventsBlock/event.module.css @@ -2,9 +2,8 @@ position: absolute; top: 27px; right: 15px; - padding: 2px 3px; + /* padding: 2px 3px; */ background: $white; - border: 1px solid $gray-light; border-radius: 3px; cursor: pointer; color: $gray-medium; @@ -15,15 +14,12 @@ .event { position: relative; background: #f6f6f6; - border-radius: 3px; + /* border-radius: 3px; */ user-select: none; - /* box-shadow: 0px 1px 3px 0 $gray-light; */ transition: all 0.2s; cursor: pointer; - border: 1px solid transparent; &:hover { background-color: $active-blue; - border: 1px solid $active-blue-border; } & .title { @@ -55,7 +51,7 @@ &.menuClosed.showSelection { &:hover, &.selected { - background-color: #EFFCFB; + background-color: $active-blue; & .checkbox { display: flex; @@ -69,9 +65,8 @@ &.highlighted { transition: all 0.2s; - box-shadow: 0px 2px 10px 0 $gray-light; - border: 1px solid $active-blue-border; - /* background-color: red; */ + background-color: $active-blue; + box-shadow: 0 0 0 2px $active-blue; } &.red { @@ -136,37 +131,22 @@ .clickType, .inputType { - /* border: 1px solid $gray-light; */ background-color: $gray-lightest; cursor: pointer; } .frustration { background-color: rgba(204, 0, 0, 0.1)!important; - box-shadow: - 2px 2px 1px 1px white, - 2px 2px 0px 1px rgba(0,0,0,0.4); } .clickrageType { background-color: #FFF3F3; - border: 1px solid #CC0000; - box-shadow: - /* The top layer shadow */ - /* 0 1px 1px rgba(0,0,0,0.15), */ - /* The second layer */ - 2px 2px 1px 1px white, - /* The second layer shadow */ - 2px 2px 0px 1px rgba(0,0,0,0.4); - /* Padding for demo purposes */ - /* padding: 12px; */ } .highlight { - border: solid thin red; + /* border: solid thin red; */ } .lastInGroup { background: white; - box-shadow: 0px 1px 1px 0px rgb(0 0 0 / 18%); } diff --git a/frontend/app/components/Session_/EventsBlock/eventGroupWrapper.module.css b/frontend/app/components/Session_/EventsBlock/eventGroupWrapper.module.css index f07fa4f25..27f114129 100644 --- a/frontend/app/components/Session_/EventsBlock/eventGroupWrapper.module.css +++ b/frontend/app/components/Session_/EventsBlock/eventGroupWrapper.module.css @@ -1,18 +1,12 @@ -.container { - padding: 0px 7px; /*0.35rem 0.5rem */ - background-color: #f6f6f6; -} - .first { padding-top: 7px; - border-top-left-radius: 3px; - border-top-right-radius: 3px; + border-radius: 0; } .last { - padding-bottom: 7px; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; + padding-bottom: 2px; + margin-bottom: 5px; + /* border-bottom: 1px solid $gray-lightest; */ } .dashAfter { @@ -25,6 +19,9 @@ font-weight: 500 !important; display: flex; align-items: center; + max-width: 280px; + margin: 0 20px; + margin-bottom: 5px; & .url { margin-left: 5px; font-weight: 300; diff --git a/frontend/app/components/Session_/EventsBlock/eventsBlock.module.css b/frontend/app/components/Session_/EventsBlock/eventsBlock.module.css index 9efb4be93..a717b51c8 100644 --- a/frontend/app/components/Session_/EventsBlock/eventsBlock.module.css +++ b/frontend/app/components/Session_/EventsBlock/eventsBlock.module.css @@ -1,5 +1,5 @@ .eventsBlock { - width: 270px; + /* width: 290px; */ margin-bottom: 5px; } diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx index 825d9df79..6920f504b 100644 --- a/frontend/app/components/ui/SVG.tsx +++ b/frontend/app/components/ui/SVG.tsx @@ -1,7 +1,7 @@ import React from 'react'; -export type IconNames = 'activity' | 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-bar-left' | 'arrow-clockwise' | 'arrow-counterclockwise' | 'arrow-down-short' | 'arrow-down' | 'arrow-repeat' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up-short' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_bear' | 'avatar/icn_beaver' | 'avatar/icn_bird' | 'avatar/icn_bison' | 'avatar/icn_camel' | 'avatar/icn_chameleon' | 'avatar/icn_deer' | 'avatar/icn_dog' | 'avatar/icn_dolphin' | 'avatar/icn_elephant' | 'avatar/icn_fish' | 'avatar/icn_fox' | 'avatar/icn_gorilla' | 'avatar/icn_hippo' | 'avatar/icn_horse' | 'avatar/icn_hyena' | 'avatar/icn_kangaroo' | 'avatar/icn_lemur' | 'avatar/icn_mammel' | 'avatar/icn_monkey' | 'avatar/icn_moose' | 'avatar/icn_panda' | 'avatar/icn_penguin' | 'avatar/icn_porcupine' | 'avatar/icn_quail' | 'avatar/icn_rabbit' | 'avatar/icn_rhino' | 'avatar/icn_sea_horse' | 'avatar/icn_sheep' | 'avatar/icn_snake' | 'avatar/icn_squirrel' | 'avatar/icn_tapir' | 'avatar/icn_turtle' | 'avatar/icn_vulture' | 'avatar/icn_wild1' | 'avatar/icn_wild_bore' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'bell-fill' | 'bell-plus' | 'bell-slash' | 'bell' | 'binoculars' | 'book-doc' | 'book' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'buildings' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'call' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'card-checklist' | 'card-text' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-right-text' | 'chat-square-quote' | 'check-circle-fill' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'click-hesitation' | 'click-rage' | 'clipboard-list-check' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-front' | 'cross' | 'cubes' | 'cursor-trash' | 'dash' | 'dashboard-icn' | 'desktop' | 'device' | 'diagram-3' | 'dizzy' | 'door-closed' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'enter' | 'envelope-check' | 'envelope-x' | 'envelope' | 'errors-icon' | 'event/click' | 'event/click_hesitation' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/input_hesitation' | 'event/link' | 'event/location' | 'event/mouse_thrashing' | 'event/resize' | 'event/view' | 'exclamation-circle-fill' | 'exclamation-circle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'file-code' | 'file-medical-alt' | 'file-pdf' | 'file' | 'files' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/state-action' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'folder-plus' | 'folder2' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'gear-fill' | 'gear' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-1x2' | 'grid-3x3' | 'grid-check' | 'grid-horizontal' | 'grid' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'ic-errors' | 'ic-network' | 'ic-rage' | 'ic-resources' | 'icn_away' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'input-hesitation' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/teams-white' | 'integrations/teams' | 'integrations/vuejs' | 'journal-code' | 'key' | 'layer-group' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-arrow' | 'list-ul' | 'list' | 'lock-alt' | 'magic' | 'map-marker-alt' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'network' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'no-recordings' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'people' | 'percent' | 'performance-icon' | 'person-border' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-bold' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plug' | 'plus-circle' | 'plus-lg' | 'plus' | 'pointer-sessions-search' | 'prev1' | 'pulse' | 'puzzle-piece' | 'puzzle' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'quotes' | 'record-circle' | 'redo-back' | 'redo' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'signpost-split' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sleep' | 'sliders' | 'social/slack' | 'social/trello' | 'speedometer2' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stickies' | 'stop-record-circle' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'text-paragraph' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in'; +export type IconNames = 'activity' | 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-bar-left' | 'arrow-clockwise' | 'arrow-counterclockwise' | 'arrow-down-short' | 'arrow-down' | 'arrow-repeat' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up-short' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_bear' | 'avatar/icn_beaver' | 'avatar/icn_bird' | 'avatar/icn_bison' | 'avatar/icn_camel' | 'avatar/icn_chameleon' | 'avatar/icn_deer' | 'avatar/icn_dog' | 'avatar/icn_dolphin' | 'avatar/icn_elephant' | 'avatar/icn_fish' | 'avatar/icn_fox' | 'avatar/icn_gorilla' | 'avatar/icn_hippo' | 'avatar/icn_horse' | 'avatar/icn_hyena' | 'avatar/icn_kangaroo' | 'avatar/icn_lemur' | 'avatar/icn_mammel' | 'avatar/icn_monkey' | 'avatar/icn_moose' | 'avatar/icn_panda' | 'avatar/icn_penguin' | 'avatar/icn_porcupine' | 'avatar/icn_quail' | 'avatar/icn_rabbit' | 'avatar/icn_rhino' | 'avatar/icn_sea_horse' | 'avatar/icn_sheep' | 'avatar/icn_snake' | 'avatar/icn_squirrel' | 'avatar/icn_tapir' | 'avatar/icn_turtle' | 'avatar/icn_vulture' | 'avatar/icn_wild1' | 'avatar/icn_wild_bore' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'bell-fill' | 'bell-plus' | 'bell-slash' | 'bell' | 'binoculars' | 'book-doc' | 'book' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'buildings' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'call' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'card-checklist' | 'card-text' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-right-text' | 'chat-square-quote' | 'check-circle-fill' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'click-hesitation' | 'click-rage' | 'clipboard-list-check' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-front' | 'cross' | 'cubes' | 'cursor-trash' | 'dash' | 'dashboard-icn' | 'desktop' | 'device' | 'diagram-3' | 'dizzy' | 'door-closed' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'enter' | 'envelope-check' | 'envelope-x' | 'envelope' | 'errors-icon' | 'event/click' | 'event/click_hesitation' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/input_hesitation' | 'event/link' | 'event/location' | 'event/mouse_thrashing' | 'event/resize' | 'event/view' | 'exclamation-circle-fill' | 'exclamation-circle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'file-code' | 'file-medical-alt' | 'file-pdf' | 'file' | 'files' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/state-action' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'folder-plus' | 'folder2' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'gear-fill' | 'gear' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-1x2' | 'grid-3x3' | 'grid-check' | 'grid-horizontal' | 'grid' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'ic-errors' | 'ic-network' | 'ic-rage' | 'ic-resources' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'input-hesitation' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/teams-white' | 'integrations/teams' | 'integrations/vuejs' | 'journal-code' | 'key' | 'layer-group' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-arrow' | 'list-ul' | 'list' | 'lock-alt' | 'magic' | 'map-marker-alt' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'network' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'no-recordings' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'people' | 'percent' | 'performance-icon' | 'person-border' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-bold' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plug' | 'plus-circle' | 'plus-lg' | 'plus' | 'pointer-sessions-search' | 'prev1' | 'pulse' | 'puzzle-piece' | 'puzzle' | 'question-circle' | 'question-lg' | 'quote-left' | 'quote-right' | 'quotes' | 'record-circle' | 'redo-back' | 'redo' | 'remote-control' | 'replay-10' | 'resources-icon' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'signpost-split' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slack' | 'slash-circle' | 'sleep' | 'sliders' | 'social/slack' | 'social/trello' | 'speedometer2' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stickies' | 'stop-record-circle' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'text-paragraph' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'web-vitals' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in'; interface Props { name: IconNames; @@ -170,7 +170,7 @@ const SVG = (props: Props) => { case 'event/input': return ; case 'event/input_hesitation': return ; case 'event/link': return ; - case 'event/location': return ; + case 'event/location': return ; case 'event/mouse_thrashing': return ; case 'event/resize': return ; case 'event/view': return ; @@ -276,7 +276,6 @@ const SVG = (props: Props) => { case 'ic-network': return ; case 'ic-rage': return ; case 'ic-resources': return ; - case 'icn_away': return ; case 'id-card': return ; case 'image': return ; case 'info-circle-fill': return ; diff --git a/frontend/app/svg/icons/event/location.svg b/frontend/app/svg/icons/event/location.svg index 499378c6b..f45d5509d 100644 --- a/frontend/app/svg/icons/event/location.svg +++ b/frontend/app/svg/icons/event/location.svg @@ -1,3 +1,3 @@ - - + + \ No newline at end of file