Developing extensions

[kkmehta03]

What is the complete procedure to create extensions for OHIF Dicom viewer?
I've read this Extensions document but would like to know how exactly are the extensions built.

Description

There's a good amount of detail on how the extensions are consumed, but I need to know if there are any recipes to develop them too. If not, can anyone help me by providing a link to a sample extension that's developed from scratch.
Any detail would be very helpful.

Thanks!

[dannyrb]

Each of these ^_^

https://github.com/OHIF/Viewers/tree/master/extensions

We have some improvements coming soon that make extensions even more powerful, but the gist remains the same. If you have specific questions or encounter specific issues, please don't hesitate to reach out.

Good questions that help illustrate problem areas can help inform docs.

[kkmehta03]

Hi Danny,
Thanks for your response.
I'm looking to create an extension that can take the view port image, pass it on to a server that will do some image processing.
I wish to display the result on a dialog box in the dicom viewer web page.
Can you help me out with a process?

[kkmehta03]

If you happen to have a sample recipe of how things flow, that would be very helpful too

[kkmehta03]

As a specific example, each extension seems to have a .webpack folder attached to it.
I want to know how the extensions should be developed. Is there a command-line tool to develop it?
I'm sorry if the question is a little vague, I'm very new at this so I'm not able to make complete sense of it. I saw the documentation to all of those extensions, but still didn't get a complete picture

[dannyrb]

Because the OHIF Viewer is a monorepo, we take advantage of that so that all of our packages can share the same tooling, bundling, transpiling, etc. But I'm getting ahead of myself. Extensions can be very simple. Here is an example of one that is added in-line:

https://codesandbox.io/s/ohif-script-tag-v103-custom-extensions-3qnd2?fontsize=14&hidenavigation=1&theme=dark

This sandbox uses the "Script Tag" version of OHIF. You can see where we've inlined a custom extension under the application configuration's "extensions" key. It adds a command and a button. If you visit a study, you can click the registered button and watch the command execute.

---

Extensions can be added via configuration, similar to the example above, or bundled with the application by:

• Adding a new package for the extension to the monorepo
  • (or adding an external extension as an NPM dependency)
• Modifying platform/viewer/index.js to include the extension in the extension's list
• Building the PWA viewer by running yarn run build from repository root

This allows you to leverage treeshaking, codesplitting, and a number of other performance/optimization features. (It also makes for a better development experience)

---

If you want to author your extension in a different repository, you just need to make sure that it:

• Has a single top level export that is a class that implements the extension interface
• That it targets ES5

---

It's a weird set of skills. I'm guessing many contributors aren't used to authoring a package, or extending a monorepo.

[kkmehta03]

Okay Danny, Thanks a lot. Really appreciate it!

[kkmehta03]

When I'm able to have a successful implementation of the extension I'm planning to make, I'd like to make some changes in the documentation and create a pull request

[dannyrb]

@KhyatiMehta3, please feel free to! We're always looking for improvements to our docs and guides! I'm also very appreciative of extension feedback.

[kkmehta03]

Hello! I'm back with another question
I want to extract the image in the study, but I'm not able to find a straightforward way to do this.

I see that the image is loading up on cornerstone-canvas. I want to extract this image and do some manipulations to it. Can you help me figure at what part of the code this image is getting loaded?

[dannyrb]

@KhyatiMehta3, can you create a new issue for this new question?