Core medical image viewer components built using React

Last update: May 25, 2022

⚠️ THIS REPOSITORY IS ARCHIVED ⚠️

Don't worry, it's still being actively developed, we've just moved πŸ˜…

Related announcement: πŸŽ‰ From Many Repositories to a Monorepo πŸ€–

react-viewerbase

React Viewerbase is a collection of components and utilities that power OHIF's zero-footprint DICOM viewer.


CircleCI All Contributors code style: prettier semantic-release

NPM version NPM downloads MIT License

This set of "Medical Imaging Viewer" React components are maintained separately to:

  • Decouple presentation from business logic
  • Test and develop components in isolation
  • Provide well documented, reusable components
  • Aid rapid application development for context specific viewers

Install

This component library is pre- v1.0. All realeases until a v1.0 have the possibility of introducing breaking changes. Please depend on an "exact" version in your projects to prevent issues caused by loose versioning.

For full installation instructions, be sure to check out our getting started guide.

// with npm
npm i react-viewerbase --save-exact

// with yarn
yarn add react-viewerbase --exact

Usage

import React, { Component } from 'react';
import { LayoutButton } from 'react-viewerbase';

class Example extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedCell: {
        className: 'hover',
        col: 1,
        row: 1,
      },
    };
  }

  render() {
    return (
      <LayoutButton
        selectedCell={this.state.selectedCell}
        onChange={cell => this.setState({ selectedCell: cell })}
      />
    );
  }
}

Running Locally

Restore dependencies after cloning:

  1. cd react-viewerbase
  2. yarn install

Develop w/ Hot Reloading:

yarn dev

Build for Production:

yarn build

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Erik Ziegler
Erik Ziegler

πŸ’» 🚧
Danny Brown
Danny Brown

πŸ’» 🚧
Gustavo AndrΓ© Lelis
Gustavo AndrΓ© Lelis

πŸ’» 🚧
Thiago Maltempi
Thiago Maltempi

πŸ’»
Esref Durna
Esref Durna

πŸ’»
Steve Pieper
Steve Pieper

πŸ’»
Biharck Araujo
Biharck Araujo

πŸ’»
Rodrigo Antinarelli
Rodrigo Antinarelli

πŸ’»
JoΓ£o Felipe de Medeiros Moreira
JoΓ£o Felipe de Medeiros Moreira

πŸ’»
James Gosbell
James Gosbell

πŸ’»
Evren Ozkan
Evren Ozkan

πŸ’»
Zach S.
Zach S.

πŸ’»
Mete Ugur Akdogan
Mete Ugur Akdogan

πŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!

Issues

Looking to contribute? Look for the Good First Issue label.

πŸ› Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

See Bugs

πŸ’‘ Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a πŸ‘ . This helps maintainers prioritize what to work on.

See Feature Requests

❓ Questions

For questions related to using the library, please visit our support community, or file an issue on GitHub.

Google Group

License

MIT Β© OHIF

GitHub

