2b:null 2c:["$","title",null,{"children":"TimeSearcher+ KMC Test | ivan velasco | Observable"}] 31:T63c,/*brushDetails = { const brushesElements = Array.from(selected.brushes.entries()) .map(([brushGroupid, bgm]) => { const brushesElements = Array.from(bgm.entries()).map(([brushId, b]) => { if (!b.selection) return; return htl.html`

Selected: ${b?.isSelected} Active: ${b?.isActive}

From: ${fmtX( b.selection[0][0] )} x ${fmtY( b.selection[0][1] )}
To: ${fmtX( b.selection[1][0] )} x ${fmtY( b.selection[1][1] )}

`; }); const detailsEle = htl.html`

Group

${brushesElements}

`; // Open if it contains the current one if ( Array.from(bgm.values()) .flat() .filter((b) => b.isActive).length ) detailsEle.querySelector("details").setAttribute("open", null); return detailsEle; }) .flat(); return htl.html` `; }*/32:T975,# TODO * Return maxTimeLines to the original state __Critical__ * After the changes, I cannot use the fine tuning (the spinbox doesn't work) * ~~The timeBox is selecting in floating point, but the legend shows integers~~ * ~~Change brushes to TimeBox~~ * ~~When first loading it doesn't show how many timelines are selected~~ * ~~After creating a new group, make it the default one~~ __Important__ * ~~Disable/Hide Boxes from non active groups. When I switch to a different group, I shouldn't be able to interact with the TimeBoxes from the other groups. Problem: I cannot create the same box I have created in another group~~ * ~~She cannot drag a skinny box. You should be able to create small boxes~~. Now you can create smaller boxes, but there is still the problem of moving them with the mouse. * Spinbox doesn't allow negative values __Nice to have__ * Show median of selected * You cannot hide the active group * ~~Allow control to show/hide both groups~~ * Show/hide non selected * Do not filter the polylines where they are not defined. Below week 40 we lose all term babies. * List the non-selected as a group that can be hidden in the Groups control __Bugs__ * Bug green box * hasDetails view crashes everything * [Needs Discussion] TimeBoxes should match undefined values. If I make a Timebox around x0,y0 it should match all the lines that for example start after y0. e.g. A timebox for the preterm babies less than 35weeks and 1500G, should match babies born with 40weeks (and hence that doesn't have weight values before the week 40) __Wishlist__ * Create box via spinbox * Create group with respect to the previous one * Make delete group bullet proof * Highlight that the spinbox uses the current box * Allow boxes for the exact value, e.g. Me llegó un bebé de 40 semanas de 2000G (max range 50) * Hide non selected * She wants to select the actual curve (d3-delauny) * She wants to know the actual weights at each point * Peso + Talla Cráneo + Otra * Allow undo * Keep track of current state * One cannot select a small box Script para el video: * Definir el problema claramente en 15-30 secs * Hacer el demo del niño de 40 semanas 2KG - Demostrar la escalabilidad - Demostrar TimeBoxes - Demostrar ajuste con precisión (Spinbox cambiar ese nombre) - Crear otro grupo, y renombrarlo - Contrastar los dos grupos * Evaluación * Describir y demostrar las contribuciones33:[{"id":"c8e1755722d63b66ac646c206183a42e8d4308dd83438f6e6cc606c5ceda14d7f63ea82db619867fd581b14e466dcc9b2639171dff7e82be1f597474c91d533d","href":"https://static.observableusercontent.com/files/c8e1755722d63b66ac646c206183a42e8d4308dd83438f6e6cc606c5ceda14d7f63ea82db619867fd581b14e466dcc9b2639171dff7e82be1f597474c91d533d","name":"KMC-50k-Base 1993-2022 Jul -20220929.csv.zip","type":"application/zip","lastModified":1682903672387.744,"size":14305806},{"id":"e5506b7258e4379db5cebcc0551b452c8cf9c11d38dac8224b0388d22a017cceecad809a7894c568e3ec22644b248971ef6a59ce9f9b74ecc29e29261c8b343e","href":"https://static.observableusercontent.com/files/e5506b7258e4379db5cebcc0551b452c8cf9c11d38dac8224b0388d22a017cceecad809a7894c568e3ec22644b248971ef6a59ce9f9b74ecc29e29261c8b343e","name":"curvasv2.json","type":"application/json","lastModified":1682903672387.744,"size":6801},{"id":"97be989b6ee1d0e5d985954e7b1708480db5611bc553206dd2aabe94edf341a767eb4584eae10098585d233253e822b2f40ab3acf958f6020f1e63f11bd734aa","href":"https://static.observableusercontent.com/files/97be989b6ee1d0e5d985954e7b1708480db5611bc553206dd2aabe94edf341a767eb4584eae10098585d233253e822b2f40ab3acf958f6020f1e63f11bd734aa","name":"TimeSearcher@11.js","type":"application/javascript","lastModified":1682903672387.744,"size":178797},{"id":"2ca35d172b1e332ba32ee38a78e2595448e47beaf980647c2b376bcb46d3a2df3185f16049b29bfbf203620d03a240f36ea3bc30abcf524fa7d34b3327106052","href":"https://static.observableusercontent.com/files/2ca35d172b1e332ba32ee38a78e2595448e47beaf980647c2b376bcb46d3a2df3185f16049b29bfbf203620d03a240f36ea3bc30abcf524fa7d34b3327106052","name":"TimeSearcher.js","type":"application/javascript","lastModified":1682921661562.564,"size":178793}] 2f:{"id":"b8b51fe1db7d3769","slug":null,"title":"TimeSearcher+ KMC Test","thumbnail":"1c4d0872cee65682fa7f828c4e817eed6d48d0d943b9c3169f335ea8e620cb61","access_level":"public","create_time":"$D2023-05-01T01:14:32.387Z","update_time":"$D2025-01-17T12:27:31.372Z","view_time":null,"first_public_time":"$D2023-05-01T01:14:32.387Z","has_unpublished_edits":null,"fork":{"id":"86be62a662d9c8a7","slug":"timesearcher-plus-usabilidad","title":"TimeSearcher+ Prueba Usabilidad","owner":{"id":"930819e3d82545cf","login":"ivelascog","name":"ivan velasco"}},"stars":0,"starred":false,"owner":{"type":"team","id":"930819e3d82545cf","login":"ivelascog","name":"ivan velasco","avatar_url":"https://avatars-next.observableusercontent.com/11cb2b20d527ce9932eb883698b460726569e061b766cf88e90af76b7d255d72","tier":"starter_2024","bio":""},"version":840,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"21806eb61954f66f","login":"ivelascog","name":"ivan velasco","avatar_url":"https://avatars-next.observableusercontent.com/11cb2b20d527ce9932eb883698b460726569e061b766cf88e90af76b7d255d72","tier":null,"bio":""}],"members":[{"type":"individual","id":"21806eb61954f66f","login":"ivelascog","name":"ivan velasco","avatar_url":"https://avatars-next.observableusercontent.com/11cb2b20d527ce9932eb883698b460726569e061b766cf88e90af76b7d255d72","tier":null,"role":"editor"},{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"TimeSearcher+ KMC Test","cells":[{"id":0,"value":"# TimeSearcher+ KMC Test","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":188,"value":"intro = md`To clear a selection rectangle press the \"R\" or \"Backspace\" key. Use the arrow keys to move the selection boxes. Press shift click to select several Time-boxes at the same time.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"{\n return htl.html`\n

