Add IDC Portal interface with Slicer opener option injected

[fedorov]

We can open IDC Portal webpage in a Slicer window, and modify its code to add a button to open selected series/study directly in Slicer. @pieper experimented with this in the past, and will look for the relevant code snippets.

It could be good to add this browser option as a tab along with the current interface, once we get rid of the popup window in #50.

[pieper]

Here's a small proof-of-concept script that can be pasted into the current IDC portal. Just select a collection and study so that a download link appears and then paste in this script. The string "SLICER" will show up below the download button and when you click it you get an alert that includes the dicom UID. When running the portal in Slicer with a qSlicerWebWidget, this callback can trigger download using the window.slicerPython interface rather than showing the alert.

let downloadButtons = document.querySelectorAll(".fa.fa-download")

downloadButtons.forEach( button => {
  e = document.createElement("p")
  e.innerText = "SLICER"
  button.parentElement.appendChild(e)
  e.addEventListener("click", event => {
    alert(`Hey, Slicer, load ${button.dataset.uid}`)
  })
})

[fedorov]

@pieper Kyle is getting to this issue soon!

Can you give some more details about how the code you provided should be integrated with the page, instead of running it from the console?

[pieper]

Sure, it should be very straightforward. Although I'm sure might seem a little magical, you can just embed that javascript code inside python and pass data and commands back and forth.

It's like this example I did at Project Week in Montreal. In this example you can see that at the bottom there's a qSlicerWebWidget and in this case I set the html directly to display a chart using eCharts. Inside the javascript code there's a check to see if the code is running with a slicerPython attribute on the window object (this is registered by the web widget) and if so it sends a string of python code to be evaluated on the Slicer side.

So, as it relates to the proof-of-concept snippet above, what would happen is that you would load the IDC portal explore page (set the web widget's url property instead of the html property). There's a webWidget.evalJS that you can use to inject the snippet to add buttons next to the download links such that when they are clicked they use the window.slicerPython method to invoke the download from IDC on the Slicer side by passing the UIDs to a python function you provide.

The tricky parts will be reverse engineering to figure out how to the events from the portal code when the selections change and also inserting the buttons cleanly so that events are handled correctly and so on. This is why once we have a prototype it will be good to coordinate with Suzanne to add this feature natively to the portal web app. The portal could use the same window.slicerPython test to know whether to expose a UI button or not.

[pieper]

By the way, the example script I pointed to above does work if you paste it into Slicer (tested 5.8.1 with IDC browser installed) but I didn't write the python function to load the case because I ran out of time at project week, but you will see the UIDs printed on the Slicer console.

[fedorov]

This looks very helpful, thanks a lot Steve!

[Sunderlandkyl]

Thanks @pieper! I'll let you know if I have any questions!