feat/AB#105869_EIS-allow-data-field-calculation-for-fields-coming-from-resource-as-well

[unai-reliefapp]

Description

feat: make sure that content inside span tags can be correctly formatted and sent back using the date calc feature of the html parser

Useful links

• Link to ticket

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

• Test A
• Test B

Screenshots

Compartir.pantalla.-.2024-11-18.10_06_16.1.mp4

Checklist:

( * == Mandatory )

• * I have set myself as assignee of the pull request
• * My code follows the style guidelines of this project
• * Linting does not generate new warnings
• * I have performed a self-review of my own code
• * I have put the ticket for review, adding the oort-frontend team to the list of reviewers
• * I have commented my code, particularly in hard-to-understand areas
• * I have put JSDoc comment in all required places
• * My changes generate no new warnings
• * I have included screenshots describing my changes if relevant
• * I have selected labels in the Pull Request, according to the changes with code brings
• I have made corresponding changes to the documentation ( if required )
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

More explanation

https://www.loom.com/share/05a716d61b9744faaf51fb304c21d1e5?sid=f87cf896-582a-4f76-93ae-8ceed801b145

[AntoineRelief]

@unai-reliefapp

it seems it's working in most cases, but I found some cases where it doesn't

You can test them in the DEV environment, in the Antoine - EIS application

Events page, event groups tab

returns:

the first one seems to work, but not the second one. Most cards of this view have a similar issue, only one date working fine

Event details POC

It works fine if I untick the "use layout styles" in the settings:

But it doesn't work if I let the option:

( please don't put any screenshot from these data, or, as I did, crop it so we only see it partially )

[unai-reliefapp]

@unai-reliefapp

it seems it's working in most cases, but I found some cases where it doesn't

You can test them in the DEV environment, in the Antoine - EIS application

Events page, event groups tab

returns:

the first one seems to work, but not the second one. Most cards of this view have a similar issue, only one date working fine

Event details POC

It works fine if I untick the "use layout styles" in the settings:

But it doesn't work if I let the option:

( please don't put any screenshot from these data, or, as I did, crop it so we only see it partially )

ey @AntoineRelief , is there something that I might missing on the configuration for the cases in the events group tab?
The card display is like this

And if no data available just an empty string, e.g.

About the second point, this is the regex we are using
CALC_PREFFIX(\\w+)\\(([^\\)]+)\\)CALC_SUFFIX

The point is that those content with style(e.g. background-color) have inner ) in the value until the CALC_SUFFIX, and this regex is taking all matches that does not include a closing ), so any styled content wont get captured.

My question is, is there a reason on why we dont want to capture any closing ) in between the value until the CALC_SUFFIX?
Because using this regex instead
CALC_PREFFIX(\\w+).*?\)CALC_SUFFIX
of the current one will keep same behavior(at first glance) and make those styled values work(capturing all content until the CALC_SUFFIX)

You can do test with this html