\n Load your own CSV data: ${viewof data}\n

\n Select the attributes to render and the maximun records\n

\n \n \n \n \n \n \n \n \n \n

\n ${viewof IdAttr}\n	\n ${viewof xAttr}\n	\n ${viewof yAttr}\n
\n ${viewof maxTimelines}\n

\n More configuration parameters\n

\n \n \n \n \n \n \n \n \n \n

\n ${viewof hasDetails}\n	\n ${viewof showGrid}\n	\n ${viewof doubleYlegend}\n
\n ${viewof labelX}\n	\n ${viewof labelY}\n

\n\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"renderView = {\n return htl.html`\n

${viewof TW}

\n ${viewof TW.groups}\n
\n ${viewof TW.brushesCoordinates} \n

\n \n

${\n hasDetails ? htl.html`

Details:

${viewof TW.details}` : \"\"\n }

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"viewof defaultAlpha = Inputs.range([0, 1], {label: \"Default Alpha\", value: 0.8})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"viewof selectedAlpha = Inputs.range([0, 1], {label: \"Selected Alpha\", value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"viewof noSelectedAlpha = Inputs.range([0, 1], {label: \"Non Selected Alpha\", value: 0.6})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"viewof color = Inputs.color({label:\"Non selected Color\", value: \"#dce0e5\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"viewof exp = Inputs.range([0, 3], {value: 0.2, label: \"alphaScale Exponent\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"viewof numBins = Inputs.range([1, 1000], {label: \"Num Bins\", value: 10, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"viewof fn = Inputs.select([\"mean\", \"median\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"viewof minRecordsPerBin = Inputs.range([0, 50], {label: \"Min records per bin\", value: 5, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"{\n // viewof selected.ts.alphaScale = d3\n // // .scaleLinear()\n // .scalePow()\n // .exponent(exp)\n // .range([1, 0.01])\n // .domain([0, maxTimelines]);\n\n viewof TW.ts.alphaScale.exponent(exp).range([1, 0.3]);\n viewof TW.ts.noSelectedColor = color;\n // viewof selected.ts.noSelectedAlpha = 0.6\n // viewof selected.ts.selectedColor = \"#e0e8fb\"\n\n viewof TW.ts.render();\n\n const s = viewof TW.ts.alphaScale;\n exp;\n const fmt = d3.format(\".2%\");\n const max = viewof TW.ts.alphaScale.domain()[1];\n return htl.html`

Alpha Color Scale

\n ${d3.range(0, max + 1, max / 10).map(\n (n) => htl.html`\n

${n} ${fmt(\n s(n)\n )}

\n `\n )}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof TW = TimeWidget(data, {\n x: xAttr,\n y: yAttr,\n id: IdAttr,\n xLabel: \"→ \" + labelX,\n yLabel: \"↑ \" + labelY,\n hasDetails: hasDetails,\n doubleYlegend: doubleYlegend,\n showGrid: showGrid,\n selectedAlpha: selectedAlpha,\n noSelectedAlpha: noSelectedAlpha,\n maxDetailsRecords: 10,\n showBrushTooltip: true,\n width: width,\n detailsWidth: width,\n showBrushesControls: false,\n referenceCurves: curvas,\n\n _this: this\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"viewof hasDetails = Inputs.toggle({label: \"Show Details\", value: false})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"viewof showGrid = Inputs.toggle({label: \"Show Grid\", value: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"viewof doubleYlegend = Inputs.toggle({label: \"Show Double Y Legend\", value: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof maxTimelines = Inputs.range([100, data.length], {\n label: \"Max Lines\",\n value: this?.value || 1000,\n step: 100,\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"viewof IdAttr = Inputs.select(attribs, {\n value: \"Code\",\n label: \"ID variable\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"viewof xAttr = Inputs.select(attribs, {\n value: \"__time\",\n label: \"X Variable\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"viewof yAttr = Inputs.select(attribs, {\n value: \"peso\",\n label: \"Y variable\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"viewof labelX = Inputs.text({label: \"Label X: \", value: \"Gestational Age (weeks)\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"viewof labelY = Inputs.text({label: \"Label Y: \", value: \"Weight (gr)\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"viewof data = dataInput({value: dataStages})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"mainView = viewof TW","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"groups = viewof TW.groups","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"brushesCoordinates = viewof TW.brushesCoordinates","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"dataStages","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"divDetails = {\n maxTimelines; dataStages; hasDetails; data; xAttr; yAttr; IdAttr; labelX; labelY; showGrid; doubleYlegend;\n return htl.html`

`;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"fmtY = d3.format(\".2d\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"fmtX = d3.format(\".1f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"width = 700","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"dataStages = transformData(dDataFilter, \"Code\", stages)\n.filter(\n (d) => d[\"peso\"] < 15000 && d[\"__time\"] > 20 && d[\"__time\"] < 93\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"dataF = data.slice(0,maxTimelines)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"attribs = Object.keys(data[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"dDataFilter = defaultData.filter(d => d[\"ERN_Ballard\"] < 50 && d[\"ERN_Ballard\"] > 20)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"defaultData = FileAttachment(\"KMC-50k-Base 1993-2022 Jul -20220929.csv.zip\")\n .zip()\n .then((res) => res.file(\"KMC-50k-Base 1993-2022 Jul -20220929.csv\").csv({ typed: true }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"curvas = FileAttachment(\"curvasv2.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {transformData,stages} from \"@ivelascog/to-stages\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"import { dataInput } from \"@john-guerra/data-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"TimeWidget = {\n try {\n return await require(`http://localhost:8080/dist/TimeWidget.js?${Date.now()}`);\n } catch (e) {\n return await require(\"time-widget\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"todo","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"