From 0fdb1e0fe3aefd268afd2c30131e31b467447b3a Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Fri, 26 Jan 2024 16:14:14 +0000 Subject: [PATCH] feat: dedupe incremental mutations for mobile replay (#19974) * start passing context around instead of multiple parameters * start passing a result and context back from conversions * even more using the context and the results * get id sequences under control * manually run prettier * add lint staged rules for ee TS code * remove console logs * start tracking ids as they are processedD * Add a new test case and so update _all_ of the ids :/ * don't process the same add or update id more than once * refactor similar closer together * move keyboard style override into context * snapshots * remove constant * need to fangle context in case select options ever starts to change it --- .../increment-with-child-duplication.json | 210 + .../__snapshots__/transform.test.ts.snap | 5475 +++++++++-------- ee/frontend/mobile-replay/index.ts | 2 +- ee/frontend/mobile-replay/transform.test.ts | 66 +- .../{ => transformer}/status-bar.ts | 17 +- .../{ => transformer}/transformers.ts | 677 +- .../mobile-replay/transformer/types.ts | 25 + .../{ => transformer}/wireframeStyle.ts | 8 +- package.json | 4 + 9 files changed, 3652 insertions(+), 2832 deletions(-) create mode 100644 ee/frontend/mobile-replay/__mocks__/increment-with-child-duplication.json rename ee/frontend/mobile-replay/{ => transformer}/status-bar.ts (74%) rename ee/frontend/mobile-replay/{ => transformer}/transformers.ts (63%) create mode 100644 ee/frontend/mobile-replay/transformer/types.ts rename ee/frontend/mobile-replay/{ => transformer}/wireframeStyle.ts (95%) diff --git a/ee/frontend/mobile-replay/__mocks__/increment-with-child-duplication.json b/ee/frontend/mobile-replay/__mocks__/increment-with-child-duplication.json new file mode 100644 index 00000000000..c17efc6d9e2 --- /dev/null +++ b/ee/frontend/mobile-replay/__mocks__/increment-with-child-duplication.json @@ -0,0 +1,210 @@ +{ + "data": { + "adds": [ + { + "parentId": 183891344, + "wireframe": { + "childWireframes": [ + { + "childWireframes": [ + { + "disabled": false, + "height": 19, + "id": 52129787, + "style": { + "color": "#000000", + "fontFamily": "sans-serif", + "fontSize": 14, + "horizontalAlign": "left", + "paddingBottom": 0, + "paddingLeft": 0, + "paddingRight": 0, + "paddingTop": 0, + "verticalAlign": "top" + }, + "text": "PostHog/posthog-ios", + "type": "text", + "width": 368, + "x": 66, + "y": 556 + }, + { + "disabled": false, + "height": 19, + "id": 99571736, + "style": { + "color": "#000000", + "fontFamily": "sans-serif", + "fontSize": 14, + "horizontalAlign": "left", + "paddingBottom": 0, + "paddingLeft": 0, + "paddingRight": 0, + "paddingTop": 0, + "verticalAlign": "top" + }, + "text": "PostHog iOS integration", + "type": "text", + "width": 150, + "x": 10, + "y": 584 + }, + { + "disabled": false, + "height": 32, + "id": 240124529, + "style": { + "color": "#000000", + "fontFamily": "sans-serif", + "fontSize": 14, + "horizontalAlign": "center", + "paddingBottom": 6, + "paddingLeft": 32, + "paddingRight": 0, + "paddingTop": 6, + "verticalAlign": "center" + }, + "text": "20", + "type": "text", + "width": 48, + "x": 10, + "y": 548 + } + ], + "disabled": false, + "height": 62, + "id": 209272202, + "style": {}, + "width": 406, + "x": 2, + "y": 540 + } + ], + "disabled": false, + "height": 70, + "id": 142908405, + "style": { + "backgroundImage": "iVBORw0KGgoAAAANSUhEUgAABDgAAAC5CAYAAADNs4/hAAAAAXNSR0IArs4c6QAAAARzQklUCAgI\nCHwIZIgAAAWeSURBVHic7dyxqh1lGIbR77cIBuzTWKUShDSChVh7ITaWFoH0Emsr78D7sBVCBFOZ\nQMo0XoAEEshvZeeZ8cR9PDywVjsfm7d+mNkzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\nAAAAAAAAAAAAAADA7Vn/5mjv/fHMfDszX83MgxtdBAAAADDzbGZ+npkf1lqvzo5PA8fe++uZ+XFm\n7v73bQAAAADX8npmvllr/XR0dBg49t73Z+b3mblzwWEAAAAA1/FmZj5da7286uCDkx94POIGAAAA\ncLvuzMx3RwdngeOzy20BAAAAeG+HjeLKT1T23h/OzJ9zHkEAAAAAbtq7mflorfX6nx6e/QfHvpFJ\nAAAAANe01rqyY3g7AwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgT\nOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACA\nPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAA\nAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgA\nAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyB\nAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADI\nEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAA\ngDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMA\nAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4\nAAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8\ngQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAA\nyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAA\nAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIED\nAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgT\nOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACA\nPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAA\nAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgA\nAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIOwscL/6XFQAAAADHDhvFWeD47YJD\nAAAAAN7XYaNYRw/33p/PzC/jUxYAAADg9rydmS/WWk+vOjgMF2utJzPz+NKrAAAAAK7h0VHcmDl5\ng+Nve+8vZ+b7mflkZu5dYBgAAADAkT9m5vnMPFxr/XrbYwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\nAAAAAAAAAAAAAAAAAAAAAAAAgCN/AW0xMqHnNQceAAAAAElFTkSuQmCC\n" + }, + "width": 411, + "x": 0, + "y": 536 + } + }, + { + "parentId": 142908405, + "wireframe": { + "childWireframes": [ + { + "disabled": false, + "height": 19, + "id": 52129787, + "style": { + "color": "#000000", + "fontFamily": "sans-serif", + "fontSize": 14, + "horizontalAlign": "left", + "paddingBottom": 0, + "paddingLeft": 0, + "paddingRight": 0, + "paddingTop": 0, + "verticalAlign": "top" + }, + "text": "PostHog/posthog-ios", + "type": "text", + "width": 368, + "x": 66, + "y": 556 + }, + { + "disabled": false, + "height": 19, + "id": 99571736, + "style": { + "color": "#000000", + "fontFamily": "sans-serif", + "fontSize": 14, + "horizontalAlign": "left", + "paddingBottom": 0, + "paddingLeft": 0, + "paddingRight": 0, + "paddingTop": 0, + "verticalAlign": "top" + }, + "text": "PostHog iOS integration", + "type": "text", + "width": 150, + "x": 10, + "y": 584 + }, + { + "disabled": false, + "height": 32, + "id": 240124529, + "style": { + "color": "#000000", + "fontFamily": "sans-serif", + "fontSize": 14, + "horizontalAlign": "center", + "paddingBottom": 6, + "paddingLeft": 32, + "paddingRight": 0, + "paddingTop": 6, + "verticalAlign": "center" + }, + "text": "20", + "type": "text", + "width": 48, + "x": 10, + "y": 548 + } + ], + "disabled": false, + "height": 62, + "id": 209272202, + "style": {}, + "width": 406, + "x": 2, + "y": 540 + } + }, + { + "parentId": 209272202, + "wireframe": { + "disabled": false, + "height": 19, + "id": 52129787, + "style": { + "color": "#000000", + "fontFamily": "sans-serif", + "fontSize": 14, + "horizontalAlign": "left", + "paddingBottom": 0, + "paddingLeft": 0, + "paddingRight": 0, + "paddingTop": 0, + "verticalAlign": "top" + }, + "text": "PostHog/posthog-ios", + "type": "text", + "width": 368, + "x": 66, + "y": 556 + } + } + ], + "removes": [ + { + "id": 149659273, + "parentId": 47740111 + }, + { + "id": 151255663, + "parentId": 149659273 + } + ], + "source": 0 + }, + "timestamp": 1706104140861, + "type": 3 +} diff --git a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap index 95acab0a398..ea4be158d8d 100644 --- a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap +++ b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap @@ -54,7 +54,7 @@ exports[`replay/transform transform can convert images 1`] = ` }, "childNodes": [ { - "id": 101, + "id": 100, "textContent": "Ⱏ遲䩞㡛쓯잘ጫ䵤㥦鷁끞鈅毅┌빯湌Თ", "type": 3, }, @@ -239,7 +239,7 @@ exports[`replay/transform transform can convert rect with text 1`] = ` }, "childNodes": [ { - "id": 102, + "id": 100, "textContent": "i am in the box", "type": 3, }, @@ -324,26 +324,26 @@ exports[`replay/transform transform can convert status bar 1`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 109, + "data-rrweb-id": 102, "style": "width: 5px;", }, "childNodes": [], - "id": 109, + "id": 102, "tagName": "div", "type": 2, }, { "attributes": { - "data-rrweb-id": 107, + "data-rrweb-id": 100, }, "childNodes": [ { - "id": 108, + "id": 101, "textContent": "12:00 AM", "type": 3, }, ], - "id": 107, + "id": 100, "tagName": "div", "type": 2, }, @@ -360,26 +360,26 @@ exports[`replay/transform transform can convert status bar 1`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 112, + "data-rrweb-id": 105, "style": "width: 5px;", }, "childNodes": [], - "id": 112, + "id": 105, "tagName": "div", "type": 2, }, { "attributes": { - "data-rrweb-id": 110, + "data-rrweb-id": 103, }, "childNodes": [ { - "id": 111, + "id": 104, "textContent": "12:00 AM", "type": 3, }, ], - "id": 110, + "id": 103, "tagName": "div", "type": 2, }, @@ -769,7 +769,7 @@ exports[`replay/transform transform child wireframes are processed 1`] = ` }, "childNodes": [ { - "id": 103, + "id": 100, "textContent": "first nested", "type": 3, }, @@ -785,7 +785,7 @@ exports[`replay/transform transform child wireframes are processed 1`] = ` }, "childNodes": [ { - "id": 104, + "id": 101, "textContent": "second nested", "type": 3, }, @@ -806,7 +806,7 @@ exports[`replay/transform transform child wireframes are processed 1`] = ` }, "childNodes": [ { - "id": 105, + "id": 102, "textContent": "third (different level) nested", "type": 3, }, @@ -841,6 +841,447 @@ exports[`replay/transform transform child wireframes are processed 1`] = ` ] `; +exports[`replay/transform transform incremental mutations de-duplicate the tree 1`] = ` +{ + "data": { + "adds": [ + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 142908405, + "style": "background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAC5CAYAAADNs4/hAAAAAXNSR0IArs4c6QAAAARzQklUCAgI +CHwIZIgAAAWeSURBVHic7dyxqh1lGIbR77cIBuzTWKUShDSChVh7ITaWFoH0Emsr78D7sBVCBFOZ +QMo0XoAEEshvZeeZ8cR9PDywVjsfm7d+mNkzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA +AAAAAAAAAAAAAADA7Vn/5mjv/fHMfDszX83MgxtdBAAAADDzbGZ+npkf1lqvzo5PA8fe++uZ+XFm +7v73bQAAAADX8npmvllr/XR0dBg49t73Z+b3mblzwWEAAAAA1/FmZj5da7286uCDkx94POIGAAAA +cLvuzMx3RwdngeOzy20BAAAAeG+HjeLKT1T23h/OzJ9zHkEAAAAAbtq7mflorfX6nx6e/QfHvpFJ +AAAAANe01rqyY3g7AwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgT +OAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACA +PIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAA +AMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgA +AACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyB +AwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADI +EzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAA +gDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMA +AADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4 +AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8 +gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAA +yBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAA +AIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIED +AAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgT +OAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACA +PIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAA +AMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgA +AACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIOwscL/6XFQAAAADHDhvFWeD47YJD +AAAAAN7XYaNYRw/33p/PzC/jUxYAAADg9rydmS/WWk+vOjgMF2utJzPz+NKrAAAAAK7h0VHcmDl5 +g+Nve+8vZ+b7mflkZu5dYBgAAADAkT9m5vnMPFxr/XrbYwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA +AAAAAAAAAAAAAAAAAAAAAAAAgCN/AW0xMqHnNQceAAAAAElFTkSuQmCC +);background-size: auto;background-repeat: no-repeatwidth: 411px;height: 70px;position: fixed;left: 0px;top: 536px;overflow:hidden;white-space:nowrap;", + }, + "childNodes": [], + "id": 142908405, + "tagName": "div", + "type": 2, + }, + "parentId": 183891344, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 209272202, + "style": "width: 406px;height: 62px;position: fixed;left: 2px;top: 540px;overflow:hidden;white-space:nowrap;", + }, + "childNodes": [], + "id": 209272202, + "tagName": "div", + "type": 2, + }, + "parentId": 142908405, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 209272202, + "style": "width: 406px;height: 62px;position: fixed;left: 2px;top: 540px;overflow:hidden;white-space:nowrap;", + }, + "childNodes": [], + "id": 209272202, + "tagName": "div", + "type": 2, + }, + "parentId": 142908405, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 52129787, + "style": "color: #000000;width: 368px;height: 19px;position: fixed;left: 66px;top: 556px;align-items: flex-start;justify-content: flex-start;display: flex;font-size: 14px;font-family: sans-serif;overflow:hidden;white-space:nowrap;", + }, + "childNodes": [], + "id": 52129787, + "tagName": "div", + "type": 2, + }, + "parentId": 209272202, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 52129787, + "style": "color: #000000;width: 368px;height: 19px;position: fixed;left: 66px;top: 556px;align-items: flex-start;justify-content: flex-start;display: flex;font-size: 14px;font-family: sans-serif;overflow:hidden;white-space:nowrap;", + }, + "childNodes": [], + "id": 52129787, + "tagName": "div", + "type": 2, + }, + "parentId": 209272202, + }, + { + "nextId": null, + "node": { + "id": 103, + "textContent": "PostHog/posthog-ios", + "type": 3, + }, + "parentId": 52129787, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 99571736, + "style": "color: #000000;width: 150px;height: 19px;position: fixed;left: 10px;top: 584px;align-items: flex-start;justify-content: flex-start;display: flex;font-size: 14px;font-family: sans-serif;overflow:hidden;white-space:nowrap;", + }, + "childNodes": [], + "id": 99571736, + "tagName": "div", + "type": 2, + }, + "parentId": 209272202, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 99571736, + "style": "color: #000000;width: 150px;height: 19px;position: fixed;left: 10px;top: 584px;align-items: flex-start;justify-content: flex-start;display: flex;font-size: 14px;font-family: sans-serif;overflow:hidden;white-space:nowrap;", + }, + "childNodes": [], + "id": 99571736, + "tagName": "div", + "type": 2, + }, + "parentId": 209272202, + }, + { + "nextId": null, + "node": { + "id": 104, + "textContent": "PostHog iOS integration", + "type": 3, + }, + "parentId": 99571736, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 240124529, + "style": "color: #000000;width: 48px;height: 32px;position: fixed;left: 10px;top: 548px;align-items: center;justify-content: center;display: flex;font-size: 14px;font-family: sans-serif;overflow:hidden;white-space:nowrap;", + }, + "childNodes": [], + "id": 240124529, + "tagName": "div", + "type": 2, + }, + "parentId": 209272202, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 240124529, + "style": "color: #000000;width: 48px;height: 32px;position: fixed;left: 10px;top: 548px;align-items: center;justify-content: center;display: flex;font-size: 14px;font-family: sans-serif;overflow:hidden;white-space:nowrap;", + }, + "childNodes": [], + "id": 240124529, + "tagName": "div", + "type": 2, + }, + "parentId": 209272202, + }, + { + "nextId": null, + "node": { + "id": 105, + "textContent": "20", + "type": 3, + }, + "parentId": 240124529, + }, + ], + "attributes": [], + "removes": [ + { + "id": 149659273, + "parentId": 47740111, + }, + { + "id": 151255663, + "parentId": 149659273, + }, + ], + "source": 0, + "texts": [], + }, + "default": { + "data": { + "adds": [ + { + "parentId": 183891344, + "wireframe": { + "childWireframes": [ + { + "childWireframes": [ + { + "disabled": false, + "height": 19, + "id": 52129787, + "style": { + "color": "#000000", + "fontFamily": "sans-serif", + "fontSize": 14, + "horizontalAlign": "left", + "paddingBottom": 0, + "paddingLeft": 0, + "paddingRight": 0, + "paddingTop": 0, + "verticalAlign": "top", + }, + "text": "PostHog/posthog-ios", + "type": "text", + "width": 368, + "x": 66, + "y": 556, + }, + { + "disabled": false, + "height": 19, + "id": 99571736, + "style": { + "color": "#000000", + "fontFamily": "sans-serif", + "fontSize": 14, + "horizontalAlign": "left", + "paddingBottom": 0, + "paddingLeft": 0, + "paddingRight": 0, + "paddingTop": 0, + "verticalAlign": "top", + }, + "text": "PostHog iOS integration", + "type": "text", + "width": 150, + "x": 10, + "y": 584, + }, + { + "disabled": false, + "height": 32, + "id": 240124529, + "style": { + "color": "#000000", + "fontFamily": "sans-serif", + "fontSize": 14, + "horizontalAlign": "center", + "paddingBottom": 6, + "paddingLeft": 32, + "paddingRight": 0, + "paddingTop": 6, + "verticalAlign": "center", + }, + "text": "20", + "type": "text", + "width": 48, + "x": 10, + "y": 548, + }, + ], + "disabled": false, + "height": 62, + "id": 209272202, + "style": {}, + "width": 406, + "x": 2, + "y": 540, + }, + ], + "disabled": false, + "height": 70, + "id": 142908405, + "style": { + "backgroundImage": "iVBORw0KGgoAAAANSUhEUgAABDgAAAC5CAYAAADNs4/hAAAAAXNSR0IArs4c6QAAAARzQklUCAgI +CHwIZIgAAAWeSURBVHic7dyxqh1lGIbR77cIBuzTWKUShDSChVh7ITaWFoH0Emsr78D7sBVCBFOZ +QMo0XoAEEshvZeeZ8cR9PDywVjsfm7d+mNkzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA +AAAAAAAAAAAAAADA7Vn/5mjv/fHMfDszX83MgxtdBAAAADDzbGZ+npkf1lqvzo5PA8fe++uZ+XFm +7v73bQAAAADX8npmvllr/XR0dBg49t73Z+b3mblzwWEAAAAA1/FmZj5da7286uCDkx94POIGAAAA +cLvuzMx3RwdngeOzy20BAAAAeG+HjeLKT1T23h/OzJ9zHkEAAAAAbtq7mflorfX6nx6e/QfHvpFJ +AAAAANe01rqyY3g7AwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgT +OAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACA +PIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAA +AMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgA +AACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyB +AwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADI +EzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAA +gDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMA +AADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4 +AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8 +gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAA +yBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAA +AIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIED +AAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgT +OAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACA +PIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAA +AMgTOAAAAIA8gQMAAADIEzgAAACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIEzgA +AACAPIEDAAAAyBM4AAAAgDyBAwAAAMgTOAAAAIA8gQMAAADIOwscL/6XFQAAAADHDhvFWeD47YJD +AAAAAN7XYaNYRw/33p/PzC/jUxYAAADg9rydmS/WWk+vOjgMF2utJzPz+NKrAAAAAK7h0VHcmDl5 +g+Nve+8vZ+b7mflkZu5dYBgAAADAkT9m5vnMPFxr/XrbYwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA +AAAAAAAAAAAAAAAAAAAAAAAAgCN/AW0xMqHnNQceAAAAAElFTkSuQmCC +", + }, + "width": 411, + "x": 0, + "y": 536, + }, + }, + { + "parentId": 142908405, + "wireframe": { + "childWireframes": [ + { + "disabled": false, + "height": 19, + "id": 52129787, + "style": { + "color": "#000000", + "fontFamily": "sans-serif", + "fontSize": 14, + "horizontalAlign": "left", + "paddingBottom": 0, + "paddingLeft": 0, + "paddingRight": 0, + "paddingTop": 0, + "verticalAlign": "top", + }, + "text": "PostHog/posthog-ios", + "type": "text", + "width": 368, + "x": 66, + "y": 556, + }, + { + "disabled": false, + "height": 19, + "id": 99571736, + "style": { + "color": "#000000", + "fontFamily": "sans-serif", + "fontSize": 14, + "horizontalAlign": "left", + "paddingBottom": 0, + "paddingLeft": 0, + "paddingRight": 0, + "paddingTop": 0, + "verticalAlign": "top", + }, + "text": "PostHog iOS integration", + "type": "text", + "width": 150, + "x": 10, + "y": 584, + }, + { + "disabled": false, + "height": 32, + "id": 240124529, + "style": { + "color": "#000000", + "fontFamily": "sans-serif", + "fontSize": 14, + "horizontalAlign": "center", + "paddingBottom": 6, + "paddingLeft": 32, + "paddingRight": 0, + "paddingTop": 6, + "verticalAlign": "center", + }, + "text": "20", + "type": "text", + "width": 48, + "x": 10, + "y": 548, + }, + ], + "disabled": false, + "height": 62, + "id": 209272202, + "style": {}, + "width": 406, + "x": 2, + "y": 540, + }, + }, + { + "parentId": 209272202, + "wireframe": { + "disabled": false, + "height": 19, + "id": 52129787, + "style": { + "color": "#000000", + "fontFamily": "sans-serif", + "fontSize": 14, + "horizontalAlign": "left", + "paddingBottom": 0, + "paddingLeft": 0, + "paddingRight": 0, + "paddingTop": 0, + "verticalAlign": "top", + }, + "text": "PostHog/posthog-ios", + "type": "text", + "width": 368, + "x": 66, + "y": 556, + }, + }, + ], + "removes": [ + { + "id": 149659273, + "parentId": 47740111, + }, + { + "id": 151255663, + "parentId": 149659273, + }, + ], + "source": 0, + }, + "timestamp": 1706104140861, + "type": 3, + }, + "timestamp": 1706104140861, + "type": 3, +} +`; + exports[`replay/transform transform inputs buttons with nested elements 1`] = ` { "data": { @@ -897,7 +1338,7 @@ exports[`replay/transform transform inputs buttons with nested elements 1`] = ` }, "childNodes": [ { - "id": 113, + "id": 100, "textContent": "click me", "type": 3, }, @@ -1046,7 +1487,7 @@ exports[`replay/transform transform inputs input - button - click me 1`] = ` }, "childNodes": [ { - "id": 290, + "id": 100, "textContent": "click me", "type": 3, }, @@ -1114,7 +1555,7 @@ exports[`replay/transform transform inputs input - checkbox - $value 1`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 267, + "data-rrweb-id": 101, "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;", }, "childNodes": [ @@ -1131,12 +1572,12 @@ exports[`replay/transform transform inputs input - checkbox - $value 1`] = ` "type": 2, }, { - "id": 266, + "id": 100, "textContent": "first", "type": 3, }, ], - "id": 267, + "id": 101, "tagName": "label", "type": 2, }, @@ -1199,7 +1640,7 @@ exports[`replay/transform transform inputs input - checkbox - $value 2`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 269, + "data-rrweb-id": 101, "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;", }, "childNodes": [ @@ -1215,12 +1656,12 @@ exports[`replay/transform transform inputs input - checkbox - $value 2`] = ` "type": 2, }, { - "id": 268, + "id": 100, "textContent": "second", "type": 3, }, ], - "id": 269, + "id": 101, "tagName": "label", "type": 2, }, @@ -1283,7 +1724,7 @@ exports[`replay/transform transform inputs input - checkbox - $value 3`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 271, + "data-rrweb-id": 101, "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;", }, "childNodes": [ @@ -1301,12 +1742,12 @@ exports[`replay/transform transform inputs input - checkbox - $value 3`] = ` "type": 2, }, { - "id": 270, + "id": 100, "textContent": "third", "type": 3, }, ], - "id": 271, + "id": 101, "tagName": "label", "type": 2, }, @@ -1651,7 +2092,7 @@ exports[`replay/transform transform inputs input - progress - $value 1`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 297, + "data-rrweb-id": 102, "style": "background-color: #f3f4ef;width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;border: 4px solid #35373e;border-radius: 50%;border-top: 4px solid #fff;animation: spin 2s linear infinite;", }, "childNodes": [ @@ -1661,17 +2102,17 @@ exports[`replay/transform transform inputs input - progress - $value 1`] = ` }, "childNodes": [ { - "id": 296, + "id": 101, "textContent": "@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }", "type": 3, }, ], - "id": 295, + "id": 100, "tagName": "style", "type": 2, }, ], - "id": 297, + "id": 102, "tagName": "div", "type": 2, }, @@ -2026,32 +2467,32 @@ exports[`replay/transform transform inputs input - select - hello 1`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 291, + "data-rrweb-id": 100, "selected": true, }, "childNodes": [ { - "id": 292, + "id": 101, "textContent": "hello", "type": 3, }, ], - "id": 291, + "id": 100, "tagName": "option", "type": 2, }, { "attributes": { - "data-rrweb-id": 293, + "data-rrweb-id": 102, }, "childNodes": [ { - "id": 294, + "id": 103, "textContent": "world", "type": 3, }, ], - "id": 293, + "id": 102, "tagName": "option", "type": 2, }, @@ -2465,12 +2906,12 @@ exports[`replay/transform transform inputs input - toggle - $value 1`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 276, + "data-rrweb-id": 104, "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;", }, "childNodes": [ { - "id": 275, + "id": 103, "textContent": "first", "type": 3, }, @@ -2482,34 +2923,34 @@ exports[`replay/transform transform inputs input - toggle - $value 1`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 272, + "data-rrweb-id": 100, "style": "position:relative;width:100%;height:100%;", }, "childNodes": [ { "attributes": { - "data-rrweb-id": 273, + "data-rrweb-id": 101, "data-toggle-part": "slider", "style": "position:absolute;top:33%;left:5%;display:inline-block;width:75%;height:33%;background-color:#1d4aff;opacity: 0.2;border-radius:7.5%;", }, "childNodes": [], - "id": 273, + "id": 101, "tagName": "div", "type": 2, }, { "attributes": { - "data-rrweb-id": 274, + "data-rrweb-id": 102, "data-toggle-part": "handle", "style": "position:absolute;top:1.5%;right:5%;display:flex;align-items:center;justify-content:center;width:40%;height:75%;cursor:inherit;background-color:#1d4aff;border:2px solid #1d4aff;border-radius:50%;", }, "childNodes": [], - "id": 274, + "id": 102, "tagName": "div", "type": 2, }, ], - "id": 272, + "id": 100, "tagName": "div", "type": 2, }, @@ -2519,7 +2960,7 @@ exports[`replay/transform transform inputs input - toggle - $value 1`] = ` "type": 2, }, ], - "id": 276, + "id": 104, "tagName": "label", "type": 2, }, @@ -2582,12 +3023,12 @@ exports[`replay/transform transform inputs input - toggle - $value 2`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 281, + "data-rrweb-id": 104, "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;", }, "childNodes": [ { - "id": 280, + "id": 103, "textContent": "second", "type": 3, }, @@ -2599,34 +3040,34 @@ exports[`replay/transform transform inputs input - toggle - $value 2`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 277, + "data-rrweb-id": 100, "style": "position:relative;width:100%;height:100%;", }, "childNodes": [ { "attributes": { - "data-rrweb-id": 278, + "data-rrweb-id": 101, "data-toggle-part": "slider", "style": "position:absolute;top:33%;left:5%;display:inline-block;width:75%;height:33%;background-color:#f3f4ef;opacity: 0.2;border-radius:7.5%;", }, "childNodes": [], - "id": 278, + "id": 101, "tagName": "div", "type": 2, }, { "attributes": { - "data-rrweb-id": 279, + "data-rrweb-id": 102, "data-toggle-part": "handle", "style": "position:absolute;top:1.5%;left:5%;display:flex;align-items:center;justify-content:center;width:40%;height:75%;cursor:inherit;background-color:#f3f4ef;border:2px solid #f3f4ef;border-radius:50%;", }, "childNodes": [], - "id": 279, + "id": 102, "tagName": "div", "type": 2, }, ], - "id": 277, + "id": 100, "tagName": "div", "type": 2, }, @@ -2636,7 +3077,7 @@ exports[`replay/transform transform inputs input - toggle - $value 2`] = ` "type": 2, }, ], - "id": 281, + "id": 104, "tagName": "label", "type": 2, }, @@ -2699,12 +3140,12 @@ exports[`replay/transform transform inputs input - toggle - $value 3`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 286, + "data-rrweb-id": 104, "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;", }, "childNodes": [ { - "id": 285, + "id": 103, "textContent": "third", "type": 3, }, @@ -2716,34 +3157,34 @@ exports[`replay/transform transform inputs input - toggle - $value 3`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 282, + "data-rrweb-id": 100, "style": "position:relative;width:100%;height:100%;", }, "childNodes": [ { "attributes": { - "data-rrweb-id": 283, + "data-rrweb-id": 101, "data-toggle-part": "slider", "style": "position:absolute;top:33%;left:5%;display:inline-block;width:75%;height:33%;background-color:#1d4aff;opacity: 0.2;border-radius:7.5%;", }, "childNodes": [], - "id": 283, + "id": 101, "tagName": "div", "type": 2, }, { "attributes": { - "data-rrweb-id": 284, + "data-rrweb-id": 102, "data-toggle-part": "handle", "style": "position:absolute;top:1.5%;right:5%;display:flex;align-items:center;justify-content:center;width:40%;height:75%;cursor:inherit;background-color:#1d4aff;border:2px solid #1d4aff;border-radius:50%;", }, "childNodes": [], - "id": 284, + "id": 102, "tagName": "div", "type": 2, }, ], - "id": 282, + "id": 100, "tagName": "div", "type": 2, }, @@ -2753,7 +3194,7 @@ exports[`replay/transform transform inputs input - toggle - $value 3`] = ` "type": 2, }, ], - "id": 286, + "id": 104, "tagName": "label", "type": 2, }, @@ -2822,34 +3263,34 @@ exports[`replay/transform transform inputs input - toggle - $value 4`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 287, + "data-rrweb-id": 100, "style": "position:relative;width:100%;height:100%;", }, "childNodes": [ { "attributes": { - "data-rrweb-id": 288, + "data-rrweb-id": 101, "data-toggle-part": "slider", "style": "position:absolute;top:33%;left:5%;display:inline-block;width:75%;height:33%;background-color:#1d4aff;opacity: 0.2;border-radius:7.5%;", }, "childNodes": [], - "id": 288, + "id": 101, "tagName": "div", "type": 2, }, { "attributes": { - "data-rrweb-id": 289, + "data-rrweb-id": 102, "data-toggle-part": "handle", "style": "position:absolute;top:1.5%;right:5%;display:flex;align-items:center;justify-content:center;width:40%;height:75%;cursor:inherit;background-color:#1d4aff;border:2px solid #1d4aff;border-radius:50%;", }, "childNodes": [], - "id": 289, + "id": 102, "tagName": "div", "type": 2, }, ], - "id": 287, + "id": 100, "tagName": "div", "type": 2, }, @@ -2969,11 +3410,11 @@ exports[`replay/transform transform inputs isolated add mutation 1`] = ` "nextId": null, "node": { "attributes": { - "data-rrweb-id": 216, + "data-rrweb-id": 199, "style": "position: relative; display: flex; flex-direction: row; padding: 2px 4px;", }, "childNodes": [], - "id": 216, + "id": 199, "tagName": "div", "type": 2, }, @@ -2983,11 +3424,11 @@ exports[`replay/transform transform inputs isolated add mutation 1`] = ` "nextId": null, "node": { "attributes": { - "data-rrweb-id": 216, + "data-rrweb-id": 199, "style": "position: relative; display: flex; flex-direction: row; padding: 2px 4px;", }, "childNodes": [], - "id": 216, + "id": 199, "tagName": "div", "type": 2, }, @@ -2997,1213 +3438,1213 @@ exports[`replay/transform transform inputs isolated add mutation 1`] = ` "nextId": null, "node": { "attributes": { - "data-rrweb-id": 168, + "data-rrweb-id": 151, "fill": "currentColor", "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", "viewBox": "0 0 24 24", }, "childNodes": [], - "id": 168, + "id": 151, "isSVG": true, "tagName": "svg", "type": 2, }, - "parentId": 216, + "parentId": 199, }, { "nextId": null, "node": { "attributes": { - "data-rrweb-id": 168, + "data-rrweb-id": 151, "fill": "currentColor", "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", "viewBox": "0 0 24 24", }, "childNodes": [], - "id": 168, + "id": 151, "isSVG": true, "tagName": "svg", "type": 2, }, - "parentId": 216, + "parentId": 199, }, { "nextId": null, "node": { "attributes": { - "data-rrweb-id": 169, + "data-rrweb-id": 152, }, "childNodes": [], - "id": 169, + "id": 152, "isSVG": true, "tagName": "title", "type": 2, }, + "parentId": 151, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 152, + }, + "childNodes": [], + "id": 152, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 151, + }, + { + "nextId": null, + "node": { + "id": 154, + "textContent": "filled star", + "type": 3, + }, + "parentId": 152, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 153, + }, + "childNodes": [], + "id": 153, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 151, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 153, + }, + "childNodes": [], + "id": 153, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 151, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 155, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 155, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 155, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 155, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 156, + }, + "childNodes": [], + "id": 156, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 155, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 156, + }, + "childNodes": [], + "id": 156, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 155, + }, + { + "nextId": null, + "node": { + "id": 158, + "textContent": "filled star", + "type": 3, + }, + "parentId": 156, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 157, + }, + "childNodes": [], + "id": 157, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 155, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 157, + }, + "childNodes": [], + "id": 157, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 155, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 159, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 159, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 159, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 159, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 160, + }, + "childNodes": [], + "id": 160, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 159, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 160, + }, + "childNodes": [], + "id": 160, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 159, + }, + { + "nextId": null, + "node": { + "id": 162, + "textContent": "filled star", + "type": 3, + }, + "parentId": 160, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 161, + }, + "childNodes": [], + "id": 161, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 159, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 161, + }, + "childNodes": [], + "id": 161, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 159, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 163, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 163, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 163, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 163, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 164, + }, + "childNodes": [], + "id": 164, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 163, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 164, + }, + "childNodes": [], + "id": 164, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 163, + }, + { + "nextId": null, + "node": { + "id": 166, + "textContent": "filled star", + "type": 3, + }, + "parentId": 164, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 165, + }, + "childNodes": [], + "id": 165, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 163, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 165, + }, + "childNodes": [], + "id": 165, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 163, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 167, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 167, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 167, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 167, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 168, + }, + "childNodes": [], + "id": 168, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 167, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 168, + }, + "childNodes": [], + "id": 168, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 167, + }, + { + "nextId": null, + "node": { + "id": 170, + "textContent": "filled star", + "type": 3, + }, "parentId": 168, }, { "nextId": null, "node": { "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", "data-rrweb-id": 169, }, "childNodes": [], "id": 169, "isSVG": true, - "tagName": "title", + "tagName": "path", "type": 2, }, - "parentId": 168, + "parentId": 167, }, { "nextId": null, "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 169, + }, + "childNodes": [], + "id": 169, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 167, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 171, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], "id": 171, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 171, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 171, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 172, + }, + "childNodes": [], + "id": 172, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 171, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 172, + }, + "childNodes": [], + "id": 172, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 171, + }, + { + "nextId": null, + "node": { + "id": 174, "textContent": "filled star", "type": 3, }, - "parentId": 169, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 170, - }, - "childNodes": [], - "id": 170, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 168, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 170, - }, - "childNodes": [], - "id": 170, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 168, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 172, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 172, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 172, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 172, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 173, - }, - "childNodes": [], - "id": 173, - "isSVG": true, - "tagName": "title", - "type": 2, - }, "parentId": 172, }, { "nextId": null, "node": { "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", "data-rrweb-id": 173, }, "childNodes": [], "id": 173, "isSVG": true, - "tagName": "title", + "tagName": "path", "type": 2, }, - "parentId": 172, + "parentId": 171, }, { "nextId": null, "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 173, + }, + "childNodes": [], + "id": 173, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 171, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 175, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], "id": 175, - "textContent": "filled star", - "type": 3, + "isSVG": true, + "tagName": "svg", + "type": 2, }, - "parentId": 173, + "parentId": 199, }, { "nextId": null, "node": { "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 174, + "data-rrweb-id": 175, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", }, "childNodes": [], - "id": 174, + "id": 175, "isSVG": true, - "tagName": "path", + "tagName": "svg", "type": 2, }, - "parentId": 172, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 174, - }, - "childNodes": [], - "id": 174, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 172, + "parentId": 199, }, { "nextId": null, "node": { "attributes": { "data-rrweb-id": 176, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", }, "childNodes": [], "id": 176, "isSVG": true, - "tagName": "svg", + "tagName": "title", "type": 2, }, - "parentId": 216, + "parentId": 175, }, { "nextId": null, "node": { "attributes": { "data-rrweb-id": 176, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", }, "childNodes": [], "id": 176, "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 177, - }, - "childNodes": [], - "id": 177, - "isSVG": true, "tagName": "title", "type": 2, }, - "parentId": 176, + "parentId": 175, }, { "nextId": null, "node": { - "attributes": { - "data-rrweb-id": 177, - }, - "childNodes": [], - "id": 177, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 176, - }, - { - "nextId": null, - "node": { - "id": 179, - "textContent": "filled star", - "type": 3, - }, - "parentId": 177, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 178, - }, - "childNodes": [], "id": 178, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 176, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 178, - }, - "childNodes": [], - "id": 178, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 176, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 180, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 180, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 180, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 180, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 181, - }, - "childNodes": [], - "id": 181, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 180, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 181, - }, - "childNodes": [], - "id": 181, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 180, - }, - { - "nextId": null, - "node": { - "id": 183, - "textContent": "filled star", - "type": 3, - }, - "parentId": 181, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 182, - }, - "childNodes": [], - "id": 182, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 180, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 182, - }, - "childNodes": [], - "id": 182, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 180, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 184, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 184, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 184, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 184, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 185, - }, - "childNodes": [], - "id": 185, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 184, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 185, - }, - "childNodes": [], - "id": 185, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 184, - }, - { - "nextId": null, - "node": { - "id": 187, - "textContent": "filled star", - "type": 3, - }, - "parentId": 185, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 186, - }, - "childNodes": [], - "id": 186, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 184, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 186, - }, - "childNodes": [], - "id": 186, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 184, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 188, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 188, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 188, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 188, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 189, - }, - "childNodes": [], - "id": 189, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 188, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 189, - }, - "childNodes": [], - "id": 189, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 188, - }, - { - "nextId": null, - "node": { - "id": 191, - "textContent": "filled star", - "type": 3, - }, - "parentId": 189, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 190, - }, - "childNodes": [], - "id": 190, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 188, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 190, - }, - "childNodes": [], - "id": 190, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 188, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 192, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 192, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 192, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 192, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 193, - }, - "childNodes": [], - "id": 193, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 192, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 193, - }, - "childNodes": [], - "id": 193, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 192, - }, - { - "nextId": null, - "node": { - "id": 195, "textContent": "half-filled star", "type": 3, }, - "parentId": 193, + "parentId": 176, }, { "nextId": null, "node": { "attributes": { "d": "M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 194, + "data-rrweb-id": 177, }, "childNodes": [], - "id": 194, + "id": 177, "isSVG": true, "tagName": "path", "type": 2, }, + "parentId": 175, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 177, + }, + "childNodes": [], + "id": 177, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 175, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 179, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 179, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 179, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 179, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 180, + }, + "childNodes": [], + "id": 180, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 179, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 180, + }, + "childNodes": [], + "id": 180, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 179, + }, + { + "nextId": null, + "node": { + "id": 182, + "textContent": "empty star", + "type": 3, + }, + "parentId": 180, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 181, + }, + "childNodes": [], + "id": 181, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 179, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 181, + }, + "childNodes": [], + "id": 181, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 179, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 183, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 183, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 183, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 183, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 184, + }, + "childNodes": [], + "id": 184, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 183, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 184, + }, + "childNodes": [], + "id": 184, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 183, + }, + { + "nextId": null, + "node": { + "id": 186, + "textContent": "empty star", + "type": 3, + }, + "parentId": 184, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 185, + }, + "childNodes": [], + "id": 185, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 183, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 185, + }, + "childNodes": [], + "id": 185, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 183, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 187, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 187, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 187, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 187, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 188, + }, + "childNodes": [], + "id": 188, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 187, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 188, + }, + "childNodes": [], + "id": 188, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 187, + }, + { + "nextId": null, + "node": { + "id": 190, + "textContent": "empty star", + "type": 3, + }, + "parentId": 188, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 189, + }, + "childNodes": [], + "id": 189, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 187, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 189, + }, + "childNodes": [], + "id": 189, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 187, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 191, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 191, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 191, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 191, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 192, + }, + "childNodes": [], + "id": 192, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 191, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 192, + }, + "childNodes": [], + "id": 192, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 191, + }, + { + "nextId": null, + "node": { + "id": 194, + "textContent": "empty star", + "type": 3, + }, "parentId": 192, }, { "nextId": null, "node": { "attributes": { - "d": "M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 194, + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 193, }, "childNodes": [], - "id": 194, + "id": 193, "isSVG": true, "tagName": "path", "type": 2, }, - "parentId": 192, + "parentId": 191, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 193, + }, + "childNodes": [], + "id": 193, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 191, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 195, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 195, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 195, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 195, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 199, }, { "nextId": null, "node": { "attributes": { "data-rrweb-id": 196, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", }, "childNodes": [], "id": 196, "isSVG": true, - "tagName": "svg", + "tagName": "title", "type": 2, }, - "parentId": 216, + "parentId": 195, }, { "nextId": null, "node": { "attributes": { "data-rrweb-id": 196, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", }, "childNodes": [], "id": 196, "isSVG": true, - "tagName": "svg", + "tagName": "title", "type": 2, }, - "parentId": 216, + "parentId": 195, + }, + { + "nextId": null, + "node": { + "id": 198, + "textContent": "empty star", + "type": 3, + }, + "parentId": 196, }, { "nextId": null, "node": { "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", "data-rrweb-id": 197, }, "childNodes": [], "id": 197, "isSVG": true, - "tagName": "title", + "tagName": "path", "type": 2, }, - "parentId": 196, + "parentId": 195, }, { "nextId": null, "node": { "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", "data-rrweb-id": 197, }, "childNodes": [], "id": 197, "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 196, - }, - { - "nextId": null, - "node": { - "id": 199, - "textContent": "empty star", - "type": 3, - }, - "parentId": 197, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 198, - }, - "childNodes": [], - "id": 198, - "isSVG": true, "tagName": "path", "type": 2, }, - "parentId": 196, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 198, - }, - "childNodes": [], - "id": 198, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 196, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 200, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 200, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 200, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 200, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 201, - }, - "childNodes": [], - "id": 201, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 200, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 201, - }, - "childNodes": [], - "id": 201, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 200, - }, - { - "nextId": null, - "node": { - "id": 203, - "textContent": "empty star", - "type": 3, - }, - "parentId": 201, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 202, - }, - "childNodes": [], - "id": 202, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 200, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 202, - }, - "childNodes": [], - "id": 202, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 200, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 204, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 204, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 204, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 204, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 205, - }, - "childNodes": [], - "id": 205, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 204, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 205, - }, - "childNodes": [], - "id": 205, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 204, - }, - { - "nextId": null, - "node": { - "id": 207, - "textContent": "empty star", - "type": 3, - }, - "parentId": 205, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 206, - }, - "childNodes": [], - "id": 206, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 204, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 206, - }, - "childNodes": [], - "id": 206, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 204, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 208, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 208, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 208, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 208, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 209, - }, - "childNodes": [], - "id": 209, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 208, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 209, - }, - "childNodes": [], - "id": 209, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 208, - }, - { - "nextId": null, - "node": { - "id": 211, - "textContent": "empty star", - "type": 3, - }, - "parentId": 209, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 210, - }, - "childNodes": [], - "id": 210, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 208, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 210, - }, - "childNodes": [], - "id": 210, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 208, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 212, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 212, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 212, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 212, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 216, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 213, - }, - "childNodes": [], - "id": 213, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 212, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 213, - }, - "childNodes": [], - "id": 213, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 212, - }, - { - "nextId": null, - "node": { - "id": 215, - "textContent": "empty star", - "type": 3, - }, - "parentId": 213, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 214, - }, - "childNodes": [], - "id": 214, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 212, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 214, - }, - "childNodes": [], - "id": 214, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 212, + "parentId": 195, }, ], "attributes": [], @@ -4254,11 +4695,11 @@ exports[`replay/transform transform inputs isolated update mutation 1`] = ` "nextId": null, "node": { "attributes": { - "data-rrweb-id": 265, + "data-rrweb-id": 248, "style": "position: relative; display: flex; flex-direction: row; padding: 2px 4px;", }, "childNodes": [], - "id": 265, + "id": 248, "tagName": "div", "type": 2, }, @@ -4268,11 +4709,11 @@ exports[`replay/transform transform inputs isolated update mutation 1`] = ` "nextId": null, "node": { "attributes": { - "data-rrweb-id": 265, + "data-rrweb-id": 248, "style": "position: relative; display: flex; flex-direction: row; padding: 2px 4px;", }, "childNodes": [], - "id": 265, + "id": 248, "tagName": "div", "type": 2, }, @@ -4282,1213 +4723,1213 @@ exports[`replay/transform transform inputs isolated update mutation 1`] = ` "nextId": null, "node": { "attributes": { - "data-rrweb-id": 217, + "data-rrweb-id": 200, "fill": "currentColor", "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", "viewBox": "0 0 24 24", }, "childNodes": [], - "id": 217, + "id": 200, "isSVG": true, "tagName": "svg", "type": 2, }, - "parentId": 265, + "parentId": 248, }, { "nextId": null, "node": { "attributes": { - "data-rrweb-id": 217, + "data-rrweb-id": 200, "fill": "currentColor", "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", "viewBox": "0 0 24 24", }, "childNodes": [], - "id": 217, + "id": 200, "isSVG": true, "tagName": "svg", "type": 2, }, - "parentId": 265, + "parentId": 248, }, { "nextId": null, "node": { "attributes": { - "data-rrweb-id": 218, + "data-rrweb-id": 201, }, "childNodes": [], - "id": 218, + "id": 201, "isSVG": true, "tagName": "title", "type": 2, }, + "parentId": 200, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 201, + }, + "childNodes": [], + "id": 201, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 200, + }, + { + "nextId": null, + "node": { + "id": 203, + "textContent": "filled star", + "type": 3, + }, + "parentId": 201, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 202, + }, + "childNodes": [], + "id": 202, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 200, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 202, + }, + "childNodes": [], + "id": 202, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 200, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 204, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 204, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 204, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 204, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 205, + }, + "childNodes": [], + "id": 205, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 204, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 205, + }, + "childNodes": [], + "id": 205, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 204, + }, + { + "nextId": null, + "node": { + "id": 207, + "textContent": "filled star", + "type": 3, + }, + "parentId": 205, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 206, + }, + "childNodes": [], + "id": 206, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 204, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 206, + }, + "childNodes": [], + "id": 206, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 204, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 208, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 208, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 208, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 208, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 209, + }, + "childNodes": [], + "id": 209, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 208, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 209, + }, + "childNodes": [], + "id": 209, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 208, + }, + { + "nextId": null, + "node": { + "id": 211, + "textContent": "filled star", + "type": 3, + }, + "parentId": 209, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 210, + }, + "childNodes": [], + "id": 210, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 208, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 210, + }, + "childNodes": [], + "id": 210, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 208, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 212, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 212, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 212, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 212, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 213, + }, + "childNodes": [], + "id": 213, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 212, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 213, + }, + "childNodes": [], + "id": 213, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 212, + }, + { + "nextId": null, + "node": { + "id": 215, + "textContent": "filled star", + "type": 3, + }, + "parentId": 213, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 214, + }, + "childNodes": [], + "id": 214, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 212, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 214, + }, + "childNodes": [], + "id": 214, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 212, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 216, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 216, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 216, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 216, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 217, + }, + "childNodes": [], + "id": 217, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 216, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 217, + }, + "childNodes": [], + "id": 217, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 216, + }, + { + "nextId": null, + "node": { + "id": 219, + "textContent": "filled star", + "type": 3, + }, "parentId": 217, }, { "nextId": null, "node": { "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", "data-rrweb-id": 218, }, "childNodes": [], "id": 218, "isSVG": true, - "tagName": "title", + "tagName": "path", "type": 2, }, - "parentId": 217, + "parentId": 216, }, { "nextId": null, "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 218, + }, + "childNodes": [], + "id": 218, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 216, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 220, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], "id": 220, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 220, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 220, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 221, + }, + "childNodes": [], + "id": 221, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 220, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 221, + }, + "childNodes": [], + "id": 221, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 220, + }, + { + "nextId": null, + "node": { + "id": 223, "textContent": "filled star", "type": 3, }, - "parentId": 218, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 219, - }, - "childNodes": [], - "id": 219, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 217, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 219, - }, - "childNodes": [], - "id": 219, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 217, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 221, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 221, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 221, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 221, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 222, - }, - "childNodes": [], - "id": 222, - "isSVG": true, - "tagName": "title", - "type": 2, - }, "parentId": 221, }, { "nextId": null, "node": { "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", "data-rrweb-id": 222, }, "childNodes": [], "id": 222, "isSVG": true, - "tagName": "title", + "tagName": "path", "type": 2, }, - "parentId": 221, + "parentId": 220, }, { "nextId": null, "node": { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 222, + }, + "childNodes": [], + "id": 222, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 220, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 224, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], "id": 224, - "textContent": "filled star", - "type": 3, + "isSVG": true, + "tagName": "svg", + "type": 2, }, - "parentId": 222, + "parentId": 248, }, { "nextId": null, "node": { "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 223, + "data-rrweb-id": 224, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", }, "childNodes": [], - "id": 223, + "id": 224, "isSVG": true, - "tagName": "path", + "tagName": "svg", "type": 2, }, - "parentId": 221, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 223, - }, - "childNodes": [], - "id": 223, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 221, + "parentId": 248, }, { "nextId": null, "node": { "attributes": { "data-rrweb-id": 225, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", }, "childNodes": [], "id": 225, "isSVG": true, - "tagName": "svg", + "tagName": "title", "type": 2, }, - "parentId": 265, + "parentId": 224, }, { "nextId": null, "node": { "attributes": { "data-rrweb-id": 225, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", }, "childNodes": [], "id": 225, "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 226, - }, - "childNodes": [], - "id": 226, - "isSVG": true, "tagName": "title", "type": 2, }, - "parentId": 225, + "parentId": 224, }, { "nextId": null, "node": { - "attributes": { - "data-rrweb-id": 226, - }, - "childNodes": [], - "id": 226, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 225, - }, - { - "nextId": null, - "node": { - "id": 228, - "textContent": "filled star", - "type": 3, - }, - "parentId": 226, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 227, - }, - "childNodes": [], "id": 227, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 225, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 227, - }, - "childNodes": [], - "id": 227, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 225, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 229, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 229, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 229, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 229, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 230, - }, - "childNodes": [], - "id": 230, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 229, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 230, - }, - "childNodes": [], - "id": 230, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 229, - }, - { - "nextId": null, - "node": { - "id": 232, - "textContent": "filled star", - "type": 3, - }, - "parentId": 230, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 231, - }, - "childNodes": [], - "id": 231, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 229, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 231, - }, - "childNodes": [], - "id": 231, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 229, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 233, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 233, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 233, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 233, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 234, - }, - "childNodes": [], - "id": 234, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 233, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 234, - }, - "childNodes": [], - "id": 234, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 233, - }, - { - "nextId": null, - "node": { - "id": 236, - "textContent": "filled star", - "type": 3, - }, - "parentId": 234, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 235, - }, - "childNodes": [], - "id": 235, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 233, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 235, - }, - "childNodes": [], - "id": 235, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 233, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 237, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 237, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 237, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 237, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 238, - }, - "childNodes": [], - "id": 238, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 237, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 238, - }, - "childNodes": [], - "id": 238, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 237, - }, - { - "nextId": null, - "node": { - "id": 240, - "textContent": "filled star", - "type": 3, - }, - "parentId": 238, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 239, - }, - "childNodes": [], - "id": 239, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 237, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 239, - }, - "childNodes": [], - "id": 239, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 237, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 241, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 241, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 241, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 241, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 242, - }, - "childNodes": [], - "id": 242, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 241, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 242, - }, - "childNodes": [], - "id": 242, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 241, - }, - { - "nextId": null, - "node": { - "id": 244, "textContent": "half-filled star", "type": 3, }, - "parentId": 242, + "parentId": 225, }, { "nextId": null, "node": { "attributes": { "d": "M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 243, + "data-rrweb-id": 226, }, "childNodes": [], - "id": 243, + "id": 226, "isSVG": true, "tagName": "path", "type": 2, }, + "parentId": 224, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 226, + }, + "childNodes": [], + "id": 226, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 224, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 228, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 228, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 228, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 228, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 229, + }, + "childNodes": [], + "id": 229, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 228, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 229, + }, + "childNodes": [], + "id": 229, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 228, + }, + { + "nextId": null, + "node": { + "id": 231, + "textContent": "empty star", + "type": 3, + }, + "parentId": 229, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 230, + }, + "childNodes": [], + "id": 230, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 228, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 230, + }, + "childNodes": [], + "id": 230, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 228, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 232, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 232, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 232, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 232, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 233, + }, + "childNodes": [], + "id": 233, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 232, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 233, + }, + "childNodes": [], + "id": 233, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 232, + }, + { + "nextId": null, + "node": { + "id": 235, + "textContent": "empty star", + "type": 3, + }, + "parentId": 233, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 234, + }, + "childNodes": [], + "id": 234, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 232, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 234, + }, + "childNodes": [], + "id": 234, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 232, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 236, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 236, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 236, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 236, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 237, + }, + "childNodes": [], + "id": 237, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 236, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 237, + }, + "childNodes": [], + "id": 237, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 236, + }, + { + "nextId": null, + "node": { + "id": 239, + "textContent": "empty star", + "type": 3, + }, + "parentId": 237, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 238, + }, + "childNodes": [], + "id": 238, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 236, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 238, + }, + "childNodes": [], + "id": 238, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 236, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 240, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 240, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 240, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 240, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 241, + }, + "childNodes": [], + "id": 241, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 240, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 241, + }, + "childNodes": [], + "id": 241, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + "parentId": 240, + }, + { + "nextId": null, + "node": { + "id": 243, + "textContent": "empty star", + "type": 3, + }, "parentId": 241, }, { "nextId": null, "node": { "attributes": { - "d": "M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 243, + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 242, }, "childNodes": [], - "id": 243, + "id": 242, "isSVG": true, "tagName": "path", "type": 2, }, - "parentId": 241, + "parentId": 240, + }, + { + "nextId": null, + "node": { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 242, + }, + "childNodes": [], + "id": 242, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + "parentId": 240, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 244, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 244, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, + }, + { + "nextId": null, + "node": { + "attributes": { + "data-rrweb-id": 244, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [], + "id": 244, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + "parentId": 248, }, { "nextId": null, "node": { "attributes": { "data-rrweb-id": 245, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", }, "childNodes": [], "id": 245, "isSVG": true, - "tagName": "svg", + "tagName": "title", "type": 2, }, - "parentId": 265, + "parentId": 244, }, { "nextId": null, "node": { "attributes": { "data-rrweb-id": 245, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", }, "childNodes": [], "id": 245, "isSVG": true, - "tagName": "svg", + "tagName": "title", "type": 2, }, - "parentId": 265, + "parentId": 244, + }, + { + "nextId": null, + "node": { + "id": 247, + "textContent": "empty star", + "type": 3, + }, + "parentId": 245, }, { "nextId": null, "node": { "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", "data-rrweb-id": 246, }, "childNodes": [], "id": 246, "isSVG": true, - "tagName": "title", + "tagName": "path", "type": 2, }, - "parentId": 245, + "parentId": 244, }, { "nextId": null, "node": { "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", "data-rrweb-id": 246, }, "childNodes": [], "id": 246, "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 245, - }, - { - "nextId": null, - "node": { - "id": 248, - "textContent": "empty star", - "type": 3, - }, - "parentId": 246, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 247, - }, - "childNodes": [], - "id": 247, - "isSVG": true, "tagName": "path", "type": 2, }, - "parentId": 245, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 247, - }, - "childNodes": [], - "id": 247, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 245, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 249, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 249, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 249, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 249, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 250, - }, - "childNodes": [], - "id": 250, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 249, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 250, - }, - "childNodes": [], - "id": 250, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 249, - }, - { - "nextId": null, - "node": { - "id": 252, - "textContent": "empty star", - "type": 3, - }, - "parentId": 250, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 251, - }, - "childNodes": [], - "id": 251, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 249, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 251, - }, - "childNodes": [], - "id": 251, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 249, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 253, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 253, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 253, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 253, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 254, - }, - "childNodes": [], - "id": 254, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 253, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 254, - }, - "childNodes": [], - "id": 254, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 253, - }, - { - "nextId": null, - "node": { - "id": 256, - "textContent": "empty star", - "type": 3, - }, - "parentId": 254, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 255, - }, - "childNodes": [], - "id": 255, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 253, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 255, - }, - "childNodes": [], - "id": 255, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 253, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 257, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 257, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 257, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 257, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 258, - }, - "childNodes": [], - "id": 258, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 257, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 258, - }, - "childNodes": [], - "id": 258, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 257, - }, - { - "nextId": null, - "node": { - "id": 260, - "textContent": "empty star", - "type": 3, - }, - "parentId": 258, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 259, - }, - "childNodes": [], - "id": 259, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 257, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 259, - }, - "childNodes": [], - "id": 259, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 257, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 261, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 261, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 261, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [], - "id": 261, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - "parentId": 265, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 262, - }, - "childNodes": [], - "id": 262, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 261, - }, - { - "nextId": null, - "node": { - "attributes": { - "data-rrweb-id": 262, - }, - "childNodes": [], - "id": 262, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - "parentId": 261, - }, - { - "nextId": null, - "node": { - "id": 264, - "textContent": "empty star", - "type": 3, - }, - "parentId": 262, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 263, - }, - "childNodes": [], - "id": 263, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 261, - }, - { - "nextId": null, - "node": { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 263, - }, - "childNodes": [], - "id": 263, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - "parentId": 261, + "parentId": 244, }, ], "attributes": [], @@ -5519,7 +5960,7 @@ exports[`replay/transform transform inputs open keyboard custom event 1`] = ` }, "childNodes": [ { - "id": 166, + "id": 149, "textContent": "keyboard", "type": 3, }, @@ -5533,7 +5974,7 @@ exports[`replay/transform transform inputs open keyboard custom event 1`] = ` { "nextId": null, "node": { - "id": 167, + "id": 150, "textContent": "keyboard", "type": 3, }, @@ -5594,7 +6035,7 @@ exports[`replay/transform transform inputs placeholder - $inputType - $value 1`] }, "childNodes": [ { - "id": 298, + "id": 100, "textContent": "hello", "type": 3, }, @@ -5668,13 +6109,13 @@ exports[`replay/transform transform inputs progress rating 1`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 165, + "data-rrweb-id": 148, "style": "position: relative; display: flex; flex-direction: row; padding: 2px 4px;", }, "childNodes": [ { "attributes": { - "data-rrweb-id": 117, + "data-rrweb-id": 100, "fill": "currentColor", "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", "viewBox": "0 0 24 24", @@ -5682,40 +6123,204 @@ exports[`replay/transform transform inputs progress rating 1`] = ` "childNodes": [ { "attributes": { + "data-rrweb-id": 101, + }, + "childNodes": [ + { + "id": 103, + "textContent": "filled star", + "type": 3, + }, + ], + "id": 101, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 102, + }, + "childNodes": [], + "id": 102, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + ], + "id": 100, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + { + "attributes": { + "data-rrweb-id": 104, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [ + { + "attributes": { + "data-rrweb-id": 105, + }, + "childNodes": [ + { + "id": 107, + "textContent": "filled star", + "type": 3, + }, + ], + "id": 105, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 106, + }, + "childNodes": [], + "id": 106, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + ], + "id": 104, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + { + "attributes": { + "data-rrweb-id": 108, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [ + { + "attributes": { + "data-rrweb-id": 109, + }, + "childNodes": [ + { + "id": 111, + "textContent": "filled star", + "type": 3, + }, + ], + "id": 109, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 110, + }, + "childNodes": [], + "id": 110, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + ], + "id": 108, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + { + "attributes": { + "data-rrweb-id": 112, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [ + { + "attributes": { + "data-rrweb-id": 113, + }, + "childNodes": [ + { + "id": 115, + "textContent": "filled star", + "type": 3, + }, + ], + "id": 113, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", + "data-rrweb-id": 114, + }, + "childNodes": [], + "id": 114, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + ], + "id": 112, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + { + "attributes": { + "data-rrweb-id": 116, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [ + { + "attributes": { + "data-rrweb-id": 117, + }, + "childNodes": [ + { + "id": 119, + "textContent": "filled star", + "type": 3, + }, + ], + "id": 117, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", "data-rrweb-id": 118, }, - "childNodes": [ - { - "id": 120, - "textContent": "filled star", - "type": 3, - }, - ], + "childNodes": [], "id": 118, "isSVG": true, - "tagName": "title", - "type": 2, - }, - { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 119, - }, - "childNodes": [], - "id": 119, - "isSVG": true, "tagName": "path", "type": 2, }, ], - "id": 117, + "id": 116, "isSVG": true, "tagName": "svg", "type": 2, }, { "attributes": { - "data-rrweb-id": 121, + "data-rrweb-id": 120, "fill": "currentColor", "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", "viewBox": "0 0 24 24", @@ -5723,40 +6328,40 @@ exports[`replay/transform transform inputs progress rating 1`] = ` "childNodes": [ { "attributes": { + "data-rrweb-id": 121, + }, + "childNodes": [ + { + "id": 123, + "textContent": "filled star", + "type": 3, + }, + ], + "id": 121, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + { + "attributes": { + "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", "data-rrweb-id": 122, }, - "childNodes": [ - { - "id": 124, - "textContent": "filled star", - "type": 3, - }, - ], + "childNodes": [], "id": 122, "isSVG": true, - "tagName": "title", - "type": 2, - }, - { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 123, - }, - "childNodes": [], - "id": 123, - "isSVG": true, "tagName": "path", "type": 2, }, ], - "id": 121, + "id": 120, "isSVG": true, "tagName": "svg", "type": 2, }, { "attributes": { - "data-rrweb-id": 125, + "data-rrweb-id": 124, "fill": "currentColor", "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", "viewBox": "0 0 24 24", @@ -5764,180 +6369,16 @@ exports[`replay/transform transform inputs progress rating 1`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 126, + "data-rrweb-id": 125, }, "childNodes": [ { - "id": 128, - "textContent": "filled star", - "type": 3, - }, - ], - "id": 126, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 127, - }, - "childNodes": [], - "id": 127, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - ], - "id": 125, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - { - "attributes": { - "data-rrweb-id": 129, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [ - { - "attributes": { - "data-rrweb-id": 130, - }, - "childNodes": [ - { - "id": 132, - "textContent": "filled star", - "type": 3, - }, - ], - "id": 130, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 131, - }, - "childNodes": [], - "id": 131, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - ], - "id": 129, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - { - "attributes": { - "data-rrweb-id": 133, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [ - { - "attributes": { - "data-rrweb-id": 134, - }, - "childNodes": [ - { - "id": 136, - "textContent": "filled star", - "type": 3, - }, - ], - "id": 134, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 135, - }, - "childNodes": [], - "id": 135, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - ], - "id": 133, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - { - "attributes": { - "data-rrweb-id": 137, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [ - { - "attributes": { - "data-rrweb-id": 138, - }, - "childNodes": [ - { - "id": 140, - "textContent": "filled star", - "type": 3, - }, - ], - "id": 138, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - { - "attributes": { - "d": "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z", - "data-rrweb-id": 139, - }, - "childNodes": [], - "id": 139, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - ], - "id": 137, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - { - "attributes": { - "data-rrweb-id": 141, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [ - { - "attributes": { - "data-rrweb-id": 142, - }, - "childNodes": [ - { - "id": 144, + "id": 127, "textContent": "half-filled star", "type": 3, }, ], - "id": 142, + "id": 125, "isSVG": true, "tagName": "title", "type": 2, @@ -5945,23 +6386,23 @@ exports[`replay/transform transform inputs progress rating 1`] = ` { "attributes": { "d": "M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 143, + "data-rrweb-id": 126, }, "childNodes": [], - "id": 143, + "id": 126, "isSVG": true, "tagName": "path", "type": 2, }, ], - "id": 141, + "id": 124, "isSVG": true, "tagName": "svg", "type": 2, }, { "attributes": { - "data-rrweb-id": 145, + "data-rrweb-id": 128, "fill": "currentColor", "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", "viewBox": "0 0 24 24", @@ -5969,203 +6410,203 @@ exports[`replay/transform transform inputs progress rating 1`] = ` "childNodes": [ { "attributes": { + "data-rrweb-id": 129, + }, + "childNodes": [ + { + "id": 131, + "textContent": "empty star", + "type": 3, + }, + ], + "id": 129, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 130, + }, + "childNodes": [], + "id": 130, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + ], + "id": 128, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + { + "attributes": { + "data-rrweb-id": 132, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [ + { + "attributes": { + "data-rrweb-id": 133, + }, + "childNodes": [ + { + "id": 135, + "textContent": "empty star", + "type": 3, + }, + ], + "id": 133, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 134, + }, + "childNodes": [], + "id": 134, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + ], + "id": 132, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + { + "attributes": { + "data-rrweb-id": 136, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [ + { + "attributes": { + "data-rrweb-id": 137, + }, + "childNodes": [ + { + "id": 139, + "textContent": "empty star", + "type": 3, + }, + ], + "id": 137, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 138, + }, + "childNodes": [], + "id": 138, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + ], + "id": 136, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + { + "attributes": { + "data-rrweb-id": 140, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [ + { + "attributes": { + "data-rrweb-id": 141, + }, + "childNodes": [ + { + "id": 143, + "textContent": "empty star", + "type": 3, + }, + ], + "id": 141, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", + "data-rrweb-id": 142, + }, + "childNodes": [], + "id": 142, + "isSVG": true, + "tagName": "path", + "type": 2, + }, + ], + "id": 140, + "isSVG": true, + "tagName": "svg", + "type": 2, + }, + { + "attributes": { + "data-rrweb-id": 144, + "fill": "currentColor", + "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", + "viewBox": "0 0 24 24", + }, + "childNodes": [ + { + "attributes": { + "data-rrweb-id": 145, + }, + "childNodes": [ + { + "id": 147, + "textContent": "empty star", + "type": 3, + }, + ], + "id": 145, + "isSVG": true, + "tagName": "title", + "type": 2, + }, + { + "attributes": { + "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", "data-rrweb-id": 146, }, - "childNodes": [ - { - "id": 148, - "textContent": "empty star", - "type": 3, - }, - ], + "childNodes": [], "id": 146, "isSVG": true, - "tagName": "title", - "type": 2, - }, - { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 147, - }, - "childNodes": [], - "id": 147, - "isSVG": true, "tagName": "path", "type": 2, }, ], - "id": 145, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - { - "attributes": { - "data-rrweb-id": 149, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [ - { - "attributes": { - "data-rrweb-id": 150, - }, - "childNodes": [ - { - "id": 152, - "textContent": "empty star", - "type": 3, - }, - ], - "id": 150, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 151, - }, - "childNodes": [], - "id": 151, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - ], - "id": 149, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - { - "attributes": { - "data-rrweb-id": 153, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [ - { - "attributes": { - "data-rrweb-id": 154, - }, - "childNodes": [ - { - "id": 156, - "textContent": "empty star", - "type": 3, - }, - ], - "id": 154, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 155, - }, - "childNodes": [], - "id": 155, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - ], - "id": 153, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - { - "attributes": { - "data-rrweb-id": 157, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [ - { - "attributes": { - "data-rrweb-id": 158, - }, - "childNodes": [ - { - "id": 160, - "textContent": "empty star", - "type": 3, - }, - ], - "id": 158, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 159, - }, - "childNodes": [], - "id": 159, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - ], - "id": 157, - "isSVG": true, - "tagName": "svg", - "type": 2, - }, - { - "attributes": { - "data-rrweb-id": 161, - "fill": "currentColor", - "style": "height: 100%;overflow-clip-margin: content-box;overflow:hidden", - "viewBox": "0 0 24 24", - }, - "childNodes": [ - { - "attributes": { - "data-rrweb-id": 162, - }, - "childNodes": [ - { - "id": 164, - "textContent": "empty star", - "type": 3, - }, - ], - "id": 162, - "isSVG": true, - "tagName": "title", - "type": 2, - }, - { - "attributes": { - "d": "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z", - "data-rrweb-id": 163, - }, - "childNodes": [], - "id": 163, - "isSVG": true, - "tagName": "path", - "type": 2, - }, - ], - "id": 161, + "id": 144, "isSVG": true, "tagName": "svg", "type": 2, }, ], - "id": 165, + "id": 148, "tagName": "div", "type": 2, }, @@ -6428,7 +6869,7 @@ exports[`replay/transform transform inputs web_view - $inputType - $value 1`] = }, "childNodes": [ { - "id": 299, + "id": 100, "textContent": "web_view", "type": 3, }, @@ -6501,7 +6942,7 @@ exports[`replay/transform transform inputs web_view with URL 1`] = ` }, "childNodes": [ { - "id": 116, + "id": 100, "textContent": "https://example.com", "type": 3, }, @@ -6569,7 +7010,7 @@ exports[`replay/transform transform inputs wrapping with labels 1`] = ` "childNodes": [ { "attributes": { - "data-rrweb-id": 115, + "data-rrweb-id": 101, "style": "width: 100px;height: 30px;position: fixed;left: 0px;top: 0px;", }, "childNodes": [ @@ -6585,12 +7026,12 @@ exports[`replay/transform transform inputs wrapping with labels 1`] = ` "type": 2, }, { - "id": 114, + "id": 100, "textContent": "i will wrap the checkbox", "type": 3, }, ], - "id": 115, + "id": 101, "tagName": "label", "type": 2, }, @@ -6659,7 +7100,7 @@ exports[`replay/transform transform omitting x and y is equivalent to setting th }, "childNodes": [ { - "id": 106, + "id": 100, "textContent": "image", "type": 3, }, diff --git a/ee/frontend/mobile-replay/index.ts b/ee/frontend/mobile-replay/index.ts index b6968327883..56a7d2ee45b 100644 --- a/ee/frontend/mobile-replay/index.ts +++ b/ee/frontend/mobile-replay/index.ts @@ -5,7 +5,7 @@ import Ajv, { ErrorObject } from 'ajv' import { mobileEventWithTime } from './mobile.types' import mobileSchema from './schema/mobile/rr-mobile-schema.json' import webSchema from './schema/web/rr-web-schema.json' -import { makeCustomEvent, makeFullEvent, makeIncrementalEvent, makeMetaEvent } from './transformers' +import { makeCustomEvent, makeFullEvent, makeIncrementalEvent, makeMetaEvent } from './transformer/transformers' const ajv = new Ajv({ allowUnionTypes: true, diff --git a/ee/frontend/mobile-replay/transform.test.ts b/ee/frontend/mobile-replay/transform.test.ts index 08d846831a1..9dd8869a2b9 100644 --- a/ee/frontend/mobile-replay/transform.test.ts +++ b/ee/frontend/mobile-replay/transform.test.ts @@ -1,14 +1,15 @@ import posthogEE from '@posthog/ee/exports' -import {EventType} from '@rrweb/types' -import {ifEeDescribe} from 'lib/ee.test' +import { EventType } from '@rrweb/types' +import { ifEeDescribe } from 'lib/ee.test' -import {PostHogEE} from '../../../frontend/@posthog/ee/types' -import {validateAgainstWebSchema, validateFromMobile} from './index' +import { PostHogEE } from '../../../frontend/@posthog/ee/types' +import * as incrementalSnapshotJson from './__mocks__/increment-with-child-duplication.json' +import { validateAgainstWebSchema, validateFromMobile } from './index' -const unspecifiedBase64ImageURL = 'iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=' +const unspecifiedBase64ImageURL = + 'iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=' -const heartEyesEmojiURL = - 'data:image/png;base64,' + unspecifiedBase64ImageURL +const heartEyesEmojiURL = 'data:image/png;base64,' + unspecifiedBase64ImageURL describe('replay/transform', () => { describe('validation', () => { @@ -23,7 +24,7 @@ describe('replay/transform', () => { test('example of validating mobile meta event', () => { const validData = { - data: {width: 1, height: 1}, + data: { width: 1, height: 1 }, timestamp: 1, type: EventType.Meta, } @@ -40,7 +41,7 @@ describe('replay/transform', () => { }) test('should be valid when...', () => { - expect(validateAgainstWebSchema({data: {}, timestamp: 12345, type: 0})).toBeTruthy() + expect(validateAgainstWebSchema({ data: {}, timestamp: 12345, type: 0 })).toBeTruthy() }) }) }) @@ -54,16 +55,16 @@ describe('replay/transform', () => { expect( posthogEEModule.mobileReplay?.transformToWeb([ { - data: {width: 300, height: 600}, + data: { width: 300, height: 600 }, timestamp: 1, type: 4, }, { - data: {href: 'included when present', width: 300, height: 600}, + data: { href: 'included when present', width: 300, height: 600 }, timestamp: 1, type: 4, }, - {type: 9999}, + { type: 9999 }, { type: 2, data: { @@ -87,7 +88,7 @@ describe('replay/transform', () => { test('can ignore unknown wireframe types', () => { const unexpectedWireframeType = posthogEEModule.mobileReplay?.transformToWeb([ { - data: {screen: 'App Home Page', width: 300, height: 600}, + data: { screen: 'App Home Page', width: 300, height: 600 }, timestamp: 1, type: 4, }, @@ -114,14 +115,14 @@ describe('replay/transform', () => { test('can short-circuit non-mobile full snapshot', () => { const allWeb = posthogEEModule.mobileReplay?.transformToWeb([ { - data: {href: 'https://my-awesome.site', width: 300, height: 600}, + data: { href: 'https://my-awesome.site', width: 300, height: 600 }, timestamp: 1, type: 4, }, { type: 2, data: { - node: {the: 'payload'}, + node: { the: 'payload' }, }, timestamp: 1, }, @@ -235,7 +236,7 @@ describe('replay/transform', () => { test('child wireframes are processed', () => { const textEvent = posthogEEModule.mobileReplay?.transformToWeb([ { - data: {screen: 'App Home Page', width: 300, height: 600}, + data: { screen: 'App Home Page', width: 300, height: 600 }, timestamp: 1, type: 4, }, @@ -349,6 +350,11 @@ describe('replay/transform', () => { expect(textEvent).toMatchSnapshot() }) + test('incremental mutations de-duplicate the tree', () => { + const conversion = posthogEEModule.mobileReplay?.transformEventToWeb(incrementalSnapshotJson) + expect(conversion).toMatchSnapshot() + }) + test('omitting x and y is equivalent to setting them to 0', () => { expect( posthogEEModule.mobileReplay?.transformToWeb([ @@ -486,7 +492,7 @@ describe('replay/transform', () => { x: 0, y: 0, height: 30, - style: {backgroundImage: heartEyesEmojiURL,} + style: { backgroundImage: heartEyesEmojiURL }, }, { id: 12346, @@ -494,7 +500,7 @@ describe('replay/transform', () => { x: 0, y: 0, height: 30, - style: {backgroundImage: unspecifiedBase64ImageURL,} + style: { backgroundImage: unspecifiedBase64ImageURL }, }, { id: 12346, @@ -502,7 +508,7 @@ describe('replay/transform', () => { x: 0, y: 0, height: 30, - style: {backgroundImage: unspecifiedBase64ImageURL, backgroundSize: 'cover'} + style: { backgroundImage: unspecifiedBase64ImageURL, backgroundSize: 'cover' }, }, { id: 12346, @@ -511,7 +517,7 @@ describe('replay/transform', () => { y: 0, height: 30, // should be ignored - style: {backgroundImage: null,} + style: { backgroundImage: null }, }, ], }, @@ -620,7 +626,7 @@ describe('replay/transform', () => { height: 30, type: 'input', inputType: 'progress', - style: {bar: 'rating'}, + style: { bar: 'rating' }, max: '12', value: '6.5', }, @@ -636,7 +642,7 @@ describe('replay/transform', () => { posthogEEModule.mobileReplay?.transformEventToWeb({ timestamp: 1, type: EventType.Custom, - data: {tag: 'keyboard', payload: {open: true, height: 150}}, + data: { tag: 'keyboard', payload: { open: true, height: 150 } }, }) ).toMatchSnapshot() }) @@ -657,7 +663,7 @@ describe('replay/transform', () => { height: 30, type: 'input', inputType: 'progress', - style: {bar: 'rating'}, + style: { bar: 'rating' }, max: '12', value: '6.5', }, @@ -675,7 +681,7 @@ describe('replay/transform', () => { type: EventType.IncrementalSnapshot, data: { source: 0, - removes: [{parentId: 54321, id: 12345}], + removes: [{ parentId: 54321, id: 12345 }], }, }) ).toMatchSnapshot() @@ -699,7 +705,7 @@ describe('replay/transform', () => { height: 30, type: 'input', inputType: 'progress', - style: {bar: 'rating'}, + style: { bar: 'rating' }, max: '12', value: '6.5', }, @@ -715,7 +721,7 @@ describe('replay/transform', () => { posthogEEModule.mobileReplay?.transformEventToWeb({ timestamp: 1, type: EventType.Custom, - data: {tag: 'keyboard', payload: {open: false}}, + data: { tag: 'keyboard', payload: { open: false } }, }) ).toMatchSnapshot() }) @@ -989,7 +995,7 @@ describe('replay/transform', () => { height: 30, type: 'input', inputType: 'progress', - style: {bar: 'circular'}, + style: { bar: 'circular' }, }, { id: 12365, @@ -997,7 +1003,7 @@ describe('replay/transform', () => { height: 30, type: 'input', inputType: 'progress', - style: {bar: 'horizontal'}, + style: { bar: 'horizontal' }, }, { id: 12365, @@ -1005,7 +1011,7 @@ describe('replay/transform', () => { height: 30, type: 'input', inputType: 'progress', - style: {bar: 'horizontal'}, + style: { bar: 'horizontal' }, value: 0.75, }, { @@ -1014,7 +1020,7 @@ describe('replay/transform', () => { height: 30, type: 'input', inputType: 'progress', - style: {bar: 'horizontal'}, + style: { bar: 'horizontal' }, value: 0.75, max: 2.5, }, diff --git a/ee/frontend/mobile-replay/status-bar.ts b/ee/frontend/mobile-replay/transformer/status-bar.ts similarity index 74% rename from ee/frontend/mobile-replay/status-bar.ts rename to ee/frontend/mobile-replay/transformer/status-bar.ts index 44b3ee9cc6a..1ae82c633c4 100644 --- a/ee/frontend/mobile-replay/status-bar.ts +++ b/ee/frontend/mobile-replay/transformer/status-bar.ts @@ -1,5 +1,6 @@ -import {NodeType, serializedNodeWithId, wireframeStatusBar} from "./mobile.types"; +import {NodeType, serializedNodeWithId, wireframeStatusBar} from "../mobile.types"; import {STATUS_BAR_ID} from "./transformers"; +import {ConversionContext, ConversionResult} from "./types"; import {makeStylesString} from "./wireframeStyle"; function spacerDiv(idSequence: Generator): serializedNodeWithId { @@ -19,10 +20,10 @@ function spacerDiv(idSequence: Generator): serializedNodeWithId { /** * tricky: we need to accept children because that's the interface of converters, but we don't use them */ -export function makeStatusBar(wireframe: wireframeStatusBar, _children: serializedNodeWithId[], timestamp: number, idSequence: Generator): serializedNodeWithId { - const clockId = idSequence.next().value; +export function makeStatusBar(wireframe: wireframeStatusBar, _children: serializedNodeWithId[], context: ConversionContext): ConversionResult { + const clockId = context.idSequence.next().value; // convert the wireframe timestamp to a date time, then get just the hour and minute of the time from that - const clockTime = timestamp ? new Date(timestamp).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}) : "" + const clockTime = context.timestamp ? new Date(context.timestamp).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}) : "" const clock: serializedNodeWithId = { type: NodeType.Element, tagName: 'div', @@ -34,12 +35,12 @@ export function makeStatusBar(wireframe: wireframeStatusBar, _children: serializ { type: NodeType.Text, textContent: clockTime, - id: idSequence.next().value, + id: context.idSequence.next().value, }, ] }; - return { + return {result: { type: NodeType.Element, tagName: 'div', attributes: { @@ -48,8 +49,8 @@ export function makeStatusBar(wireframe: wireframeStatusBar, _children: serializ }, id: STATUS_BAR_ID, childNodes: [ - spacerDiv(idSequence), + spacerDiv(context.idSequence), clock ], - } + }, context } } diff --git a/ee/frontend/mobile-replay/transformers.ts b/ee/frontend/mobile-replay/transformer/transformers.ts similarity index 63% rename from ee/frontend/mobile-replay/transformers.ts rename to ee/frontend/mobile-replay/transformer/transformers.ts index 547c7cafd2d..7135bed985a 100644 --- a/ee/frontend/mobile-replay/transformers.ts +++ b/ee/frontend/mobile-replay/transformer/transformers.ts @@ -9,8 +9,8 @@ import { mutationData, removedNodeMutation, } from '@rrweb/types' -import {captureMessage} from '@sentry/react' -import {isObject} from 'lib/utils' +import { captureMessage } from '@sentry/react' +import { isObject } from 'lib/utils' import { attributes, @@ -39,8 +39,9 @@ import { wireframeSelect, wireframeText, wireframeToggle, -} from './mobile.types' -import {makeStatusBar} from "./status-bar"; +} from '../mobile.types' +import { makeStatusBar } from './status-bar' +import { ConversionContext, ConversionResult, StyleOverride } from './types' import { makeBodyStyles, makeColorStyles, @@ -50,7 +51,6 @@ import { makeMinimalStyles, makePositionStyles, makeStylesString, - StyleOverride, } from './wireframeStyle' const BACKGROUND = '#f3f4ef' @@ -77,8 +77,7 @@ function* ids(): Generator { } } -// TODO this is shared for the lifetime of the page, so a very, very long-lived session could exhaust the ids -const idSequence = ids() +let globalIdSequence = ids() // there are some fixed ids that we need to use for fixed elements or artificial mutations const DOCUMENT_ID = 1 @@ -93,6 +92,10 @@ function isKeyboardEvent(x: unknown): x is keyboardEvent { return isObject(x) && 'data' in x && isObject(x.data) && 'tag' in x.data && x.data.tag === 'keyboard' } +export function _isPositiveInteger(id: unknown): id is number { + return typeof id === 'number' && id > 0 && id % 1 === 0 +} + export const makeCustomEvent = ( mobileCustomEvent: (customEvent | keyboardEvent) & { timestamp: number @@ -123,23 +126,28 @@ export const makeCustomEvent = ( : '100vw', }, [], - styleOverride + { + timestamp: mobileCustomEvent.timestamp, + idSequence: globalIdSequence, + skippableNodes: new Set(), + styleOverride, + } ) if (keyboardPlaceHolder) { adds.push({ parentId: BODY_ID, nextId: null, - node: keyboardPlaceHolder, + node: keyboardPlaceHolder.result, }) // mutations seem not to want a tree of nodes to add // so even though `keyboardPlaceholder` is a tree with content // we have to add the text content as well adds.push({ - parentId: keyboardPlaceHolder.id, + parentId: keyboardPlaceHolder.result.id, nextId: null, node: { type: NodeType.Text, - id: idSequence.next().value, + id: globalIdSequence.next().value, textContent: 'keyboard', }, }) @@ -181,25 +189,32 @@ export const makeMetaEvent = ( timestamp: mobileMetaEvent.timestamp, }) -export function _isPositiveInteger(id: unknown): id is number { - return typeof id === 'number' && id > 0 && id % 1 === 0 -} - -function makeDivElement(wireframe: wireframeDiv, children: serializedNodeWithId[]): serializedNodeWithId | null { - const _id = _isPositiveInteger(wireframe.id) ? wireframe.id : idSequence.next().value +function makeDivElement( + wireframe: wireframeDiv, + children: serializedNodeWithId[], + context: ConversionContext +): ConversionResult | null { + const _id = _isPositiveInteger(wireframe.id) ? wireframe.id : context.idSequence.next().value return { - type: NodeType.Element, - tagName: 'div', - attributes: { - style: makeStylesString(wireframe) + 'overflow:hidden;white-space:nowrap;', - 'data-rrweb-id': _id, + result: { + type: NodeType.Element, + tagName: 'div', + attributes: { + style: makeStylesString(wireframe) + 'overflow:hidden;white-space:nowrap;', + 'data-rrweb-id': _id, + }, + id: _id, + childNodes: children, }, - id: _id, - childNodes: children, + context, } } -function makeTextElement(wireframe: wireframeText, children: serializedNodeWithId[]): serializedNodeWithId | null { +function makeTextElement( + wireframe: wireframeText, + children: serializedNodeWithId[], + context: ConversionContext +): ConversionResult | null { if (wireframe.type !== 'text') { console.error('Passed incorrect wireframe type to makeTextElement') return null @@ -207,92 +222,109 @@ function makeTextElement(wireframe: wireframeText, children: serializedNodeWithI // because we might have to style the text, we always wrap it in a div // and apply styles to that - const id = idSequence.next().value + const id = context.idSequence.next().value return { - type: NodeType.Element, - tagName: 'div', - attributes: { - style: makeStylesString(wireframe) + 'overflow:hidden;white-space:nowrap;', - 'data-rrweb-id': wireframe.id, - }, - id: wireframe.id, - childNodes: [ - { - type: NodeType.Text, - textContent: wireframe.text, - // since the text node is wrapped, we assign it a synthetic id - id: id, + result: { + type: NodeType.Element, + tagName: 'div', + attributes: { + style: makeStylesString(wireframe) + 'overflow:hidden;white-space:nowrap;', + 'data-rrweb-id': wireframe.id, }, - ...children, - ], + id: wireframe.id, + childNodes: [ + { + type: NodeType.Text, + textContent: wireframe.text, + // since the text node is wrapped, we assign it a synthetic id + id: id, + }, + ...children, + ], + }, + context, } } -function makeWebViewElement(wireframe: wireframe, children: serializedNodeWithId[]): serializedNodeWithId | null { +function makeWebViewElement( + wireframe: wireframe, + children: serializedNodeWithId[], + context: ConversionContext +): ConversionResult | null { const labelledWireframe: wireframePlaceholder = { ...wireframe } as wireframePlaceholder if ('url' in wireframe) { labelledWireframe.label = wireframe.url } - return makePlaceholderElement(labelledWireframe, children) + return makePlaceholderElement(labelledWireframe, children, context) } function makePlaceholderElement( wireframe: wireframe, children: serializedNodeWithId[], - styleOverride?: StyleOverride -): serializedNodeWithId | null { + context: ConversionContext +): ConversionResult | null { const txt = 'label' in wireframe && wireframe.label ? wireframe.label : wireframe.type || 'PLACEHOLDER' return { - type: NodeType.Element, - tagName: 'div', - attributes: { - style: makeStylesString(wireframe, { - verticalAlign: 'center', - horizontalAlign: 'center', - backgroundColor: wireframe.style?.backgroundColor || BACKGROUND, - color: wireframe.style?.color || FOREGROUND, - ...styleOverride, - }), - 'data-rrweb-id': wireframe.id, - }, - id: wireframe.id, - childNodes: [ - { - type: NodeType.Text, - // since the text node is wrapped, we assign it a synthetic id - id: idSequence.next().value, - textContent: txt, + result: { + type: NodeType.Element, + tagName: 'div', + attributes: { + style: makeStylesString(wireframe, { + verticalAlign: 'center', + horizontalAlign: 'center', + backgroundColor: wireframe.style?.backgroundColor || BACKGROUND, + color: wireframe.style?.color || FOREGROUND, + ...context.styleOverride, + }), + 'data-rrweb-id': wireframe.id, }, - ...children, - ], + id: wireframe.id, + childNodes: [ + { + type: NodeType.Text, + // since the text node is wrapped, we assign it a synthetic id + id: context.idSequence.next().value, + textContent: txt, + }, + ...children, + ], + }, + context, } } -export function dataURIOrPNG(src: string):string { +export function dataURIOrPNG(src: string): string { if (!src.startsWith('data:image/')) { return 'data:image/png;base64,' + src } - return src; + return src } -function makeImageElement(wireframe: wireframeImage, children: serializedNodeWithId[]): serializedNodeWithId | null { +function makeImageElement( + wireframe: wireframeImage, + children: serializedNodeWithId[], + context: ConversionContext +): ConversionResult | null { if (!wireframe.base64) { - return makePlaceholderElement(wireframe, children) + return makePlaceholderElement(wireframe, children, context) } - const src = dataURIOrPNG(wireframe.base64); + const src = dataURIOrPNG(wireframe.base64) return { - type: NodeType.Element, - tagName: 'img', - attributes: { - src: src, - width: wireframe.width, - height: wireframe.height, - style: makeStylesString(wireframe), - 'data-rrweb-id': wireframe.id, + result: { + type: NodeType.Element, + tagName: 'img', + attributes: { + src: src, + width: wireframe.width, + height: wireframe.height, + style: makeStylesString(wireframe), + 'data-rrweb-id': wireframe.id, + }, + id: wireframe.id, + childNodes: children, }, - id: wireframe.id, - childNodes: children, + context, } } @@ -354,7 +386,11 @@ function inputAttributes(wireframe: T): attri } } -function makeButtonElement(wireframe: wireframeButton, children: serializedNodeWithId[]): serializedNodeWithId | null { +function makeButtonElement( + wireframe: wireframeButton, + children: serializedNodeWithId[], + context: ConversionContext +): ConversionResult | null { const buttonText: textNode | null = wireframe.value ? { type: NodeType.Text, @@ -363,44 +399,68 @@ function makeButtonElement(wireframe: wireframeButton, children: serializedNodeW : null return { - type: NodeType.Element, - tagName: 'button', - attributes: inputAttributes(wireframe), - id: wireframe.id, - childNodes: buttonText ? [{ ...buttonText, id: idSequence.next().value }, ...children] : children, - } -} - -function makeSelectOptionElement(option: string, selected: boolean): serializedNodeWithId { - const optionId = idSequence.next().value - return { - type: NodeType.Element, - tagName: 'option', - attributes: { - ...(selected ? { selected: selected } : {}), - 'data-rrweb-id': optionId, + result: { + type: NodeType.Element, + tagName: 'button', + attributes: inputAttributes(wireframe), + id: wireframe.id, + childNodes: buttonText ? [{ ...buttonText, id: context.idSequence.next().value }, ...children] : children, }, - id: optionId, - childNodes: [ - { - type: NodeType.Text, - textContent: option, - id: idSequence.next().value, - }, - ], + context, } } -function makeSelectElement(wireframe: wireframeSelect, children: serializedNodeWithId[]): serializedNodeWithId | null { +function makeSelectOptionElement( + option: string, + selected: boolean, + context: ConversionContext +): ConversionResult { + const optionId = context.idSequence.next().value return { - type: NodeType.Element, - tagName: 'select', - attributes: inputAttributes(wireframe), - id: wireframe.id, - childNodes: [ - ...(wireframe.options?.map((option) => makeSelectOptionElement(option, wireframe.value === option)) || []), - ...children, - ], + result: { + type: NodeType.Element, + tagName: 'option', + attributes: { + ...(selected ? { selected: selected } : {}), + 'data-rrweb-id': optionId, + }, + id: optionId, + childNodes: [ + { + type: NodeType.Text, + textContent: option, + id: context.idSequence.next().value, + }, + ], + }, + context, + } +} + +function makeSelectElement( + wireframe: wireframeSelect, + children: serializedNodeWithId[], + context: ConversionContext +): ConversionResult | null { + const selectOptions: serializedNodeWithId[] = [] + if (wireframe.options) { + let optionContext = context + for (let i = 0; i < wireframe.options.length; i++) { + const option = wireframe.options[i] + const conversion = makeSelectOptionElement(option, wireframe.value === option, optionContext) + selectOptions.push(conversion.result) + optionContext = conversion.context + } + } + return { + result: { + type: NodeType.Element, + tagName: 'select', + attributes: inputAttributes(wireframe), + id: wireframe.id, + childNodes: [...selectOptions, ...children], + }, + context, } } @@ -422,25 +482,29 @@ function groupRadioButtons(children: serializedNodeWithId[], radioGroupName: str function makeRadioGroupElement( wireframe: wireframeRadioGroup, - children: serializedNodeWithId[] -): serializedNodeWithId | null { + children: serializedNodeWithId[], + context: ConversionContext +): ConversionResult | null { const radioGroupName = 'radio_group_' + wireframe.id return { - type: NodeType.Element, - tagName: 'div', - attributes: { - style: makeStylesString(wireframe), - 'data-rrweb-id': wireframe.id, + result: { + type: NodeType.Element, + tagName: 'div', + attributes: { + style: makeStylesString(wireframe), + 'data-rrweb-id': wireframe.id, + }, + id: wireframe.id, + childNodes: groupRadioButtons(children, radioGroupName), }, - id: wireframe.id, - childNodes: groupRadioButtons(children, radioGroupName), + context, } } -function makeStar(title: string, path: string): serializedNodeWithId { - const svgId = idSequence.next().value - const titleId = idSequence.next().value - const pathId = idSequence.next().value +function makeStar(title: string, path: string, context: ConversionContext): serializedNodeWithId { + const svgId = context.idSequence.next().value + const titleId = context.idSequence.next().value + const pathId = context.idSequence.next().value return { type: NodeType.Element, tagName: 'svg', @@ -465,7 +529,7 @@ function makeStar(title: string, path: string): serializedNodeWithId { { type: NodeType.Text, textContent: title, - id: idSequence.next().value, + id: context.idSequence.next().value, }, ], }, @@ -484,33 +548,40 @@ function makeStar(title: string, path: string): serializedNodeWithId { } } -function filledStar(): serializedNodeWithId { +function filledStar(context: ConversionContext): serializedNodeWithId { return makeStar( 'filled star', - 'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' + 'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z', + context ) } -function halfStar(): serializedNodeWithId { +function halfStar(context: ConversionContext): serializedNodeWithId { return makeStar( 'half-filled star', - 'M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z' + 'M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z', + context ) } -function emptyStar(): serializedNodeWithId { +function emptyStar(context: ConversionContext): serializedNodeWithId { return makeStar( 'empty star', - 'M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z' + 'M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z', + context ) } -function makeRatingBar(wireframe: wireframeProgress, children: serializedNodeWithId[]): serializedNodeWithId | null { +function makeRatingBar( + wireframe: wireframeProgress, + children: serializedNodeWithId[], + context: ConversionContext +): ConversionResult | null { // max is the number of stars... and value is the number of stars to fill // deliberate double equals, because we want to allow null and undefined if (wireframe.value == null || wireframe.max == null) { - return makePlaceholderElement(wireframe, children) + return makePlaceholderElement(wireframe, children, context) } const numberOfFilledStars = Math.floor(wireframe.value) @@ -519,15 +590,15 @@ function makeRatingBar(wireframe: wireframeProgress, children: serializedNodeWit const filledStars = Array(numberOfFilledStars) .fill(undefined) - .map(() => filledStar()) + .map(() => filledStar(context)) const halfStars = Array(numberOfHalfStars) .fill(undefined) - .map(() => halfStar()) + .map(() => halfStar(context)) const emptyStars = Array(numberOfEmptyStars) .fill(undefined) - .map(() => emptyStar()) + .map(() => emptyStar(context)) - const ratingBarId = idSequence.next().value + const ratingBarId = context.idSequence.next().value const ratingBar = { type: NodeType.Element, tagName: 'div', @@ -542,21 +613,25 @@ function makeRatingBar(wireframe: wireframeProgress, children: serializedNodeWit } as serializedNodeWithId return { - type: NodeType.Element, - tagName: 'div', - attributes: { - style: makeStylesString(wireframe), - 'data-rrweb-id': wireframe.id, + result: { + type: NodeType.Element, + tagName: 'div', + attributes: { + style: makeStylesString(wireframe), + 'data-rrweb-id': wireframe.id, + }, + id: wireframe.id, + childNodes: [ratingBar, ...children], }, - id: wireframe.id, - childNodes: [ratingBar, ...children], + context, } } function makeProgressElement( wireframe: wireframeProgress, - children: serializedNodeWithId[] -): serializedNodeWithId | null { + children: serializedNodeWithId[], + context: ConversionContext +): ConversionResult | null { if (wireframe.style?.bar === 'circular') { // value needs to be expressed as a number between 0 and 100 const max = wireframe.max || 1 @@ -583,61 +658,67 @@ function makeProgressElement( attributes: { type: 'text/css', }, - id: idSequence.next().value, + id: context.idSequence.next().value, childNodes: [ { type: NodeType.Text, textContent: `@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`, - id: idSequence.next().value, + id: context.idSequence.next().value, }, ], }, ] - const wrappingDivId = idSequence.next().value + const wrappingDivId = context.idSequence.next().value return { - type: NodeType.Element, - tagName: 'div', - attributes: { - style: makeMinimalStyles(wireframe), - 'data-rrweb-id': wireframe.id, - }, - id: wireframe.id, - childNodes: [ - { - type: NodeType.Element, - tagName: 'div', - attributes: { - // with no provided value we render a spinner - style: _isPositiveInteger(value) - ? makeDeterminateProgressStyles(wireframe, styleOverride) - : makeIndeterminateProgressStyles(wireframe, styleOverride), - 'data-rrweb-id': wrappingDivId, - }, - id: wrappingDivId, - childNodes: stylingChildren, + result: { + type: NodeType.Element, + tagName: 'div', + attributes: { + style: makeMinimalStyles(wireframe), + 'data-rrweb-id': wireframe.id, }, - ...children, - ], + id: wireframe.id, + childNodes: [ + { + type: NodeType.Element, + tagName: 'div', + attributes: { + // with no provided value we render a spinner + style: _isPositiveInteger(value) + ? makeDeterminateProgressStyles(wireframe, styleOverride) + : makeIndeterminateProgressStyles(wireframe, styleOverride), + 'data-rrweb-id': wrappingDivId, + }, + id: wrappingDivId, + childNodes: stylingChildren, + }, + ...children, + ], + }, + context, } } else if (wireframe.style?.bar === 'rating') { - return makeRatingBar(wireframe, children) + return makeRatingBar(wireframe, children, context) } else { return { - type: NodeType.Element, - tagName: 'progress', - attributes: inputAttributes(wireframe), - id: wireframe.id, - childNodes: children, + result: { + type: NodeType.Element, + tagName: 'progress', + attributes: inputAttributes(wireframe), + id: wireframe.id, + childNodes: children, + }, + context, } } } -function makeToggleParts(wireframe: wireframeToggle): serializedNodeWithId[] { +function makeToggleParts(wireframe: wireframeToggle, context: ConversionContext): serializedNodeWithId[] { const togglePosition = wireframe.checked ? 'right' : 'left' const defaultColor = wireframe.checked ? '#1d4aff' : BACKGROUND - const sliderPartId = idSequence.next().value - const handlePartId = idSequence.next().value + const sliderPartId = context.idSequence.next().value + const handlePartId = context.idSequence.next().value return [ { type: NodeType.Element, @@ -670,88 +751,106 @@ function makeToggleParts(wireframe: wireframeToggle): serializedNodeWithId[] { ] } -function makeToggleElement(wireframe: wireframeToggle): (elementNode & { id: number }) | null { +function makeToggleElement( + wireframe: wireframeToggle, + context: ConversionContext +): ConversionResult< + elementNode & { + id: number + } +> | null { const isLabelled = 'label' in wireframe - const wrappingDivId = idSequence.next().value + const wrappingDivId = context.idSequence.next().value return { - type: NodeType.Element, - tagName: 'div', - attributes: { - // if labelled take up available space, otherwise use provided positioning - style: isLabelled ? `height:100%;flex:1` : makePositionStyles(wireframe), - 'data-rrweb-id': wireframe.id, - }, - id: wireframe.id, - childNodes: [ - { - type: NodeType.Element, - tagName: 'div', - attributes: { - // relative position, fills parent - style: 'position:relative;width:100%;height:100%;', - 'data-rrweb-id': wrappingDivId, - }, - id: wrappingDivId, - childNodes: makeToggleParts(wireframe), + result: { + type: NodeType.Element, + tagName: 'div', + attributes: { + // if labelled take up available space, otherwise use provided positioning + style: isLabelled ? `height:100%;flex:1` : makePositionStyles(wireframe), + 'data-rrweb-id': wireframe.id, }, - ], + id: wireframe.id, + childNodes: [ + { + type: NodeType.Element, + tagName: 'div', + attributes: { + // relative position, fills parent + style: 'position:relative;width:100%;height:100%;', + 'data-rrweb-id': wrappingDivId, + }, + id: wrappingDivId, + childNodes: makeToggleParts(wireframe, context), + }, + ], + }, + context, } } function makeLabelledInput( wireframe: wireframeCheckBox | wireframeRadio | wireframeToggle, - theInputElement: serializedNodeWithId -): serializedNodeWithId { + theInputElement: serializedNodeWithId, + context: ConversionContext +): ConversionResult { const theLabel: serializedNodeWithId = { type: NodeType.Text, textContent: wireframe.label || '', - id: idSequence.next().value, + id: context.idSequence.next().value, } const orderedChildren = wireframe.inputType === 'toggle' ? [theLabel, theInputElement] : [theInputElement, theLabel] - const labelId = idSequence.next().value + const labelId = context.idSequence.next().value return { - type: NodeType.Element, - tagName: 'label', - attributes: { - style: makeStylesString(wireframe), - 'data-rrweb-id': labelId, + result: { + type: NodeType.Element, + tagName: 'label', + attributes: { + style: makeStylesString(wireframe), + 'data-rrweb-id': labelId, + }, + id: labelId, + childNodes: orderedChildren, }, - id: labelId, - childNodes: orderedChildren, + context, } } function makeInputElement( wireframe: wireframeInputComponent, - children: serializedNodeWithId[] -): serializedNodeWithId | null { + children: serializedNodeWithId[], + context: ConversionContext +): ConversionResult | null { if (!wireframe.inputType) { return null } if (wireframe.inputType === 'button') { - return makeButtonElement(wireframe, children) + return makeButtonElement(wireframe, children, context) } if (wireframe.inputType === 'select') { - return makeSelectElement(wireframe, children) + return makeSelectElement(wireframe, children, context) } if (wireframe.inputType === 'progress') { - return makeProgressElement(wireframe, children) + return makeProgressElement(wireframe, children, context) } - const theInputElement: serializedNodeWithId | null = + const theInputElement: ConversionResult | null = wireframe.inputType === 'toggle' - ? makeToggleElement(wireframe) + ? makeToggleElement(wireframe, context) : { - type: NodeType.Element, - tagName: 'input', - attributes: inputAttributes(wireframe), - id: wireframe.id, - childNodes: children, + result: { + type: NodeType.Element, + tagName: 'input', + attributes: inputAttributes(wireframe), + id: wireframe.id, + childNodes: children, + }, + context, } if (!theInputElement) { @@ -759,45 +858,48 @@ function makeInputElement( } if ('label' in wireframe) { - return makeLabelledInput(wireframe, theInputElement) + return makeLabelledInput(wireframe, theInputElement.result, theInputElement.context) } else { - return { - ...theInputElement, - attributes: { - ...theInputElement.attributes, - // when labelled no styles are needed, when un-labelled as here - we add the styling in. - style: makeStylesString(wireframe), - }, - } + // when labelled no styles are needed, when un-labelled as here - we add the styling in. + ;(theInputElement.result as elementNode).attributes.style = makeStylesString(wireframe) + return theInputElement } } function makeRectangleElement( wireframe: wireframeRectangle, - children: serializedNodeWithId[] -): serializedNodeWithId | null { + children: serializedNodeWithId[], + context: ConversionContext +): ConversionResult | null { return { - type: NodeType.Element, - tagName: 'div', - attributes: { - style: makeStylesString(wireframe), - 'data-rrweb-id': wireframe.id, + result: { + type: NodeType.Element, + tagName: 'div', + attributes: { + style: makeStylesString(wireframe), + 'data-rrweb-id': wireframe.id, + }, + id: wireframe.id, + childNodes: children, }, - id: wireframe.id, - childNodes: children, + context, } } function chooseConverter( wireframe: T -): (wireframe: T, children: serializedNodeWithId[], timestamp?: number, idSequence?: Generator) => serializedNodeWithId | null { +): ( + wireframe: T, + children: serializedNodeWithId[], + context: ConversionContext +) => ConversionResult | null { // in theory type is always present // but since this is coming over the wire we can't really be sure, // and so we default to div const converterType: MobileNodeType = wireframe.type || 'div' const converterMapping: Record< MobileNodeType, - (wireframe: T, children: serializedNodeWithId[]) => serializedNodeWithId | null + (wireframe: T, children: serializedNodeWithId[]) => ConversionResult | null > = { // KLUDGE: TS can't tell that the wireframe type of each function is safe based on the converter type text: makeTextElement as any, @@ -815,24 +917,41 @@ function chooseConverter( return converterMapping[converterType] } -function convertWireframe(wireframe: wireframe, timestamp?: number, idSequence?: Generator): serializedNodeWithId | null { - const children = convertWireframesFor(wireframe.childWireframes, timestamp) - const converter = chooseConverter(wireframe) - return converter?.(wireframe, children, timestamp, idSequence) || null -} - -function convertWireframesFor(wireframes: wireframe[] | undefined, timestamp?: number): serializedNodeWithId[] { - if (!wireframes) { - return [] +function convertWireframe( + wireframe: wireframe, + context: ConversionContext +): ConversionResult | null { + if (context.skippableNodes?.has(wireframe.id)) { + return null } - return wireframes.reduce((acc, wireframe) => { - const convertedEl = convertWireframe(wireframe, timestamp, idSequence) - if (convertedEl !== null) { - acc.push(convertedEl) + const children = convertWireframesFor(wireframe.childWireframes, context) + const converter = chooseConverter(wireframe) + // every wireframe comes through this converter, + // so to track which ones we want to skip, + // we can add them here + context.skippableNodes?.add(wireframe.id) + const converted = converter?.(wireframe, children.result, children.context) + return converted || null +} + +function convertWireframesFor( + wireframes: wireframe[] | undefined, + context: ConversionContext +): ConversionResult { + if (!wireframes) { + return { result: [], context } + } + + const result: serializedNodeWithId[] = [] + for (const wireframe of wireframes) { + const converted = convertWireframe(wireframe, context) + if (converted) { + result.push(converted.result) + context = converted.context } - return acc - }, [] as serializedNodeWithId[]) + } + return { result, context } } function isMobileIncrementalSnapshotEvent(x: unknown): x is MobileIncrementalSnapshotEvent { @@ -854,8 +973,8 @@ function isMobileIncrementalSnapshotEvent(x: unknown): x is MobileIncrementalSna return hasMutationSource && (hasAddedWireframe || hasUpdatedWireframe) } -function makeIncrementalAdd(add: MobileNodeMutation): addedNodeMutation[] | null { - const converted = convertWireframe(add.wireframe, undefined, idSequence) +function makeIncrementalAdd(add: MobileNodeMutation, context: ConversionContext): addedNodeMutation[] | null { + const converted = convertWireframe(add.wireframe, context) if (!converted) { return null } @@ -863,7 +982,7 @@ function makeIncrementalAdd(add: MobileNodeMutation): addedNodeMutation[] | null const addition: addedNodeMutation = { parentId: add.parentId, nextId: null, - node: converted, + node: converted.result, } const adds: addedNodeMutation[] = [] if (addition) { @@ -964,17 +1083,28 @@ export const makeIncrementalEvent = ( const adds: addedNodeMutation[] = [] const removes: removedNodeMutation[] = mobileEvent.data.removes || [] if ('adds' in mobileEvent.data && Array.isArray(mobileEvent.data.adds)) { + const addsContext = { + timestamp: mobileEvent.timestamp, + idSequence: globalIdSequence, + skippableNodes: new Set(), + } + mobileEvent.data.adds.forEach((add) => { - makeIncrementalAdd(add)?.forEach((x) => adds.push(x)) + makeIncrementalAdd(add, addsContext)?.forEach((x) => adds.push(x)) }) } if ('updates' in mobileEvent.data && Array.isArray(mobileEvent.data.updates)) { + const updatesContext = { + timestamp: mobileEvent.timestamp, + idSequence: globalIdSequence, + skippableNodes: new Set(), + } mobileEvent.data.updates.forEach((update) => { const removal = makeIncrementalRemoveForUpdate(update) if (removal) { removes.push(removal) } - makeIncrementalAdd(update)?.forEach((x) => adds.push(x)) + makeIncrementalAdd(update, updatesContext)?.forEach((x) => adds.push(x)) }) } @@ -1000,6 +1130,9 @@ export const makeFullEvent = ( timestamp: number delay?: number } => { + // we can restart the id sequence on each full snapshot + globalIdSequence = ids() + if (!('wireframes' in mobileEvent.data)) { return mobileEvent as unknown as fullSnapshotEvent & { timestamp: number @@ -1039,7 +1172,11 @@ export const makeFullEvent = ( tagName: 'body', attributes: { style: makeBodyStyles(), 'data-rrweb-id': BODY_ID }, id: BODY_ID, - childNodes: convertWireframesFor(mobileEvent.data.wireframes, mobileEvent.timestamp) || [], + childNodes: + convertWireframesFor(mobileEvent.data.wireframes, { + timestamp: mobileEvent.timestamp, + idSequence: globalIdSequence, + }).result || [], }, ], }, diff --git a/ee/frontend/mobile-replay/transformer/types.ts b/ee/frontend/mobile-replay/transformer/types.ts new file mode 100644 index 00000000000..151ea6083f2 --- /dev/null +++ b/ee/frontend/mobile-replay/transformer/types.ts @@ -0,0 +1,25 @@ +import { MobileStyles } from '../mobile.types' + +export interface ConversionResult { + result: T + context: ConversionContext +} + +export interface ConversionContext { + timestamp: number + idSequence: Generator + // in some contexts we want to be able to skip nodes that have already been processed + // for example updates are processed as a remove and then an add of the whole tree + // this means the mobile app doesn't have to store and diff the tree + // it can just send the whole thing over + // but multiple nearby updates can result in the same node being present + // in the tree multiple times + // we track which nodes have been processed to avoid adding them multiple times + skippableNodes?: Set + styleOverride?: StyleOverride +} + +// StyleOverride is defined here and not in the schema +// because these are overrides that the transformer is allowed to make +// not that clients are allowed to request +export type StyleOverride = MobileStyles & { bottom?: true } diff --git a/ee/frontend/mobile-replay/wireframeStyle.ts b/ee/frontend/mobile-replay/transformer/wireframeStyle.ts similarity index 95% rename from ee/frontend/mobile-replay/wireframeStyle.ts rename to ee/frontend/mobile-replay/transformer/wireframeStyle.ts index bbdecf4ad17..37bd94175a3 100644 --- a/ee/frontend/mobile-replay/wireframeStyle.ts +++ b/ee/frontend/mobile-replay/transformer/wireframeStyle.ts @@ -1,10 +1,6 @@ -import { MobileStyles, wireframe, wireframeProgress } from './mobile.types' +import { wireframe, wireframeProgress } from '../mobile.types' import {dataURIOrPNG} from "./transformers"; - -// StyleOverride is defined here and not in the schema -// because these are overrides that the transformer is allowed to make -// not that clients are allowed to request -export type StyleOverride = MobileStyles & { bottom?: true } +import {StyleOverride} from "./types"; function isNumber(candidate: unknown): candidate is number { return typeof candidate === 'number' diff --git a/package.json b/package.json index 6cb9023156a..c11ba38d0ca 100644 --- a/package.json +++ b/package.json @@ -319,6 +319,10 @@ "eslint -c .eslintrc.js --fix", "prettier --write" ], + "ee/frontend/**/*.{js,jsx,mjs,ts,tsx}": [ + "eslint -c .eslintrc.js --fix", + "prettier --write" + ], "plugin-server/**/*.{js,jsx,mjs,ts,tsx}": [ "pnpm --dir plugin-server exec eslint --fix", "pnpm --dir plugin-server exec prettier --write"