44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix code highlighting and optimize category select

Browse Source 
This commit introduces a batched debounce mechanism for managing user
selection state changes. It effectively reduces unnecessary processing
during rapid script checking, preventing multiple triggers for code
compilation and UI rendering.

Key improvements include:

- Enhanced performance, especially noticeable when selecting large
  categories. This update resolves minor UI freezes experienced when
  selecting categories with numerous scripts.
- Correction of a bug where the code area only highlighted the last
  selected script when multiple scripts were chosen.

Other changes include:

- Timing functions:
  - Create a `Timing` folder for `throttle` and the new
    `batchedDebounce` functions.
  - Move these functions to the application layer from the presentation
    layer, reflecting their application-wide use.
  - Refactor existing code for improved clarity, naming consistency, and
    adherence to new naming conventions.
  - Add missing unit tests.
- `UserSelection`:
  - State modifications in `UserSelection` now utilize a singular object
    inspired by the CQRS pattern, enabling batch updates and flexible
    change configurations, thereby simplifying change management.
- Remove the `I` prefix from related interfaces to align with new coding
  standards.
- Refactor related code for better testability in isolation with
  dependency injection.
- Repository:
  - Move repository abstractions to the application layer.
  - Improve repository abstraction to combine `ReadonlyRepository` and
    `MutableRepository` interfaces.
- E2E testing:
  - Introduce E2E tests to validate the correct batch selection
    behavior.
  - Add a specialized data attribute in `TheCodeArea.vue` for improved
    testability.
  - Reorganize shared Cypress functions for a more idiomatic Cypress
    approach.
  - Improve test documentation with related information.
- `SelectedScript`:
  - Create an abstraction for simplified testability.
  - Introduce `SelectedScriptStub` in tests as a substitute for the
    actual object.
This commit is contained in:
undergroundwires
2023-11-18 22:23:27 +01:00
parent 4531645b4c
commit cb42f11b97
79 changed files with 2733 additions and 1351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/presentation/components/Code/TheCodeArea.vue
View File