<table class="core-info" style="border-collapse: collapse; width: 100%; border-style: none;" border="none"><tbody><tr><td style="width: 40%;"><p><span style="font-weight: bold; text-align: left;">Event Id:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">2024-E000031</span></p><p><span style="font-weight: bold; text-align: left;">Date updated:</span> {{calc.date( <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">2024-08-08T12:24:03.000Z</span> ; MMMM )}} - <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">2024-08-08T12:24:03.000Z</span></p><p><span style="font-weight: bold; text-align: left;">Region:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">AM</span></p><p><span style="font-weight: bold; text-align: left;">Country:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">AG</span></p><p><span style="font-weight: bold; text-align: left;">Territory:</span>&nbsp;</p><p><span style="font-weight: bold; text-align: left;">EMS Status:</span> {{context.status_of_event_on_ems}}</p><p><span style="font-weight: bold; text-align: left;">EIS Status:</span> {{context.eis_status}}</p></td><td style="width: 60%;"><p><span style="font-weight: bold; text-align: left;">Hazard:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">SOC</span></p><p><span style="font-weight: bold; text-align: left;">Syndrome:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">SY03</span></p><p><span style="font-weight: bold; text-align: left;">Aetiology: </span><span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">Switzerland ex. Chile or Argentina </span></p><p><span style="font-weight: bold; text-align: left;">Disease:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">T40</span></p><p><span style="font-weight: bold; text-align: left;">Verification Status:</span> {{context.verification_status}}</p><p><span style="font-weight: bold; text-align: left;">Laboratory Confirmed:</span> {{context.laboratory_confirmed}}</p><p><span style="font-weight: bold; text-align: left;">IHR Assessment:</span> {{context.ihr_assessment}}</p></td></tr></tbody></table><h2><span style="color: #3598db; font-size: 14pt;"><strong>Context</strong></span></h2><p><span style="font-weight: bold; text-align: left;">Creation date: </span><span style="text-align: left;">{{context.ems_create_date}} - {{calc.date( {{context.ems_create_date}} ; MMMM yyyy )}}</span></p><p><span style="text-align: left;"><span style="font-weight: bold; text-align: left;">Creation dt: </span>{{context.ems_created_dt}} - {{calc.date( {{context.ems_created_dt}} ; MMMM yyyy )}}</span></p><p><span style="text-align: left;"><span style="font-weight: bold; text-align: left;">Initial dt: </span>{{context.initial_reported_dt}} - {{calc.date( {{context.initial_reported_dt}} ; MMMM yyyy )}}</span></p><p><span style="text-align: left;"><span style="font-weight: bold; text-align: left;">Initial dt: </span>{{context.dt_initial_report}} - {{calc.date( {{context.dt_initial_report}} ; MMMM yyyy )}}</span></p><h2><span style="color: #3598db; font-size: 14pt;"><strong>WHO IHR Contact Point</strong></span></h2><p><span style="color: #3598db; font-size: 14pt;"><strong><button class="record-editor" style="border: 0px; padding: 0px;"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pen-to-square" class="svg-inline--fa fa-pen-to-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 21px; width: 21px; line-height: 21px; font-size: 21px;"><path fill="currentColor" d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"></path></svg></button>&nbsp;</strong></span></p><div class="focal-point" style="width: 100%;"><table style="border-collapse: collapse; width: 100%; border: none;"><tbody><tr><th style="text-align: left; border: none; width: 20%;">IHR Contact Point</th><th style="text-align: left; border: none; width: 20%;">Website</th><th style="text-align: left; border: none; width: 20%;">Email</th><th style="text-align: left; border: none; width: 20%;">Telephone</th><th style="text-align: left; border: none; width: 20%;">Fax</th></tr><tr><td style="border: none; width: 20%;"><p><span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">AM</span></p></td><td style="border: none; width: 20%;"><a href="https://www.who.int/europe/home?v=welcome" target="_blank" rel="noopener">https://www.who.int/europe/home?v=welcome</a></td><td style="border: none; width: 20%;"><a href="euroihr@who.int">euroihr@who.int</a></td><td style="border: none; width: 20%;">+45 51 31 89 09</td><td style="border: none; width: 20%;">+45 45 33 70 03</td></tr></tbody></table></div>

[AntoineRelief]

@unai-reliefapp
it seems it's working in most cases, but I found some cases where it doesn't
You can test them in the DEV environment, in the Antoine - EIS application
Events page, event groups tab

returns:

the first one seems to work, but not the second one. Most cards of this view have a similar issue, only one date working fine
Event details POC
It works fine if I untick the "use layout styles" in the settings:

But it doesn't work if I let the option:

( please don't put any screenshot from these data, or, as I did, crop it so we only see it partially )

ey @AntoineRelief , is there something that I might missing on the configuration for the cases in the events group tab? The card display is like this And if no data available just an empty string, e.g.

About the second point, this is the regex we are using CALC_PREFFIX(\\w+)\\(([^\\)]+)\\)CALC_SUFFIX

The point is that those content with style(e.g. background-color) have inner ) in the value until the CALC_SUFFIX, and this regex is taking all matches that does not include a closing ), so any styled content wont get captured.

My question is, is there a reason on why we dont want to capture any closing ) in between the value until the CALC_SUFFIX? Because using this regex instead CALC_PREFFIX(\\w+).*?\)CALC_SUFFIX of the current one will keep same behavior(at first glance) and make those styled values work(capturing all content until the CALC_SUFFIX)

You can do test with this html

