From e2fa35abf90303a7223d1f89ad4beb241b9d6639 Mon Sep 17 00:00:00 2001 From: Evan Ping Date: Tue, 12 Nov 2024 23:59:57 -0500 Subject: [PATCH 1/6] test templates 1,2,3 --- @empirica-mocks/core/mocks.js | 38 +++++- src/app/editor/components/EditElement.tsx | 22 +++- src/app/editor/components/ElementCard.tsx | 38 ++++-- src/app/editor/components/StageCard.tsx | 140 +++++++++++++--------- src/app/editor/components/Timeline.tsx | 76 +++++++----- 5 files changed, 209 insertions(+), 105 deletions(-) diff --git a/@empirica-mocks/core/mocks.js b/@empirica-mocks/core/mocks.js index 148a396..40cd6fc 100644 --- a/@empirica-mocks/core/mocks.js +++ b/@empirica-mocks/core/mocks.js @@ -80,7 +80,36 @@ export function useStage() { //const treatmentString = localStorage.getItem("treatment"); //const treatment = JSON.parse(treatmentString); + var tempStage; // for template stages + const stageTemplateName = treatment.treatments[0]?.gameStages[currentStageIndex]?.template || ""; + var fields = treatment.treatments[0]?.gameStages[currentStageIndex]?.fields || []; + if (stageTemplateName !== "") { + tempStage = templatesMap.get(stageTemplateName)[0] + } + //console.log("fields", fields) + + //logic to fill in ${} props + const variablePattern = /\${([^}]+)}/; + tempStage.elements.forEach(element => { + Object.keys(element).forEach(key => { + const value = element[key]; + + if (typeof value === "string" && variablePattern.test(value)) { + const match = value.match(variablePattern); + if (match) { + console.log("replaced " + match[1] + " with " + fields[match[1]]); + element[key] = fields[match[1]]; + } + } + }); + }); + + if (varName === "elements") { + if (tempStage) { + return tempStage.elements; + } + var elements = treatment.treatments[0]?.gameStages[currentStageIndex]?.elements elements = elements.flatMap((element) => { if (element.template) { @@ -88,12 +117,19 @@ export function useStage() { } return [element]; }); - console.log("revised elements", elements) return elements; } else if (varName === "discussion") { + if (tempStage) { + return tempStage.discussion; + } + return treatment.treatments[0]?.gameStages[currentStageIndex]?.discussion } else if (varName === "name") { + if (tempStage) { + return tempStage.name; + } return treatment.treatments[0]?.gameStages[currentStageIndex]?.name + } else if (varName === "index") { return currentStageIndex } diff --git a/src/app/editor/components/EditElement.tsx b/src/app/editor/components/EditElement.tsx index 9f9c6e3..bdce30e 100644 --- a/src/app/editor/components/EditElement.tsx +++ b/src/app/editor/components/EditElement.tsx @@ -29,6 +29,9 @@ export function EditElement({ setTemplatesMap, } = useContext(StageContext) + const stageTemplateName = + treatment.treatments[0]?.gameStages[currentStageIndex]?.template || '' + const { register, watch, @@ -37,12 +40,19 @@ export function EditElement({ formState: { errors }, } = useForm({ defaultValues: { - name: - treatment?.treatments[0].gameStages[stageIndex]?.elements[elementIndex] - ?.name || '', - selectedOption: - treatment?.treatments[0].gameStages[stageIndex]?.elements[elementIndex] - ?.type || 'Pick one', + // WEIRD BUG WITH ELEMENTINDEX NOT SURE WHY + name: '', + // stageTemplateName == "" + // ? treatment?.treatments[0].gameStages[stageIndex]?.elements[ + // elementIndex + // ]?.name || '' + // : '', + selectedOption: 'Pick one', + // stageTemplateName == "" + // ? treatment?.treatments[0].gameStages[stageIndex]?.elements[ + // elementIndex + // ]?.type || 'Pick one' + // : 'Pick one', file: '', url: '', params: [], diff --git a/src/app/editor/components/ElementCard.tsx b/src/app/editor/components/ElementCard.tsx index 371258a..d483ddc 100644 --- a/src/app/editor/components/ElementCard.tsx +++ b/src/app/editor/components/ElementCard.tsx @@ -1,4 +1,4 @@ -import React, { useState, useContext } from 'react' +import React, { useState, useContext, useEffect } from 'react' import { Modal } from './Modal' import { EditElement } from './EditElement' import { TreatmentType } from '../../../../deliberation-empirica/server/src/preFlight/validateTreatmentFile' @@ -12,6 +12,7 @@ export function ElementCard({ stageIndex, elementIndex, elementOptions, + isTemplate, }: { element: any scale: number @@ -20,10 +21,18 @@ export function ElementCard({ stageIndex: number elementIndex: number elementOptions: any + isTemplate: boolean }) { const startTime = element.displayTime || 0 const endTime = element.hideTime || stageDuration const [modalOpen, setModalOpen] = useState(false) + const [isElementTemplate, setIsElementTemplate] = useState(false) + + useEffect(() => { + if (element.template) { + setIsElementTemplate(true) + } + }, [element]) const { currentStageIndex, @@ -51,18 +60,21 @@ export function ElementCard({

))} - + + {!isElementTemplate && !isTemplate && ( + + )} diff --git a/src/app/editor/components/StageCard.tsx b/src/app/editor/components/StageCard.tsx index 262b734..55e432c 100644 --- a/src/app/editor/components/StageCard.tsx +++ b/src/app/editor/components/StageCard.tsx @@ -13,6 +13,7 @@ import { setCurrentStageIndex } from './utils' import { useStage } from '../../../../@empirica-mocks/core/mocks' import { StageContext } from '../stageContext.jsx' import { Droppable, Draggable, DragDropContext } from '@hello-pangea/dnd' +import { i } from 'node_modules/@empirica/core/dist/context-302225e8' export function StageCard({ title, @@ -22,6 +23,7 @@ export function StageCard({ sequence, stageIndex, setRenderPanelStage, + isTemplate, }: { title: string elements: any[] @@ -30,6 +32,7 @@ export function StageCard({ sequence: string stageIndex: number setRenderPanelStage: any + isTemplate: boolean }) { const { currentStageIndex, @@ -119,20 +122,22 @@ export function StageCard({ >

{title}

- + {!isTemplate && ( + + )} @@ -152,32 +157,49 @@ export function StageCard({ {...provided.droppableProps} > {elements !== undefined && - elements.map((element, index) => ( - - {(provided) => ( -
- -
- )} - - ))} + elements.map((element, index) => + isTemplate ? ( +
+ +
+ ) : ( + + {(provided) => ( +
+ +
+ )} + + ) + )} {provided.placeholder}
)} @@ -185,25 +207,27 @@ export function StageCard({ {/* Add Element Button*/} -
- + {!isTemplate && ( +
+ - - - -
+ + + +
+ )} ) } diff --git a/src/app/editor/components/Timeline.tsx b/src/app/editor/components/Timeline.tsx index 497c336..d91094f 100644 --- a/src/app/editor/components/Timeline.tsx +++ b/src/app/editor/components/Timeline.tsx @@ -103,33 +103,55 @@ export default function Timeline({ ref={provided.innerRef} className="flex flex-row gap-x-1" > - {treatment?.treatments[0]?.gameStages?.map( - (stage: any, index: any) => ( - - {(provided) => ( -
- -
- )} - - ) - )} + {treatment?.treatments.length > 0 && + treatment?.treatments[0]?.gameStages?.map( + (stage: any, index: any) => ( + + {(provided) => ( +
+ {stage.name && ( + + )} + {stage.template && ( + + )} +
+ )} + + ) + )} {provided.placeholder} )} From 9412e7cc9287542bfb48df63f6b3f9998abedb5e Mon Sep 17 00:00:00 2001 From: Evan Ping Date: Tue, 19 Nov 2024 15:00:29 -0500 Subject: [PATCH 2/6] elementIndex bug fix --- @empirica-mocks/core/mocks.js | 35 ++++++++++++----------- cypress/fixtures/testTemplates3.yaml | 4 +-- src/app/editor/components/EditElement.tsx | 30 +++++++++++-------- 3 files changed, 38 insertions(+), 31 deletions(-) diff --git a/@empirica-mocks/core/mocks.js b/@empirica-mocks/core/mocks.js index 40cd6fc..165c17a 100644 --- a/@empirica-mocks/core/mocks.js +++ b/@empirica-mocks/core/mocks.js @@ -80,29 +80,32 @@ export function useStage() { //const treatmentString = localStorage.getItem("treatment"); //const treatment = JSON.parse(treatmentString); - var tempStage; // for template stages + var tempStage = null; // for template stages const stageTemplateName = treatment.treatments[0]?.gameStages[currentStageIndex]?.template || ""; var fields = treatment.treatments[0]?.gameStages[currentStageIndex]?.fields || []; if (stageTemplateName !== "") { tempStage = templatesMap.get(stageTemplateName)[0] } - //console.log("fields", fields) + console.log("tempStage", tempStage); //logic to fill in ${} props + // move logic outside get() const variablePattern = /\${([^}]+)}/; - tempStage.elements.forEach(element => { - Object.keys(element).forEach(key => { - const value = element[key]; - - if (typeof value === "string" && variablePattern.test(value)) { - const match = value.match(variablePattern); - if (match) { - console.log("replaced " + match[1] + " with " + fields[match[1]]); - element[key] = fields[match[1]]; + {tempStage && + tempStage.elements.forEach(element => { + Object.keys(element).forEach(key => { + const value = element[key]; + + if (typeof value === "string" && variablePattern.test(value)) { + const match = value.match(variablePattern); + if (match) { + console.log("replaced " + match[1] + " with " + fields[match[1]]); + element[key] = fields[match[1]]; + } } - } + }); }); - }); + } if (varName === "elements") { @@ -110,7 +113,7 @@ export function useStage() { return tempStage.elements; } - var elements = treatment.treatments[0]?.gameStages[currentStageIndex]?.elements + var elements = treatment.treatments[0]?.gameStages[currentStageIndex]?.elements; elements = elements.flatMap((element) => { if (element.template) { return templatesMap.get(element.template); @@ -120,10 +123,10 @@ export function useStage() { return elements; } else if (varName === "discussion") { if (tempStage) { - return tempStage.discussion; + return tempStage.discussion || []; } - return treatment.treatments[0]?.gameStages[currentStageIndex]?.discussion + return treatment.treatments[0]?.gameStages[currentStageIndex]?.discussion || []; } else if (varName === "name") { if (tempStage) { return tempStage.name; diff --git a/cypress/fixtures/testTemplates3.yaml b/cypress/fixtures/testTemplates3.yaml index ccbe19c..be6da4d 100644 --- a/cypress/fixtures/testTemplates3.yaml +++ b/cypress/fixtures/testTemplates3.yaml @@ -7,8 +7,7 @@ templates: - type: prompt file: projects/example/multipleChoiceColors.md - type: submitButton - buttonText: ${submitButtonText} - + buttonText: treatments: - name: simple template test @@ -17,4 +16,3 @@ treatments: - template: testGameStagesTemplate fields: submitButtonText: TestButtonTextProceed - diff --git a/src/app/editor/components/EditElement.tsx b/src/app/editor/components/EditElement.tsx index bdce30e..9c3bfc8 100644 --- a/src/app/editor/components/EditElement.tsx +++ b/src/app/editor/components/EditElement.tsx @@ -32,6 +32,10 @@ export function EditElement({ const stageTemplateName = treatment.treatments[0]?.gameStages[currentStageIndex]?.template || '' + console.log("stageTemplateName == ''", stageTemplateName == '') + console.log('stageIndex', stageIndex) + console.log('elementIndex', elementIndex) + const { register, watch, @@ -41,18 +45,20 @@ export function EditElement({ } = useForm({ defaultValues: { // WEIRD BUG WITH ELEMENTINDEX NOT SURE WHY - name: '', - // stageTemplateName == "" - // ? treatment?.treatments[0].gameStages[stageIndex]?.elements[ - // elementIndex - // ]?.name || '' - // : '', - selectedOption: 'Pick one', - // stageTemplateName == "" - // ? treatment?.treatments[0].gameStages[stageIndex]?.elements[ - // elementIndex - // ]?.type || 'Pick one' - // : 'Pick one', + //'', + name: + stageTemplateName == '' + ? treatment?.treatments[0].gameStages[stageIndex]?.elements?.[ + elementIndex + ]?.name || '' + : '', + //'Pick one', + selectedOption: + stageTemplateName == '' + ? treatment?.treatments[0].gameStages[stageIndex]?.elements?.[ + elementIndex + ]?.type || 'Pick one' + : 'Pick one', file: '', url: '', params: [], From 16da09ea11a1a12f7c5770112a63f955a708c807 Mon Sep 17 00:00:00 2001 From: Evan Ping Date: Wed, 20 Nov 2024 10:30:06 -0500 Subject: [PATCH 3/6] fix obj bug --- src/app/editor/components/Timeline.tsx | 62 +++++++++++++------------- 1 file changed, 32 insertions(+), 30 deletions(-) diff --git a/src/app/editor/components/Timeline.tsx b/src/app/editor/components/Timeline.tsx index af44148..f291297 100644 --- a/src/app/editor/components/Timeline.tsx +++ b/src/app/editor/components/Timeline.tsx @@ -179,36 +179,38 @@ export default function Timeline({ {...provided.draggableProps} {...provided.dragHandleProps} > - {stage.name && ( - - )} - {stage.template && ( - - )} + {obj.stage.name && ( + + )} + {obj.stage.template && ( + + )} )} From a5d7a7476eb7bb86b413899896c9ed782b55a33a Mon Sep 17 00:00:00 2001 From: Evan Ping Date: Tue, 3 Dec 2024 22:47:10 -0500 Subject: [PATCH 4/6] conditional rendering for input reference and exists comparator --- @empirica-mocks/core/mocks.js | 33 +++++++++++++++++++++++ cypress/fixtures/testTemplates3.yaml | 2 +- src/app/editor/components/ElementCard.tsx | 2 +- 3 files changed, 35 insertions(+), 2 deletions(-) diff --git a/@empirica-mocks/core/mocks.js b/@empirica-mocks/core/mocks.js index 165c17a..1489fcb 100644 --- a/@empirica-mocks/core/mocks.js +++ b/@empirica-mocks/core/mocks.js @@ -118,6 +118,39 @@ export function useStage() { if (element.template) { return templatesMap.get(element.template); } + if (element.conditions) { + // update with other comparators + var refData = JSON.parse(localStorage.getItem('jsonData') || '{}'); + const conditions = element.conditions; + const comparator = conditions[0]?.comparator || "x"; + const reference = conditions[0]?.reference || "x"; + console.log("refData", refData) + console.log("reference", reference , typeof reference) + if (comparator === "x") { + return [element]; + } else if (comparator === "exists") { + console.log("comparing") + console.log(refData[`stage_${currentStageIndex}`]) + if (refData[`stage_${currentStageIndex}`]?.[reference]) { + console.log("SHOWING") + const newElement = {...element}; + delete newElement.conditions; + return [newElement]; + } else { + return []; + } + } + + const condition = conditions.find((condition) => { + if (condition.field) { + return fields[condition.field] === condition.value; + } + return true; + }); + if (condition) { + return [element]; + } + } return [element]; }); return elements; diff --git a/cypress/fixtures/testTemplates3.yaml b/cypress/fixtures/testTemplates3.yaml index be6da4d..61c6530 100644 --- a/cypress/fixtures/testTemplates3.yaml +++ b/cypress/fixtures/testTemplates3.yaml @@ -7,7 +7,7 @@ templates: - type: prompt file: projects/example/multipleChoiceColors.md - type: submitButton - buttonText: + buttonText: TestButtonTextProceed treatments: - name: simple template test diff --git a/src/app/editor/components/ElementCard.tsx b/src/app/editor/components/ElementCard.tsx index d483ddc..1d401fc 100644 --- a/src/app/editor/components/ElementCard.tsx +++ b/src/app/editor/components/ElementCard.tsx @@ -56,7 +56,7 @@ export function ElementCard({
{Object.keys(element).map((key) => (

- {key}: {element[key]} + {key}: {element[key].toString()}

))}
From dbc584d06963dd595b46fbd12138e274bb2e0687 Mon Sep 17 00:00:00 2001 From: Evan Ping Date: Tue, 3 Dec 2024 23:06:43 -0500 Subject: [PATCH 5/6] automatic rerender when saving references --- @empirica-mocks/core/mocks.js | 11 ++++------- src/app/editor/components/ReferenceData.tsx | 7 ++++++- src/app/editor/stageContext.jsx | 3 +++ 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/@empirica-mocks/core/mocks.js b/@empirica-mocks/core/mocks.js index 1489fcb..a083a1f 100644 --- a/@empirica-mocks/core/mocks.js +++ b/@empirica-mocks/core/mocks.js @@ -69,6 +69,8 @@ export function useStage() { setTreatment, templatesMap, setTemplatesMap, + refData, + setRefData, } = useContext(StageContext) // const stage1 = useContext(StageContext); // console.log("useStageMock", stage1) @@ -119,20 +121,15 @@ export function useStage() { return templatesMap.get(element.template); } if (element.conditions) { - // update with other comparators - var refData = JSON.parse(localStorage.getItem('jsonData') || '{}'); + // TODO: update with other comparators + // var refData = JSON.parse(localStorage.getItem('jsonData') || '{}'); const conditions = element.conditions; const comparator = conditions[0]?.comparator || "x"; const reference = conditions[0]?.reference || "x"; - console.log("refData", refData) - console.log("reference", reference , typeof reference) if (comparator === "x") { return [element]; } else if (comparator === "exists") { - console.log("comparing") - console.log(refData[`stage_${currentStageIndex}`]) if (refData[`stage_${currentStageIndex}`]?.[reference]) { - console.log("SHOWING") const newElement = {...element}; delete newElement.conditions; return [newElement]; diff --git a/src/app/editor/components/ReferenceData.tsx b/src/app/editor/components/ReferenceData.tsx index 1f27d31..cf04305 100644 --- a/src/app/editor/components/ReferenceData.tsx +++ b/src/app/editor/components/ReferenceData.tsx @@ -1,4 +1,5 @@ -import React, { useEffect, useState } from 'react' +import React, { useEffect, useState, useContext } from 'react' +import { StageContext } from '@/editor/stageContext' // helper to format references const formatReference = (reference: string) => { @@ -70,6 +71,8 @@ const ReferenceData = ({ treatment, stageIndex }: ReferenceDataProps) => { const [jsonData, setJsonData] = useState({}) const [inputValues, setInputValues] = useState({}) + const { refData, setRefData } = useContext(StageContext) + // load refs for curr stage useEffect(() => { if (treatment?.gameStages?.[stageIndex]) { @@ -123,6 +126,7 @@ const ReferenceData = ({ treatment, stageIndex }: ReferenceDataProps) => { [`stage_${stageIndex}`]: inputValues[`stage_${stageIndex}`], } setJsonData(updatedJson) + setRefData(updatedJson) localStorage.setItem('jsonData', JSON.stringify(updatedJson)) console.log('Saved JSON Data:', JSON.stringify(updatedJson, null, 2)) } @@ -134,6 +138,7 @@ const ReferenceData = ({ treatment, stageIndex }: ReferenceDataProps) => { if (savedJson) { console.log('Loaded JSON Data from localStorage:', JSON.parse(savedJson)) setJsonData(JSON.parse(savedJson)) + setRefData(JSON.parse(savedJson)) } if (savedInputValues) { diff --git a/src/app/editor/stageContext.jsx b/src/app/editor/stageContext.jsx index 7dde34e..67ff05d 100644 --- a/src/app/editor/stageContext.jsx +++ b/src/app/editor/stageContext.jsx @@ -14,6 +14,7 @@ const StageProvider = ({ children }) => { const [elapsed, setElapsed] = useState(0) const [treatment, setTreatment] = useState(null) const [templatesMap, setTemplatesMap] = useState(new Map()) + const [refData, setRefData] = useState({}) // for updating code editor, requires reload function editTreatment(newTreatment) { @@ -32,6 +33,8 @@ const StageProvider = ({ children }) => { editTreatment, templatesMap, setTemplatesMap, + refData, + setRefData, } return ( From a8d91a253180f5767ed3130606984c4d3050bbcc Mon Sep 17 00:00:00 2001 From: Evan Ping Date: Fri, 10 Jan 2025 19:20:03 -0800 Subject: [PATCH 6/6] conditional rendering within templates --- @empirica-mocks/core/mocks.js | 37 ++++++++++++++++++--- cypress/fixtures/testTemplates3.yaml | 2 +- src/app/editor/components/ReferenceData.tsx | 24 +++++++++---- 3 files changed, 51 insertions(+), 12 deletions(-) diff --git a/@empirica-mocks/core/mocks.js b/@empirica-mocks/core/mocks.js index a083a1f..2106f47 100644 --- a/@empirica-mocks/core/mocks.js +++ b/@empirica-mocks/core/mocks.js @@ -111,21 +111,34 @@ export function useStage() { if (varName === "elements") { + var elements if (tempStage) { - return tempStage.elements; + elements = tempStage.elements; + } else { + elements = treatment.treatments[0]?.gameStages[currentStageIndex]?.elements; } - var elements = treatment.treatments[0]?.gameStages[currentStageIndex]?.elements; - elements = elements.flatMap((element) => { + console.log("CURRELEMENTS", elements) + + // TODO: change to template if needed + // map to templates first + elements = elements.flatMap((element) => { if (element.template) { return templatesMap.get(element.template); + } else { + return element; } + }) + + //console.log("ELEMENTS_TO_DISPLAY", elements) + // check all conditions + elements = elements.flatMap((element) => { if (element.conditions) { // TODO: update with other comparators - // var refData = JSON.parse(localStorage.getItem('jsonData') || '{}'); const conditions = element.conditions; const comparator = conditions[0]?.comparator || "x"; const reference = conditions[0]?.reference || "x"; + const value = conditions[0]?.value || "x"; if (comparator === "x") { return [element]; } else if (comparator === "exists") { @@ -136,6 +149,22 @@ export function useStage() { } else { return []; } + } else if (comparator === "equals") { + if (refData[`stage_${currentStageIndex}`]?.[reference] == value) { + const newElement = {...element}; + delete newElement.conditions; + return [newElement]; + } else { + return []; + } + } else if (comparator === "doesNotEqual") { + if (refData[`stage_${currentStageIndex}`]?.[reference] != value) { + const newElement = {...element}; + delete newElement.conditions; + return [newElement]; + } else { + return []; + } } const condition = conditions.find((condition) => { diff --git a/cypress/fixtures/testTemplates3.yaml b/cypress/fixtures/testTemplates3.yaml index 61c6530..b5368c7 100644 --- a/cypress/fixtures/testTemplates3.yaml +++ b/cypress/fixtures/testTemplates3.yaml @@ -7,7 +7,7 @@ templates: - type: prompt file: projects/example/multipleChoiceColors.md - type: submitButton - buttonText: TestButtonTextProceed + buttonText: ${submitButtonText} treatments: - name: simple template test diff --git a/src/app/editor/components/ReferenceData.tsx b/src/app/editor/components/ReferenceData.tsx index cf04305..66ff515 100644 --- a/src/app/editor/components/ReferenceData.tsx +++ b/src/app/editor/components/ReferenceData.tsx @@ -16,15 +16,25 @@ const getPlaceholderText = (reference: string) => { } // find 'references' in the treatment object by stage (recursively..hopefully runtime not too bad) -const findReferencesByStage = (obj: any): any[] => { +const findReferencesByStage = (obj: any, templatesMap: any): any[] => { let references: any[] = [] if (typeof obj === 'object' && obj !== null) { for (const key in obj) { if (key === 'reference') { references.push(obj[key]) + } else if (key === 'template') { + const templateReferences = templatesMap + .get(obj[key]) + .flatMap((templateElement: any) => + findReferencesByStage(templateElement, templatesMap) + ) + + references = references.concat(templateReferences) } else if (typeof obj[key] === 'object') { - references = references.concat(findReferencesByStage(obj[key])) + references = references.concat( + findReferencesByStage(obj[key], templatesMap) + ) } } } @@ -33,10 +43,10 @@ const findReferencesByStage = (obj: any): any[] => { } // initializing json data for each stage -const initializeJsonData = (treatment: any) => { +const initializeJsonData = (treatment: any, templatesMap: any) => { const jsonData: { [key: string]: any } = {} treatment?.gameStages?.forEach((stage: any, index: number) => { - const references = findReferencesByStage(stage) + const references = findReferencesByStage(stage, templatesMap) jsonData[`stage_${index}`] = {} references.forEach((reference) => { jsonData[`stage_${index}`][reference] = '' @@ -71,18 +81,18 @@ const ReferenceData = ({ treatment, stageIndex }: ReferenceDataProps) => { const [jsonData, setJsonData] = useState({}) const [inputValues, setInputValues] = useState({}) - const { refData, setRefData } = useContext(StageContext) + const { refData, setRefData, templatesMap } = useContext(StageContext) // load refs for curr stage useEffect(() => { if (treatment?.gameStages?.[stageIndex]) { const stage = treatment.gameStages[stageIndex] - const allReferences = findReferencesByStage(stage) + const allReferences = findReferencesByStage(stage, templatesMap) setReferences(allReferences) // load json data for curr stage if (!jsonData[`stage_${stageIndex}`]) { - const initializedJson = initializeJsonData(treatment) + const initializedJson = initializeJsonData(treatment, templatesMap) setJsonData((prev) => ({ ...prev, ...initializedJson })) }