diff --git a/frontend/app/components/Session_/Storage/Storage.js b/frontend/app/components/Session_/Storage/Storage.js index 8057b0ab2..95d97325f 100644 --- a/frontend/app/components/Session_/Storage/Storage.js +++ b/frontend/app/components/Session_/Storage/Storage.js @@ -32,6 +32,10 @@ function getActionsName(type) { } } +const PATH_BGS = ['255, 173, 173', '202, 255, 191', '155, 246, 255','255, 198, 255','160, 196, 255', '251, 248, 204', '253, 228, 207', '255, 207, 210', '241, 192, 232', '207, 186, 240', '163, 196, 243', '144, 219, 244', '142, 236, 245', '152, 245, 225', '185, 251, 192'] + +const buildBg = (shade) => `rgba(${shade}, 0.15)` + @connectPlayer(state => ({ type: selectStorageType(state), list: selectStorageList(state), @@ -44,6 +48,8 @@ function getActionsName(type) { }) //@withEnumToggle('activeTab', 'setActiveTab', DIFF) export default class Storage extends React.PureComponent { + pathShades = {} + lastBtnRef = React.createRef() focusNextButton() { @@ -73,12 +79,11 @@ export default class Storage extends React.PureComponent { const stateDiff = diff(prevItem.state, item.state) if (!stateDiff) { - console.log(prevItem.state, item.state) return
No diff
} return ( -
+
{stateDiff.map((d, i) => this.renderDiffs(d, i))}
); @@ -87,36 +92,46 @@ export default class Storage extends React.PureComponent { renderDiffs(diff, i) { const oldValue = diff.item ? JSON.stringify(diff.item.lhs) : JSON.stringify(diff.lhs) const newValue = diff.item ? JSON.stringify(diff.item.rhs) : JSON.stringify(diff.rhs) + const [path, pathRoot] = this.createPathAndBg(diff) - const createPath = () => { - let path = []; - - if (diff.path) { - path = path.concat(diff.path); - } - if (typeof(diff.index) !== 'undefined') { - path.push(diff.index); - } - return path.length ? path.join('.') : ''; - } - + console.log(this.pathShades[pathRoot]) return ( -
- - {createPath()} +
+ + {path} {': '} - + { oldValue || 'undefined' } {' -> '} - + { newValue || 'undefined'}
) } + createPathAndBg = (diff) => { + let path = []; + let pathRoot; + + if (diff.path) { + path = path.concat(diff.path); + pathRoot = diff.path[0] + if (!this.pathShades[pathRoot]) { + const randomShade = PATH_BGS[Math.floor(Math.random() * PATH_BGS.length)]; + this.pathShades[pathRoot] = buildBg(randomShade) + } + } + if (typeof(diff.index) !== 'undefined') { + path.push(diff.index); + } + + const pathStr = path.length ? path.join('.') : ''; + return [pathStr, pathRoot] +} + ensureString(actionType) { if (typeof actionType === 'string') return actionType; return "UNKNOWN"; @@ -133,7 +148,7 @@ export default class Storage extends React.PureComponent { if (listNow.length === 0) { return "Not initialized"; //? } - return ; + return ; } renderItem(item, i, prevItem) { @@ -217,15 +232,14 @@ export default class Storage extends React.PureComponent { return ( - State { list.length > 0 &&
{ showStore && -

+

{"STORE"}

} -

+

{getActionsName(type)}

@@ -253,14 +267,14 @@ export default class Storage extends React.PureComponent { show={ listNow.length === 0 } > { showStore && -
+
{ listNow.length === 0 ?
{ "Empty state." }
: this.renderTab() }
} -
+
{ listNow.map((item, i) => this.renderItem(item, i, i > 0 ? listNow[i - 1] : undefined)) } diff --git a/frontend/app/player/MessageDistributor/messages/RawMessageReader.ts b/frontend/app/player/MessageDistributor/messages/RawMessageReader.ts index f459c9369..f07dba657 100644 --- a/frontend/app/player/MessageDistributor/messages/RawMessageReader.ts +++ b/frontend/app/player/MessageDistributor/messages/RawMessageReader.ts @@ -17,7 +17,7 @@ export default class RawMessageReader extends PrimitiveReader { if (tp === null) { return resetPointer() } switch (tp) { - + case 0: { const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() } return { @@ -25,7 +25,7 @@ export default class RawMessageReader extends PrimitiveReader { timestamp, }; } - + case 4: { const url = this.readString(); if (url === null) { return resetPointer() } const referrer = this.readString(); if (referrer === null) { return resetPointer() } @@ -37,7 +37,7 @@ export default class RawMessageReader extends PrimitiveReader { navigationStart, }; } - + case 5: { const width = this.readUint(); if (width === null) { return resetPointer() } const height = this.readUint(); if (height === null) { return resetPointer() } @@ -47,7 +47,7 @@ export default class RawMessageReader extends PrimitiveReader { height, }; } - + case 6: { const x = this.readInt(); if (x === null) { return resetPointer() } const y = this.readInt(); if (y === null) { return resetPointer() } @@ -57,7 +57,7 @@ export default class RawMessageReader extends PrimitiveReader { y, }; } - + case 7: { return { @@ -65,7 +65,7 @@ export default class RawMessageReader extends PrimitiveReader { }; } - + case 8: { const id = this.readUint(); if (id === null) { return resetPointer() } const parentID = this.readUint(); if (parentID === null) { return resetPointer() } @@ -81,7 +81,7 @@ export default class RawMessageReader extends PrimitiveReader { svg, }; } - + case 9: { const id = this.readUint(); if (id === null) { return resetPointer() } const parentID = this.readUint(); if (parentID === null) { return resetPointer() } @@ -93,7 +93,7 @@ export default class RawMessageReader extends PrimitiveReader { index, }; } - + case 10: { const id = this.readUint(); if (id === null) { return resetPointer() } const parentID = this.readUint(); if (parentID === null) { return resetPointer() } @@ -105,7 +105,7 @@ export default class RawMessageReader extends PrimitiveReader { index, }; } - + case 11: { const id = this.readUint(); if (id === null) { return resetPointer() } return { @@ -113,7 +113,7 @@ export default class RawMessageReader extends PrimitiveReader { id, }; } - + case 12: { const id = this.readUint(); if (id === null) { return resetPointer() } const name = this.readString(); if (name === null) { return resetPointer() } @@ -125,7 +125,7 @@ export default class RawMessageReader extends PrimitiveReader { value, }; } - + case 13: { const id = this.readUint(); if (id === null) { return resetPointer() } const name = this.readString(); if (name === null) { return resetPointer() } @@ -135,7 +135,7 @@ export default class RawMessageReader extends PrimitiveReader { name, }; } - + case 14: { const id = this.readUint(); if (id === null) { return resetPointer() } const data = this.readString(); if (data === null) { return resetPointer() } @@ -145,7 +145,7 @@ export default class RawMessageReader extends PrimitiveReader { data, }; } - + case 15: { const id = this.readUint(); if (id === null) { return resetPointer() } const data = this.readString(); if (data === null) { return resetPointer() } @@ -155,7 +155,7 @@ export default class RawMessageReader extends PrimitiveReader { data, }; } - + case 16: { const id = this.readUint(); if (id === null) { return resetPointer() } const x = this.readInt(); if (x === null) { return resetPointer() } @@ -167,7 +167,7 @@ export default class RawMessageReader extends PrimitiveReader { y, }; } - + case 18: { const id = this.readUint(); if (id === null) { return resetPointer() } const value = this.readString(); if (value === null) { return resetPointer() } @@ -179,7 +179,7 @@ export default class RawMessageReader extends PrimitiveReader { mask, }; } - + case 19: { const id = this.readUint(); if (id === null) { return resetPointer() } const checked = this.readBoolean(); if (checked === null) { return resetPointer() } @@ -189,7 +189,7 @@ export default class RawMessageReader extends PrimitiveReader { checked, }; } - + case 20: { const x = this.readUint(); if (x === null) { return resetPointer() } const y = this.readUint(); if (y === null) { return resetPointer() } @@ -199,7 +199,7 @@ export default class RawMessageReader extends PrimitiveReader { y, }; } - + case 22: { const level = this.readString(); if (level === null) { return resetPointer() } const value = this.readString(); if (value === null) { return resetPointer() } @@ -209,7 +209,7 @@ export default class RawMessageReader extends PrimitiveReader { value, }; } - + case 37: { const id = this.readUint(); if (id === null) { return resetPointer() } const rule = this.readString(); if (rule === null) { return resetPointer() } @@ -221,7 +221,7 @@ export default class RawMessageReader extends PrimitiveReader { index, }; } - + case 38: { const id = this.readUint(); if (id === null) { return resetPointer() } const index = this.readUint(); if (index === null) { return resetPointer() } @@ -231,7 +231,7 @@ export default class RawMessageReader extends PrimitiveReader { index, }; } - + case 39: { const method = this.readString(); if (method === null) { return resetPointer() } const url = this.readString(); if (url === null) { return resetPointer() } @@ -251,7 +251,7 @@ export default class RawMessageReader extends PrimitiveReader { duration, }; } - + case 40: { const name = this.readString(); if (name === null) { return resetPointer() } const duration = this.readUint(); if (duration === null) { return resetPointer() } @@ -265,7 +265,7 @@ export default class RawMessageReader extends PrimitiveReader { result, }; } - + case 41: { const key = this.readString(); if (key === null) { return resetPointer() } const value = this.readString(); if (value === null) { return resetPointer() } @@ -275,7 +275,7 @@ export default class RawMessageReader extends PrimitiveReader { value, }; } - + case 44: { const action = this.readString(); if (action === null) { return resetPointer() } const state = this.readString(); if (state === null) { return resetPointer() } @@ -287,7 +287,7 @@ export default class RawMessageReader extends PrimitiveReader { duration, }; } - + case 45: { const mutation = this.readString(); if (mutation === null) { return resetPointer() } const state = this.readString(); if (state === null) { return resetPointer() } @@ -297,7 +297,7 @@ export default class RawMessageReader extends PrimitiveReader { state, }; } - + case 46: { const type = this.readString(); if (type === null) { return resetPointer() } const payload = this.readString(); if (payload === null) { return resetPointer() } @@ -307,7 +307,7 @@ export default class RawMessageReader extends PrimitiveReader { payload, }; } - + case 47: { const action = this.readString(); if (action === null) { return resetPointer() } const state = this.readString(); if (state === null) { return resetPointer() } @@ -319,7 +319,7 @@ export default class RawMessageReader extends PrimitiveReader { duration, }; } - + case 48: { const operationKind = this.readString(); if (operationKind === null) { return resetPointer() } const operationName = this.readString(); if (operationName === null) { return resetPointer() } @@ -333,7 +333,7 @@ export default class RawMessageReader extends PrimitiveReader { response, }; } - + case 49: { const frames = this.readInt(); if (frames === null) { return resetPointer() } const ticks = this.readInt(); if (ticks === null) { return resetPointer() } @@ -347,7 +347,7 @@ export default class RawMessageReader extends PrimitiveReader { usedJSHeapSize, }; } - + case 54: { const downlink = this.readUint(); if (downlink === null) { return resetPointer() } const type = this.readString(); if (type === null) { return resetPointer() } @@ -357,7 +357,7 @@ export default class RawMessageReader extends PrimitiveReader { type, }; } - + case 55: { const hidden = this.readBoolean(); if (hidden === null) { return resetPointer() } return { @@ -365,7 +365,7 @@ export default class RawMessageReader extends PrimitiveReader { hidden, }; } - + case 59: { const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() } const duration = this.readUint(); if (duration === null) { return resetPointer() } @@ -385,7 +385,7 @@ export default class RawMessageReader extends PrimitiveReader { containerName, }; } - + case 60: { const id = this.readUint(); if (id === null) { return resetPointer() } const name = this.readString(); if (name === null) { return resetPointer() } @@ -399,7 +399,7 @@ export default class RawMessageReader extends PrimitiveReader { baseURL, }; } - + case 61: { const id = this.readUint(); if (id === null) { return resetPointer() } const data = this.readString(); if (data === null) { return resetPointer() } @@ -411,7 +411,7 @@ export default class RawMessageReader extends PrimitiveReader { baseURL, }; } - + case 67: { const id = this.readUint(); if (id === null) { return resetPointer() } const rule = this.readString(); if (rule === null) { return resetPointer() } @@ -425,7 +425,7 @@ export default class RawMessageReader extends PrimitiveReader { baseURL, }; } - + case 69: { const id = this.readUint(); if (id === null) { return resetPointer() } const hesitationTime = this.readUint(); if (hesitationTime === null) { return resetPointer() } @@ -439,7 +439,7 @@ export default class RawMessageReader extends PrimitiveReader { selector, }; } - + case 70: { const frameID = this.readUint(); if (frameID === null) { return resetPointer() } const id = this.readUint(); if (id === null) { return resetPointer() } @@ -449,7 +449,7 @@ export default class RawMessageReader extends PrimitiveReader { id, }; } - + case 71: { const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() } const text = this.readString(); if (text === null) { return resetPointer() } @@ -461,7 +461,7 @@ export default class RawMessageReader extends PrimitiveReader { baseURL, }; } - + case 72: { const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() } const text = this.readString(); if (text === null) { return resetPointer() } @@ -471,7 +471,7 @@ export default class RawMessageReader extends PrimitiveReader { text, }; } - + case 73: { const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() } const rule = this.readString(); if (rule === null) { return resetPointer() } @@ -485,7 +485,7 @@ export default class RawMessageReader extends PrimitiveReader { baseURL, }; } - + case 74: { const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() } const rule = this.readString(); if (rule === null) { return resetPointer() } @@ -497,7 +497,7 @@ export default class RawMessageReader extends PrimitiveReader { index, }; } - + case 75: { const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() } const index = this.readUint(); if (index === null) { return resetPointer() } @@ -507,7 +507,7 @@ export default class RawMessageReader extends PrimitiveReader { index, }; } - + case 76: { const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() } const id = this.readUint(); if (id === null) { return resetPointer() } @@ -517,7 +517,7 @@ export default class RawMessageReader extends PrimitiveReader { id, }; } - + case 77: { const sheetID = this.readUint(); if (sheetID === null) { return resetPointer() } const id = this.readUint(); if (id === null) { return resetPointer() } @@ -527,17 +527,19 @@ export default class RawMessageReader extends PrimitiveReader { id, }; } - + case 79: { + console.log('here') const mutation = this.readString(); if (mutation === null) { return resetPointer() } const state = this.readString(); if (state === null) { return resetPointer() } + console.log(mutation, state) return { tp: "zustand", mutation, state, }; } - + case 90: { const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() } const projectID = this.readUint(); if (projectID === null) { return resetPointer() } @@ -563,7 +565,7 @@ export default class RawMessageReader extends PrimitiveReader { userCountry, }; } - + case 93: { const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() } const length = this.readUint(); if (length === null) { return resetPointer() } @@ -577,7 +579,7 @@ export default class RawMessageReader extends PrimitiveReader { payload, }; } - + case 96: { const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() } const length = this.readUint(); if (length === null) { return resetPointer() } @@ -595,7 +597,7 @@ export default class RawMessageReader extends PrimitiveReader { height, }; } - + case 100: { const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() } const length = this.readUint(); if (length === null) { return resetPointer() } @@ -611,7 +613,7 @@ export default class RawMessageReader extends PrimitiveReader { y, }; } - + case 102: { const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() } const length = this.readUint(); if (length === null) { return resetPointer() } @@ -625,7 +627,7 @@ export default class RawMessageReader extends PrimitiveReader { value, }; } - + case 103: { const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() } const length = this.readUint(); if (length === null) { return resetPointer() } @@ -639,7 +641,7 @@ export default class RawMessageReader extends PrimitiveReader { content, }; } - + case 105: { const timestamp = this.readUint(); if (timestamp === null) { return resetPointer() } const length = this.readUint(); if (length === null) { return resetPointer() } @@ -663,7 +665,7 @@ export default class RawMessageReader extends PrimitiveReader { status, }; } - + default: throw new Error(`Unrecognizable message type: ${ tp }; Pointer at the position ${this.p} of ${this.buf.length}`) return null; diff --git a/tracker/tracker-zustand/src/index.ts b/tracker/tracker-zustand/src/index.ts index bf9186fb1..0ee5e4314 100644 --- a/tracker/tracker-zustand/src/index.ts +++ b/tracker/tracker-zustand/src/index.ts @@ -1,62 +1,69 @@ -import { App, Messages } from "@openreplay/tracker"; -import { Encoder, sha1 } from "./syncod/index.js"; +import { App, Messages } from '@openreplay/tracker' +import { Encoder, sha1 } from './syncod/index.js' export interface Options { - filter: (mutation: any, state: any) => boolean; - transformer: (state: any) => any; - mutationTransformer: (mutation: any) => any; + filter: (mutation: any, state: any) => boolean + transformer: (state: any) => any + mutationTransformer: (mutation: any) => any } function processMutationAndState( - app: App, - options: Options, - encoder: Encoder, - mutation: string[], - state: Record + app: App, + options: Options, + encoder: Encoder, + mutation: string[], + state: Record, ) { - if (options.filter(mutation, state)) { - try { - const _mutation = encoder.encode(options.mutationTransformer(mutation)); - const _state = encoder.encode(options.transformer(state)); - const _table = encoder.commit(); - for (let key in _table) app.send(Messages.OTable(key, _table[key])); - app.send(Messages.Zustand(_mutation, _state)); - } catch (e) { - encoder.clear(); - app.debug.error(e) - } - } + if (options.filter(mutation, state)) { + try { + const _mutation = encoder.encode(options.mutationTransformer(mutation)) + const _state = encoder.encode(options.transformer(state)) + const _table = encoder.commit() + for (let key in _table) app.send(Messages.OTable(key, _table[key])) + app.send(Messages.Zustand(_mutation, _state)) + } catch (e) { + encoder.clear() + app.debug.error(e) + } + } } export default function(opts: Partial = {}) { - const options: Options = Object.assign( - { - filter: () => true, - transformer: state => state, - mutationTransformer: mutation => mutation, - }, - opts - ); - return (app: App | null) => { - if (app === null) { - return Function.prototype; - } - const encoder = new Encoder(sha1, 50); - const state = {}; - return (storeName: string = Math.random().toString(36).substring(2, 9)) => - (config: Function) => - (set: (...args: any) => void, get: () => Record, api: any) => - config( - (...args) => { - set(...args) - const newState = get(); - state[storeName] = newState - const triggeredActions = args.map(action => action.toString?.()) + const options: Options = Object.assign( + { + filter: () => true, + transformer: (state) => state, + mutationTransformer: (mutation) => mutation, + }, + opts, + ) + return (app: App | null) => { + if (app === null) { + return Function.prototype + } + const encoder = new Encoder(sha1, 50) + const state = {} + return ( + storeName: string = Math.random() + .toString(36) + .substring(2, 9), + ) => (config: Function) => ( + set: (...args: any) => void, + get: () => Record, + api: any, + ) => + config( + (...args) => { + console.log('hi', args) + set(...args) + const newState = get() + state[storeName] = newState + const triggeredActions = args.map((action) => action.toString?.()) - processMutationAndState(app, options, encoder, triggeredActions, state) - }, - get, - api - ) - }; + processMutationAndState(app, options, encoder, triggeredActions, state) + }, + get, + api, + ) + } }