https://github.com/OHIF/react-viewerbase/
Comments
  • 1. Chore/improved examples with docz

    WIP

    image

    Benefits

    • Isolated "playgrounds" to render component
    • Quick launch an example in a codesandbox
    • Toggle to see code used to generate example
    • Runs against pre-built component code; so you can use docs as live-reload while you develop components
    • Leverges .mdx so we can use Markdown and jsx in the same file
    • Support for TypeScript, Emotion, StyledComponents, etc. (if/when we decide to use them)

    TODO

    • [x] Replace all existing examples in examples/
    • [x] Remove examples/
    • [x] Usage docs
    • [x] Next steps / Guidelines as we refine this component library
      • See below "next steps"
    • [x] Pre - v1.0 warning in docs
    • [x] Clean up README to follow cornerstone.js template
    • [x] Tag reviewers
    • [x] Notify stakeholders to use strict versioning until we're at v1.0
      • [ ] Merge and bump version

    Next Steps

    Moved to roadmap project: https://github.com/OHIF/react-viewerbase/projects/1

    • Contributing.md
      • Mention react-powerplug
    • Wizard steps for bug, feature, question (see docz repo)
    • Create issue for side-by-side jest tests
    • Semantic-release to make versioning / releases less painful
    • [x] Update OHIF/Viewer/react to use latest; create issues caused by change
      • https://github.com/OHIF/Viewers/pull/384
    Reviewed by dannyrb at 2019-04-10 14:33
  • 2. Example Dependency Error

    When following your README sample, I stuck into an installation problem. The output of the error is as follows.

    1. By doing the dependency installation inside your example/ folder, like you said, we have this:
    > npm install
    
    1. Then, the output of the errors are:
    npm ERR! path /Users/Francisco/Git/react-viewerbase/example/node_modules/.staging/react-viewerbase-091ed109/node_modules/@babel/code-frame
    npm ERR! code ENOENT
    npm ERR! errno -2
    npm ERR! syscall rename
    npm ERR! enoent ENOENT: no such file or directory, rename '/Users/Francisco/Git/react-viewerbase/example/node_modules/.staging/react-viewerbase-091ed109/node_modules/@babel/code-frame' -> '/Users/Francisco/Git/react-viewerbase/example/node_modules/.staging/@babel/code-frame-275380b3'
    npm ERR! enoent This is related to npm not being able to find a file.
    npm ERR! enoent 
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/Francisco/.npm/_logs/2018-12-13T14_34_35_435Z-debug.log
    

    Anyway, I also would like to congratualte your effort, by giving us, the community, a React version. Thank you!

    Reviewed by FMCalisto at 2018-12-13 14:40
  • 3. Chore/kill external icon dependencies

    This may be a better alternative to automate this:

    • https://www.smooth-code.com/open-source/svgr/

    There is also this pattern from Vue:

    • https://vuejs.org/v2/cookbook/editable-svg-icons.html

    And this webpack loader:

    • https://github.com/kisenka/svg-sprite-loader

    Our current approach could be improved with Dynamic Imports (Code splitting) w/ eager loading; but that would break our embedded UMD.js package for Viewer?

    firefox_k7XA9HGd0c

    Reviewed by dannyrb at 2019-05-24 02:19
  • 4. How do I use this package as a local dependency for another project?

    I've noticed this package is used in other places such as OHIF viewer in here: https://github.com/OHIF/Viewers/tree/react/Packages-react. I've started to modify react-viewerbase locally and see its effect in ohif-viewer. As the external dependency, I've used yarn link react-viewerbase and OHIF viewer appears to be able to link to it.

    The problem is with debugging both projects at the same time. While I'm able to set debugging breakpoints in ohif-viewer/src, setting breakpoints in react-viewerbase/src does not work when launching the ohif-viewer. My intuition tells me that the source maps of the external (and local) dependencies are not built by default as yarn link creates a symbolic link under ohif-viewer/node_modules. I haven't been able to solve this problem after googling for a few days (few people seem to have this issue after all, which makes me think there are other alternative ways to accomplish it), and wonder if you would have some good suggestions. Thank you in advance and any help is much appreciated.

    Reviewed by yaoli at 2019-03-11 09:23
  • 5. refactor and export more components

    ToolSection should able to handle "active tool" logic. however higher component "App" should able to overwrite it as well.

    onClick function triggering.

    Reviewed by EsrefDurna at 2018-12-08 01:46
  • 6. update package.json react-viewerbase

    previous dependency link:.. was not working. npm supports file: also github repository as artifact.

    current file:.. implementation will allow developers to change project and test it faster.

    Thank you

    Reviewed by EsrefDurna at 2018-12-07 21:12
  • 7. more descrptive install instructions

    I was not able to install OHIF/react-viewerbase successfully using yarn add react-viewerbase --exact, so I tried to use npm i react-viewerbase --save-exact and I received the same error:

    gyp ERR! build error gyp ERR! stack Error:C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exefail ed with exit code: 1 gyp ERR! stack at ChildProcess.onExit (C:\Users\14ot3\Desktop\components\nod e_modules\node-gyp\lib\build.js:262:23) gyp ERR! stack at ChildProcess.emit (events.js:200:13) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_proces s.js:272:12) gyp ERR! System Windows_NT 10.0.17134 gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\14ot3\\Deskto p\\components\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" " --libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" gyp ERR! cwd C:\Users\14ot3\Desktop\components\node_modules\node-sass gyp ERR! node -v v12.3.1 gyp ERR! node-gyp -v v3.8.0 gyp ERR! not ok Build failed with error code: 1

    So after trying out many different things just to get it running locally, npm install --force and then yarn dev ended up working for me so I would like to update the README to help others who might go through the same problem.

    I'm not sure if my wording is consistent with the rest of the document, I'm not even sure whether I'm presenting this issue in the correct way, any information about how I should present such an issue would be helpful.

    Reviewed by omartoutounji at 2019-05-29 16:52
  • 8. Component "props" should render beneath playground

    We want props for components to load like this:

    image

    In version 1, they do not. We need to watch this issue for a fix:

    https://github.com/pedronauck/docz/issues/777

    Reviewed by dannyrb at 2019-04-15 20:00
  • 9. incorrect key assignment in user preferences

    On my keyboard (US English on a mac book pro) some basic keys work to define shortcust, like numbers and letters, but other keys result in the wrong characters. For example the equals key results in a double right chevron, and the minus key gives the symbol for one half.

    image

    Reviewed by pieper at 2019-01-08 13:01
