I'm trying to set a temporary state in an event script based on the outcome of a transformer, but it appears that the transformer returns a result based on last call made to it first and only then runs it. However, I need the transformer to run based on current data (effectively behave as a blocking call).
I have the following 'Run script' event for a select option on change:
const range = timeframeRangeFromPreset.value;
console.log({ range })
currentTimeframeRange.setValue({ start: range[0], end: range[1] });
timeframeCustom.setRange(range);
console.log('Script done');
... and a timeframeRangeFromPreset transformer that essentially looks at a bunch of timeframePreset.value possibilities and returns a start/end date range array...
const preset = {{ timeframePreset.value }};
console.log({preset});
const daysAgo = days => moment().subtract(days, 'day').format('YYYY-MM-DD');
const daysAgoRange = (start, end) => [daysAgo(start), daysAgo(end)];
if(preset === 'yesterday') return daysAgoRange(1, 1);
if(preset === 'last 7 days') return daysAgoRange(8, 1);
// Fallback
return [ {{ firstReportDate.value }}, {{ lastReportDate.value }}];
The console seems to indicate that the script completed before ther transformer did, due to range preceeding preset:
I've tried putting the script into an async wrapper and prefixing things with await, but that didn't seem to help.
For context, I have a two part UI with a start/end date date picker and a select with a set of preset date ranges ('yesterday', 'last 7 days' etc) and I'd like to use a temporary state to keep the two in sync.
Everything worked fine when I used individual events for each select option, but this seemed clunky and I wanted to abstract this away into a single place and event.
Even if I set this up via 'Control component' and 'Set range', it still returns me the value from the last drop down menu change and not the current one, suggesting that it's immediately returning the cached previous data and then running an update under ther hood.
