Retrieve and Display DICOM JSON from WADO Service - HTML5 JavaScript

let viewer; 
 
window.onload = () => { 
  setLicense(); 
  initViewer(); 
  showSearch(); 
}; 
 
function showViewer() { 
  document.getElementById("viewer").style.display = ""; 
  document.getElementById("query").style.display = "none"; 
} 
 
function showSearch() { 
  document.getElementById("viewer").style.display = "none"; 
  document.getElementById("query").style.display = ""; 
} 
 
function initViewer() { 
  // Get the parent DIV 
  let imageViewerDiv = document.getElementById("viewer-control"); 
 
  // Create the medical viewer control, and specify the number of rows and columns. 
  viewer = new lt.Controls.Medical.MedicalViewer(imageViewerDiv, 1, 1); 
 
  viewer.set_enableLazyLoad(true); //enable lazy loading 
  viewer.set_marginFramesCount(5); 
 
  // Add callbacks 
  viewer.add_loadMetadata(async (sender, args) => { 
    args.frame.JSON = await retrieveInstanceMetadata( 
      args.studyInstanceUID, 
      args.seriesInstanceUID, 
      args.sopInstanceUID 
    ); 
  }); 
 
  viewer.add_loadInstance(async (sender, args) => { 
    args.frame.pixelData = await retrieveFrameData( 
      args.studyInstanceUID, 
      args.seriesInstanceUID, 
      args.sopInstanceUID, 
      0 
    ); 
  }); 
} 
 
function getSelectedCells() { 
  return viewer.layout.selectedItems.toArray(); 
} 
 
// Optional 
const initOverlay = () => { 
  viewer.layout.cells.toArray().forEach((cell) => { 
    cell.set_overlayTextVisible(true); 
 
    // [optional] Select the cell (it can also be selected by clicking on it.) 
    cell.set_selected(true); 
 
    // [optional] Create an overlay text that will appear at the top of the loaded image. 
    const overlay = new lt.Controls.Medical.OverlayText(); 
 
    // [optional] Set the alignment for the overlay text. 
    overlay.set_alignment(lt.Controls.Medical.Alignment.topLeft); 
 
    // [optional] Set the row index of overlay text. 
    overlay.set_positionIndex(0); 
 
    // [optional] add window level overlay text, this will change when you click and drag the mouse. 
    overlay.set_type(lt.Controls.Medical.OverlayTextType.windowLevel); 
 
    // [optional] Add this overlay to the overlay list of the cell. Currently there is only one overlay, but the user can add multiple overlay texts. 
    cell.get_overlays().add(overlay); 
  }); 
}; 
 
async function loadSeries(studyID, seriesUID) { 
  var seriesMetadata = await retrieveSeriesMetadata(studyID, seriesUID); 
  viewer.layout.cells.clear(); 
  viewer.load(seriesMetadata); 
  initOverlay(); 
} 

/* 
 * Refer to DICOM PS3.18 2022d - Web Services 
 */ 
 
const headerOptions = { 
  headers: { 
    Accept: "application/dicom+json", 
  }, 
}; 
 
const queryPatients = async (queryParams) => { 
  const params = Object.keys(queryParams) 
    .map((key) => key + "=" + queryParams[key]) 
    .join("&"); 
  const response = await fetch( 
    `${dicomWeb_url}/qido-rs/patients?${params}`, 
    headerOptions 
  ); 
  const data = await response.json(); 
 
  return data; 
}; 
 
const queryStudies = async (queryParams) => { 
  const params = Object.keys(queryParams) 
    .map((key) => key + "=" + queryParams[key]) 
    .join("&"); 
  const response = await fetch( 
    `${dicomWeb_url}/qido-rs/studies?${params}`, 
    headerOptions 
  ); 
  const data = await response.json(); 
 
  return data; 
}; 
 
const querySeries = async (studyUID) => { 
  const response = await fetch( 
    `${dicomWeb_url}/qido-rs/studies/${studyUID}/series`, 
    headerOptions 
  ); 
  const data = await response.json(); 
  return data; 
}; 
 
const queryInstances = async (studyUID, seriesUID) => { 
  const url = `${dicomWeb_url}/qido-rs/studies/${studyUID}/series/${seriesUID}/instances`; 
  const response = await fetch(url, headerOptions); 
  const data = await response.json(); 
 
  return data; 
}; 
 
