Skip to content

Commit

Permalink
feat(chrome-devtools): add a panel to see the current value of all av…
Browse files Browse the repository at this point in the history
…ailable facts
  • Loading branch information
fpaul-1A committed Jan 22, 2025
1 parent b6b0ae6 commit 4175037
Show file tree
Hide file tree
Showing 23 changed files with 288 additions and 99 deletions.
2 changes: 1 addition & 1 deletion .yarnrc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ packageExtensions:
"@swc/types": "*"
"@typescript-eslint/rule-tester@*":
dependencies:
"@typescript-eslint/parser": ~8.19.0
"@typescript-eslint/parser": ~8.20.0
"@angular-eslint/eslint-plugin-template@*":
dependencies:
"@typescript-eslint/types": "^8.0.0"
Expand Down
18 changes: 16 additions & 2 deletions apps/chrome-devtools/src/app-devtools/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,21 @@
<li [ngbNavItem]="2">
<a ngbNavLink>Rules Engine</a>
<ng-template ngbNavContent>
<o3r-ruleset-history-pres [rulesetExecutions]="rulesetExecutions$ | async"></o3r-ruleset-history-pres>
<ul ngbNav #nav2="ngbNav" class="nav-tabs">
<li [ngbNavItem]="2.1">
<a ngbNavLink>Facts</a>
<ng-template ngbNavContent>
<o3r-facts-snapshot [facts]="facts$ | async"></o3r-facts-snapshot>
</ng-template>
</li>
<li [ngbNavItem]="2.2">
<a ngbNavLink>Ruleset execution</a>
<ng-template ngbNavContent>
<o3r-ruleset-history-pres [rulesetExecutions]="rulesetExecutions$ | async"></o3r-ruleset-history-pres>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav2"></div>
</ng-template>
</li>
<li [ngbNavItem]="3">
Expand Down Expand Up @@ -71,5 +85,5 @@
</div>
</form>
</div>
<div [ngbNavOutlet]="nav" class="mt-2 px-2"></div>
<div [ngbNavOutlet]="nav"></div>
</app-connection>
5 changes: 3 additions & 2 deletions apps/chrome-devtools/src/app-devtools/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {
AsyncPipe,
JsonPipe,
} from '@angular/common';
import {
ChangeDetectionStrategy,
Expand All @@ -27,6 +26,7 @@ import {
NgbNavModule,
} from '@ng-bootstrap/ng-bootstrap';
import {
FactsSnapshotComponent,
RulesetHistoryPresModule,
} from '@o3r/rules-engine';
import {
Expand Down Expand Up @@ -94,7 +94,7 @@ import {
ReactiveFormsModule,
DfSelectModule,
DfTooltipModule,
JsonPipe
FactsSnapshotComponent
]
})
export class AppComponent {
Expand All @@ -112,6 +112,7 @@ export class AppComponent {
});

public rulesetExecutions$ = this.rulesetHistoryService.rulesetExecutions$;
public facts$ = this.rulesetHistoryService.facts$;