<table class="core-info" style="border-collapse: collapse; width: 100%; border-style: none;" border="none"><tbody><tr><td style="width: 40%;"><p><span style="font-weight: bold; text-align: left;">Event Id:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">2024-E000031</span></p><p><span style="font-weight: bold; text-align: left;">Date updated:</span> {{calc.date( <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">2024-08-08T12:24:03.000Z</span> ; MMMM )}} - <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">2024-08-08T12:24:03.000Z</span></p><p><span style="font-weight: bold; text-align: left;">Region:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">AM</span></p><p><span style="font-weight: bold; text-align: left;">Country:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">AG</span></p><p><span style="font-weight: bold; text-align: left;">Territory:</span>&nbsp;</p><p><span style="font-weight: bold; text-align: left;">EMS Status:</span> {{context.status_of_event_on_ems}}</p><p><span style="font-weight: bold; text-align: left;">EIS Status:</span> {{context.eis_status}}</p></td><td style="width: 60%;"><p><span style="font-weight: bold; text-align: left;">Hazard:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">SOC</span></p><p><span style="font-weight: bold; text-align: left;">Syndrome:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">SY03</span></p><p><span style="font-weight: bold; text-align: left;">Aetiology: </span><span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">Switzerland ex. Chile or Argentina </span></p><p><span style="font-weight: bold; text-align: left;">Disease:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">T40</span></p><p><span style="font-weight: bold; text-align: left;">Verification Status:</span> {{context.verification_status}}</p><p><span style="font-weight: bold; text-align: left;">Laboratory Confirmed:</span> {{context.laboratory_confirmed}}</p><p><span style="font-weight: bold; text-align: left;">IHR Assessment:</span> {{context.ihr_assessment}}</p></td></tr></tbody></table><h2><span style="color: #3598db; font-size: 14pt;"><strong>Context</strong></span></h2><p><span style="font-weight: bold; text-align: left;">Creation date: </span><span style="text-align: left;">{{context.ems_create_date}} - {{calc.date( {{context.ems_create_date}} ; MMMM yyyy )}}</span></p><p><span style="text-align: left;"><span style="font-weight: bold; text-align: left;">Creation dt: </span>{{context.ems_created_dt}} - {{calc.date( {{context.ems_created_dt}} ; MMMM yyyy )}}</span></p><p><span style="text-align: left;"><span style="font-weight: bold; text-align: left;">Initial dt: </span>{{context.initial_reported_dt}} - {{calc.date( {{context.initial_reported_dt}} ; MMMM yyyy )}}</span></p><p><span style="text-align: left;"><span style="font-weight: bold; text-align: left;">Initial dt: </span>{{context.dt_initial_report}} - {{calc.date( {{context.dt_initial_report}} ; MMMM yyyy )}}</span></p><h2><span style="color: #3598db; font-size: 14pt;"><strong>WHO IHR Contact Point</strong></span></h2><p><span style="color: #3598db; font-size: 14pt;"><strong><button class="record-editor" style="border: 0px; padding: 0px;"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pen-to-square" class="svg-inline--fa fa-pen-to-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 21px; width: 21px; line-height: 21px; font-size: 21px;"><path fill="currentColor" d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"></path></svg></button>&nbsp;</strong></span></p><div class="focal-point" style="width: 100%;"><table style="border-collapse: collapse; width: 100%; border: none;"><tbody><tr><th style="text-align: left; border: none; width: 20%;">IHR Contact Point</th><th style="text-align: left; border: none; width: 20%;">Website</th><th style="text-align: left; border: none; width: 20%;">Email</th><th style="text-align: left; border: none; width: 20%;">Telephone</th><th style="text-align: left; border: none; width: 20%;">Fax</th></tr><tr><td style="border: none; width: 20%;"><p><span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">AM</span></p></td><td style="border: none; width: 20%;"><a href="https://www.who.int/europe/home?v=welcome" target="_blank" rel="noopener">https://www.who.int/europe/home?v=welcome</a></td><td style="border: none; width: 20%;"><a href="euroihr@who.int">euroihr@who.int</a></td><td style="border: none; width: 20%;">+45 51 31 89 09</td><td style="border: none; width: 20%;">+45 45 33 70 03</td></tr></tbody></table></div>

@unai-reliefapp

if you're taking it from the app I shared, you shouldn't miss anything I believe

about the second point, that's a quite good question and I have absolutely no idea
perhaps check the history of changes on this line, and if none is explaining why we would do that, then go with your approach

