cornerstonejs / cornerstone3D

Cornerstone is a set of JavaScript libraries that can be used to build web-based medical imaging applications. It provides a framework to build radiology applications such as the OHIF Viewer.
https://cornerstonejs.org
MIT License
570 stars 290 forks source link

[Feature Request] Include imports in the "Final Code" section in the tutorials #1417

Closed AlexanderZeilmann closed 5 days ago

AlexanderZeilmann commented 2 months ago

What feature or change would you like to see made?

When looking at the tutorials here, I am missing the imports in the "Final code" section. It is not clear to me where the functions createImageIdsAndCacheMetaData, RenderingEngine, ViewportType and similar are coming from.

Why should we prioritize this feature?

Complete docs are always a good idea.

Ragnar-Oock commented 2 months ago

The "final code" blocks on the doc are supposed to be copy pasted in to the packages/tools/examples/tutorial/index.ts file as pointed out on the doc (here to be precise). But I agree, having an actual code snippet that works by itself would be nice to have.

As a side note, while I understand the why the tutorial section is written the way it is, it makes it really hard to understand what is actually needed as a minimal setup for cornerstone to display an image because the boilerplate file import so many things that are never explained. The only way to know if something is actually needed for a given use case is to remove it and try to run the code.

AlexanderZeilmann commented 2 months ago

The "final code" blocks on the doc are supposed to be copy pasted in to the packages/tools/examples/tutorial/index.ts file as pointed out on the doc (here to be precise).

But this information is only on the general overview page. A person arriving at one of the tutorial pages via Google is lost. In my experience tutorials are not read from front to back, but people pick what they need.

As a side note, while I understand the why the tutorial section is written the way it is, it makes it really hard to understand what is actually needed as a minimal setup for cornerstone to display an image because the boilerplate file import so many things that are never explained. The only way to know if something is actually needed for a given use case is to remove it and try to run the code.

Fully agree. Having a minimal example would also be helpful as a template in bug reports.

Ideally, the tutorials run in the setup of the user not in a predefined environment. That means for example that there shouldn't be relative imports like this and it should work with the most common build tools (vite, webpack, ...), but that is a more complicated task.

qiaozhi-4 commented 3 weeks ago

I also need guidance, and I want to use it in nuxt, but there are a lot of examples I can't find

qiaozhi-4 commented 3 weeks ago

I also need guidance, and I want to use it in nuxt, but there are a lot of examples I can't find

The relevant documentation can be recommended

sedghi commented 5 days ago

Sure i will add it