diff --git a/frontend/app/components/Session/Player/LivePlayer/LivePlayerBlock.tsx b/frontend/app/components/Session/Player/LivePlayer/LivePlayerBlock.tsx index 0bdd169d5..a47b7e862 100644 --- a/frontend/app/components/Session/Player/LivePlayer/LivePlayerBlock.tsx +++ b/frontend/app/components/Session/Player/LivePlayer/LivePlayerBlock.tsx @@ -18,7 +18,7 @@ function LivePlayerBlock(props: IProps) { return (
{shouldShowSubHeader ? ( - + ) : null} { + setActiveTab('EVENTS') + }, [uxtestingStore.isUxt()]) + const onNoteClose = () => { setNoteItem(undefined); contextValue.player.play(); diff --git a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js index 4fa54c15b..96920d95c 100644 --- a/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js +++ b/frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js @@ -59,7 +59,7 @@ class EventGroupWrapper extends React.Component { presentInSearch, isNote, isTabChange, - filterOutNote + filterOutNote, } = this.props; const isLocation = event.type === TYPES.LOCATION; const isUtxEvent = event.type === TYPES.UTX_EVENT; diff --git a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx index 493de5e74..5d9173c1f 100644 --- a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx +++ b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx @@ -65,7 +65,7 @@ function EventsBlock(props: IProps) { const usedEvents = React.useMemo(() => { if (tabStates !== undefined) { tabChangeEvents.forEach((ev) => { - const urlsList = tabStates[ev.tabId].urlsList; + const urlsList = tabStates[ev.tabId]?.urlsList || []; let found = false; let i = urlsList.length - 1; while (!found && i >= 0) { @@ -180,7 +180,7 @@ function EventsBlock(props: IProps) {
{uxtestingStore.isUxt() ? (
-
) : null} diff --git a/frontend/app/components/Session_/EventsBlock/UtxEvent.tsx b/frontend/app/components/Session_/EventsBlock/UtxEvent.tsx index d5436d2f7..eec4e0395 100644 --- a/frontend/app/components/Session_/EventsBlock/UtxEvent.tsx +++ b/frontend/app/components/Session_/EventsBlock/UtxEvent.tsx @@ -1,15 +1,19 @@ import React from 'react' import { durationFromMsFormatted } from "App/date"; +import { Tooltip } from 'antd' function UtxEvent({ event }: any) { return (
-
-
-
{event.title}
-
{durationFromMsFormatted(event.duration)}
+
+
+
Task {event.indexNum}
+ +
instructions
+ +
{durationFromMsFormatted(event.duration)}
- {event.description &&
{event.description}
} +
{event.title}
{event.comment ? (
diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js index b2d3a7f46..31040ad03 100644 --- a/frontend/app/components/Session_/Subheader.js +++ b/frontend/app/components/Session_/Subheader.js @@ -87,7 +87,10 @@ function SubHeader(props) { return ( <> -
+
{showWarning ? (
{ case 'event/code': return ; case 'event/i-cursor': return ; case 'event/input': return ; - case 'event/input_hesitation': return ; + case 'event/input_hesitation': return ; case 'event/link': return ; case 'event/location': return ; case 'event/mouse_thrashing': return ; diff --git a/frontend/app/svg/icons/event/input_hesitation.svg b/frontend/app/svg/icons/event/input_hesitation.svg index a2f79bfb6..83cfb090b 100644 --- a/frontend/app/svg/icons/event/input_hesitation.svg +++ b/frontend/app/svg/icons/event/input_hesitation.svg @@ -1,4 +1,4 @@ - + diff --git a/frontend/app/types/session/event.ts b/frontend/app/types/session/event.ts index 2db7f4f87..4c9fc3473 100644 --- a/frontend/app/types/session/event.ts +++ b/frontend/app/types/session/event.ts @@ -241,6 +241,7 @@ export class UtxEvent { taskId: number; timestamp: number; title: string; + indexNum: number; constructor(event: Record) { Object.assign(this, { @@ -254,6 +255,7 @@ export class UtxEvent { taskId: event.taskId, timestamp: event.timestamp, title: event.title, + indexNum: event.indexNum, }); } } \ No newline at end of file diff --git a/frontend/app/types/session/session.ts b/frontend/app/types/session/session.ts index c5f7b945f..08ff746ae 100644 --- a/frontend/app/types/session/session.ts +++ b/frontend/app/types/session/session.ts @@ -365,16 +365,22 @@ export default class Session { const utxDoneEvents = userTestingEvents.filter(e => e.status === 'done' && e.title).map(e => ({ ...e, type: 'UTX_EVENT', key: e.signal_id })) const rawEvents: (EventData & { key: number })[] = []; + let utxIndexNum = 0; if (sessionEvents.length) { const eventsWithUtx = mergeEventLists(sessionEvents, utxDoneEvents) eventsWithUtx.forEach((event, k) => { + const isRawUtx = 'allow_typing' in event + if (isRawUtx) { + utxIndexNum += 1; + event.indexNum = utxIndexNum; + } const time = event.timestamp - this.startedAt; if (event.type !== TYPES.CONSOLE && time <= this.durationSeconds) { const EventClass = SessionEvent({ ...event, time, key: k }); if (EventClass) { events.push(EventClass); } - rawEvents.push({ ...event, time, key: k }); + rawEvents.push({ ...event, time, key: k, }); } }); } diff --git a/tracker/tracker/package.json b/tracker/tracker/package.json index 7d974a6a5..e5e5d698e 100644 --- a/tracker/tracker/package.json +++ b/tracker/tracker/package.json @@ -1,7 +1,7 @@ { "name": "@openreplay/tracker", "description": "The OpenReplay tracker main package", - "version": "11.0.1-6", + "version": "11.0.1-11", "keywords": [ "logging", "replay" diff --git a/tracker/tracker/src/main/app/index.ts b/tracker/tracker/src/main/app/index.ts index dbf73400a..c8d5e3fb0 100644 --- a/tracker/tracker/src/main/app/index.ts +++ b/tracker/tracker/src/main/app/index.ts @@ -308,8 +308,6 @@ export default class App { } } } - - this.uxtManager = new UserTestManager(this, uxtStorageKey) } private _debug(context: string, e: any) { @@ -710,6 +708,7 @@ export default class App { } this.restartAttempts = 0 + this.uxtManager = new UserTestManager(this, uxtStorageKey) let uxtId: number | undefined const savedUxtTag = this.localStorage.getItem(uxtStorageKey) if (savedUxtTag) { diff --git a/tracker/tracker/src/main/modules/userTesting/index.ts b/tracker/tracker/src/main/modules/userTesting/index.ts index 2bc8e502d..6ab6ddc0f 100644 --- a/tracker/tracker/src/main/modules/userTesting/index.ts +++ b/tracker/tracker/src/main/modules/userTesting/index.ts @@ -75,6 +75,7 @@ export default class UserTestManager { this.userRecorder = new Recorder(app) const sessionId = this.app.getSessionID() const savedSessionId = this.app.localStorage.getItem('or_uxt_session_id') + console.log(sessionId, savedSessionId) if (sessionId !== savedSessionId) { this.app.localStorage.removeItem(this.storageKey) this.app.localStorage.removeItem('or_uxt_session_id') @@ -119,6 +120,8 @@ export default class UserTestManager { signalTest = (status: 'begin' | 'done' | 'skipped') => { const timestamp = this.app.timestamp() if (status === 'begin' && this.testId) { + const sessionId = this.app.getSessionID() + this.app.localStorage.setItem('or_uxt_session_id', sessionId as unknown as string) this.app.localStorage.setItem(this.storageKey, this.testId.toString()) this.app.localStorage.setItem('or_uxt_test_start', timestamp.toString()) } else { @@ -266,7 +269,18 @@ export default class UserTestManager { createTitleSection() { const title = createElement('div', 'title', styles.titleWidgetStyle) const leftIcon = generateGrid() - const titleText = createElement('div', 'title_text', {}, this.test?.title) + const titleText = createElement( + 'div', + 'title_text', + { + maxWidth: '19rem', + overflow: 'hidden', + textOverflow: 'ellipsis', + width: '100%', + cursor: 'pointer', + }, + this.test?.title, + ) const rightIcon = generateChevron() title.append(leftIcon, titleText, rightIcon) @@ -306,12 +320,14 @@ export default class UserTestManager { return isVisible } - rightIcon.onclick = () => { + const collapseWidget = () => { Object.assign(rightIcon.style, { transform: this.widgetVisible ? 'rotate(0deg)' : 'rotate(180deg)', }) toggleWidget(!this.widgetVisible) } + titleText.onclick = collapseWidget + rightIcon.onclick = collapseWidget attachDND(this.bg, leftIcon) this.collapseWidget = () => toggleWidget(false) @@ -331,6 +347,8 @@ export default class UserTestManager { maxHeight: '250px', overflowY: 'auto', whiteSpace: 'pre-wrap', + fontSize: 13, + color: '#454545', }) descriptionC.innerHTML = guidelines const button = createElement('div', 'button_begin_or', styles.buttonWidgetStyle, 'Begin Test') @@ -390,14 +408,15 @@ export default class UserTestManager { allow_typing: boolean }[], ) { + Object.assign(this.container.style, styles.containerStyle) const section = createElement('div', 'task_section_or', styles.descriptionWidgetStyle) const titleContainer = createElement('div', 'description_t_title_or', styles.sectionTitleStyle) const title = createElement('div', 'title', {}, 'Tasks') const icon = createElement('div', 'icon', styles.symbolIcon, '-') const content = createElement('div', 'content', styles.contentStyle) const pagination = createElement('div', 'pagination', styles.paginationStyle) - const leftArrow = createElement('span', 'leftArrow', {}, '<') - const rightArrow = createElement('span', 'rightArrow', {}, '>') + // const leftArrow = createElement('span', 'leftArrow', {}, '<') + // const rightArrow = createElement('span', 'rightArrow', {}, '>') const taskCard = createElement('div', 'taskCard', styles.taskDescriptionCard) const taskText = createElement('div', 'taskText', styles.taskTextStyle) const taskDescription = createElement('div', 'taskDescription', styles.taskDescriptionStyle) @@ -413,13 +432,13 @@ export default class UserTestManager { 'div', 'closePanelButton', styles.taskButtonStyle, - 'Collapse panel', + 'Collapse Panel', ) const nextButton = createElement( 'div', 'nextButton', styles.taskButtonBorderedStyle, - 'Done, next', + 'Done, Next', ) titleContainer.append(title, icon) @@ -439,13 +458,13 @@ export default class UserTestManager { } } - pagination.appendChild(leftArrow) + // pagination.appendChild(leftArrow) tasks.forEach((_, index) => { const pageNumber = createElement('span', `or_task_${index}`, {}, (index + 1).toString()) pageNumber.id = `or_task_${index}` pagination.append(pageNumber) }) - pagination.appendChild(rightArrow) + // pagination.appendChild(rightArrow) const toggleTasksVisibility = () => { this.widgetTasksVisible = !this.widgetTasksVisible @@ -548,7 +567,7 @@ export default class UserTestManager { 'div', 'end_button_or', styles.buttonWidgetStyle, - 'Uploading session...', + 'Submitting Feedback', ) if (this.test?.reqMic || this.test?.reqCamera) { diff --git a/tracker/tracker/src/main/modules/userTesting/styles.ts b/tracker/tracker/src/main/modules/userTesting/styles.ts index ab23e9143..245b26cd5 100644 --- a/tracker/tracker/src/main/modules/userTesting/styles.ts +++ b/tracker/tracker/src/main/modules/userTesting/styles.ts @@ -14,13 +14,13 @@ export const bgStyle = { export const containerStyle = { display: 'flex', flexDirection: 'column', - gap: '8px', + gap: '0.5rem', alignItems: 'center', padding: '1.5rem', borderRadius: '0.375rem', border: '1px solid #D9D9D9', background: '#FFF', - width: '29rem', + width: '22rem', } export const containerWidgetStyle = { display: 'flex', @@ -31,7 +31,7 @@ export const containerWidgetStyle = { 'border-radius': '0.375rem', border: '1px solid #D9D9D9', background: '#FFF', - width: '29rem', + width: '22rem', } export const titleStyle = { @@ -176,7 +176,7 @@ export const buttonWidgetStyle = { } export const stopWidgetStyle = { - marginTop: '2rem', + marginTop: '1rem', cursor: 'pointer', display: 'block', fontWeight: '600', @@ -228,7 +228,8 @@ export const taskTextStyle = { } export const taskDescriptionStyle = { - color: '#8C8C8C', + color: '#454545', + fontSize: 13, } export const taskButtonStyle = {