3e:null 3f:["$","title",null,{"children":"FedMix Result Viewer (Research View) | Jesús García | Observable"}] 45:T5af,viewof metrics = { function metric_def(algorithm) { if (algorithm === "ground_truth") { return html`

` } else { return html`

Per Slice
DSC: ${multiFileDict.cases[caseNo].algorithms[algorithm].metrics.DSC.values_per_slice[sliceNo]}
SDSC_2mm: ${multiFileDict.cases[caseNo].algorithms[algorithm].metrics.SDSC_2mm.values_per_slice[sliceNo]}

Overall
DSC: ${multiFileDict.cases[caseNo].algorithms[algorithm].metrics.DSC.value_for_patient}
SDSC_2mm: ${multiFileDict.cases[caseNo].algorithms[algorithm].metrics.SDSC_2mm.value_for_patient}

` } } let metrics = [] metrics.push(metric_def('ground_truth')) for (const algorithm of multiFileDict.metadata.clusters) { metrics.push(metric_def(algorithm.name)) } const outer_div = html`

${metrics}

` return outer_div }46:Tba6,multiFileDict = { function ensureDirs(result, subdir, type, caseNr, algorithm) { result['metadata']['subdir'] = subdir if (result[subdir] === undefined) { result[subdir] = {}; } if (result[subdir][type] === undefined) { result[subdir][type] = {} } if (algorithm === undefined) { if (result[subdir][type][caseNr] === undefined) { result[subdir][type][caseNr] = {}; } } else { if (result[subdir][type][algorithm] === undefined) { result[subdir][type][algorithm] = {}; } if (result[subdir][type][algorithm][caseNr] === undefined) { result[subdir][type][algorithm][caseNr] = {}; } } } function parseScans(file, result) { const scans = file.webkitRelativePath.match(/(.*)\/(.*)\/scans\/(.*)\/(.*)\.png/i); if (scans) { const subdir = scans[1]; const other_dirs = scans[2]; let caseNr = parseInt(scans[3]); let slice = parseInt(scans[4]); ensureDirs(result, subdir, 'scans', caseNr) result[subdir]['scans'][caseNr][slice] = { name: file.name, path: subdir + '/' + other_dirs, file: file }; } } function parsePredictions(file, result) { const pred = file.webkitRelativePath.match(/(.*)\/(.*)\/predicted_masks\/(.*)\/(.*)\/(.*)\.png/i); if (pred) { const subdir = pred[1]; const other_dirs = pred[2]; let algorithm = pred[3]; let caseNr = parseInt(pred[4]); let slice = parseInt(pred[5]); ensureDirs(result, subdir, 'predicted_masks', caseNr, algorithm) result[subdir]['predicted_masks'][algorithm][caseNr][slice] = { name: file.name, path: subdir + '/' + other_dirs, file: file }; } } function parseGroundTruth(file, result) { const gt = file.webkitRelativePath.match(/(.*)\/(.*)\/ground_truth_masks\/(.*)\/(.*)\.png/i); if (gt) { const subdir = gt[1]; const other_dirs = gt[2]; let caseNr = parseInt(gt[3]); let slice = parseInt(gt[4]); ensureDirs(result, subdir, 'ground_truth', caseNr) result[subdir]['ground_truth'][caseNr][slice] = { name: file.name, path: subdir + '/' + other_dirs, file: file }; } } let result = {}; for (const file of multiFileList) { const name = file.name; const path = file.webkitRelativePath; if (file.name === "manifest.json") { const text = await file.text(); result = { ...JSON.parse(text), ...result } } else { if (result['metadata'] === 'undefined') { result['metadata'] = {} } parseScans(file, result); parseGroundTruth(file, result); parsePredictions(file, result); } } return result; }47:T5e3,function drawComparisonCanvas(canvasIds, targetId) { const canvasContainer = document.getElementById('comparison'); canvasContainer.innerHTML=''; let inputData = []; canvasIds.map(canvas => { const canvasData = canvas.split("/"); // To separate id, caseNo and SliceNo // inputData.push({ // id: canvasData[0], // case: canvasData[1], // slice: canvasData[2], // imageFile: loadImage(canvasData[0], canvasData[1], canvasData[2]) // }); // inputData.push(loadImage(canvasData[0], canvasData[1], canvasData[2])); inputData.push( loadImage(multiFileDict.metadata.subdir, 'predicted_masks', canvasData[1], canvasData[2] , canvasData[0])) }) console.log(inputData); multiSample(loadImage(multiFileDict.metadata.subdir, 'scans', caseNo, sliceNo), inputData, targetId); const canvasToCompare = html`

${targetId}

` canvasContainer.appendChild(canvasToCompare); // const groundTruth = loadImage("segmentations_without_variations", canvasData[1], canvasData[2]); // sample(loadImage("images", canvasData[1], canvasData[2]), loadImage(canvasData[0], canvasData[1], canvasData[2]), groundTruth, 'selected'+canvasData[0]); }48:T939,multiSample = (background, inputArray, targetId) => { const bg_image = new Image(); bg_image.src = URL.createObjectURL(background); let images = []; inputArray.forEach(function(inputFile) { const image = new Image(); image.src = URL.createObjectURL(inputFile); images.push(image); }); let targetImage = null; let cols = 0; let rows = 0; let bgImageLoaded = new Promise((resolve, reject) => { bg_image.onload = function() { const { cv } = window; targetImage = new cv.imread(bg_image); cols = targetImage.cols; rows = targetImage.rows; resolve(); } }); const colors = [ [31,120,180,255], [51,160,44,255], [227,26,28,255], [255,127,0,255], [106,61,154,255], [177,89,40,255], [166,206,227,255], [178,223,138,255], [251,154,153,255], [253,191,111,255], [202,178,214,255], [255,255,153,255]]; bgImageLoaded.then(function() { let actions = images.map( function(image, index) { return new Promise((resolve, reject) => { image.onload = function() { const { cv } = window; // Source image const contour_src = new cv.imread(image); // Convert to binary cv.cvtColor(contour_src, contour_src, cv.COLOR_RGBA2GRAY, 0); cv.threshold(contour_src, contour_src, 120, 200, cv.THRESH_BINARY); // Find contours let contours = new cv.MatVector(); let hierarchy = new cv.Mat(); cv.findContours(contour_src, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE); // Draw contours on destination image let color = new cv.Scalar(colors[index][0], colors[index][1], colors[index][2], colors[index][3]); cv.drawContours(targetImage, contours, -1, color, 1, cv.LINE_8, hierarchy, 32); // Cleanup contour_src.delete(); contours.delete(); hierarchy.delete(); resolve(); } }) }); let results = Promise.all(actions); results.then(function() { const { cv } = window; let dsize = new cv.Size(cols*4, rows*4); cv.resize(targetImage, targetImage, dsize, 4.0, 4.0, cv.INTER_AREA) cv.imshow(targetId, targetImage); targetImage.delete(); }) }); return }49:T979,sample = (background, input, groundTruth, targetId) => { const bg_image = new Image(); bg_image.src = URL.createObjectURL(background); const image = new Image(); image.src = URL.createObjectURL(input); const imgGroundTruth = new Image(); if (groundTruth) { imgGroundTruth.src = URL.createObjectURL(groundTruth); } image.onload = function() { const { cv } = window; // Source and destination images const contour_src = new cv.imread(image); const ct_scan = new cv.imread(bg_image); const cols = ct_scan.cols; const rows = ct_scan.rows; cv.imshow(targetId, ct_scan); // Convert to binary cv.cvtColor(contour_src, contour_src, cv.COLOR_RGBA2GRAY, 0); cv.threshold(contour_src, contour_src, 120, 200, cv.THRESH_BINARY); // Find contours let contours = new cv.MatVector(); let hierarchy = new cv.Mat(); cv.findContours(contour_src, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE); // Draw contours on destination image const matContour = cv.Mat.zeros(contour_src.cols, contour_src.rows, cv.CV_8UC1); let color = new cv.Scalar(255); cv.drawContours(matContour, contours, -1, color, 1, cv.LINE_8, hierarchy, 32); if (groundTruth) { // Ring overlap let matMask = getGroundTruthMask(imgGroundTruth); let green = new cv.Mat(matMask.cols, matMask.rows, cv.CV_8UC4, new cv.Scalar(0,255,0,255)); let greenMask = cv.Mat.zeros(cols, rows, cv.CV_8UC1); cv.bitwise_and(matMask, matContour, greenMask) green.copyTo(ct_scan, greenMask); // Not ring overlap let matInvMask = new cv.Mat(); cv.bitwise_not(matMask, matInvMask); let red = new cv.Mat(matMask.cols, matMask.rows, cv.CV_8UC4, new cv.Scalar(255,0,0,255)); let redMask = cv.Mat.zeros(cols, rows, cv.CV_8UC1); cv.bitwise_and(matInvMask, matContour, redMask); red.copyTo(ct_scan, redMask); // Show result and clean up cv.imshow(targetId, ct_scan); } else { // Draw contours on destination image for (let i = 0; i < contours.size(); ++i) { let color = new cv.Scalar(0, 255, 0, 255); cv.drawContours(ct_scan, contours, i, color, 1, cv.LINE_8, hierarchy, 160); } cv.imshow(targetId, ct_scan); } contour_src.delete(); ct_scan.delete(); contours.delete(); hierarchy.delete(); }; }4a:T482,getGroundTruthMask = (imgGroundTruth) => { const { cv } = window; const matGroundTruth = new cv.imread(imgGroundTruth); // Convert to binary cv.cvtColor(matGroundTruth, matGroundTruth, cv.COLOR_RGBA2GRAY, 0); cv.threshold(matGroundTruth, matGroundTruth, 120, 200, cv.THRESH_BINARY); // Find contours let contours = new cv.MatVector(); let hierarchy = new cv.Mat(); cv.findContours(matGroundTruth, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE); // Draw contours on destination image let matContours = cv.Mat.ones(matGroundTruth.cols, matGroundTruth.rows, cv.CV_8U); let color2 = new cv.Scalar(0); cv.drawContours(matContours, contours, -1, color2, 1, cv.LINE_8, hierarchy, 160); // Calculate distance transform let matDist = new cv.Mat(); cv.distanceTransform(matContours, matDist, cv.DIST_L2, 3); // Threshold (range 0 .. 1) let matThreshold = new cv.Mat(); cv.threshold(matDist, matThreshold, distance_threshold, 1, cv.THRESH_BINARY_INV); // Convert to 8U, range 0 .. 255 let matConvert = new cv.Mat(); matThreshold.convertTo(matConvert, cv.CV_8U, 255, 0); return matConvert; }4b:[] 43:{"id":"7e0c3ed3eb3680e7","slug":"fedmix-result-viewer-research-view","title":"FedMix Result Viewer (Research View)","thumbnail":"0abed6b95fe08a982592a597525c1f2afdb0b9c9f97ac3507163d565b9375c97","access_level":"public","create_time":"$D2020-07-22T09:05:25.407Z","update_time":"$D2020-07-24T08:13:29.032Z","view_time":null,"first_public_time":"$D2020-07-23T11:20:22.950Z","has_unpublished_edits":null,"fork":{"id":"7fe9a4f3a06f412c","slug":"fedmix-result-viewer-research-view","title":"FedMix Result Viewer (Research View)","owner":{"id":"226b694c26283897","login":"adrienne","name":"Adriënne Mendrik"}},"stars":0,"starred":false,"owner":{"type":"team","id":"044357ae86d16ae3","login":"ctwhome","name":"Jesús García","avatar_url":"https://avatars-next.observableusercontent.com/a3420cf9d8a5e17a80729af547371cb0eb13333ba019cb876a2aa046d7f1ec36","tier":"starter_2024","bio":""},"version":1843,"publish_version":1843,"role":null,"authored":false,"authors":[{"type":"individual","id":"5ac3abd5b451c970","login":"ctwhome","name":"Jesús García","avatar_url":"https://avatars-next.observableusercontent.com/a3420cf9d8a5e17a80729af547371cb0eb13333ba019cb876a2aa046d7f1ec36","tier":null,"bio":""}],"members":[{"type":"individual","id":"5ac3abd5b451c970","login":"ctwhome","name":"Jesús García","avatar_url":"https://avatars-next.observableusercontent.com/a3420cf9d8a5e17a80729af547371cb0eb13333ba019cb876a2aa046d7f1ec36","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"FedMix Result Viewer (Research View)","cells":[{"id":656,"value":"md `# FedMix Result Viewer (Research View)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md\n`## Load folder with files\nDirectory structure in json file, currently:\n * manifest.json\n * files/scans\n * files/ground_truth_masks\n * files/predicted_masks\n\nSelect folder:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"viewof multiFiles = html`` //load segmentation slices for this case","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"loadOpenCv = {\n return new Promise((resolve, reject) => {\n const script = document.createElement('script');\n script.src = 'https://docs.opencv.org/master/opencv.js';\n script.type = 'text/javascript';\n script.async = true;\n\n script.onabort = () => {\n reject('OpenCV Load failed.');\n };\n\n script.onload = () => {\n if (window.cv !== undefined) {\n resolve('OpenCV Load success.');\n }\n console.log('hallo');\n };\n \n document.body.appendChild(script);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"numberOfCases = Object.keys(multiFileDict[\"cases\"]).length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"numberOfSlices = Object.keys(multiFileDict[\"cases\"][caseNo]).length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1550,"value":"md `## Graphs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1564,"value":"cases = (diceType = 'DSC') =>{\n const table=[] \n Object.entries(multiFileDict.cases).map(\n caseArray => {\n Object.entries(caseArray[1].algorithms).map(algorithm=>{\n table.push({\n caseNumber:caseArray[0], \n value: algorithm[1].metrics[diceType].value_for_patient,\n algorithm: algorithm[0]\n })\n }) \n })\n return table\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1558,"value":"{\n const dice = vl.markPoint()\n .data(cases('DSC'))\n .encode(\n vl.x().fieldQ('caseNumber').title('Case'),\n vl.y().fieldQ('value').title('Dice').scale({domain: [.0, 1.0]}),\n vl.color().field('algorithm').title('Algorithm'), // todo\n vl.tooltip(['caseNumber', 'value', 'algorithm'])\n )\n\n const surfaceDice = vl.markPoint()\n .data(cases('SDSC_2mm'))\n .encode(\n vl.x().fieldQ('caseNumber').title('Case'),\n vl.y().fieldQ('value').title('Surface Dice').scale({domain: [0, 1.0]}),\n vl.color().field('algorithm').title('Algorithm'),\n vl.tooltip(['caseNumber', 'value', 'algorithm'])\n )\n return vl.hconcat(dice, surfaceDice).render()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof caseNo = {\n const keys = Object.keys(multiFileDict[\"cases\"]);\n let i = 0;\n \n return slider({\n value: this ? this.value : i, step: 1, max: keys.length -1,\n getValue: n => keys[n.value],\n title: \"Case\", \n description: \"Select Case No.\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof sliceNo = {\n const keys = Object.keys(multiFileDict[\"cases\"][caseNo][\"scans\"]);\n let i = 0;\n \n return slider({\n value: this ? this.value : i, step: 1, max: keys.length -1,\n getValue: n => keys[n.value],\n title: \"Slice\", \n description: \"Select Slice No. for the case\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1476,"value":"viewof distance_threshold = { \n return slider({\n value: 1, step: 1, max: 10, \n title: \"Surface Distance\", \n description: \"Select Surface Distance for Highlighting Red/Green\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"viewof canvasses = {\n // Function to set empty canvas with Metadata\n function canvas_def(algorithm, addCheckbox) {\n // algorithm is clusture from metadata e.g head_0, head_1\n // addCheckbox is boolean to indicate whether to add checkbox for comparision\n return html`\n

${algorithm}

\n `\n }\n \n let canvs = []\n canvs.push(canvas_def('ground_truth', false))\n for (const algorithm of multiFileDict.metadata.clusters) {\n canvs.push(canvas_def(algorithm.name, true))\n }\n \n const outer_div = html`\n

\n ${canvs}\n

\n `\n \n return outer_div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1452,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1483,"value":"comparision = html `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"function compare(){\n // select all checkboxes for scans\n const checkboxes = Array.from(document.getElementsByName('selectScan'))\n // get the selected scans with the ids(dataset.id is custom attribute on set checkbox)\n const selectedIds = checkboxes.filter(c => c.checked).map(ch => ch.dataset.id);\n drawComparisonCanvas(selectedIds, 'Comparison Canvas');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1343,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"loadImage = function(subDir, type, caseNo, sliceNo, algorithm) {\n if (algorithm === undefined){\n if (multiFileDict[subDir][type][caseNo] !== undefined &&\n multiFileDict[subDir][type][caseNo][sliceNo] !== undefined) {\n return multiFileDict[subDir][type][caseNo][sliceNo].file;\n }\n } else {\n if (multiFileDict[subDir][type][algorithm] !== undefined &&\n multiFileDict[subDir][type][algorithm][caseNo] !== undefined &&\n multiFileDict[subDir][type][algorithm][caseNo][sliceNo] !== undefined) {\n return multiFileDict[subDir][type][algorithm][caseNo][sliceNo].file;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"{\n sample(\n loadImage(multiFileDict.metadata.subdir, 'scans', caseNo, sliceNo),\n loadImage(multiFileDict.metadata.subdir, 'ground_truth', caseNo, sliceNo),\n null,\n 'ground_truth');\n for (const algorithm of multiFileDict.metadata.clusters) {\n sample(loadImage(multiFileDict.metadata.subdir, 'scans', caseNo, sliceNo),\n loadImage(multiFileDict.metadata.subdir, 'predicted_masks', caseNo, sliceNo,algorithm.name), \n loadImage(multiFileDict.metadata.subdir, 'ground_truth', caseNo, sliceNo),\n algorithm.name);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1242,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"import {html, svg} from \"@observablehq/htl\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"import {slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1570,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 44:"$43:body"