Skip to content

New feature : style-based uncertainty bar visualization for components (DSL and WYSIWYG) #310

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
formicoidea wants to merge 2 commits into
base: main
Choose a base branch
from
Open

New feature : style-based uncertainty bar visualization for components (DSL and WYSIWYG) #310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
893e024
basic uncertainty range for the component
formicoidea Apr 11, 2026
5924486
uncertainty DSL add to component
formicoidea Apr 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 115 additions & 0 deletions frontend/src/__tests__/GivenConverter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,19 @@ describe('Convert test suite', function () {
expect(result[e.container][0].name).toEqual('Customer');
expect(result[e.container][0].visibility).toEqual(1);
expect(result[e.container][0].maturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyLowerMaturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyUpperMaturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyLowerOffsetMaturity).toEqual(0);
expect(result[e.container][0].uncertaintyUpperOffsetMaturity).toEqual(0);

expect(result[e.container][1].id).toEqual(2);
expect(result[e.container][1].name).toEqual('Customer2');
expect(result[e.container][1].visibility).toEqual(0);
expect(result[e.container][1].maturity).toEqual(0.1);
expect(result[e.container][1].uncertaintyLowerMaturity).toEqual(0.1);
expect(result[e.container][1].uncertaintyUpperMaturity).toEqual(0.1);
expect(result[e.container][1].uncertaintyLowerOffsetMaturity).toEqual(0);
expect(result[e.container][1].uncertaintyUpperOffsetMaturity).toEqual(0);
});