const retrieveSeriesMetadata = async (studyUID, seriesUID) => { 
  const url = `${dicomWeb_url}/wado-rs/studies/${studyUID}/series/${seriesUID}/metadata`; 
  const response = await fetch(url, headerOptions); 
  const data = await response.json(); 
 
  return data; 
}; 
 
const retrieveInstanceMetadata = async (studyUID, seriesUID, instanceUID) => { 
  const url = `${dicomWeb_url}/wado-rs/studies/${studyUID}/series/${seriesUID}/instances/${instanceUID}/metadata`; 
  const response = await fetch(url, headerOptions); 
  const data = await response.json(); 
 
  return data?.[0]; 
}; 
 
const trimMultipartHeader = async (response) => { 
  const blob = await response.blob(); 
 
  const ct = response.headers.get("content-type"); 
  const isMultipartRelated = ct?.toLowerCase().includes("multipart/related"); 
  const boundary = new RegExp("boundary=[\"|'](.*)[\"|']", "i").exec(ct)?.[1]; 
 
  if (!isMultipartRelated || !boundary) return await blob.arrayBuffer(); 
 
  const text = await blob.text(); 
 
  const newLine = "\\r?\\n"; 
  const header = new RegExp(`--${boundary}[\\s\\S]*?${newLine}${newLine}`).exec( 
    text 
  )?.[0]; 
  const footer = new RegExp( 
    `${newLine}${newLine}[\\s\\S]*?([${newLine}]*?--${boundary}--)` 
  ).exec(text)?.[1]; 
 
  const te = new TextEncoder(); 
  const newBlob = await blob.slice( 
    te.encode(header).length, 
    blob.arrayBuffer.length - te.encode(footer).length 
  ); 
 
  return await newBlob.arrayBuffer(); 
}; 
 
const retrieveFrameData = async ( 
  studyUID, 
  seriesUID, 
  instanceUID, 
  frameNumber 
) => { 
  const url = `${dicomWeb_url}/wado-rs/studies/${studyUID}/series/${seriesUID}/instances/${instanceUID}/frames/${frameNumber}`; 
  const response = await fetch(url, { 
    headers: { 
      accept: 'multipart/related; type="application/octet-stream"', 
    }, 
  }); 
 
  let data = await trimMultipartHeader(response); 
 
  return new Uint8Array(data); 
}; 

/* 
 * Updates the results query results table in index.html 
 * Refer to PS3.18 2022d - F.2 DICOM JSON Model 
 */ 
 
async function removeResults(tableID) { 
  const table = document.getElementById(tableID); 
  const tbody = table.getElementsByTagName("tbody")[0]; 
 
  // Remove existing results. 
  while (tbody.firstChild) tbody.removeChild(tbody.lastChild); 
} 
 
const updateSeriesResults = async (series) => { 
  removeResults("seriesResults"); 
 
  let table = document.getElementById("seriesResults"); 
  let tbody = table.getElementsByTagName("tbody")[0]; 
 
  if (!tbody) { 
    tbody = document.createElement("tbody"); 
    table.appendChild(tbody); 
  } 
 
  series.forEach((series) => { 
    let seriesNumber = series["00200011"]["Value"]; 
 
    let seriesDate = series?.["00080021"]?.["Value"] ?? ""; 
    let seriesDescription = series?.["0008103E"]?.["Value"] ?? ""; 
    let modality = series?.["00080060"]?.["Value"]; 
    let studyUID = series?.["0020000D"]?.["Value"]?.[0]; 
    let seriesUID = series?.["0020000E"]?.["Value"]?.[0]; 
 
    let row = tbody.insertRow(0); 
    row.insertCell(0).innerHTML = seriesUID; 
    row.insertCell(0).innerHTML = studyUID; 
    row.insertCell(0).innerHTML = modality; 
    row.insertCell(0).innerHTML = seriesDescription; 
    row.insertCell(0).innerHTML = seriesDate; 
    row.insertCell(0).innerHTML = seriesNumber; 
 
    row.onclick = () => { 
      showViewer(); 
      loadSeries(studyUID, seriesUID); 
    }; 
  }); 
}; 
 
