History

Joe Boccanfuso 9b0d542526 fix: rework inconsistencies in split button implementation(#3086 ) * feat: Combine the layout grid selector tool with the toggle MPR button into a split button. The primary button will always be the layout grid selector and the MPR toggle is in the drop down menu. This is the first step to later adding other (e.g. 3D) layout HPs to the menu. Summary of changes/fixes: - SplitButton now allows for its primary button to be any button component specified by a UI type. - SplitButton passes a className to its primary button component to dictate how it should be rendered based on its active/toggle status, hovering, menu visibility etc. - The default menu item renderer for the SplitButton, renders acitve toggle items correctly. - Items/buttons in the toolbar are now all the correct and same size. - Added ToolbarService.getButtonComponentForUIType to fetch a button component for a given UI type. - Spacing between toolbar items is now done at the Toolbar level to avoid double spacing and to ensure uniform spacing. - The drop down menu closes when clicking the primary button. - Show a mouse down click effect when clicking the primary button. Items to investigate still: The following are all slightly contrary to the design specs of the UI: - Is the click effect on the primary button satisfactory because with the hover border effect, the button appears slightly smaller during the mouse down/up operation? (MEDIUM) - On hover over the drop down button, the right-hand-side corners of the primary button appear rounded and NOT square. Also the hover over the drop down button border effects make the primary button appear smaller. (MEDIUM) - Should there be hover effects when hovering over either tooltip of the SplitButton? (LOW) * feat: Combine the layout grid selector tool with the toggle MPR button into a split button. Fixed broken e2e tests. data-cy and data-tool properties now passed down to primary button component. * feat: Combine the layout grid selector tool with the toggle MPR button into a split button. On drop down button hover, the primary button now stretches all the way right with no right border and with square corners in the top and bottom right as per the toolbar spec. The mouse down effect gives a full button look (i.e. no borders) with rounded corners all around and black text icon. * feat: Combine the layout grid selector tool with the toggle MPR button into a split button. Documented that the primary button of a split button can specify a UI type. * feat: Combine the layout grid selector tool with the toggle MPR button into a split button. Feedback from PR review to fix prettier formatting issue. * feat: Combine the layout grid selector tool with the toggle MPR button into a split button. Added TODOs as per Bill's request in the PR. * feat: Combine the layout grid selector tool with the toggle MPR button into a split button. Feedback from Alireza: reverted the layout selector and MPR tools to be separate toolbar items. Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>		2023-01-06 15:00:23 -05:00
..
.webpack	feat: cornerstone3D stack and volume viewports (#2787 )	2022-07-27 12:39:04 -04:00
src	fix: rework inconsistencies in split button implementation(#3086 )	2023-01-06 15:00:23 -05:00
.all-contributorsrc	Chore/kill yalc with fire (#629 )	2019-08-13 15:36:46 -04:00
babel.config.js	Chore/kill yalc with fire (#629 )	2019-08-13 15:36:46 -04:00
CHANGELOG.md	chore(release): publish [skip ci]	2020-05-14 11:53:42 +00:00
jest.config.js	Chore/kill yalc with fire (#629 )	2019-08-13 15:36:46 -04:00
LICENSE	Chore/kill yalc with fire (#629 )	2019-08-13 15:36:46 -04:00
package.json	feat: Add DICOM SEG support and MPR, referenceLines and StackSync and more (#3015 )	2022-11-16 14:19:52 -05:00
README.md	Instance metadata/metadata providers overhaul (#1481 )	2020-03-09 19:03:23 +00:00

README.md

@ohif/core

@ohif/core is a collection of useful functions and classes for building web-based medical imaging applications. This library helps power OHIF's zero-footprint DICOM viewer.

Why?

This library offers pre-packaged solutions for features common to Web-based medical imaging viewers. For example:

Hotkeys
DICOM Web
Hanging Protocols
Managing a study's measurements
Managing a study's DICOM metadata
A flexible pattern for extensions
And many others

It does this while remaining decoupled from any particular view library or rendering logic. While we use it to power our React Viewer, it can be used with Vue, React, Vanilla JS, or any number of other frameworks.

Getting Started

The documentation for this library is sparse. The best way to get started is to look at its top level exports, and explore the source code of features that interest you. If you want to see how we use this library, you can check out our viewer implementation.

Install

This 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.

// with npm
npm i @ohif/core --save-exact

// with yarn
yarn add @ohif/core --exact

Usage

Usage is dependent on the feature(s) you want to leverage. The bulk of @ohif/core's features are "pure" and can be imported and used in place.

Example: retrieving study metadata from a server

import { studies } from '@ohif/core';

const studiesMetadata = await studies.retrieveStudiesMetadata(
  server, // Object
  studyInstanceUIDs, // Array
  seriesInstanceUIDs // Array (optional)
);

Contributing

It is notoriously difficult to setup multiple dependent repositories for end-to-end testing and development. That's why we recommend writing and running unit tests when adding and modifying features for this library. This allows us to program in isolation without a complex setup, and has the added benefit of producing well-tested business logic.

Clone this repository
Navigate to the project directory, and yarn install
To begin making changes, yarn run dev
To commit changes, run yarn run cm

When creating tests, place the test file "next to" the file you're testing. For example:

// File
index.js;

// Test for file
index.test.js;

As you add and modify code, jest will watch for uncommitted changes and run your tests, reporting the results to your terminal. Make a pull request with your changes to master, and a core team member will review your work. If you have any questions, please don't hesitate to reach out via a GitHub issue.