jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI fixes v1.15.0 (#1693)

Browse source 
* fix(ui): filter keys conflcit with metadata

* fix(player): fix msg reader bug

---------

Co-authored-by: nick-delirium <nikita@openreplay.com>
This commit is contained in:
Shekar Siri 2023-11-22 14:51:54 +01:00 • committed by GitHub
parent 48dbbb55db
commit 2bf450ff6a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 92 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
View file

@ -146,7 +146,7 @@ function FilterAutoComplete(props: Props) {
const loadOptions = (inputValue: string, callback: (options: []) => void) => {
// remove underscore from params
const _params = Object.keys(params).reduce((acc: any, key: string) => {
acc[key] = params[key].replace('_', '');
acc[key] = params[key].replace(/^_/, '');
return acc;
}, {});

2
frontend/app/duck/search.js
View file

@ -140,7 +140,7 @@ export const filterMap = ({ category, value, key, operator, sourceOperator, sour
custom,
type: category === FilterCategory.METADATA ? FilterKey.METADATA : key,
operator,
source: category === FilterCategory.METADATA ? key : source,
source: category === FilterCategory.METADATA ? key.replace(/^_/, '') : source,
sourceOperator,
isEvent,
filters: filters ? filters.map(filterMap) : [],

6
frontend/app/mstore/types/filterItem.ts
View file

@ -59,7 +59,7 @@ export default class FilterItem {
fromJson(json: any, mainFilterKey = '') {
const isMetadata = json.type === FilterKey.METADATA;
let _filter: any = (isMetadata ? filtersMap[json.source] : filtersMap[json.type]) || {};
let _filter: any = (isMetadata ? filtersMap['_' + json.source] : filtersMap[json.type]) || {};
if (mainFilterKey) {
const mainFilter = filtersMap[mainFilterKey];
@ -83,7 +83,7 @@ export default class FilterItem {
(this.value = !json.value || json.value.length === 0 ? [''] : json.value);
(this.operator = json.operator);
this.source = json.source;
this.source = isMetadata ? '_' + json.source : json.source;
this.sourceOperator = json.sourceOperator;
this.filters =
@ -102,7 +102,7 @@ export default class FilterItem {
isEvent: this.isEvent,
value: this.value,
operator: this.operator,
source: isMetadata ? this.key : this.source,
source: isMetadata ? this.key.replace(/^_/, '') : this.source,
sourceOperator: this.sourceOperator,
filters: Array.isArray(this.filters) ? this.filters.map((i) => i.toJson()) : [],
};

165
frontend/app/player/web/Screen/Screen.ts
View file

@ -1,15 +1,14 @@
import styles from './screen.module.css'
import Cursor from './Cursor'
import styles from './screen.module.css';
import Cursor from './Cursor';
import type { Point, Dimensions } from './types';
export type State = Dimensions
export type State = Dimensions;
export const INITIAL_STATE: State = {
width: 0,
height: 0,
}
};
export enum ScaleMode {
Embed,
@ -17,53 +16,55 @@ export enum ScaleMode {
AdjustParentHeight,
}
function getElementsFromInternalPoint(doc: Document, { x, y }: Point): Element[] {
// @ts-ignore (IE, Edge)
if (typeof doc.msElementsFromRect === 'function') {
// @ts-ignore
return Array.prototype.slice.call(doc.msElementsFromRect(x,y)) || []
return Array.prototype.slice.call(doc.msElementsFromRect(x, y)) || [];
}
if (typeof doc.elementsFromPoint === 'function') {
return doc.elementsFromPoint(x, y)
return doc.elementsFromPoint(x, y);
}
const el = doc.elementFromPoint(x, y)
return el ? [ el ] : []
const el = doc.elementFromPoint(x, y);
return el ? [el] : [];
}
function getElementsFromInternalPointDeep(doc: Document, point: Point): Element[] {
const elements = getElementsFromInternalPoint(doc, point)
const elements = getElementsFromInternalPoint(doc, point);
// is it performant though??
for (let i = 0; i < elements.length; i++) {
const el = elements[i]
if (isIframe(el)){
const iDoc = el.contentDocument
const el = elements[i];
if (isIframe(el)) {
const iDoc = el.contentDocument;
if (iDoc) {
const iPoint: Point = {
x: point.x - el.clientLeft,
y: point.y - el.clientTop,
}
elements.push(...getElementsFromInternalPointDeep(iDoc, iPoint))
};
elements.push(...getElementsFromInternalPointDeep(iDoc, iPoint));
}
}
}
return elements
return elements;
}
function isIframe(el: Element): el is HTMLIFrameElement {
return el.tagName === "IFRAME"
return el.tagName === 'IFRAME';
}
export default class Screen {
readonly overlay: HTMLDivElement
readonly cursor: Cursor
private selectionTargets: { start?: HTMLDivElement, end?: HTMLDivElement } = { start: undefined, end: undefined }
readonly overlay: HTMLDivElement;
readonly cursor: Cursor;
private selectionTargets: { start?: HTMLDivElement; end?: HTMLDivElement } = {
start: undefined,
end: undefined,
};
private readonly iframe: HTMLIFrameElement;
private readonly screen: HTMLDivElement;
private parentElement: HTMLElement | null = null
private onUpdateHook: (w: number, h: number) => void
private parentElement: HTMLElement | null = null;
private onUpdateHook: (w: number, h: number) => void;
constructor(isMobile: boolean, private scaleMode: ScaleMode = ScaleMode.Embed) {
const iframe = document.createElement('iframe');
@ -81,16 +82,16 @@ export default class Screen {
screen.appendChild(overlay);
this.screen = screen;
this.cursor = new Cursor(this.overlay, isMobile) // TODO: move outside
this.cursor = new Cursor(this.overlay, isMobile); // TODO: move outside
}
addMobileStyles() {
this.iframe.className = styles.mobileIframe
this.screen.className = styles.mobileScreen
this.iframe.className = styles.mobileIframe;
this.screen.className = styles.mobileScreen;
}
addFullscreenBoundary() {
this.screen.className = styles.mobileScreenFullview
this.screen.className = styles.mobileScreenFullview;
}
clean() {
@ -101,8 +102,8 @@ export default class Screen {
attach(parentElement: HTMLElement) {
if (this.parentElement) {
this.parentElement = null
console.warn("BaseScreen: reattaching the screen.");
this.parentElement = null;
console.warn('BaseScreen: reattaching the screen.');
}
parentElement.appendChild(this.screen);
@ -112,16 +113,16 @@ export default class Screen {
addToBody(el: HTMLElement) {
if (this.document) {
this.document.body.style.margin = '0';
this.document.body.appendChild(el)
this.document.body.appendChild(el);
}
}
getParentElement(): HTMLElement | null {
return this.parentElement
getParentElement(): HTMLElement | null {
return this.parentElement;
}
setBorderStyle(style: { border: string }) {
return Object.assign(this.screen.style, style)
return Object.assign(this.screen.style, style);
}
get window(): WindowProxy | null {
@ -133,16 +134,17 @@ export default class Screen {
}
get iframeStylesRef(): CSSStyleDeclaration {
return this.iframe.style
return this.iframe.style;
}
public boundingRect: DOMRect | null = null;
public boundingRect: DOMRect | null = null;
private getBoundingClientRect(): DOMRect {
if (this.boundingRect === null) {
// TODO: use this.screen instead in order to separate overlay functionality
return this.boundingRect = this.screen.getBoundingClientRect() // expensive operation?
if (this.boundingRect === null) {
// TODO: use this.screen instead in order to separate overlay functionality
return (this.boundingRect = this.screen.getBoundingClientRect()); // expensive operation?
}
return this.boundingRect
return this.boundingRect;
}
getInternalViewportCoordinates({ x, y }: Point): Point {
@ -158,18 +160,18 @@ export default class Screen {
}
getCurrentScroll(): Point {
const docEl = this.document?.documentElement
const x = docEl ? docEl.scrollLeft : 0
const y = docEl ? docEl.scrollTop : 0
return { x, y }
const docEl = this.document?.documentElement;
const x = docEl ? docEl.scrollLeft : 0;
const y = docEl ? docEl.scrollTop : 0;
return { x, y };
}
getInternalCoordinates(p: Point): Point {
const { x, y } = this.getInternalViewportCoordinates(p);
const sc = this.getCurrentScroll()
const sc = this.getCurrentScroll();
return { x: x+sc.x, y: y+sc.y };
return { x: x + sc.x, y: y + sc.y };
}
getElementFromInternalPoint({ x, y }: Point): Element | null {
@ -179,9 +181,11 @@ export default class Screen {
}
getElementsFromInternalPoint(point: Point): Element[] {
const doc = this.document
if (!doc) { return [] }
return getElementsFromInternalPointDeep(doc, point)
const doc = this.document;
if (!doc) {
return [];
}
return getElementsFromInternalPointDeep(doc, point);
}
getElementFromPoint(point: Point): Element | null {
@ -194,8 +198,8 @@ export default class Screen {
const safeSelector = selector.replace(/\//g, '\\/');
return this.document?.querySelector<HTMLElement>(safeSelector) || null;
} catch (e) {
console.error("Can not select element. ", e)
return null
console.error('Can not select element. ', e);
return null;
}
}
@ -208,6 +212,7 @@ export default class Screen {
}
private scaleRatio: number = 1;
getScale() {
return this.scaleRatio;
}
@ -216,21 +221,24 @@ export default class Screen {
if (!this.parentElement) return;
const { offsetWidth, offsetHeight } = this.parentElement;
let translate = ""
let posStyles = {}
let translate = '';
let posStyles = {};
switch (this.scaleMode) {
case ScaleMode.Embed:
this.scaleRatio = Math.min(offsetWidth / width, offsetHeight / height)
translate = "translate(-50%, -50%)"
posStyles = { height: height + 'px' }
break;
case ScaleMode.AdjustParentHeight:
// we want to scale the document with true height so the clickmap will be scrollable
const usedHeight = this.document?.body.offsetHeight && this.document?.body.offsetHeight > height ? this.document.body.offsetHeight + 'px' : height + 'px'
this.scaleRatio = offsetWidth / width
translate = "translate(-50%, 0)"
posStyles = { top: 0, height: usedHeight, }
break;
case ScaleMode.Embed:
this.scaleRatio = Math.min(offsetWidth / width, offsetHeight / height);
translate = 'translate(-50%, -50%)';
posStyles = { height: height + 'px' };
break;
case ScaleMode.AdjustParentHeight:
// we want to scale the document with true height so the clickmap will be scrollable
const usedHeight =
this.document?.body.offsetHeight && this.document?.body.offsetHeight > height
? this.document.body.offsetHeight + 'px'
: height + 'px';
this.scaleRatio = offsetWidth / width;
translate = 'translate(-50%, 0)';
posStyles = { top: 0, height: usedHeight };
break;
}
if (this.scaleRatio > 1) {
@ -240,49 +248,48 @@ export default class Screen {
}
if (this.scaleMode === ScaleMode.AdjustParentHeight) {
this.parentElement.style.height = this.scaleRatio * height + 'px'
this.parentElement.style.height = this.scaleRatio * height + 'px';
}
Object.assign(this.screen.style, posStyles, {
width: width + 'px',
transform: `scale(${this.scaleRatio}) ${translate}`,
})
Object.assign(this.iframe.style, posStyles, {
});
Object.assign(this.iframe.style, posStyles, {
width: width + 'px',
})
});
this.boundingRect = this.screen.getBoundingClientRect();
this.onUpdateHook?.(width, height)
this.onUpdateHook?.(width, height);
}
setOnUpdate(cb: any) {
this.onUpdateHook = cb
this.onUpdateHook = cb;
}
public createSelection(start: HTMLDivElement, end: HTMLDivElement) {
this.selectionTargets = { start, end }
this.selectionTargets = { start, end };
this.overlay.appendChild(start);
this.overlay.appendChild(end);
setTimeout(() => {
start.className = styles.highlightoff
end.className = styles.highlightoff
}, 750)
start.className = styles.highlightoff;
end.className = styles.highlightoff;
}, 750);
}
public updateOverlayStyle(style: Partial<CSSStyleDeclaration>) {
Object.assign(this.overlay.style, style)
Object.assign(this.overlay.style, style);
}
public clearSelection() {
if (this.selectionTargets.start && this.selectionTargets.end) {
this.overlay.removeChild(this.selectionTargets.start);
this.overlay.removeChild(this.selectionTargets.end);
this.selectionTargets.start.remove()
this.selectionTargets.end.remove()
this.selectionTargets = { start: undefined, end: undefined }
this.selectionTargets.start.remove();
this.selectionTargets.end.remove();
this.selectionTargets = { start: undefined, end: undefined };
}
}
}

2
frontend/app/player/web/messages/MFileReader.ts
View file

@ -101,7 +101,7 @@ export default class MFileReader extends RawMessageReader {
const index = this.noIndexes ? 0 : this.getLastMessageID()
const msg = Object.assign(rewriteMessage(rMsg), {
time: this.currentTime || rMsg.timestamp - this.startTime!,
time: this.currentTime ?? rMsg.timestamp - this.startTime!,
tabId: this.currentTab,
}, !this.noIndexes ? { _index: index } : {})