ohif / react-viewerbase Goto Github PK
View Code? Open in Web Editor NEWCore medical image viewer components built using React
Home Page: https://react.ohif.org/
License: MIT License
Core medical image viewer components built using React
Home Page: https://react.ohif.org/
License: MIT License
We're currently throwing some css variables on :root
and calling it a day. While that does the trick, we lose out on testing, composition, etc.
We will want to look into libraries in this space that have become the React "go to" libraries for accomplishing theming.
We recently merged some drag-n-drop improvements here: #122
It may be worth looking into:
dataTransfer.setDragImage()
instead of building our ownViewers
to simplify our componentsA field wrapper wraps a form element. It allows you to supply a label, description, hint text, etc.
I want to implement complete code with all components when I import and uses this is says it is an object expected a single component
import CornerstoneViewport from 'react-viewerbase'
How to implement complete ohif running code in my react app ?
When following your README sample, I stuck into an installation problem. The output of the error is as follows.
example/
folder, like you said, we have this:> npm install
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!
Describe the bug
The demo is using the incorrect font-family. This is largely caused by Bootstrap's normalize.css. The font should be Roboto, but it is instead the font set by Bootstrap's normalize.css
.
FontAwesome is a great library, but we don't want to lock users into it as a dependency. By providing a custom icon font, or set of SVGs, we reduce bloat/dependencies and provide more flexibility.
Would be preferable options. If you have questions, comments, or concerns; please feel free to chime in. If you would like to claim this issue, please feel free to π
src/components/studyBrowser/ImageThumbnail.js
uses cornerstone
to async render image thumbnails. However, cornerstone
is never passed in, and react-viewerbase
does not have cornerstone
as a peerDependency.
The only reason this has worked up until now is due to us attaching cornerstone
to the window
to assist with debugging. As part of cleaning things up, I went to remove this reference, and it causes the app to crash.
In my opinion, this should be factored out entirely and handled in the application. This component should be simple and work with image source data only.
We want props for components to load like this:
In version 1, they do not. We need to watch this issue for a fix:
A lot of the "structures" from the OHIF Viewer have been recreated in react-viewerbase
, but most of the elements that they combine have not. For example, take the buttons used in the UserPreferencesModal
:
These should be replaced with a new component, under Elements
, named Button
. It should support the following:
a
element is used as root nodechildren
When adding a style like:
user-select: none;
I currently need to make sure to include all appropriate vendor prefixes:
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
In a perfect world, I would lean on something like https://github.com/postcss/autoprefixer so I don't need to remember in which stage of adoption each feature is in.
Before Creating an issue
Describe the bug
The react-dnd
backend that is included by default does not support touch devices.
We should also determine whether or not the backend should be a dependency or peerDependency, since end users may want to override it.
Steps To Reproduce
Expected behavior
The end user should be able to drag and drop the thumbnails on touch devices.
Environment
Additional context
Needs to be tested on a touch device or in the browser's JS console touch emulator.
A few components rely on class styles provided by bootstrap. For example, the "LayoutButton" has a "LayoutChooser" that's white background is set by .dropdown-menu
from Bootstrap.
This dependency is not immediately obvious and can create tricky situations. Pulling in all of Bootstrap can create unnecessary styling conflicts, adds unused styles (bloat), may be a deterrent for would-be library consumers.
flexbox
or CSS grid
insteadmodal
, dropdown
, or some other component styling? Integrate the relevant portions directly into our component styles.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.
https://deploy-preview-100--ohif-react-viewerbase.netlify.com/components/toolbar-section
TypeError: Cannot read property 'includes' of undefined
This should just be a label
rendering with a basic reset styling. It only needs to support:
The image I'm including is an example of the style we're targeting for these new components.
defaultChecked
(can't use w/ controlled)All components that provide an opportunity for controlled vs uncontrolled usage should include a note or examples mentioning as much, and how onChange
and value
can be used.
Do we have an example using react-viewerbase via a script tag? Is it supported?
environment
OS - ubuntu 16.04 64bit
node version v11.9.0
npm version 6.7.0
$git clone https://github.com/OHIF/react-viewerbase
$cd react-viewerbase/
$yarn install
$yarn start
rollup v0.68.2
bundles src/index.js β dist/index.js, dist/index.es.js...
and rollup watches files, If i change a file it recompiled
Problem
I visit http://localhost:3000/ nothing is there.
This site canβt be reached
FYI create-react-app works fine,
Renders a group of <Radio>
fields.
An example of options would be:
<RadioGroup
name="myGroup"
options={[
{ label: 'Hello', value: 'World' },
{ label: 'Fizz', value: 'Buzz' }
]}
/>
This is more of a discussion item.
src/LayoutChooser/LayoutManager.js
appears to be where we look at our "availablePlugins" (viewport modules), and determine which ones should be rendered for the current layout.
While I like our ExtensionManager
living here, as it can provide a well tested, view agnostic, way to manage our extensions and modules, our components should be as dumb as possible. This allows for increased re-use, and for the implementing Viewer
to determine how/when/where to slot registered extensions.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.