[unai-reliefapp]

@AntoineRelief extracted from the page examples you gave me



Nested calcs

⚠️ Other calc methods do not work if they have an styling, they should have the proper span check that's implemented in the date calc in order to make them work too ⚠️

[AntoineRelief]

@unai-reliefapp

did I miss something? 😅

It doesn't work for me in all cases for summary card

[unai-reliefapp]

@unai-reliefapp

did I miss something? 😅

It doesn't work for me in all cases for summary card

Can you give me the exact application and page?
😕

[AntoineRelief]

@unai-reliefapp

I

@unai-reliefapp
it seems it's working in most cases, but I found some cases where it doesn't
You can test them in the DEV environment, in the Antoine - EIS application
Events page, event groups tab

returns:

the first one seems to work, but not the second one. Most cards of this view have a similar issue, only one date working fine
Event details POC
It works fine if I untick the "use layout styles" in the settings:

But it doesn't work if I let the option:

( please don't put any screenshot from these data, or, as I did, crop it so we only see it partially )

ey @AntoineRelief , is there something that I might missing on the configuration for the cases in the events group tab? The card display is like this And if no data available just an empty string, e.g.

About the second point, this is the regex we are using CALC_PREFFIX(\\w+)\\(([^\\)]+)\\)CALC_SUFFIX

The point is that those content with style(e.g. background-color) have inner ) in the value until the CALC_SUFFIX, and this regex is taking all matches that does not include a closing ), so any styled content wont get captured.

My question is, is there a reason on why we dont want to capture any closing ) in between the value until the CALC_SUFFIX? Because using this regex instead CALC_PREFFIX(\\w+).*?\)CALC_SUFFIX of the current one will keep same behavior(at first glance) and make those styled values work(capturing all content until the CALC_SUFFIX)

You can do test with this html

<table class="core-info" style="border-collapse: collapse; width: 100%; border-style: none;" border="none"><tbody><tr><td style="width: 40%;"><p><span style="font-weight: bold; text-align: left;">Event Id:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">2024-E000031</span></p><p><span style="font-weight: bold; text-align: left;">Date updated:</span> {{calc.date( <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">2024-08-08T12:24:03.000Z</span> ; MMMM )}} - <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">2024-08-08T12:24:03.000Z</span></p><p><span style="font-weight: bold; text-align: left;">Region:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">AM</span></p><p><span style="font-weight: bold; text-align: left;">Country:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">AG</span></p><p><span style="font-weight: bold; text-align: left;">Territory:</span>&nbsp;</p><p><span style="font-weight: bold; text-align: left;">EMS Status:</span> {{context.status_of_event_on_ems}}</p><p><span style="font-weight: bold; text-align: left;">EIS Status:</span> {{context.eis_status}}</p></td><td style="width: 60%;"><p><span style="font-weight: bold; text-align: left;">Hazard:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">SOC</span></p><p><span style="font-weight: bold; text-align: left;">Syndrome:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">SY03</span></p><p><span style="font-weight: bold; text-align: left;">Aetiology: </span><span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">Switzerland ex. Chile or Argentina </span></p><p><span style="font-weight: bold; text-align: left;">Disease:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">T40</span></p><p><span style="font-weight: bold; text-align: left;">Verification Status:</span> {{context.verification_status}}</p><p><span style="font-weight: bold; text-align: left;">Laboratory Confirmed:</span> {{context.laboratory_confirmed}}</p><p><span style="font-weight: bold; text-align: left;">IHR Assessment:</span> {{context.ihr_assessment}}</p></td></tr></tbody></table><h2><span style="color: #3598db; font-size: 14pt;"><strong>Context</strong></span></h2><p><span style="font-weight: bold; text-align: left;">Creation date: </span><span style="text-align: left;">{{context.ems_create_date}} - {{calc.date( {{context.ems_create_date}} ; MMMM yyyy )}}</span></p><p><span style="text-align: left;"><span style="font-weight: bold; text-align: left;">Creation dt: </span>{{context.ems_created_dt}} - {{calc.date( {{context.ems_created_dt}} ; MMMM yyyy )}}</span></p><p><span style="text-align: left;"><span style="font-weight: bold; text-align: left;">Initial dt: </span>{{context.initial_reported_dt}} - {{calc.date( {{context.initial_reported_dt}} ; MMMM yyyy )}}</span></p><p><span style="text-align: left;"><span style="font-weight: bold; text-align: left;">Initial dt: </span>{{context.dt_initial_report}} - {{calc.date( {{context.dt_initial_report}} ; MMMM yyyy )}}</span></p><h2><span style="color: #3598db; font-size: 14pt;"><strong>WHO IHR Contact Point</strong></span></h2><p><span style="color: #3598db; font-size: 14pt;"><strong><button class="record-editor" style="border: 0px; padding: 0px;"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pen-to-square" class="svg-inline--fa fa-pen-to-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 21px; width: 21px; line-height: 21px; font-size: 21px;"><path fill="currentColor" d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"></path></svg></button>&nbsp;</strong></span></p><div class="focal-point" style="width: 100%;"><table style="border-collapse: collapse; width: 100%; border: none;"><tbody><tr><th style="text-align: left; border: none; width: 20%;">IHR Contact Point</th><th style="text-align: left; border: none; width: 20%;">Website</th><th style="text-align: left; border: none; width: 20%;">Email</th><th style="text-align: left; border: none; width: 20%;">Telephone</th><th style="text-align: left; border: none; width: 20%;">Fax</th></tr><tr><td style="border: none; width: 20%;"><p><span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">AM</span></p></td><td style="border: none; width: 20%;"><a href="https://www.who.int/europe/home?v=welcome" target="_blank" rel="noopener">https://www.who.int/europe/home?v=welcome</a></td><td style="border: none; width: 20%;"><a href="euroihr@who.int">euroihr@who.int</a></td><td style="border: none; width: 20%;">+45 51 31 89 09</td><td style="border: none; width: 20%;">+45 45 33 70 03</td></tr></tbody></table></div>