const updateStudyResults = (studies) => { 
  removeResults("studyResults"); 
  removeResults("seriesResults"); 
 
  const table = document.getElementById("studyResults"); 
 
  let tbody = table.getElementsByTagName("tbody")[0]; 
  if (!tbody) { 
    tbody = document.createElement("tbody"); 
    table.appendChild(tbody); 
  } 
 
  studies.forEach((study) => { 
    const patientID = study?.["00100020"]?.["Value"]; 
    const patientName = 
      study?.["00100010"]?.["Value"]?.[0]?.["Alphabetic"] ?? ""; 
    const accessionNumber = study?.["00080050"]?.["Value"] ?? ""; 
    const studyDate = study?.["00080020"]?.["Value"]?.[0] ?? ""; 
    const studyDescription = study?.["00081030"]?.["Value"] ?? ""; 
    const studyUID = study?.["0020000D"]?.["Value"]?.[0]; 
 
    const row = tbody.insertRow(0); 
    row.insertCell(0).innerHTML = studyUID; 
    row.insertCell(0).innerHTML = studyDescription; 
    row.insertCell(0).innerHTML = studyDate; 
    row.insertCell(0).innerHTML = accessionNumber; 
    row.insertCell(0).innerHTML = patientName; 
    row.insertCell(0).innerHTML = patientID; 
 
    row.onclick = async () => { 
      let series = await querySeries(studyUID); 
      updateSeriesResults(series); 
    }; 
  }); 
}; 
 
const search = async () => { 
  let studies = await queryStudies({ 
    PatientID: document.getElementById("queryParamPatientID").value, 
    PatientName: document.getElementById("queryParamPatientName").value, 
  }); 
 
  updateStudyResults(studies); 
}; 
 
const clearSearch = () => { 
  removeResults("studyResults"); 
  removeResults("seriesResults"); 
 
  document.getElementById("queryParamPatientID").value = ""; 
  document.getElementById("queryParamPatientName").value = ""; 
}; 

const actionID = { 
  // Interactive actions. 
  windowLevel: 1, 
  offset: 2, 
  scale: 3, 
  stack: 4, 
  spy: 5, 
  probe: 6, 
 
  // Annotation actions. 
  rect: 7, 
  circle: 8, 
  arrow: 9, 
  ruler: 10, 
  highlight: 11, 
}; 
 
function windowLevel() { 
  getSelectedCells().forEach((c) => { 
    if (!c.actions.lookup[actionID.windowLevel]) 
      c.actions.add( 
        new lt.Controls.Medical.WindowLevelAction(actionID.windowLevel) 
      ); 
 
    c.actions.lookup[actionID.windowLevel].run(null); 
  }); 
} 
 
function offset() { 
  getSelectedCells().forEach((c) => { 
    if (!c.actions.lookup[actionID.offset]) 
      c.actions.add(new lt.Controls.Medical.OffsetAction(actionID.offset)); 
 
    c.actions.lookup[actionID.offset].run(null); 
  }); 
} 
 
function scale() { 
  getSelectedCells().forEach((c) => { 
    if (!c.actions.lookup[actionID.scale]) 
      c.actions.add(new lt.Controls.Medical.ScaleAction(actionID.scale)); 
 
    c.actions.lookup[actionID.scale].run(null); 
  }); 
} 
 
function stack() { 
  getSelectedCells().forEach((c) => { 
    if (!c.actions.lookup[actionID.stack]) 
      c.actions.add(new lt.Controls.Medical.StackAction(actionID.stack, c)); 
 
    c.actions.lookup[actionID.stack].run(null); 
  }); 
} 
 
function spy() { 
  getSelectedCells().forEach((c) => { 
    if (!c.actions.lookup[actionID.spy]) 
      c.actions.add(new lt.Controls.Medical.SpyGlassAction(actionID.spy)); 
 
    c.actions.lookup[actionID.spy].run(null); 
  }); 
} 
 
function probe() { 
  getSelectedCells().forEach((c) => { 
    if (!c.actions.lookup[actionID.probe]) 
      c.actions.add(new lt.Controls.Medical.ProbeToolAction(actionID.probe, c)); 
 
    c.actions.lookup[actionID.probe].run(null); 
  }); 
} 
 
function ctr() { 
  getSelectedCells().forEach((c) => { 
    c.drawables["CTRTool"] = new lt.Controls.Medical.CTRTool( 
      c.selectedItem.attachedFrame 
    ); 
    c.invalidate(null); 
  }); 
} 
 
function rect() { 
  getSelectedCells().forEach((c) => { 
    if (!c.actions.lookup[actionID.rect]) 
      c.actions.add( 
        new lt.Controls.Medical.AutomationInteractiveAction( 
          actionID.rect, 
          lt.Annotations.Engine.AnnObject.rectangleObjectId, 
          c.automation 
        ) 
      ); 
 
    c.actions.lookup[actionID.rect].run(null); 
  }); 
} 
 