Cornerstone medical image viewport component for React

react-cornerstone-viewport Cornerstone medical image viewport component for React Documentation and Examples:

Jun 17, 2022
Recreate one image using the tiles from another image.
Recreate one image using the tiles from another image.

Mosaic Recreate one image using the tiles from another image. https://mosaic.constraint.systems About the algorithm The image proccessing works like t

Mar 30, 2022
🌈 A React image component. Simple realization of image shadow.

?? react-image-shadow A React image component. Simple realization of image shadow.

Feb 10, 2022
A react component that renders image tag only if the image source is found without error.

Img-or-alt This react component that will render image tag only if the image source is found without error, otherwise it renders only the alt text in

Dec 14, 2021
React Image and Background Image Preloader and Fade in. Load those images in smooth!

React Image and Background Image Fade Fade in images AND background images easily in React ?? ! Demo and Docs are live! react-image-and-background-ima

May 24, 2022
nextjs-image-generation is a POC on how to do server-side image generation.
nextjs-image-generation is a POC on how to do server-side image generation.

nextjs-image-generation is a POC on how to do server-side image generation.

May 29, 2022
React 360 Product Viewer - Let your users view your product or 3D renders
React 360 Product Viewer - Let your users view your product or 3D renders

React 360 Product Viewer Let your users view your product or 3D renders using mouse/touch or set it to autoplay! See it in action in storybook Β· Repor

Jun 20, 2022
A collection of responsive, image magnifying React components for mouse and touch.

A collection of responsive, image magnifying React components for mouse and touch. Useful for product images in ecommerce sites, image galleries, stock photos, etc.

Jun 23, 2022
πŸŒ„ Image editor using native modules for iOS and Android. Inherit from 2 available libraries, Brightroom (iOS) and PhotoEditor (Android)
πŸŒ„ Image editor using native modules for iOS and Android. Inherit from 2 available libraries, Brightroom (iOS) and PhotoEditor (Android)

?? Image editor using native modules for iOS and Android. Inherit from 2 available libraries, Brightroom (iOS) and PhotoEditor (Android)

Jun 16, 2022
React carousel image gallery component with thumbnail support πŸ–Ό
React carousel image gallery component with thumbnail support  πŸ–Ό

React Carousel Image Gallery Live Demo (try it on mobile for swipe support) linxtion.com/demo/react-image-gallery React image gallery is a React compo

Jun 21, 2022
React for Upload Image Gallery. Drag & Drop, Sortable, Customize.
React for Upload Image Gallery. Drag & Drop, Sortable, Customize.

React Upload Gallery A simple library that lets you create an image gallery, change the order of images, select the highlighted image, and customize i

Jun 17, 2022
simple image slider component for react
simple image slider component for react

simple image slider component for react

Jun 15, 2022
A React component for magnifying an image within its original container

A React component for magnifying an image within its original container. Zoom behavior can be triggered on click or hover and the zoomed image can be moved by dragging on touch devices and either dragging or pan on hover on non-touch devices. The component supports responsive images, loading placeholders, optional fullscreen zoom on mobile, and more.

Jun 16, 2022
πŸ”Ž Medium.com style image zoom for React πŸ”

react-medium-image-zoom This library is a React.js implementation of Medium.com's image zoom that allows for images to work together for a β€œzooming” e

Jun 21, 2022
React Native Image Gallery with Thumbnails
React Native Image Gallery with Thumbnails

React Native Image Gallery with Thumbnails Features Image gallery with thumbnails Made with PanResponder, no external dependencies Written in Typescri

Jun 22, 2022
An interactive, multi-layer image component for React

react-layered-image react-layered-image is an interactive, multi-layer image component for React, inspired by the Apple TV layered images. Features Ru

Apr 1, 2022
React component for image displaying in full screen
React component for image displaying in full screen

React Image Viewer [email protected] has been rewriten with React Hooks and all apis of it have been redesigned. If you are using [email protected], please

Apr 6, 2022
Justified image gallery component for React

React Grid Gallery Justified image gallery component for React inspired by Google Photos and based upon React Images. ?? Maintainers wanted ?? As reac

Jun 17, 2022
πŸ” React image zoom component
πŸ” React image zoom component

react-magnifier React image zoom component Simple and customizable Supports touch screens Allows different files for large image and magnifying glass

Jun 15, 2022