test.each(genericMapComponents)('should create map component with inertia tag set to true', e => {
Expand All @@ -47,6 +55,113 @@ describe('Convert test suite', function () {
expect(result[e.container][0].visibility).toEqual(1);
expect(result[e.container][0].maturity).toEqual(0.4);
expect(result[e.container][0].inertia).toEqual(true);
expect(result[e.container][0].uncertaintyLowerMaturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyUpperMaturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyLowerOffsetMaturity).toEqual(0);
expect(result[e.container][0].uncertaintyUpperOffsetMaturity).toEqual(0);
});

test.each(genericMapComponents)('should parse uncertainty bounds as absolute maturity boundaries', e => {
let actual = `${e.keyword} Customer [1, 0.4] uncertainty [0.25, 0.75]\n`;

let obj = new Converter(mockContextValue);
let result = obj.parse(actual);

expect(result[e.container][0].maturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyLowerMaturity).toEqual(0.25);
expect(result[e.container][0].uncertaintyUpperMaturity).toEqual(0.75);
expect(result[e.container][0].uncertaintyLowerOffsetMaturity).toBeCloseTo(-0.15, 10);
expect(result[e.container][0].uncertaintyUpperOffsetMaturity).toBeCloseTo(0.35, 10);
});

test.each(genericMapComponents)('should preserve uncertainty with inertia and decorators on one component line', e => {
let actual = `${e.keyword} Customer [1, 0.4] uncertainty [0.2, 0.8] inertia (buy) label [7, -3]\n`;

let obj = new Converter(mockContextValue);
let result = obj.parse(actual);

expect(result[e.container][0].uncertaintyLowerMaturity).toEqual(0.2);
expect(result[e.container][0].uncertaintyUpperMaturity).toEqual(0.8);
expect(result[e.container][0].uncertaintyLowerOffsetMaturity).toBeCloseTo(-0.2, 10);
expect(result[e.container][0].uncertaintyUpperOffsetMaturity).toBeCloseTo(0.4, 10);
expect(result[e.container][0].inertia).toEqual(true);
expect(result[e.container][0].decorators.buy).toEqual(true);
expect(result[e.container][0].label).toEqual({x: 7, y: -3});
});

test.each(genericMapComponents)('should parse one-sided uncertainty with empty lower bound', e => {
let actual = `${e.keyword} Customer [1, 0.4] uncertainty [, 0.7]\n`;

let obj = new Converter(mockContextValue);
let result = obj.parse(actual);

expect(result[e.container][0].maturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyLowerMaturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyUpperMaturity).toEqual(0.7);
expect(result[e.container][0].uncertaintyLowerOffsetMaturity).toBeCloseTo(0, 10);
expect(result[e.container][0].uncertaintyUpperOffsetMaturity).toBeCloseTo(0.3, 10);
});

test.each(genericMapComponents)('should parse one-sided uncertainty with relative upper bound', e => {
let actual = `${e.keyword} Customer [1, 0.4] uncertainty [,+0.2]\n`;

let obj = new Converter(mockContextValue);
let result = obj.parse(actual);

expect(result[e.container][0].maturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyLowerMaturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyUpperMaturity).toBeCloseTo(0.6, 10);
expect(result[e.container][0].uncertaintyLowerOffsetMaturity).toBeCloseTo(0, 10);
expect(result[e.container][0].uncertaintyUpperOffsetMaturity).toBeCloseTo(0.2, 10);
});

test.each(genericMapComponents)('should parse one-sided uncertainty with relative lower bound', e => {
let actual = `${e.keyword} Customer [1, 0.4] uncertainty [-0.15, ]\n`;

let obj = new Converter(mockContextValue);
let result = obj.parse(actual);

expect(result[e.container][0].maturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyLowerMaturity).toBeCloseTo(0.25, 10);
expect(result[e.container][0].uncertaintyUpperMaturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyLowerOffsetMaturity).toBeCloseTo(-0.15, 10);
expect(result[e.container][0].uncertaintyUpperOffsetMaturity).toBeCloseTo(0, 10);
});

test.each(genericMapComponents)('should parse readable right uncertainty syntax', e => {
let actual = `${e.keyword} Customer [1, 0.4] uncertainty right +0.2\n`;

let obj = new Converter(mockContextValue);
let result = obj.parse(actual);

expect(result[e.container][0].maturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyLowerMaturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyUpperMaturity).toBeCloseTo(0.6, 10);
expect(result[e.container][0].uncertaintyLowerOffsetMaturity).toBeCloseTo(0, 10);
expect(result[e.container][0].uncertaintyUpperOffsetMaturity).toBeCloseTo(0.2, 10);
});

test.each(genericMapComponents)('should parse readable left uncertainty syntax', e => {
let actual = `${e.keyword} Customer [1, 0.4] uncertainty left -0.1\n`;

let obj = new Converter(mockContextValue);
let result = obj.parse(actual);

expect(result[e.container][0].maturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyLowerMaturity).toBeCloseTo(0.3, 10);
expect(result[e.container][0].uncertaintyUpperMaturity).toEqual(0.4);
expect(result[e.container][0].uncertaintyLowerOffsetMaturity).toBeCloseTo(-0.1, 10);
expect(result[e.container][0].uncertaintyUpperOffsetMaturity).toBeCloseTo(0, 10);
});

test.each(genericMapComponents)('should prioritize readable side syntax over bracket syntax when both are present', e => {
let actual = `${e.keyword} Customer [1, 0.4] uncertainty left -0.1 uncertainty [0.0, 1.0]\n`;

let obj = new Converter(mockContextValue);
let result = obj.parse(actual);

expect(result[e.container][0].uncertaintyLowerMaturity).toBeCloseTo(0.3, 10);
expect(result[e.container][0].uncertaintyUpperMaturity).toEqual(0.4);
});

test('should create links from string', function () {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/__tests__/GoldenMasterConverterOutput.txt
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion frontend/src/__tests__/GoldenMasterConverterOutput_new.txt
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion frontend/src/__tests__/GoldenMasterGetNoneEvolvedOrEvolvingElements.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
[{"maturity":0.1,"visibility":0.9,"label":{"x":5,"y":-10},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":0,"pipeline":false,"id":5,"name":"FooWithNoCoords","type":"component","line":5,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.23,"visibility":0.91,"label":{"x":15,"y":4},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":0,"pipeline":false,"id":6,"name":"FooWithCoords","type":"component","line":6,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.09,"visibility":0.7,"label":{"x":5,"y":-20},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":2,"pipeline":false,"id":10,"name":"BuildComponent","type":"component","line":10,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":true,"outsource":false}},{"maturity":0.09,"visibility":0.59,"label":{"x":5,"y":-20},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":2,"pipeline":false,"id":12,"name":"BuyComponent","type":"component","line":12,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":true,"build":false,"outsource":false}},{"maturity":0.09,"visibility":0.51,"label":{"x":37,"y":-23},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":2,"pipeline":false,"id":14,"name":"OutsourceComponent","type":"component","line":14,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":true}},{"maturity":0.1,"visibility":0.9,"label":{"x":15,"y":-30},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":3,"pipeline":false,"id":39,"name":"EcoSystemNoCoords (ecosystem)","type":"component","line":39,"evolveMaturity":null,"decorators":{"ecosystem":true,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.9,"visibility":0.1,"label":{"x":-9,"y":-41},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":3,"pipeline":false,"id":40,"name":"EcoSystemWithCoords","type":"component","line":40,"evolveMaturity":null,"decorators":{"ecosystem":true,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.1,"visibility":0.9,"label":{"x":10,"y":-20},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":2,"pipeline":false,"id":44,"name":"MarketNoCoords (market)","type":"component","line":44,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":true,"buy":false,"build":false,"outsource":false}},{"maturity":0.9,"visibility":0.3,"label":{"x":-21,"y":18},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":2,"pipeline":false,"id":45,"name":"MarketWithCoords","type":"component","line":45,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":true,"buy":false,"build":false,"outsource":false}},{"maturity":0.22,"visibility":0.2,"label":{"x":-97,"y":-9},"evolving":false,"evolved":false,"inertia":true,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":0,"pipeline":false,"id":54,"name":"InertiaComponent","type":"component","line":54,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.22,"visibility":0.15,"label":{"x":-74,"y":-18},"evolving":false,"evolved":false,"inertia":true,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":0,"pipeline":false,"id":55,"name":"Inertia Alternative","type":"component","line":55,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.32,"visibility":0.73,"label":{"x":13,"y":-10},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":0,"pipeline":true,"id":59,"name":"foo","type":"component","line":59,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.67,"visibility":0.21,"label":{"x":11,"y":-13},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":0,"pipeline":true,"id":64,"name":"Power","type":"component","line":64,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.5,"visibility":0.83,"label":{"x":5,"y":-10},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":0,"pipeline":false,"id":75,"name":"Website","type":"submap","line":75,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":false},"url":"submapUrl"}]
[{"maturity":0.1,"visibility":0.9,"uncertaintyLowerMaturity":0.1,"uncertaintyUpperMaturity":0.1,"uncertaintyLowerOffsetMaturity":0,"uncertaintyUpperOffsetMaturity":0,"label":{"x":5,"y":-10},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":0,"pipeline":false,"id":5,"name":"FooWithNoCoords","type":"component","line":5,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.23,"visibility":0.91,"uncertaintyLowerMaturity":0.23,"uncertaintyUpperMaturity":0.23,"uncertaintyLowerOffsetMaturity":0,"uncertaintyUpperOffsetMaturity":0,"label":{"x":15,"y":4},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":0,"pipeline":false,"id":6,"name":"FooWithCoords","type":"component","line":6,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.09,"visibility":0.7,"uncertaintyLowerMaturity":0.09,"uncertaintyUpperMaturity":0.09,"uncertaintyLowerOffsetMaturity":0,"uncertaintyUpperOffsetMaturity":0,"label":{"x":5,"y":-20},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":2,"pipeline":false,"id":10,"name":"BuildComponent","type":"component","line":10,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":true,"outsource":false}},{"maturity":0.09,"visibility":0.59,"uncertaintyLowerMaturity":0.09,"uncertaintyUpperMaturity":0.09,"uncertaintyLowerOffsetMaturity":0,"uncertaintyUpperOffsetMaturity":0,"label":{"x":5,"y":-20},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":2,"pipeline":false,"id":12,"name":"BuyComponent","type":"component","line":12,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":true,"build":false,"outsource":false}},{"maturity":0.09,"visibility":0.51,"uncertaintyLowerMaturity":0.09,"uncertaintyUpperMaturity":0.09,"uncertaintyLowerOffsetMaturity":0,"uncertaintyUpperOffsetMaturity":0,"label":{"x":37,"y":-23},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":2,"pipeline":false,"id":14,"name":"OutsourceComponent","type":"component","line":14,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":true}},{"maturity":0.1,"visibility":0.9,"uncertaintyLowerMaturity":0.1,"uncertaintyUpperMaturity":0.1,"uncertaintyLowerOffsetMaturity":0,"uncertaintyUpperOffsetMaturity":0,"label":{"x":15,"y":-30},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":3,"pipeline":false,"id":39,"name":"EcoSystemNoCoords (ecosystem)","type":"component","line":39,"evolveMaturity":null,"decorators":{"ecosystem":true,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.9,"visibility":0.1,"uncertaintyLowerMaturity":0.9,"uncertaintyUpperMaturity":0.9,"uncertaintyLowerOffsetMaturity":0,"uncertaintyUpperOffsetMaturity":0,"label":{"x":-9,"y":-41},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":3,"pipeline":false,"id":40,"name":"EcoSystemWithCoords","type":"component","line":40,"evolveMaturity":null,"decorators":{"ecosystem":true,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.1,"visibility":0.9,"uncertaintyLowerMaturity":0.1,"uncertaintyUpperMaturity":0.1,"uncertaintyLowerOffsetMaturity":0,"uncertaintyUpperOffsetMaturity":0,"label":{"x":10,"y":-20},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":2,"pipeline":false,"id":44,"name":"MarketNoCoords (market)","type":"component","line":44,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":true,"buy":false,"build":false,"outsource":false}},{"maturity":0.9,"visibility":0.3,"uncertaintyLowerMaturity":0.9,"uncertaintyUpperMaturity":0.9,"uncertaintyLowerOffsetMaturity":0,"uncertaintyUpperOffsetMaturity":0,"label":{"x":-21,"y":18},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":2,"pipeline":false,"id":45,"name":"MarketWithCoords","type":"component","line":45,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":true,"buy":false,"build":false,"outsource":false}},{"maturity":0.22,"visibility":0.2,"uncertaintyLowerMaturity":0.22,"uncertaintyUpperMaturity":0.22,"uncertaintyLowerOffsetMaturity":0,"uncertaintyUpperOffsetMaturity":0,"label":{"x":-97,"y":-9},"evolving":false,"evolved":false,"inertia":true,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":0,"pipeline":false,"id":54,"name":"InertiaComponent","type":"component","line":54,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.22,"visibility":0.15,"uncertaintyLowerMaturity":0.22,"uncertaintyUpperMaturity":0.22,"uncertaintyLowerOffsetMaturity":0,"uncertaintyUpperOffsetMaturity":0,"label":{"x":-74,"y":-18},"evolving":false,"evolved":false,"inertia":true,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":0,"pipeline":false,"id":55,"name":"Inertia Alternative","type":"component","line":55,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.32,"visibility":0.73,"uncertaintyLowerMaturity":0.32,"uncertaintyUpperMaturity":0.32,"uncertaintyLowerOffsetMaturity":0,"uncertaintyUpperOffsetMaturity":0,"label":{"x":13,"y":-10},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":0,"pipeline":true,"id":59,"name":"foo","type":"component","line":59,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.67,"visibility":0.21,"uncertaintyLowerMaturity":0.67,"uncertaintyUpperMaturity":0.67,"uncertaintyLowerOffsetMaturity":0,"uncertaintyUpperOffsetMaturity":0,"label":{"x":11,"y":-13},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":0,"pipeline":true,"id":64,"name":"Power","type":"component","line":64,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":false}},{"maturity":0.5,"visibility":0.83,"uncertaintyLowerMaturity":0.5,"uncertaintyUpperMaturity":0.5,"uncertaintyLowerOffsetMaturity":0,"uncertaintyUpperOffsetMaturity":0,"label":{"x":5,"y":-10},"evolving":false,"evolved":false,"inertia":false,"pseudoComponent":false,"offsetY":0,"increaseLabelSpacing":0,"pipeline":false,"id":75,"name":"Website","type":"submap","line":75,"evolveMaturity":null,"decorators":{"ecosystem":false,"market":false,"buy":false,"build":false,"outsource":false},"url":"submapUrl"}]
Loading