@unai-reliefapp

I wanted to check something about that

you say:

Because using this regex instead
CALC_PREFFIX(\w+).*?)CALC_SUFFIX

but CALC_SUFFIX doesn't exist, and if I try to replace with PLACEHOLDER_SUFFIX, I get thousands of errors:
Invalid regular expression: /{{calc.(\w+).*?)}}/gm: Unmatched ')'

are you sure about this one you tested?

[unai-reliefapp]

@unai-reliefapp

I

@unai-reliefapp
it seems it's working in most cases, but I found some cases where it doesn't
You can test them in the DEV environment, in the Antoine - EIS application
Events page, event groups tab

returns:

the first one seems to work, but not the second one. Most cards of this view have a similar issue, only one date working fine
Event details POC
It works fine if I untick the "use layout styles" in the settings:

But it doesn't work if I let the option:

( please don't put any screenshot from these data, or, as I did, crop it so we only see it partially )

ey @AntoineRelief , is there something that I might missing on the configuration for the cases in the events group tab? The card display is like this And if no data available just an empty string, e.g.
About the second point, this is the regex we are using CALC_PREFFIX(\\w+)\\(([^\\)]+)\\)CALC_SUFFIX
The point is that those content with style(e.g. background-color) have inner ) in the value until the CALC_SUFFIX, and this regex is taking all matches that does not include a closing ), so any styled content wont get captured.
My question is, is there a reason on why we dont want to capture any closing ) in between the value until the CALC_SUFFIX? Because using this regex instead CALC_PREFFIX(\\w+).*?\)CALC_SUFFIX of the current one will keep same behavior(at first glance) and make those styled values work(capturing all content until the CALC_SUFFIX)
You can do test with this html