constructor() {
effect(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="mb-4 d-flex gap-4 justify-content-between">
<div class="input-group">
<label class="input-group-text" for="search-styling">
<i class="mx-1 fa-search" aria-label="Search"></i>
<span class="mx-1 fa-search" aria-label="Search"></span>
</label>
<input class="form-control" formControlName="search" type="text" id="search-styling" placeholder="Search for styling variable" />
</div>
Expand Down
11 changes: 10 additions & 1 deletion apps/chrome-devtools/src/services/ruleset-history.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import type {
RulesetExecutionDebug,
} from '@o3r/rules-engine';
import {
AvailableFactsSnapshot,
rulesetReportToHistory,
} from '@o3r/rules-engine';
import {
Expand Down Expand Up @@ -41,7 +42,15 @@ export class RulesetHistoryService {
* History of ruleset executed
*/
public readonly rulesetExecutions$: Observable<RulesetExecutionDebug[]> = this.ruleEngineDebugEvents$.pipe(
map(({ events, rulesetMap }) => rulesetReportToHistory(events, rulesetMap)),
map(({ events, rulesetMap }) => rulesetReportToHistory(events.filter((e) => e.type !== 'AvailableFactsSnapshot'), rulesetMap)),
shareReplay({ bufferSize: 1, refCount: true })
);

/**
* List of all registered facts with their current value
*/
public readonly facts$: Observable<AvailableFactsSnapshot['facts']> = this.ruleEngineDebugEvents$.pipe(
map(({ events }) => events.findLast((e): e is AvailableFactsSnapshot => e.type === 'AvailableFactsSnapshot')?.facts || []),
shareReplay({ bufferSize: 1, refCount: true })
);

Expand Down
2 changes: 1 addition & 1 deletion apps/chrome-devtools/tsconfig.build.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"extends": "../../tsconfig.build",
"compilerOptions": {
"lib": ["es2022", "dom"],
"lib": ["es2023", "dom"],
"types": ["chrome"],
"outDir": "dist/",
"module": "es2022",
Expand Down
3 changes: 2 additions & 1 deletion apps/chrome-devtools/tsconfig.extension.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@
"compilerOptions": {
"mapRoot": "./src",
"incremental": true,
"lib": ["es2021", "dom"],
"lib": ["es2023", "dom"],
"types": ["chrome"],
"outDir": "dist",
"rootDir": "./src",
"module": "ES2020",
"moduleResolution": "Node",
"tsBuildInfoFile": "build/extension.tsbuildinfo",
Expand Down
2 changes: 1 addition & 1 deletion packages/@ama-sdk/schematics/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@
"@swc/helpers": "~0.5.0",
"@commitlint/cli": "^19.0.0",
"@commitlint/config-conventional": "^19.0.0",
"@typescript-eslint/eslint-plugin": "~8.19.0",
"@typescript-eslint/eslint-plugin": "~8.20.0",
"jest-junit": "~16.0.0",
"lint-staged": "^15.0.0",
"minimist": "^1.2.6",
Expand Down
6 changes: 3 additions & 3 deletions packages/@o3r/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -155,8 +155,8 @@
"@o3r/store-sync": "workspace:^",
"@stylistic/eslint-plugin": "~2.7.0",
"@types/jest": "~29.5.2",
"@typescript-eslint/eslint-plugin": "~8.19.0",
"@typescript-eslint/parser": "~8.19.0",
"@typescript-eslint/eslint-plugin": "~8.20.0",
"@typescript-eslint/parser": "~8.20.0",
"angular-eslint": "~18.4.0",
"cpy-cli": "^5.0.0",
"eslint": "~9.14.0",
Expand All @@ -175,7 +175,7 @@
"jest-preset-angular": "~14.2.0",
"jsonc-eslint-parser": "~2.4.0",
"nx": "~19.8.0",
"typescript-eslint": "~8.19.0",
"typescript-eslint": "~8.20.0",
"zone.js": "~0.14.2"
},
"engines": {
Expand Down
6 changes: 3 additions & 3 deletions packages/@o3r/eslint-config-otter/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,9 @@
"typescript": "^5.5.4"
},
"generatorDependencies": {
"@typescript-eslint/eslint-plugin": "~8.19.0",
"@typescript-eslint/parser": "~8.19.0",
"@typescript-eslint/utils": "~8.19.0",
"@typescript-eslint/eslint-plugin": "~8.20.0",
"@typescript-eslint/parser": "~8.20.0",
"@typescript-eslint/utils": "~8.20.0",
"eslint": "~9.14.0",
"eslint-plugin-jsdoc": "~50.2.0",
"eslint-plugin-unicorn": "^56.0.0"
Expand Down
2 changes: 2 additions & 0 deletions packages/@o3r/rules-engine/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"@angular-devkit/schematics": "^18.2.0",
"@angular/common": "^18.2.0",
"@angular/core": "^18.2.0",
"@angular/forms": "^18.2.0",
"@angular/platform-browser-dynamic": "^18.2.0",
"@ngrx/effects": "^18.0.0",
"@ngrx/entity": "^18.0.0",
Expand Down Expand Up @@ -97,6 +98,7 @@
"@angular/compiler": "~18.2.0",
"@angular/compiler-cli": "~18.2.0",
"@angular/core": "~18.2.0",
"@angular/forms": "~18.2.0",
"@angular/platform-browser": "~18.2.0",
"@angular/platform-browser-dynamic": "~18.2.0",
"@babel/core": "~7.26.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import {
ChangeDetectionStrategy,
Component,
computed,
input,
signal,
ViewEncapsulation,
} from '@angular/core';
import {
FormsModule,
ReactiveFormsModule,
} from '@angular/forms';
import type {
Facts,
} from '../../../engine';
import {
O3rJsonOrStringPipe,
} from '../shared/index';

@Component({
selector: 'o3r-facts-snapshot',
styleUrls: ['./facts-snapshot.style.scss'],
templateUrl: './facts-snapshot.template.html',
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
O3rJsonOrStringPipe,
FormsModule,
ReactiveFormsModule
],
encapsulation: ViewEncapsulation.None
})
export class FactsSnapshotComponent {
/**
* Full list of available facts with their current value
*/
public facts = input<{ factName: string; value: Facts }[]>([]);

/**
* Search terms
*/
public search = signal('');

/**
* Filtered list of facts using search terms
*/
public filteredFacts = computed(() => {
const search = this.search();
if (search) {
const matchString = new RegExp(search.replace(/[\s#$()*+,.?[\\\]^{|}-]/g, '\\$&'), 'i');
return this.facts().filter(({ factName, value }) =>
matchString.test(factName)
|| (typeof value === 'object'
? matchString.test(JSON.stringify(value))
: matchString.test(String(value)))
);
} else {
return this.facts();
}
});
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
@import '../styling/shared-mixin';

o3r-facts-snapshot {
.fact-name {
color: $ruleset-variable-key-color;
}

.fact-value {
color: $ruleset-variable-value-color;
}

.fact-name, .fact-value {
font-family: monospace;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<section>
@if (facts().length < 1) {
<div class="alert alert-danger m-2" role="alert">
No facts are registered.
</div>
} @else {
<div class="input-group">
<label class="input-group-text" for="search-fact">
<span class="mx-1 fa-search" aria-label="Search"></span>
</label>
<input class="form-control" [(ngModel)]="search" type="text" id="search-fact" placeholder="Search for fact name or value" />
</div>
<div class="mt-3">
List of <b>{{facts().length}}</b> registered facts
@if (facts().length > filteredFacts().length) { (<b>{{filteredFacts().length}}</b> matching the search) }
</div>
<ul>
@for (fact of filteredFacts(); track fact.factName) {
<li>
<span class="fact-name">{{fact.factName}}: </span>
<span class="fact-value">{{fact.value | o3rJsonOrString}}</span>
</li>
}
</ul>
}
</section>
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './facts-snapshot/facts-snapshot.component';
export * from './ruleset-history/ruleset-history-pres.component';
export * from './ruleset-history/ruleset-history-pres.module';
export * from './shared/index';
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
ViewEncapsulation,
} from '@angular/core';
import type {
ActionBlock,
AllBlock,
Facts,
} from '../../../engine';
Expand Down Expand Up @@ -35,4 +36,12 @@ export class RuleActionsPresComponent {
*/
@Input()
public runtimeOutputs: string[] = [];

/**
* Check if a given block is of type ActionBlock
* @param block
*/
public isActionBlock(block: AllBlock): block is ActionBlock {
return !!(block as ActionBlock).actionType;
}
}
Loading

0 comments on commit 4175037

Please sign in to comment.