@@ -3,8 +3,10 @@
v-non-collapsing
@size-changed="sizeChanged()"
>
<!-- `data-test-highlighted-range` is a test hook for assessing highlighted text range -->
<div
:id="editorId"
:data-test-highlighted-range="highlightedRange"
class="code-area"
/>
</SizeObserver>
@@ -12,7 +14,7 @@
<script lang="ts">
import {
defineComponent, onUnmounted, onMounted,
defineComponent, onUnmounted, onMounted, ref,
} from 'vue';
import { injectKey } from '@/presentation/injectionSymbols';
import { ICodeChangedEvent } from '@/application/Context/State/Code/Event/ICodeChangedEvent';
@@ -42,6 +44,8 @@ export default defineComponent({
const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
const editorId = 'codeEditor';
const highlightedRange = ref(0);
let editor: ace.Ace.Editor | undefined;
let currentMarkerId: number | undefined;
@@ -99,6 +103,7 @@ export default defineComponent({
}
editor?.session.removeMarker(currentMarkerId);
currentMarkerId = undefined;
highlightedRange.value = 0;
}
function reactToChanges(event: ICodeChangedEvent, scripts: ReadonlyArray<IScript>) {
@@ -121,6 +126,7 @@ export default defineComponent({
'code-area__highlight',
'fullLine',
);
highlightedRange.value = endRow - startRow;
}
function scrollToLine(row: number) {
@@ -133,6 +139,7 @@ export default defineComponent({
return {
editorId,
highlightedRange,
sizeChanged,
};
},

8
src/presentation/components/Scripts/Menu/Selector/SelectionTypeHandler.ts
View File

@@ -1,9 +1,9 @@
import { IScript } from '@/domain/IScript';
import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
import { RecommendationLevel } from '@/domain/RecommendationLevel';
import { scrambledEqual } from '@/application/Common/Array';
import { IReadOnlyUserSelection, IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
import { ICategoryCollection } from '@/domain/ICategoryCollection';
import { ReadonlyScriptSelection, ScriptSelection } from '@/application/Context/State/Selection/Script/ScriptSelection';
import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
export enum SelectionType {
Standard,
@@ -34,12 +34,12 @@ export function getCurrentSelectionType(context: SelectionCheckContext): Selecti
}
export interface SelectionCheckContext {
readonly selection: IReadOnlyUserSelection;
readonly selection: ReadonlyScriptSelection;
readonly collection: ICategoryCollection;
}
export interface SelectionMutationContext {
readonly selection: IUserSelection,
readonly selection: ScriptSelection,
readonly collection: ICategoryCollection,
}

4
src/presentation/components/Scripts/Menu/Selector/TheSelector.vue
View File

@@ -91,7 +91,7 @@ export default defineComponent({
const currentSelectionType = computed<SelectionType>({
get: () => getCurrentSelectionType({
selection: currentSelection.value,
selection: currentSelection.value.scripts,
collection: currentCollection.value,
}),
set: (type: SelectionType) => {
@@ -105,7 +105,7 @@ export default defineComponent({
}
modifyCurrentSelection((mutableSelection) => {
setCurrentSelectionType(type, {
selection: mutableSelection,
selection: mutableSelection.scripts,
collection: currentCollection.value,
});
});

4
src/presentation/components/Scripts/View/Cards/CardSelectionIndicator.vue
View File

@@ -38,11 +38,11 @@ export default defineComponent({
);
const isAnyChildSelected = computed<boolean>(
() => currentSelection.value.isAnySelected(currentCategory.value),
() => currentSelection.value.categories.isAnyScriptSelected(currentCategory.value),
);
const areAllChildrenSelected = computed<boolean>(
() => currentSelection.value.areAllSelected(currentCategory.value),
() => currentSelection.value.categories.areAllScriptsSelected(currentCategory.value),
);
return {

2
src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue
View File

@@ -41,7 +41,7 @@ export default defineComponent({
const isReverted = computed<boolean>({
get() {
const { selectedScripts } = currentSelection.value;
const { selectedScripts } = currentSelection.value.scripts;
return revertHandler.value.getState(selectedScripts);
},
set: (value: boolean) => {

16
src/presentation/components/Scripts/View/Tree/NodeContent/Reverter/CategoryReverter.ts
View File

@@ -1,6 +1,6 @@
import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
import { IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
import { ICategoryCollection } from '@/domain/ICategoryCollection';
import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
import { getCategoryId } from '../../TreeViewAdapter/CategoryNodeMetadataConverter';
import { IReverter } from './IReverter';
import { ScriptReverter } from './ScriptReverter';
@@ -19,8 +19,16 @@ export class CategoryReverter implements IReverter {
return this.scriptReverters.every((script) => script.getState(selectedScripts));
}
public selectWithRevertState(newState: boolean, selection: IUserSelection): void {
selection.addOrUpdateAllInCategory(this.categoryId, newState);
public selectWithRevertState(newState: boolean, selection: UserSelection): void {
selection.categories.processChanges({
changes: [{
categoryId: this.categoryId,
newStatus: {
isSelected: true,
isReverted: newState,
},
}],
});
}
}

6
src/presentation/components/Scripts/View/Tree/NodeContent/Reverter/IReverter.ts
View File

@@ -1,7 +1,7 @@
import { IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
export interface IReverter {
getState(selectedScripts: ReadonlyArray<SelectedScript>): boolean;
selectWithRevertState(newState: boolean, selection: IUserSelection): void;
selectWithRevertState(newState: boolean, selection: UserSelection): void;
}

16
src/presentation/components/Scripts/View/Tree/NodeContent/Reverter/ScriptReverter.ts
View File

@@ -1,5 +1,5 @@
import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
import { IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
import { getScriptId } from '../../TreeViewAdapter/CategoryNodeMetadataConverter';
import { IReverter } from './IReverter';
@@ -18,7 +18,15 @@ export class ScriptReverter implements IReverter {
return selectedScript.revert;
}
public selectWithRevertState(newState: boolean, selection: IUserSelection): void {
selection.addOrUpdateSelectedScript(this.scriptId, newState);
public selectWithRevertState(newState: boolean, selection: UserSelection): void {
selection.scripts.processChanges({
changes: [{
scriptId: this.scriptId,
newStatus: {
isSelected: true,
isReverted: newState,
},
}],
});
}
}

27
src/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseCollectionSelectionStateUpdater.ts
View File

@@ -16,19 +16,38 @@ export function useCollectionSelectionStateUpdater(
return;
}
if (node.state.current.checkState === TreeNodeCheckState.Checked) {
if (currentSelection.value.isSelected(node.id)) {
if (currentSelection.value.scripts.isSelected(node.id)) {
return;
}
modifyCurrentSelection((selection) => {
selection.addSelectedScript(node.id, false);
selection.scripts.processChanges({
changes: [
{
scriptId: node.id,
newStatus: {
isSelected: true,
isReverted: false,
},
},
],
});
});
}
if (node.state.current.checkState === TreeNodeCheckState.Unchecked) {
if (!currentSelection.value.isSelected(node.id)) {
if (!currentSelection.value.scripts.isSelected(node.id)) {
return;
}
modifyCurrentSelection((selection) => {
selection.removeSelectedScript(node.id);
selection.scripts.processChanges({
changes: [
{
scriptId: node.id,
newStatus: {
isSelected: false,
},
},
],
});
});
}
}

1
src/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseSelectedScriptNodeIds.ts
View File

@@ -13,6 +13,7 @@ export function useSelectedScriptNodeIds(
const selectedNodeIds = computed<readonly string[]>(() => {
return currentSelection
.value
.scripts
.selectedScripts
.map((selected) => scriptNodeIdParser(selected.script));
});

10
src/presentation/components/Shared/Hooks/UseUserSelectionState.ts
View File

@@ -1,5 +1,5 @@
import { shallowReadonly, shallowRef, triggerRef } from 'vue';
import { IReadOnlyUserSelection, IUserSelection } from '@/application/Context/State/Selection/IUserSelection';
import type { ReadonlyUserSelection, UserSelection } from '@/application/Context/State/Selection/UserSelection';
import type { useAutoUnsubscribedEvents } from './UseAutoUnsubscribedEvents';
import type { useCollectionState } from './UseCollectionState';
@@ -10,12 +10,12 @@ export function useUserSelectionState(
const { events } = autoUnsubscribedEvents;
const { onStateChange, modifyCurrentState, currentState } = collectionState;
const currentSelection = shallowRef<IReadOnlyUserSelection>(currentState.value.selection);
const currentSelection = shallowRef<ReadonlyUserSelection>(currentState.value.selection);
onStateChange((state) => {
updateSelection(state.selection);
events.unsubscribeAllAndRegister([
state.selection.changed.on(() => {
state.selection.scripts.changed.on(() => {
updateSelection(state.selection);
}),
]);
@@ -27,7 +27,7 @@ export function useUserSelectionState(
});
}
function updateSelection(newSelection: IReadOnlyUserSelection) {
function updateSelection(newSelection: ReadonlyUserSelection) {
if (currentSelection.value === newSelection) {
// Do not trust Vue tracking, the changed selection object
// reference may stay same for same collection.
@@ -44,5 +44,5 @@ export function useUserSelectionState(
}
export type SelectionModifier = (
state: IUserSelection,
state: UserSelection,
) => void;

2
src/presentation/components/Shared/SizeObserver.vue
View File

@@ -9,7 +9,7 @@ import {
defineComponent, shallowRef, onMounted, onBeforeUnmount, watch,
} from 'vue';
import { useResizeObserverPolyfill } from '@/presentation/components/Shared/Hooks/UseResizeObserverPolyfill';
import { throttle } from '@/presentation/components/Shared/Throttle';
import { throttle } from '@/application/Common/Timing/Throttle';
export default defineComponent({
emits: {

60
src/presentation/components/Shared/Throttle.ts
View File

@@ -1,60 +0,0 @@
export type CallbackType = (..._: unknown[]) => void;
export function throttle(
callback: CallbackType,
waitInMs: number,
timer: ITimer = NodeTimer,
): CallbackType {
const throttler = new Throttler(timer, waitInMs, callback);
return (...args: unknown[]) => throttler.invoke(...args);
}
// Allows aligning with both NodeJs (NodeJs.Timeout) and Window type (number)
export type Timeout = ReturnType<typeof setTimeout>;
export interface ITimer {
setTimeout: (callback: () => void, ms: number) => Timeout;
clearTimeout: (timeoutId: Timeout) => void;
dateNow(): number;
}
const NodeTimer: ITimer = {
setTimeout: (callback, ms) => setTimeout(callback, ms),
clearTimeout: (timeoutId) => clearTimeout(timeoutId),
dateNow: () => Date.now(),
};
interface IThrottler {
invoke: CallbackType;
}
class Throttler implements IThrottler {
private queuedExecutionId: Timeout | undefined;
private previouslyRun: number;
constructor(
private readonly timer: ITimer,
private readonly waitInMs: number,
private readonly callback: CallbackType,
) {
if (!waitInMs) { throw new Error('missing delay'); }
if (waitInMs < 0) { throw new Error('negative delay'); }
}
public invoke(...args: unknown[]): void {
const now = this.timer.dateNow();
if (this.queuedExecutionId !== undefined) {
this.timer.clearTimeout(this.queuedExecutionId);
this.queuedExecutionId = undefined;
}
if (!this.previouslyRun || (now - this.previouslyRun >= this.waitInMs)) {
this.callback(...args);
this.previouslyRun = now;
} else {
const nextCall = () => this.invoke(...args);
const nextCallDelayInMs = this.waitInMs - (now - this.previouslyRun);
this.queuedExecutionId = this.timer.setTimeout(nextCall, nextCallDelayInMs);
}
}
}