function circle() { 
  getSelectedCells().forEach((c) => { 
    if (!c.actions.lookup[actionID.circle]) 
      c.actions.add( 
        new lt.Controls.Medical.AutomationInteractiveAction( 
          actionID.circle, 
          lt.Annotations.Engine.AnnObject.ellipseObjectId, 
          c.automation 
        ) 
      ); 
 
    c.actions.lookup[actionID.circle].run(null); 
  }); 
} 
 
function arrow() { 
  getSelectedCells().forEach((c) => { 
    if (!c.actions.lookup[actionID.arrow]) 
      c.actions.add( 
        new lt.Controls.Medical.AutomationInteractiveAction( 
          actionID.arrow, 
          lt.Annotations.Engine.AnnObject.pointerObjectId, 
          c.automation 
        ) 
      ); 
 
    c.actions.lookup[actionID.arrow].run(null); 
  }); 
} 
 
function ruler() { 
  getSelectedCells().forEach((c) => { 
    if (!c.actions.lookup[actionID.ruler]) 
      c.actions.add( 
        new lt.Controls.Medical.AutomationInteractiveAction( 
          actionID.ruler, 
          lt.Annotations.Engine.AnnObject.rulerObjectId, 
          c.automation 
        ) 
      ); 
 
    c.actions.lookup[actionID.ruler].run(null); 
  }); 
} 
 
function highlight() { 
  getSelectedCells().forEach((c) => { 
    if (!c.actions.lookup[actionID.highlight]) 
      c.actions.add( 
        new lt.Controls.Medical.AutomationInteractiveAction( 
          actionID.highlight, 
          lt.Annotations.Engine.AnnObject.hiliteObjectId, 
          c.automation 
        ) 
      ); 
 
    c.actions.lookup[actionID.highlight].run(null); 
  }); 
} 
 
function fit() { 
  getSelectedCells().forEach((c) => { 
    c.zoom(lt.Controls.Medical.MedicalViewerSizeMode.fit, 1); 
  }); 
} 
 
function oneToOne() { 
  getSelectedCells().forEach((c) => { 
    c.zoom(lt.Controls.Medical.MedicalViewerSizeMode.actualSize, 1); 
  }); 
} 
 
function zoomIn() { 
  getSelectedCells().forEach((c) => { 
    c.zoom(c.get_scaleMode(), c.get_scale() * 2); 
  }); 
} 
 
function zoomOut() { 
  getSelectedCells().forEach((c) => { 
    c.zoom(c.get_scaleMode(), c.get_scale() / 2); 
  }); 
} 
 
function rotate() { 
  getSelectedCells().forEach((c) => { 
    c.set_rotateAngle(c.get_rotateAngle() + 90); 
  }); 
} 
 
function rotateCC() { 
  getSelectedCells().forEach((c) => { 
    c.set_rotateAngle(c.get_rotateAngle() - 90); 
  }); 
} 
 
function flip() { 
  getSelectedCells().forEach((c) => { 
    c.set_flipped(!c.get_flipped()); 
  }); 
} 
 
function reverse() { 
  getSelectedCells().forEach((c) => { 
    c.set_reversed(!c.get_reversed()); 
  }); 
} 
 
function invert() { 
  getSelectedCells().forEach((c) => { 
    c.set_inverted(!c.get_inverted()); 
  }); 
} 
 
function alignLeft() { 
  getSelectedCells().forEach((c) => { 
    c.horizontalAlignment = lt.Controls.Medical.HorizontalAlignmentType.left; 
  }); 
} 
 
function alignTop() { 
  getSelectedCells().forEach((c) => { 
    c.verticalAlignment = lt.Controls.Medical.VerticalAlignmentType.top; 
  }); 
} 
 
function overlay() { 
  getSelectedCells().forEach((c) => { 
    c.set_overlayTextVisible(!c.get_overlayTextVisible()); 
  }); 
} 
 
function reload() { 
  getSelectedCells().forEach((c) => { 
    c.reset(); 
  }); 
} 
 
function cine() { 
  getSelectedCells().forEach((c) => { 
    if (c.cinePlayer.isPlaying) c.cinePlayer.stop(); 
    else c.cinePlayer.play(); 
  }); 
} 
 
function explode() { 
  getSelectedCells().forEach((c) => { 
    c.viewer.set_exploded(!c.viewer.get_exploded()); 
  }); 
}