2b:null 2c:["$","title",null,{"children":"KMC - Obesidad | ivan velasco | Observable"}] 31:T3017,viewof targetVariableWithResult = { const container = html`

`; // Etiqueta y buscador de la variable objetivo const label = html`Select Target Variable`; const input = html``; const suggestionBox = html``; // Ajusta estas a tus prioridades reales: const prioritizedAttribs = ["IQ12cat", "Overweightorobesity12m"]; // Suponemos que tienes un "rawData" global con objetos y datos numéricos const allAttribs = Object.keys(rawData[0] || {}).filter( (k) => !isNaN(rawData[0][k]) && !prioritizedAttribs.includes(k) ); // --- Función auxiliar para refrescar la lista en pantalla function updateSelectedList() { selectedList.innerHTML = ""; // Recorremos lo que haya en mutable.selectedVariables for (const val of mutable selectedVariables) { const li = html`

${val}

`; selectedList.appendChild(li); } } // --- Para crear listeners en cada checkbox function addCheckboxListener(checkbox, value) { checkbox.addEventListener("change", () => { if (checkbox.checked) { // Añadimos al Set const newSet = new Set(mutable selectedVariables); newSet.add(value); mutable selectedVariables = newSet; // Notifica a otras celdas } else { // Quitamos del Set const newSet = new Set(mutable selectedVariables); newSet.delete(value); mutable selectedVariables = newSet; // Notifica a otras celdas } // Actualizamos la lista en pantalla updateSelectedList(); }); } // --- Autocompletar de la variable objetivo function updateSuggestions(query) { suggestionBox.innerHTML = ""; if (query.trim() === "") { suggestionBox.style.display = "none"; return; } const filtered = allAttribs.filter((attr) => attr.toLowerCase().includes(query.toLowerCase()) ); if (filtered.length === 0) { suggestionBox.style.display = "none"; return; } filtered.forEach((attr) => { const li = html`

${attr}

`; li.addEventListener("click", () => { input.value = attr; suggestionBox.style.display = "none"; // Cambiamos la variable objetivo mutable targetVariable = attr; // Notifica a otras celdas // Deseleccionamos "Suggested Variables" (los radio) container .querySelectorAll("input[name='suggestedVariable']") .forEach((r) => (r.checked = false)); // Limpiamos la selección actual mutable selectedVariables = new Set(); // Removemos resultados previos const oldResults = container.querySelector("#results"); if (oldResults) oldResults.remove(); // Limpiamos la lista en pantalla selectedList.innerHTML = ""; }); suggestionBox.appendChild(li); }); suggestionBox.style.display = "block"; } input.addEventListener("input", () => updateSuggestions(input.value)); // --- Sección "Suggested Variables for Potential Target" const checkboxesContainer = html`

`; const checkboxesLabel = html`Suggested Variables for Potential Target`; checkboxesContainer.prepend(checkboxesLabel); prioritizedAttribs.forEach((attr) => { const radioLabel = html` ${attr} `; radioLabel.querySelector("input").addEventListener("change", () => { // Si marcan este radio, actualizamos la variable objetivo mutable targetVariable = attr; // Limpiamos la selección mutable selectedVariables = new Set(); // Limpiamos la búsqueda input.value = ""; suggestionBox.style.display = "none"; // Quitamos resultados viejos const oldResults = container.querySelector("#results"); if (oldResults) oldResults.remove(); selectedList.innerHTML = ""; }); checkboxesContainer.appendChild(radioLabel); }); // --- Botón para solicitar al backend const button = html` `; const message = html`

`; button.addEventListener("click", async () => { if (!mutable targetVariable) { message.textContent = "Please select a valid target variable."; message.style.color = "red"; return; } message.textContent = "Fetching suggested variables..."; message.style.color = "#333"; try { const response = await fetch("http://127.0.0.1:8000/run-script1/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ target_variable: mutable targetVariable, selection: selectedAll.map((d) => d["Idenfinal"]) }) }); if (!response.ok) { throw new Error(`Error: ${response.statusText}`); } const result = await response.json(); message.textContent = `Suggested Variables for "${mutable targetVariable}" fetched successfully!`; message.style.color = "green"; renderResults(result); } catch (error) { console.error("Error fetching variables:", error); message.textContent = "Failed to fetch suggested variables."; message.style.color = "red"; } }); // --- Sección que muestra la lista de seleccionadas const selectedListContainer = html`

Selected Variables for the Classifier:

`; const selectedList = html`

`; // --- Función principal para renderizar resultados function renderResults(data) { const { top_20_by_model_importance, top_20_by_correlation } = data; // 1) Model importance const importanceList = html`

Top 10 by Model Importance ${top_20_by_model_importance.slice(0, 10).map((item) => { const checkbox = html``; addCheckboxListener(checkbox, item.Feature); return html` ${checkbox} ${item.Feature} (Importance: ${item.Importance.toFixed( 4 )}) `; })}

`; // 2) Correlation const correlationList = html`

Top 10 by Correlation ${top_20_by_correlation.slice(0, 10).map((item) => { const checkbox = html``; addCheckboxListener(checkbox, item.Feature); return html` ${checkbox} ${item.Feature} (Correlation: ${item.Correlation.toFixed( 4 )}) `; })}

`; // 3) Additional Variables const allImportant = new Set( top_20_by_model_importance.map((x) => x.Feature) ); const allCorr = new Set(top_20_by_correlation.map((x) => x.Feature)); const additionalVars = allAttribs.filter((v) => { return ( !prioritizedAttribs.includes(v) && !allImportant.has(v) && !allCorr.has(v) ); }); const additionalSection = html`

Additional Variable Selection

`; const searchBox = additionalSection.querySelector("input"); const listEl = additionalSection.querySelector("ul"); // Creamos

para cada variable, y solo lo ocultamos/mostramos const allAdditionalLis = additionalVars.map((v) => { const li = html`

`; li.dataset.value = v.toLowerCase(); const checkbox = li.querySelector("input"); addCheckboxListener(checkbox, v); return li; }); // Agregamos todo a la

Confusion Matrix (${index + 1})
Period: ${startDate} to ${endDate}
Actual \\ Predicted	Positive	Negative
Positive	${truePositives}	${falseNegatives}
Negative	${falsePositives}	${trueNegatives}

Statistics

F1 Score: ${f1Score.toFixed(4)}

Recall: ${recall.toFixed(4)}

Precision: ${precision.toFixed(4)}