<table class="core-info" style="border-collapse: collapse; width: 100%; border-style: none;" border="none"><tbody><tr><td style="width: 40%;"><p><span style="font-weight: bold; text-align: left;">Event Id:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">2024-E000031</span></p><p><span style="font-weight: bold; text-align: left;">Date updated:</span> {{calc.date( <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">2024-08-08T12:24:03.000Z</span> ; MMMM )}} - <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">2024-08-08T12:24:03.000Z</span></p><p><span style="font-weight: bold; text-align: left;">Region:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">AM</span></p><p><span style="font-weight: bold; text-align: left;">Country:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">AG</span></p><p><span style="font-weight: bold; text-align: left;">Territory:</span>&nbsp;</p><p><span style="font-weight: bold; text-align: left;">EMS Status:</span> {{context.status_of_event_on_ems}}</p><p><span style="font-weight: bold; text-align: left;">EIS Status:</span> {{context.eis_status}}</p></td><td style="width: 60%;"><p><span style="font-weight: bold; text-align: left;">Hazard:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">SOC</span></p><p><span style="font-weight: bold; text-align: left;">Syndrome:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">SY03</span></p><p><span style="font-weight: bold; text-align: left;">Aetiology: </span><span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">Switzerland ex. Chile or Argentina </span></p><p><span style="font-weight: bold; text-align: left;">Disease:</span> <span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">T40</span></p><p><span style="font-weight: bold; text-align: left;">Verification Status:</span> {{context.verification_status}}</p><p><span style="font-weight: bold; text-align: left;">Laboratory Confirmed:</span> {{context.laboratory_confirmed}}</p><p><span style="font-weight: bold; text-align: left;">IHR Assessment:</span> {{context.ihr_assessment}}</p></td></tr></tbody></table><h2><span style="color: #3598db; font-size: 14pt;"><strong>Context</strong></span></h2><p><span style="font-weight: bold; text-align: left;">Creation date: </span><span style="text-align: left;">{{context.ems_create_date}} - {{calc.date( {{context.ems_create_date}} ; MMMM yyyy )}}</span></p><p><span style="text-align: left;"><span style="font-weight: bold; text-align: left;">Creation dt: </span>{{context.ems_created_dt}} - {{calc.date( {{context.ems_created_dt}} ; MMMM yyyy )}}</span></p><p><span style="text-align: left;"><span style="font-weight: bold; text-align: left;">Initial dt: </span>{{context.initial_reported_dt}} - {{calc.date( {{context.initial_reported_dt}} ; MMMM yyyy )}}</span></p><p><span style="text-align: left;"><span style="font-weight: bold; text-align: left;">Initial dt: </span>{{context.dt_initial_report}} - {{calc.date( {{context.dt_initial_report}} ; MMMM yyyy )}}</span></p><h2><span style="color: #3598db; font-size: 14pt;"><strong>WHO IHR Contact Point</strong></span></h2><p><span style="color: #3598db; font-size: 14pt;"><strong><button class="record-editor" style="border: 0px; padding: 0px;"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pen-to-square" class="svg-inline--fa fa-pen-to-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 21px; width: 21px; line-height: 21px; font-size: 21px;"><path fill="currentColor" d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"></path></svg></button>&nbsp;</strong></span></p><div class="focal-point" style="width: 100%;"><table style="border-collapse: collapse; width: 100%; border: none;"><tbody><tr><th style="text-align: left; border: none; width: 20%;">IHR Contact Point</th><th style="text-align: left; border: none; width: 20%;">Website</th><th style="text-align: left; border: none; width: 20%;">Email</th><th style="text-align: left; border: none; width: 20%;">Telephone</th><th style="text-align: left; border: none; width: 20%;">Fax</th></tr><tr><td style="border: none; width: 20%;"><p><span style="background-color: rgba(234, 34, 34, 1); color: rgba(252, 252, 252, 1); font-weight: bold; font-style: italic; text-decoration: underline; ">AM</span></p></td><td style="border: none; width: 20%;"><a href="https://www.who.int/europe/home?v=welcome" target="_blank" rel="noopener">https://www.who.int/europe/home?v=welcome</a></td><td style="border: none; width: 20%;"><a href="euroihr@who.int">euroihr@who.int</a></td><td style="border: none; width: 20%;">+45 51 31 89 09</td><td style="border: none; width: 20%;">+45 45 33 70 03</td></tr></tbody></table></div>

@unai-reliefapp

I wanted to check something about that

you say:

Because using this regex instead
CALC_PREFFIX(\w+).*?)CALC_SUFFIX

but CALC_SUFFIX doesn't exist, and if I try to replace with PLACEHOLDER_SUFFIX, I get thousands of errors: Invalid regular expression: /{{calc.(\w+).*?)}}/gm: Unmatched ')'

are you sure about this one you tested?

Yes, if not try the testing through the application, it worked, the previous images are taken for the last version of the branch within the applicattion.
CALC_PREFFIX im taking about about the {{calc., which i think that in regex is \{\{calc\. I would forget about the manual testing and use the app