feat: responsive study list (#1068)
* feat: 🎸 Load spinner when selecting gcloud store. Add key on td * feat: 🎸 Code review. Translate loading study status * feat: 🎸 Code review. Minor code refactoring * fix: add missing study and index declerations * Newer version of react-dates (calendar input component) * Add useMedia hook * Add useDebounce hook * Export hooks for consumption * Pull search filter into own component * StudyListWithData to StudyListRoute * Rename pagination component * Rename Toolbar * CustomeDateRangePicker to plain ol' css * Remove unused styles * Misc * Magic to make our "OR" filters work * Play w/ Mobile styles * Fix pagination pushing out max width for viewport * Tidy up small and medium templates * Remove unecessary nesting * Better mobile header and logo styles * Fix studyList font size * Remove unused code * hookup on click * Fix table search selectors * Cypress uses medium width * Remove irrelevant test * Fix primary sort * Fix sort for our smaller displays * fix study list sometimes longer than specified rowsPerPage * Simplify date picker styles * restore study date filters * Fix about table styling * fix take value for search * Fix header sizing for viewer and list route * Remove dead code * Restore isLoading * Update platform/ui/src/components/studyList/StudyList.styl Co-Authored-By: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com> * Attempt first usage of translations w/ hooks * Pull from react-i18n library * Fit presets on to a single line * add no results message * Show error message in studyList table * Update input selectors for e2e tests * Make sure messages span all columns * fix test selector for table results * Skip hover for result rows * fix imports * Date filtering w/ config * Default export * Pushed to PageComponent * Remove DropZone This previously only worked for null/undefined studies. I'm unable to trigger the state by testing the data. This "might" have happened when using a fresh/empty PACS; but even an empty array of studies would not show
This commit is contained in:
Danny Brown
GitHub
parent
70532a6cc6
commit
2cdef4b984
@ -48,7 +48,7 @@
|
|||||||
"moment": "2.24.0",
|
"moment": "2.24.0",
|
||||||
"prop-types": "15.6.2",
|
"prop-types": "15.6.2",
|
||||||
"react-bootstrap-modal": "4.2.0",
|
"react-bootstrap-modal": "4.2.0",
|
||||||
"react-dates": "18.4.1",
|
"react-dates": "21.2.1",
|
||||||
"react-dnd": "9.3.4",
|
"react-dnd": "9.3.4",
|
||||||
"react-dnd-html5-backend": "^9.3.4",
|
"react-dnd-html5-backend": "^9.3.4",
|
||||||
"react-dnd-touch-backend": "^9.3.4",
|
"react-dnd-touch-backend": "^9.3.4",
|
||||||
|
|||||||
@ -16,7 +16,12 @@ import { QuickSwitch } from './quickSwitch';
|
|||||||
import { RoundedButtonGroup } from './roundedButtonGroup';
|
import { RoundedButtonGroup } from './roundedButtonGroup';
|
||||||
import { SelectTree } from './selectTree';
|
import { SelectTree } from './selectTree';
|
||||||
import { SimpleDialog } from './simpleDialog';
|
import { SimpleDialog } from './simpleDialog';
|
||||||
import { StudyList } from './studyList';
|
import {
|
||||||
|
PageToolbar,
|
||||||
|
StudyList,
|
||||||
|
TableSearchFilter,
|
||||||
|
TablePagination,
|
||||||
|
} from './studyList';
|
||||||
import { ToolbarSection } from './toolbarSection';
|
import { ToolbarSection } from './toolbarSection';
|
||||||
import { Tooltip } from './tooltip';
|
import { Tooltip } from './tooltip';
|
||||||
|
|
||||||
@ -32,12 +37,15 @@ export {
|
|||||||
OverlayTrigger,
|
OverlayTrigger,
|
||||||
QuickSwitch,
|
QuickSwitch,
|
||||||
RoundedButtonGroup,
|
RoundedButtonGroup,
|
||||||
|
PageToolbar,
|
||||||
SelectTree,
|
SelectTree,
|
||||||
SimpleDialog,
|
SimpleDialog,
|
||||||
StudyBrowser,
|
StudyBrowser,
|
||||||
StudyList,
|
StudyList,
|
||||||
TableList,
|
TableList,
|
||||||
TableListItem,
|
TableListItem,
|
||||||
|
TableSearchFilter,
|
||||||
|
TablePagination,
|
||||||
ThumbnailEntry,
|
ThumbnailEntry,
|
||||||
ToolbarSection,
|
ToolbarSection,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
|
|||||||
@ -0,0 +1,83 @@
|
|||||||
|
/* NOTE: the order of these styles DO matter */
|
||||||
|
|
||||||
|
/* Will edit everything selected including everything between a range of dates */
|
||||||
|
.CalendarDay__selected_span {
|
||||||
|
background: var(--table-text-secondary-color);
|
||||||
|
color: #fff;
|
||||||
|
border-color: #e4e7e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Will edit selected date or the endpoints of a range of dates */
|
||||||
|
.CalendarDay__selected {
|
||||||
|
background: var(--table-text-secondary-color);
|
||||||
|
color: #fff;
|
||||||
|
border-color: #e4e7e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Will edit when hovered over. _span style also has this property */
|
||||||
|
.CalendarDay__selected:hover {
|
||||||
|
background: var(--table-text-secondary-color);
|
||||||
|
color: #fff;
|
||||||
|
border-color: #e4e7e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Will edit when the second date (end date) in a range of dates
|
||||||
|
is not yet selected. Edits the dates between your mouse and said date */
|
||||||
|
.CalendarDay__hovered_span:hover,
|
||||||
|
.CalendarDay__hovered_span {
|
||||||
|
background: var(--table-text-secondary-color);
|
||||||
|
color: #fff;
|
||||||
|
border-color: #e4e7e7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* EXTERIOR INPUT STYLE */
|
||||||
|
/* Container - placement */
|
||||||
|
.DateRangePicker {
|
||||||
|
height: 40px;
|
||||||
|
margin: 0 5px 20px 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
/* Container - visual */
|
||||||
|
.DateRangePickerInput {
|
||||||
|
width: calc(100% - 10px); /* Just use padding? */
|
||||||
|
background-color: var(--input-background-color);
|
||||||
|
border-color: var(--input-background-color);
|
||||||
|
color: var(--input-placeholder-color);
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DateRangePickerInput.DateRangePickerInput__withBorder {
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: var(--input-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input Container */
|
||||||
|
.DateInput {
|
||||||
|
width: 97px;
|
||||||
|
height: 38px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: var(--input-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Actual Input Element */
|
||||||
|
.DateInput > .DateInput_input {
|
||||||
|
border-color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--input-placeholder-color);
|
||||||
|
height: 38px;
|
||||||
|
font-size: 10pt;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PRESETS */
|
||||||
|
.PresetDateRangePicker_panel {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.PresetDateRangePicker_button {
|
||||||
|
margin: 0;
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
@ -2,13 +2,12 @@
|
|||||||
// https://github.com/airbnb/react-dates#initialize
|
// https://github.com/airbnb/react-dates#initialize
|
||||||
import 'react-dates/initialize';
|
import 'react-dates/initialize';
|
||||||
import 'react-dates/lib/css/_datepicker.css';
|
import 'react-dates/lib/css/_datepicker.css';
|
||||||
|
import './CustomDateRangePicker.css';
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { DateRangePicker } from 'react-dates';
|
import { DateRangePicker } from 'react-dates';
|
||||||
|
|
||||||
import './CustomDateRangePicker.styl';
|
|
||||||
|
|
||||||
export default class CustomDateRangePicker extends React.Component {
|
export default class CustomDateRangePicker extends React.Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
presets: PropTypes.arrayOf(
|
presets: PropTypes.arrayOf(
|
||||||
@ -85,7 +84,6 @@ export default class CustomDateRangePicker extends React.Component {
|
|||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
|
||||||
<DateRangePicker
|
<DateRangePicker
|
||||||
{...dateRangePickerProps}
|
{...dateRangePickerProps}
|
||||||
startDate={this.state.startDate}
|
startDate={this.state.startDate}
|
||||||
@ -93,7 +91,6 @@ export default class CustomDateRangePicker extends React.Component {
|
|||||||
renderCalendarInfo={this.renderDatePresets}
|
renderCalendarInfo={this.renderDatePresets}
|
||||||
onDatesChange={this.onDatesChange}
|
onDatesChange={this.onDatesChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,84 +0,0 @@
|
|||||||
.CalendarDay__selected_span {
|
|
||||||
background: var(--calendar-main-color);
|
|
||||||
color: var(--calendar-day-color);
|
|
||||||
border: 1px solid;
|
|
||||||
border-color: var(--calendar-day-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.CalendarDay__default:hover {
|
|
||||||
color: var(--calendar-main-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.CalendarDay__selected_span:active, .CalendarDay__selected_span:hover {
|
|
||||||
background: var(--calendar-day-active-hover-background-color);
|
|
||||||
border-color: var(--calendar-day-border-color);
|
|
||||||
color: var(--calendar-day-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.CalendarDay__selected {
|
|
||||||
background: var(--calendar-main-color);
|
|
||||||
color: var(--calendar-day-color);
|
|
||||||
border-color: var(--calendar-day-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.CalendarDay__selected:hover {
|
|
||||||
background: var(--calendar-main-color);
|
|
||||||
color: var(--calendar-day-color);
|
|
||||||
border-color: var(--calendar-day-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.CalendarDay__hovered_span:hover,
|
|
||||||
.CalendarDay__hovered_span {
|
|
||||||
background: var(--calendar-main-color);
|
|
||||||
color: var(--calendar-day-color);
|
|
||||||
border-color:var(--calendar-day-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.DateInput {
|
|
||||||
width: 97px
|
|
||||||
}
|
|
||||||
|
|
||||||
.DateInput_input {
|
|
||||||
background-color: var(--input-background-color)
|
|
||||||
border-color: var(--input-background-color)
|
|
||||||
color: var(--input-placeholder-color)
|
|
||||||
height: 38px
|
|
||||||
font-size: 10pt
|
|
||||||
}
|
|
||||||
|
|
||||||
.DateRangePickerInput {
|
|
||||||
background-color: var(--input-background-color)
|
|
||||||
border-color: var(--input-background-color)
|
|
||||||
color: var(--input-placeholder-color)
|
|
||||||
height: 40px
|
|
||||||
}
|
|
||||||
|
|
||||||
.PresetDateRangePicker_panel: {
|
|
||||||
padding: 0 22px 11px 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.PresetDateRangePicker_button {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
textAlign: center;
|
|
||||||
background: none;
|
|
||||||
border: 2px solid var(--calendar-main-color);
|
|
||||||
color: var(--calendar-main-color);
|
|
||||||
padding: 4px 12px;
|
|
||||||
marginRight: 8;
|
|
||||||
font: inherit;
|
|
||||||
fontWeight: 700;
|
|
||||||
lineHeight: normal;
|
|
||||||
overflow: visible;
|
|
||||||
boxSizing: border-box;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
:active: {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.PresetDateRangePicker_button__selected: {
|
|
||||||
color: var(--calendar-day-color);
|
|
||||||
background: var(--calendar-main-color);
|
|
||||||
};
|
|
||||||
@ -1,11 +1,9 @@
|
|||||||
import './StudyListToolbar.styl';
|
|
||||||
|
|
||||||
import React, { PureComponent } from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
|
|
||||||
import { Icon } from './../../elements/Icon';
|
import { Icon } from './../../elements/Icon';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
class StudylistToolbar extends PureComponent {
|
class PageToolbar extends PureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
onImport: PropTypes.func,
|
onImport: PropTypes.func,
|
||||||
};
|
};
|
||||||
@ -37,4 +35,4 @@ class StudylistToolbar extends PureComponent {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export { StudylistToolbar };
|
export { PageToolbar };
|
||||||
@ -1,4 +1,5 @@
|
|||||||
.pagination-area
|
.pagination-area
|
||||||
|
display: flex;
|
||||||
color: var(--text-secondary-color);
|
color: var(--text-secondary-color);
|
||||||
font-size: 13px
|
font-size: 13px
|
||||||
font-weight: normal !important
|
font-weight: normal !important
|
||||||
@ -11,8 +12,6 @@
|
|||||||
background-color: var(--primary-background-color)
|
background-color: var(--primary-background-color)
|
||||||
color: white
|
color: white
|
||||||
|
|
||||||
.row
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.rows-dropdown
|
.rows-dropdown
|
||||||
width: 25%;
|
width: 25%;
|
||||||
|
|||||||
@ -1,484 +1,397 @@
|
|||||||
import './StudyList.styl';
|
import './StudyList.styl';
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
import CustomDateRangePicker from './CustomDateRangePicker.js';
|
import TableSearchFilter from './TableSearchFilter.js';
|
||||||
import { Icon } from './../../elements/Icon';
|
import useMedia from '../../hooks/useMedia.js';
|
||||||
import { PaginationArea } from './PaginationArea.js';
|
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
import ColorHash from './internal/color-hash.js';
|
||||||
import { StudyListLoadingText } from './StudyListLoadingText.js';
|
import { StudyListLoadingText } from './StudyListLoadingText.js';
|
||||||
import { StudylistToolbar } from './StudyListToolbar.js';
|
|
||||||
import { isInclusivelyBeforeDay } from 'react-dates';
|
|
||||||
import moment from 'moment';
|
|
||||||
import debounce from 'lodash.debounce';
|
|
||||||
import isEqual from 'lodash.isequal';
|
|
||||||
import { withTranslation } from '../../utils/LanguageProvider';
|
import { withTranslation } from '../../utils/LanguageProvider';
|
||||||
|
|
||||||
const today = moment();
|
const colorHash = new ColorHash();
|
||||||
const lastWeek = moment().subtract(7, 'day');
|
|
||||||
const lastMonth = moment().subtract(1, 'month');
|
|
||||||
function getPaginationFragment(
|
|
||||||
props,
|
|
||||||
searchData,
|
|
||||||
nextPageCb,
|
|
||||||
prevPageCb,
|
|
||||||
changeRowsPerPageCb
|
|
||||||
) {
|
|
||||||
return (
|
|
||||||
<PaginationArea
|
|
||||||
pageOptions={props.pageOptions}
|
|
||||||
currentPage={searchData.currentPage}
|
|
||||||
nextPageFunc={nextPageCb}
|
|
||||||
prevPageFunc={prevPageCb}
|
|
||||||
onRowsPerPageChange={changeRowsPerPageCb}
|
|
||||||
rowsPerPage={searchData.rowsPerPage}
|
|
||||||
recordCount={props.studies.length}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTableMeta(translate) {
|
/**
|
||||||
return {
|
*
|
||||||
patientName: {
|
*
|
||||||
displayText: translate('PatientName'),
|
* @param {*} props
|
||||||
sort: 0,
|
* @returns
|
||||||
|
*/
|
||||||
|
function StudyList(props) {
|
||||||
|
const {
|
||||||
|
isLoading,
|
||||||
|
hasError,
|
||||||
|
studies,
|
||||||
|
sort,
|
||||||
|
onSort: handleSort,
|
||||||
|
filterValues,
|
||||||
|
onFilterChange: handleFilterChange,
|
||||||
|
onSelectItem: handleSelectItem,
|
||||||
|
t,
|
||||||
|
//
|
||||||
|
studyListDateFilterNumDays,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const largeTableMeta = [
|
||||||
|
{
|
||||||
|
displayText: t('PatientName'),
|
||||||
|
fieldName: 'patientName',
|
||||||
|
inputType: 'text',
|
||||||
|
size: 330,
|
||||||
},
|
},
|
||||||
patientId: {
|
{
|
||||||
displayText: translate('MRN'),
|
displayText: t('MRN'),
|
||||||
sort: 0,
|
fieldName: 'patientId',
|
||||||
|
inputType: 'text',
|
||||||
|
size: 378,
|
||||||
},
|
},
|
||||||
accessionNumber: {
|
{
|
||||||
displayText: translate('AccessionNumber'),
|
displayText: t('AccessionNumber'),
|
||||||
sort: 0,
|
fieldName: 'accessionNumber',
|
||||||
|
inputType: 'text',
|
||||||
|
size: 180,
|
||||||
},
|
},
|
||||||
studyDate: {
|
{
|
||||||
displayText: translate('StudyDate'),
|
displayText: t('StudyDate'),
|
||||||
|
fieldName: 'studyDate',
|
||||||
inputType: 'date-range',
|
inputType: 'date-range',
|
||||||
sort: 0,
|
size: 300,
|
||||||
},
|
|
||||||
modalities: {
|
|
||||||
displayText: translate('Modality'),
|
|
||||||
sort: 0,
|
|
||||||
},
|
|
||||||
studyDescription: {
|
|
||||||
displayText: translate('StudyDescription'),
|
|
||||||
sort: 0,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function getNoListFragment(translate, studies, error, loading) {
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="loading">
|
|
||||||
<StudyListLoadingText />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else if (error) {
|
|
||||||
return (
|
|
||||||
<div className="notFound">
|
|
||||||
{translate('There was an error fetching studies')}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else if (!studies.length) {
|
|
||||||
return <div className="notFound">{translate('No matching results')}</div>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class StudyList extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
studies: PropTypes.array.isRequired,
|
|
||||||
onSelectItem: PropTypes.func.isRequired,
|
|
||||||
onSearch: PropTypes.func.isRequired,
|
|
||||||
currentPage: PropTypes.number,
|
|
||||||
rowsPerPage: PropTypes.number,
|
|
||||||
studyListDateFilterNumDays: PropTypes.number,
|
|
||||||
studyListFunctionsEnabled: PropTypes.bool,
|
|
||||||
defaultSort: PropTypes.shape({
|
|
||||||
field: PropTypes.string.isRequired,
|
|
||||||
order: PropTypes.oneOf(['desc', 'asc']).isRequired,
|
|
||||||
}),
|
|
||||||
onImport: PropTypes.func,
|
|
||||||
pageOptions: PropTypes.array,
|
|
||||||
};
|
|
||||||
|
|
||||||
static defaultProps = {
|
|
||||||
currentPage: 0,
|
|
||||||
rowsPerPage: 25,
|
|
||||||
studyListDateFilterNumDays: 7,
|
|
||||||
};
|
|
||||||
|
|
||||||
static studyDatePresets = [
|
|
||||||
{
|
|
||||||
text: 'Today',
|
|
||||||
start: today,
|
|
||||||
end: today,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Last 7 days',
|
displayText: t('Modality'),
|
||||||
start: lastWeek,
|
fieldName: 'modalities',
|
||||||
end: today,
|
inputType: 'text',
|
||||||
|
size: 114,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'Last 30 days',
|
displayText: t('StudyDescription'),
|
||||||
start: lastMonth,
|
fieldName: 'studyDescription',
|
||||||
end: today,
|
inputType: 'text',
|
||||||
|
size: 335,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
constructor(props) {
|
const mediumTableMeta = [
|
||||||
super(props);
|
{
|
||||||
|
displayText: 'Patient / MRN',
|
||||||
const sortData = {
|
fieldName: 'patientNameOrId',
|
||||||
field: undefined,
|
inputType: 'text',
|
||||||
order: undefined,
|
size: 250,
|
||||||
};
|
|
||||||
|
|
||||||
// init from props
|
|
||||||
if (props.defaultSort) {
|
|
||||||
sortData.field = props.defaultSort.field;
|
|
||||||
// todo: -1, 0, 1?
|
|
||||||
sortData.order = props.defaultSort.order; // asc, desc
|
|
||||||
}
|
|
||||||
|
|
||||||
this.defaultStartDate = moment().subtract(
|
|
||||||
this.props.studyListDateFilterNumDays,
|
|
||||||
'days'
|
|
||||||
);
|
|
||||||
this.defaultEndDate = moment();
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
loading: false,
|
|
||||||
error: false,
|
|
||||||
searchData: {
|
|
||||||
sortData,
|
|
||||||
currentPage: this.props.currentPage,
|
|
||||||
rowsPerPage: this.props.rowsPerPage,
|
|
||||||
studyDateFrom: this.defaultStartDate,
|
|
||||||
studyDateTo: this.defaultEndDate,
|
|
||||||
},
|
},
|
||||||
highlightedItem: '',
|
{
|
||||||
};
|
displayText: 'Description',
|
||||||
|
fieldName: 'accessionOrModalityOrDescription',
|
||||||
|
inputType: 'text',
|
||||||
|
size: 350,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
displayText: t('StudyDate'),
|
||||||
|
fieldName: 'studyDate',
|
||||||
|
inputType: 'date-range',
|
||||||
|
size: 300,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
this.getChangeHandler = this.getChangeHandler.bind(this);
|
const smallTableMeta = [
|
||||||
this.getBlurHandler = this.getBlurHandler.bind(this);
|
{
|
||||||
this.onInputKeydown = this.onInputKeydown.bind(this);
|
displayText: 'Search',
|
||||||
this.nextPage = this.nextPage.bind(this);
|
fieldName: 'allFields',
|
||||||
this.prevPage = this.prevPage.bind(this);
|
inputType: 'text',
|
||||||
this.onRowsPerPageChange = this.onRowsPerPageChange.bind(this);
|
size: 100,
|
||||||
this.delayedSearch = debounce(this.search, 250);
|
},
|
||||||
}
|
];
|
||||||
|
|
||||||
getChangeHandler(key) {
|
const tableMeta = useMedia(
|
||||||
return event => {
|
['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
|
||||||
this.delayedSearch.cancel();
|
[largeTableMeta, mediumTableMeta, smallTableMeta],
|
||||||
this.setSearchData(key, event.target.value, this.delayedSearch);
|
smallTableMeta
|
||||||
};
|
);
|
||||||
}
|
|
||||||
|
|
||||||
getBlurHandler(key) {
|
const totalSize = tableMeta
|
||||||
return event => {
|
.map(field => field.size)
|
||||||
this.delayedSearch.cancel();
|
.reduce((prev, next) => prev + next);
|
||||||
this.setSearchData(key, event.target.value);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
setSearchData(key, value) {
|
|
||||||
const searchData = { ...this.state.searchData };
|
|
||||||
searchData[key] = value;
|
|
||||||
|
|
||||||
if (!isEqual(searchData[key], this.state.searchData[key])) {
|
|
||||||
this.setState({ ...this.state, searchData });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setSearchDataBatch(keyValues) {
|
|
||||||
const searchData = { ...this.state.searchData };
|
|
||||||
|
|
||||||
Object.keys(keyValues).forEach(key => {
|
|
||||||
searchData[key] = keyValues[key];
|
|
||||||
});
|
|
||||||
|
|
||||||
this.setState({ searchData });
|
|
||||||
}
|
|
||||||
|
|
||||||
async onInputKeydown(event) {
|
|
||||||
if (event.key === 'Enter') {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
this.delayedSearch.cancel();
|
|
||||||
// reset the page because user is doing a new search
|
|
||||||
this.setSearchData('currentPage', 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async search() {
|
|
||||||
try {
|
|
||||||
this.setState({ loading: true, error: false });
|
|
||||||
await this.props.onSearch(this.state.searchData);
|
|
||||||
} catch (error) {
|
|
||||||
this.setState({ error: true });
|
|
||||||
throw new Error(error);
|
|
||||||
} finally {
|
|
||||||
this.setState({ loading: false });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
nextPage(currentPage) {
|
|
||||||
currentPage = currentPage + 1;
|
|
||||||
this.delayedSearch.cancel();
|
|
||||||
this.setSearchData('currentPage', currentPage);
|
|
||||||
}
|
|
||||||
|
|
||||||
prevPage(currentPage) {
|
|
||||||
currentPage = currentPage - 1;
|
|
||||||
this.delayedSearch.cancel();
|
|
||||||
this.setSearchData('currentPage', currentPage);
|
|
||||||
}
|
|
||||||
|
|
||||||
onRowsPerPageChange(rowsPerPage) {
|
|
||||||
this.delayedSearch.cancel();
|
|
||||||
this.setSearchDataBatch({ rowsPerPage, currentPage: 0 });
|
|
||||||
}
|
|
||||||
|
|
||||||
onSortClick(field) {
|
|
||||||
return () => {
|
|
||||||
let order;
|
|
||||||
const sort = this.state.searchData.sortData;
|
|
||||||
const isSortedField = sort.field === field;
|
|
||||||
|
|
||||||
if (isSortedField) {
|
|
||||||
if (sort.order === 'asc') {
|
|
||||||
order = 'desc';
|
|
||||||
} else {
|
|
||||||
order = undefined;
|
|
||||||
field = undefined;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
order = 'asc';
|
|
||||||
}
|
|
||||||
|
|
||||||
this.delayedSearch.cancel();
|
|
||||||
this.setSearchData('sortData', { field, order });
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
onHighlightItem(studyItemUid) {
|
|
||||||
this.setState({ highlightedItem: studyItemUid });
|
|
||||||
}
|
|
||||||
|
|
||||||
getTableRow(study, index) {
|
|
||||||
const trKey = `trStudy${index}${study.studyInstanceUid}`;
|
|
||||||
|
|
||||||
if (!study) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const getTableCell = (
|
|
||||||
study,
|
|
||||||
studyKey,
|
|
||||||
emptyValue = '',
|
|
||||||
emptyClass = ''
|
|
||||||
) => {
|
|
||||||
const componentKey = `td${studyKey}`;
|
|
||||||
const isValidValue = study && typeof study[studyKey] === 'string';
|
|
||||||
let className = emptyClass;
|
|
||||||
let value = emptyValue;
|
|
||||||
|
|
||||||
if (isValidValue) {
|
|
||||||
className = studyKey;
|
|
||||||
value = study[studyKey];
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<td key={componentKey} className={className}>
|
<table className="table table--striped table--hoverable">
|
||||||
{value}
|
<colgroup>
|
||||||
</td>
|
{tableMeta.map((field, i) => {
|
||||||
);
|
const size = field.size;
|
||||||
};
|
const percentWidth = (size / totalSize) * 100.0;
|
||||||
|
|
||||||
return (
|
return <col key={i} style={{ width: `${percentWidth}%` }} />;
|
||||||
<tr
|
|
||||||
key={trKey}
|
|
||||||
className={
|
|
||||||
this.state.highlightedItem === study.studyInstanceUid
|
|
||||||
? 'studylistStudy noselect active'
|
|
||||||
: 'studylistStudy noselect'
|
|
||||||
}
|
|
||||||
onMouseDown={event => {
|
|
||||||
// middle/wheel click
|
|
||||||
if (event.button === 1) {
|
|
||||||
this.props.onSelectItem(study.studyInstanceUid);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onClick={() => {
|
|
||||||
this.onHighlightItem(study.studyInstanceUid);
|
|
||||||
this.props.onSelectItem(study.studyInstanceUid);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{getTableCell(
|
|
||||||
study,
|
|
||||||
'patientName',
|
|
||||||
`(${this.props.t('Empty')})`,
|
|
||||||
'emptyCell'
|
|
||||||
)}
|
|
||||||
{getTableCell(study, 'patientId')}
|
|
||||||
{getTableCell(study, 'accessionNumber')}
|
|
||||||
{getTableCell(study, 'studyDate')}
|
|
||||||
{getTableCell(study, 'modalities')}
|
|
||||||
{getTableCell(study, 'studyDescription')}
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(previousProps, previousState) {
|
|
||||||
if (!isEqual(previousState.searchData, this.state.searchData)) {
|
|
||||||
this.search();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
renderTableBody(noListFragment) {
|
|
||||||
return !noListFragment && this.props.studies
|
|
||||||
? this.props.studies.map(this.getTableRow.bind(this))
|
|
||||||
: null;
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const tableMeta = getTableMeta(this.props.t);
|
|
||||||
|
|
||||||
// Apply sort
|
|
||||||
const sortedFieldName = this.state.searchData.sortData.field;
|
|
||||||
const sortedField = tableMeta[sortedFieldName];
|
|
||||||
|
|
||||||
if (sortedField) {
|
|
||||||
const sortOrder = this.state.searchData.sortData.order;
|
|
||||||
sortedField.sort = sortOrder === 'asc' ? 1 : 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sort Icons
|
|
||||||
const sortIcons = ['sort', 'sort-up', 'sort-down'];
|
|
||||||
const noListFragment = getNoListFragment(
|
|
||||||
this.props.t,
|
|
||||||
this.props.studies,
|
|
||||||
this.state.error,
|
|
||||||
this.props.loading || this.state.loading
|
|
||||||
);
|
|
||||||
const tableBody = this.renderTableBody(noListFragment);
|
|
||||||
const studiesNum = (this.props.studies && this.props.studies.length) || 0;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="StudyList">
|
|
||||||
<div className="studyListToolbar clearfix">
|
|
||||||
<div className="header pull-left">{this.props.t('StudyList')}</div>
|
|
||||||
<div className="studyCount pull-right">{studiesNum}</div>
|
|
||||||
<div className="pull-right">
|
|
||||||
{this.props.studyListFunctionsEnabled ? (
|
|
||||||
<StudylistToolbar onImport={this.props.onImport} />
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
{this.props.children}
|
|
||||||
</div>
|
|
||||||
<div className="theadBackground" />
|
|
||||||
<div id="studyListContainer">
|
|
||||||
<table id="tblStudyList" className="studylistResult table noselect">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
{Object.keys(tableMeta).map((fieldName, i) => {
|
|
||||||
const field = tableMeta[fieldName];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<React.Fragment key={i}>
|
|
||||||
<th className={fieldName}>
|
|
||||||
<div
|
|
||||||
id={`_${fieldName}`}
|
|
||||||
className="display-text"
|
|
||||||
onClick={this.onSortClick(fieldName)}
|
|
||||||
>
|
|
||||||
<span>{field.displayText}</span>
|
|
||||||
<Icon
|
|
||||||
name={sortIcons[field.sort]}
|
|
||||||
style={{ fontSize: '12px' }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{!field.inputType && (
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control studylist-search"
|
|
||||||
id={fieldName}
|
|
||||||
value={this.state[fieldName]}
|
|
||||||
onKeyDown={this.onInputKeydown}
|
|
||||||
onChange={this.getChangeHandler(fieldName)}
|
|
||||||
onBlur={this.getBlurHandler(fieldName)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{field.inputType === 'date-range' && (
|
|
||||||
<div style={{ display: 'block' }}>
|
|
||||||
<CustomDateRangePicker
|
|
||||||
presets={StudyList.studyDatePresets}
|
|
||||||
showClearDates={true}
|
|
||||||
startDateId="studyListStartDate"
|
|
||||||
endDateId="studyListEndDate"
|
|
||||||
startDate={this.defaultStartDate}
|
|
||||||
endDate={this.defaultEndDate}
|
|
||||||
hideKeyboardShortcutsPanel={true}
|
|
||||||
anchorDirection="left"
|
|
||||||
isOutsideRange={day =>
|
|
||||||
!isInclusivelyBeforeDay(day, moment())
|
|
||||||
}
|
|
||||||
onDatesChange={({
|
|
||||||
startDate,
|
|
||||||
endDate,
|
|
||||||
preset = false,
|
|
||||||
}) => {
|
|
||||||
if (
|
|
||||||
startDate &&
|
|
||||||
endDate &&
|
|
||||||
(this.state.focusedInput === 'endDate' ||
|
|
||||||
preset)
|
|
||||||
) {
|
|
||||||
this.setSearchDataBatch({
|
|
||||||
studyDateFrom: startDate.toDate(),
|
|
||||||
studyDateTo: endDate.toDate(),
|
|
||||||
});
|
|
||||||
this.setState({ focusedInput: false });
|
|
||||||
} else if (!startDate && !endDate) {
|
|
||||||
this.setSearchDataBatch({
|
|
||||||
studyDateFrom: null,
|
|
||||||
studyDateTo: null,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
focusedInput={this.state.focusedInput}
|
|
||||||
onFocusChange={focusedInput => {
|
|
||||||
this.setState({ focusedInput });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</th>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
})}
|
})}
|
||||||
|
</colgroup>
|
||||||
|
<thead className="table-head">
|
||||||
|
<tr className="filters">
|
||||||
|
<TableSearchFilter
|
||||||
|
meta={tableMeta}
|
||||||
|
values={filterValues}
|
||||||
|
onSort={handleSort}
|
||||||
|
onValueChange={handleFilterChange}
|
||||||
|
sortFieldName={sort.fieldName}
|
||||||
|
sortDirection={sort.direction}
|
||||||
|
studyListDateFilterNumDays={studyListDateFilterNumDays}
|
||||||
|
/>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody id="studyListData">{tableBody}</tbody>
|
<tbody className="table-body" data-cy="study-list-results">
|
||||||
</table>
|
{/* I'm not in love with this approach, but it's the quickest way for now
|
||||||
|
*
|
||||||
{noListFragment
|
* - Display different content based on loading, empty, results state
|
||||||
? noListFragment
|
*
|
||||||
: getPaginationFragment(
|
* This is not ideal because it create a jump in focus. For loading especially,
|
||||||
this.props,
|
* We should keep our current results visible while we load the new ones.
|
||||||
this.state.searchData,
|
*/}
|
||||||
this.nextPage,
|
{/* LOADING */}
|
||||||
this.prevPage,
|
{isLoading && (
|
||||||
this.onRowsPerPageChange
|
<tr className="no-hover">
|
||||||
|
<td colspan={tableMeta.length}>
|
||||||
|
<StudyListLoadingText />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
)}
|
)}
|
||||||
|
{!isLoading && hasError && (
|
||||||
|
<tr className="no-hover">
|
||||||
|
<td colspan={tableMeta.length}>
|
||||||
|
<div className="notFound">
|
||||||
|
{t('There was an error fetching studies')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
{/* EMPTY */}
|
||||||
|
{!isLoading && !studies.length && (
|
||||||
|
<tr className="no-hover">
|
||||||
|
<td colspan={tableMeta.length}>
|
||||||
|
<div className="notFound">{t('No matching results')}</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
{!isLoading &&
|
||||||
|
studies.map((study, index) => (
|
||||||
|
<TableRow
|
||||||
|
key={`${study.studyInstanceUid}-${index}`}
|
||||||
|
onClick={studyInstanceUid => handleSelectItem(studyInstanceUid)}
|
||||||
|
accessionNumber={study.accessionNumber || ''}
|
||||||
|
modalities={study.modalities}
|
||||||
|
patientId={study.patientId || ''}
|
||||||
|
patientName={study.patientName || ''}
|
||||||
|
studyDate={study.studyDate}
|
||||||
|
studyDescription={study.studyDescription || ''}
|
||||||
|
studyInstanceUid={study.studyInstanceUid}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
StudyList.propTypes = {
|
||||||
|
isLoading: PropTypes.bool.isRequired,
|
||||||
|
hasError: PropTypes.bool.isRequired,
|
||||||
|
studies: PropTypes.array.isRequired,
|
||||||
|
onSelectItem: PropTypes.func.isRequired,
|
||||||
|
// ~~ SORT
|
||||||
|
sort: PropTypes.shape({
|
||||||
|
fieldName: PropTypes.string,
|
||||||
|
direction: PropTypes.oneOf(['desc', 'asc', null]),
|
||||||
|
}).isRequired,
|
||||||
|
onSort: PropTypes.func.isRequired,
|
||||||
|
// ~~ FILTERS
|
||||||
|
filterValues: PropTypes.shape({
|
||||||
|
patientName: PropTypes.string.isRequired,
|
||||||
|
patientId: PropTypes.string.isRequired,
|
||||||
|
accessionNumber: PropTypes.string.isRequired,
|
||||||
|
studyDate: PropTypes.string.isRequired,
|
||||||
|
modalities: PropTypes.string.isRequired,
|
||||||
|
studyDescription: PropTypes.string.isRequired,
|
||||||
|
patientNameOrId: PropTypes.string.isRequired,
|
||||||
|
accessionOrModalityOrDescription: PropTypes.string.isRequired,
|
||||||
|
allFields: PropTypes.string.isRequired,
|
||||||
|
}).isRequired,
|
||||||
|
onFilterChange: PropTypes.func.isRequired,
|
||||||
|
//
|
||||||
|
studyListDateFilterNumDays: PropTypes.number,
|
||||||
|
};
|
||||||
|
|
||||||
|
StudyList.defaultProps = {};
|
||||||
|
|
||||||
|
function TableRow(props) {
|
||||||
|
const {
|
||||||
|
accessionNumber,
|
||||||
|
isHighlighted,
|
||||||
|
modalities,
|
||||||
|
patientId,
|
||||||
|
patientName,
|
||||||
|
studyDate,
|
||||||
|
studyDescription,
|
||||||
|
studyInstanceUid,
|
||||||
|
onClick: handleClick,
|
||||||
|
t,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const largeRowTemplate = (
|
||||||
|
<tr
|
||||||
|
onClick={() => handleClick(studyInstanceUid)}
|
||||||
|
className={classNames({ active: isHighlighted })}
|
||||||
|
>
|
||||||
|
<td className={classNames({ emptyCell: !patientName })}>
|
||||||
|
{patientName || `(${t('Empty')})`}
|
||||||
|
</td>
|
||||||
|
<td>{patientId}</td>
|
||||||
|
<td>{accessionNumber}</td>
|
||||||
|
<td>{studyDate}</td>
|
||||||
|
<td>{modalities}</td>
|
||||||
|
<td>{studyDescription}</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
|
||||||
|
const mediumRowTemplate = (
|
||||||
|
<tr
|
||||||
|
onClick={() => handleClick(studyInstanceUid)}
|
||||||
|
className={classNames({ active: isHighlighted })}
|
||||||
|
>
|
||||||
|
<td className={classNames({ emptyCell: !patientName })}>
|
||||||
|
{patientName || `(${t('Empty')})`}
|
||||||
|
<div style={{ color: '#60656f' }}>{patientId}</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||||
|
{/* DESCRIPTION */}
|
||||||
|
<div
|
||||||
|
className="hide-xs"
|
||||||
|
style={{
|
||||||
|
whiteSpace: 'pre-wrap',
|
||||||
|
flexGrow: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{studyDescription}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* MODALITY & ACCESSION */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
minWidth: '80px',
|
||||||
|
maxWidth: '100px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: colorHash.hex(modalities),
|
||||||
|
borderRadius: '16px',
|
||||||
|
padding: '2px 8px 0px 8px',
|
||||||
|
fontWeight: 500,
|
||||||
|
marginBottom: '4px',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}
|
||||||
|
aria-label={modalities}
|
||||||
|
title={modalities}
|
||||||
|
>
|
||||||
|
{modalities}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}
|
||||||
|
aria-label={accessionNumber}
|
||||||
|
title={accessionNumber}
|
||||||
|
>
|
||||||
|
{accessionNumber}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
{/* DATE */}
|
||||||
|
<td style={{ textAlign: 'center' }}>{studyDate}</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
|
||||||
|
const smallRowTemplate = (
|
||||||
|
<tr
|
||||||
|
onClick={() => handleClick(studyInstanceUid)}
|
||||||
|
className={classNames({ active: isHighlighted })}
|
||||||
|
>
|
||||||
|
<td style={{ position: 'relative', overflow: 'hidden' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||||
|
{/* NAME AND ID */}
|
||||||
|
<div
|
||||||
|
className={classNames({ emptyCell: !patientName })}
|
||||||
|
style={{ width: '150px', minWidth: '150px' }}
|
||||||
|
>
|
||||||
|
<div style={{ fontWeight: 500, paddingTop: '3px' }}>
|
||||||
|
{patientName || `(${t('Empty')})`}
|
||||||
|
</div>
|
||||||
|
<div style={{ color: '#60656f' }}>{patientId}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* DESCRIPTION */}
|
||||||
|
<div
|
||||||
|
className="hide-xs"
|
||||||
|
style={{
|
||||||
|
whiteSpace: 'pre-wrap',
|
||||||
|
flexGrow: 1,
|
||||||
|
paddingLeft: '35px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{studyDescription}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* MODALITY & DATE */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
minWidth: '80px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: colorHash.hex(modalities),
|
||||||
|
borderRadius: '16px',
|
||||||
|
padding: '2px 8px 0px 8px',
|
||||||
|
fontWeight: 500,
|
||||||
|
marginBottom: '4px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{modalities}
|
||||||
|
</div>
|
||||||
|
<div>{studyDate}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
|
||||||
|
const rowTemplate = useMedia(
|
||||||
|
['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
|
||||||
|
[largeRowTemplate, mediumRowTemplate, smallRowTemplate],
|
||||||
|
smallRowTemplate
|
||||||
|
);
|
||||||
|
|
||||||
|
return rowTemplate;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
TableRow.propTypes = {
|
||||||
|
accessionNumber: PropTypes.string.isRequired,
|
||||||
|
isHighlighted: PropTypes.bool,
|
||||||
|
modalities: PropTypes.string.isRequired,
|
||||||
|
patientId: PropTypes.string.isRequired,
|
||||||
|
patientName: PropTypes.string.isRequired,
|
||||||
|
studyDate: PropTypes.string.isRequired,
|
||||||
|
studyDescription: PropTypes.string.isRequired,
|
||||||
|
studyInstanceUid: PropTypes.string.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
TableRow.defaultProps = {
|
||||||
|
isHighlighted: false,
|
||||||
|
};
|
||||||
|
|
||||||
const connectedComponent = withTranslation('StudyList')(StudyList);
|
const connectedComponent = withTranslation('StudyList')(StudyList);
|
||||||
export { connectedComponent as StudyList };
|
export { connectedComponent as StudyList };
|
||||||
|
|||||||
@ -4,6 +4,7 @@
|
|||||||
$study-list-padding = 8%;
|
$study-list-padding = 8%;
|
||||||
$study-list-toolbar-height = 75px;
|
$study-list-toolbar-height = 75px;
|
||||||
$body-cell-height = 40px;
|
$body-cell-height = 40px;
|
||||||
|
$body-cell-top-bottom-padding = 16px;
|
||||||
|
|
||||||
$tablePaddingMediumScreen = 5px
|
$tablePaddingMediumScreen = 5px
|
||||||
$tablePaddingBigScreen = 3%
|
$tablePaddingBigScreen = 3%
|
||||||
@ -20,21 +21,41 @@ placeholder-color(c)
|
|||||||
&:-ms-input-placeholder
|
&:-ms-input-placeholder
|
||||||
color: c
|
color: c
|
||||||
|
|
||||||
.DateRangePicker
|
.study-list-header
|
||||||
height: 40px
|
.addNewStudy
|
||||||
margin: 0 5px 20px 5px
|
margin: 0 10px
|
||||||
cursor: pointer
|
|
||||||
border: none
|
|
||||||
position: block
|
|
||||||
|
|
||||||
.studyListToolbar
|
label
|
||||||
|
font-weight: 400
|
||||||
|
cursor: pointer
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
input
|
||||||
|
width: 0.1px;
|
||||||
|
height: 0.1px
|
||||||
|
opacity: 0
|
||||||
|
overflow: hidden
|
||||||
|
position: absolute
|
||||||
|
z-index: -1
|
||||||
|
|
||||||
|
color: var(--text-secondary-color)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color: var(--hover-color)
|
||||||
|
|
||||||
|
&:active
|
||||||
|
color: var(--active-color)
|
||||||
|
|
||||||
|
.study-list-header
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
background-color: var(--ui-gray-darker)
|
background-color: var(--ui-gray-darker)
|
||||||
height: $study-list-toolbar-height
|
height: $study-list-toolbar-height
|
||||||
margin-bottom: 2px
|
margin-bottom: 2px
|
||||||
padding: 0 $study-list-padding
|
padding: 0 $study-list-padding
|
||||||
|
line-height: $study-list-toolbar-height
|
||||||
&>div
|
|
||||||
display: inline-block
|
|
||||||
|
|
||||||
.header
|
.header
|
||||||
font-size: 22px
|
font-size: 22px
|
||||||
@ -42,17 +63,20 @@ placeholder-color(c)
|
|||||||
color: var(--table-text-secondary-color)
|
color: var(--table-text-secondary-color)
|
||||||
line-height: $study-list-toolbar-height
|
line-height: $study-list-toolbar-height
|
||||||
|
|
||||||
.studylistToolbar
|
.actions
|
||||||
height: $study-list-toolbar-height
|
display: flex;
|
||||||
line-height: $study-list-toolbar-height
|
|
||||||
|
|
||||||
.studyCount
|
.study-count
|
||||||
color: var(--large-numbers-color)
|
color: var(--large-numbers-color)
|
||||||
font-size: 40px
|
font-size: 40px
|
||||||
font-weight: 100
|
font-weight: 100
|
||||||
line-height: $study-list-toolbar-height
|
line-height: $study-list-toolbar-height
|
||||||
|
|
||||||
.theadBackground
|
/*
|
||||||
|
* Dark gray background with blue border
|
||||||
|
* Spans width of page to create a distinct area for table filters
|
||||||
|
*/
|
||||||
|
.table-head-background
|
||||||
height: 121px
|
height: 121px
|
||||||
position: absolute
|
position: absolute
|
||||||
width: 100%
|
width: 100%
|
||||||
@ -76,79 +100,89 @@ placeholder-color(c)
|
|||||||
height: 1px
|
height: 1px
|
||||||
z-index: 2
|
z-index: 2
|
||||||
|
|
||||||
#studyListContainer
|
|
||||||
|
.study-list-container
|
||||||
width: 100%
|
width: 100%
|
||||||
padding: 0 $study-list-padding
|
padding: 0 $study-list-padding
|
||||||
position: absolute
|
position: absolute
|
||||||
z-index: 2
|
z-index: 2
|
||||||
|
|
||||||
.loading
|
table.table
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.loading-text
|
|
||||||
color: var(--table-text-secondary-color)
|
|
||||||
font-size: 30px
|
|
||||||
width: fit-content;
|
|
||||||
|
|
||||||
.notFound
|
|
||||||
color: var(--table-text-secondary-color)
|
|
||||||
font-size: 30px
|
|
||||||
font-weight: 200
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
table#tblStudyList
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
table-layout: fixed;
|
||||||
|
|
||||||
> tr
|
> tbody tr
|
||||||
|
padding: 5px
|
||||||
|
background-color: black
|
||||||
|
|
||||||
|
/* Striped Variant */
|
||||||
|
&.table--striped > tbody tr:nth-child(even)
|
||||||
|
background-color: var(--ui-gray-darker)
|
||||||
|
|
||||||
|
/* Hover Variant */
|
||||||
|
&.table--hoverable > tbody tr
|
||||||
|
&:hover, &:active, &.active
|
||||||
|
background-color: var(--table-hover-color)
|
||||||
|
&.no-hover
|
||||||
|
&:hover, &:active, &.active
|
||||||
|
background-color: var(--ui-gray-darker)
|
||||||
|
|
||||||
|
.study-list-container > table.table > tr
|
||||||
height: 20px
|
height: 20px
|
||||||
|
|
||||||
> thead
|
.study-list-container > table.table > thead
|
||||||
white-space: nowrap
|
::-webkit-datetime-edit-year-field:not([aria-valuenow]),
|
||||||
|
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
|
||||||
|
::-webkit-datetime-edit-day-field:not([aria-valuenow])
|
||||||
|
color: transparent
|
||||||
|
|
||||||
tr
|
.study-list-container > table.table > thead > tr > th
|
||||||
th
|
padding: 0;
|
||||||
padding: 0
|
|
||||||
border-bottom: 1px solid var(--ui-border-color-active);
|
border-bottom: 1px solid var(--ui-border-color-active);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
|
|
||||||
&.studyDate
|
.study-list-container > table.table > tbody > tr > td
|
||||||
|
padding: $body-cell-top-bottom-padding 8px;
|
||||||
|
height: $body-cell-height
|
||||||
|
color: var(--table-text-primary-color)
|
||||||
|
font-weight: 300
|
||||||
|
word-wrap: break-word;
|
||||||
|
|
||||||
|
&.emptyCell
|
||||||
|
color: var(--ui-gray-light)
|
||||||
|
|
||||||
|
.study-list-container > table.table > thead > tr > th.studyDate
|
||||||
min-width: 230px
|
min-width: 230px
|
||||||
|
|
||||||
.display-text
|
.study-list-container
|
||||||
display: inline-block
|
.filters
|
||||||
cursor: pointer
|
label
|
||||||
width: 100%
|
display: flex;
|
||||||
min-width: 95px
|
align-items: center;
|
||||||
margin: 0 auto
|
cursor: pointer;
|
||||||
color: var(--table-text-primary-color)
|
width: 100%;
|
||||||
font-weight: 400
|
min-width: 95px;
|
||||||
padding: 20px
|
margin: 0 auto;
|
||||||
-webkit-user-select: none
|
color: var(--table-text-primary-color);
|
||||||
-moz-user-select: none
|
font-weight: 400;
|
||||||
-ms-user-select: none
|
padding: 20px;
|
||||||
user-select: none
|
user-select: none;
|
||||||
|
font-size: 15px;
|
||||||
span
|
|
||||||
font-size: 15px
|
|
||||||
float: left
|
|
||||||
|
|
||||||
i
|
|
||||||
margin: 0 5px
|
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color: var(--active-color)
|
color: var(--active-color);
|
||||||
|
|
||||||
&.active, &:active
|
&.active, &:active
|
||||||
color: var(--active-color)
|
color: var(--active-color);
|
||||||
|
i
|
||||||
|
margin: 0 5px;
|
||||||
|
|
||||||
input.studylist-search
|
input
|
||||||
height: 40px
|
height: 40px
|
||||||
margin: 0 5px 20px 5px
|
margin: 0 5px 20px 5px
|
||||||
padding: 0 20px
|
padding: 0 20px
|
||||||
@ -158,130 +192,41 @@ placeholder-color(c)
|
|||||||
color: var(--input-placeholder-color)
|
color: var(--input-placeholder-color)
|
||||||
font-size: 10pt
|
font-size: 10pt
|
||||||
font-weight: normal
|
font-weight: normal
|
||||||
width: calc(100% - 10px)
|
|
||||||
border-radius: 4px
|
border-radius: 4px
|
||||||
|
width: calc(100% - 10px); /* Just use padding? */
|
||||||
transition(all 0.15s ease)
|
transition(all 0.15s ease)
|
||||||
placeholder-color(var(--input-placeholder-color))
|
placeholder-color(var(--input-placeholder-color))
|
||||||
|
|
||||||
&.invisible
|
|
||||||
visibility: hidden
|
|
||||||
|
|
||||||
&:active, &:hover
|
&:active, &:hover
|
||||||
background-color: var(--input-background-color)
|
background-color: var(--input-background-color)
|
||||||
|
|
||||||
::-webkit-datetime-edit-year-field:not([aria-valuenow]),
|
.loading-text
|
||||||
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
|
color: var(--table-text-secondary-color)
|
||||||
::-webkit-datetime-edit-day-field:not([aria-valuenow])
|
text-align: center;
|
||||||
color: transparent
|
font-size: 30px
|
||||||
|
|
||||||
> tbody
|
.notFound
|
||||||
tr
|
color: var(--table-text-secondary-color)
|
||||||
padding: 5px
|
font-size: 30px
|
||||||
background-color: black
|
font-weight: 200
|
||||||
|
text-align: center
|
||||||
|
|
||||||
&:nth-child(even)
|
@media only screen and (max-width: 768px)
|
||||||
background-color: var(--ui-gray-darker)
|
.study-list-header
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
td
|
.study-list-container
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.study-list-container > table.table > thead > tr > th
|
||||||
|
padding: 0 13px;
|
||||||
|
|
||||||
|
.study-list-container > table.table > tbody > tr > td
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
height: $body-cell-height
|
|
||||||
line-height: $body-cell-height
|
|
||||||
color: var(--table-text-primary-color)
|
|
||||||
font-weight: 300
|
|
||||||
border-top: 1px solid var(--ui-gray-lighter)
|
|
||||||
border-bottom: 1px solid var(--ui-gray-lighter)
|
|
||||||
white-space: nowrap
|
|
||||||
transition(all 0.1s ease)
|
|
||||||
|
|
||||||
&.emptyCell
|
.study-list-container .filters label
|
||||||
color: #516873
|
padding: 8px;
|
||||||
|
|
||||||
&.emptyValue
|
@media only screen and (max-width: 500px)
|
||||||
color: var(--ui-gray-light)
|
.hide-xs
|
||||||
|
display: none;
|
||||||
&:hover, &:active, &.active
|
|
||||||
background-color: var(--table-hover-color)
|
|
||||||
color: var(--text-primary-color)
|
|
||||||
|
|
||||||
td
|
|
||||||
// This selector is necessary to override bootstrap's 'table' class
|
|
||||||
border-top: 1px solid var(--ui-gray-lighter)
|
|
||||||
border-bottom: 1px solid var(--ui-gray-lighter)
|
|
||||||
background-color: var(--table-hover-color)
|
|
||||||
|
|
||||||
@media only screen and (max-width: 1362px)
|
|
||||||
#studyListContainer
|
|
||||||
padding: 0 $tablePaddingLargeScreen
|
|
||||||
|
|
||||||
table#tblStudyList
|
|
||||||
thead,
|
|
||||||
tbody
|
|
||||||
tr
|
|
||||||
th,
|
|
||||||
td
|
|
||||||
&:first-child
|
|
||||||
padding-left: $tablePaddingLargeScreen
|
|
||||||
|
|
||||||
&:last-child
|
|
||||||
padding-right: $tablePaddingLargeScreen
|
|
||||||
|
|
||||||
@media only screen and (max-width: 1161px)
|
|
||||||
#studyListContainer
|
|
||||||
padding: 0 $tablePaddingBigWidth
|
|
||||||
|
|
||||||
table#tblStudyList
|
|
||||||
thead,
|
|
||||||
tbody
|
|
||||||
tr
|
|
||||||
th,
|
|
||||||
td
|
|
||||||
&:first-child
|
|
||||||
padding-left: $tablePaddingBigScreen
|
|
||||||
|
|
||||||
&:last-child
|
|
||||||
padding-right: $tablePaddingBigScreen
|
|
||||||
|
|
||||||
@media only screen and (max-width: 1069px)
|
|
||||||
.theadBackground
|
|
||||||
height: 101px
|
|
||||||
|
|
||||||
.studylist-pagination > .row
|
|
||||||
margin-right: 0;
|
|
||||||
|
|
||||||
.studyListToolbar
|
|
||||||
padding: 0 $tablePaddingMediumScreen
|
|
||||||
|
|
||||||
#studyListContainer
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
table#tblStudyList
|
|
||||||
thead > tr > th
|
|
||||||
|
|
||||||
&:first-child
|
|
||||||
padding-left: $tablePaddingMediumScreen
|
|
||||||
|
|
||||||
&:last-child
|
|
||||||
padding-right: $tablePaddingMediumScreen
|
|
||||||
|
|
||||||
input.worklist-search
|
|
||||||
padding: 10px
|
|
||||||
|
|
||||||
.display-text
|
|
||||||
padding: 10px 5px
|
|
||||||
|
|
||||||
i
|
|
||||||
width: auto
|
|
||||||
|
|
||||||
tbody > tr > td
|
|
||||||
|
|
||||||
&:first-child
|
|
||||||
padding-left: $tablePaddingMediumScreen
|
|
||||||
|
|
||||||
&:last-child
|
|
||||||
padding-right: $tablePaddingMediumScreen
|
|
||||||
|
|
||||||
.worklistPagination
|
|
||||||
.row
|
|
||||||
margin-left: 0
|
|
||||||
margin-right: 0
|
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import { Icon } from './../../elements/Icon';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { Icon } from './../../elements/Icon';
|
||||||
|
// TODO: useTranslation
|
||||||
import { withTranslation } from '../../utils/LanguageProvider';
|
import { withTranslation } from '../../utils/LanguageProvider';
|
||||||
|
|
||||||
function StudyListLoadingText({ t: translate }) {
|
function StudyListLoadingText({ t: translate }) {
|
||||||
|
|||||||
@ -1,26 +0,0 @@
|
|||||||
.studyListToolbar
|
|
||||||
.addNewStudy
|
|
||||||
margin: 0 10px
|
|
||||||
|
|
||||||
label
|
|
||||||
font-weight: 400
|
|
||||||
cursor: pointer
|
|
||||||
display: inline-block;
|
|
||||||
max-width: 100%;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
|
|
||||||
input
|
|
||||||
width: 0.1px;
|
|
||||||
height: 0.1px
|
|
||||||
opacity: 0
|
|
||||||
overflow: hidden
|
|
||||||
position: absolute
|
|
||||||
z-index: -1
|
|
||||||
|
|
||||||
color: var(--text-secondary-color)
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
color: var(--hover-color)
|
|
||||||
|
|
||||||
&:active
|
|
||||||
color: var(--active-color)
|
|
||||||
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
|||||||
import './PaginationArea.styl';
|
import './PaginationArea.styl';
|
||||||
import { withTranslation } from '../../utils/LanguageProvider';
|
import { withTranslation } from '../../utils/LanguageProvider';
|
||||||
|
|
||||||
class PaginationArea extends PureComponent {
|
class TablePagination extends PureComponent {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
pageOptions: [5, 10, 25, 50, 100],
|
pageOptions: [5, 10, 25, 50, 100],
|
||||||
rowsPerPage: 25,
|
rowsPerPage: 25,
|
||||||
@ -11,7 +11,8 @@ class PaginationArea extends PureComponent {
|
|||||||
};
|
};
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
pageOptions: PropTypes.array.isRequired,
|
/* Values to show in "rows per page" select dropdown */
|
||||||
|
pageOptions: PropTypes.array,
|
||||||
rowsPerPage: PropTypes.number.isRequired,
|
rowsPerPage: PropTypes.number.isRequired,
|
||||||
currentPage: PropTypes.number.isRequired,
|
currentPage: PropTypes.number.isRequired,
|
||||||
nextPageFunc: PropTypes.func,
|
nextPageFunc: PropTypes.func,
|
||||||
@ -89,23 +90,17 @@ class PaginationArea extends PureComponent {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div name="paginationArea">
|
|
||||||
<div className="pagination-area">
|
<div className="pagination-area">
|
||||||
<div className="row">
|
<div className="rows-dropdown">{this.renderRowsPerPageDropdown()}</div>
|
||||||
<div className="rows-dropdown">
|
|
||||||
{this.renderRowsPerPageDropdown()}
|
|
||||||
</div>
|
|
||||||
<div className="pagination-buttons">
|
<div className="pagination-buttons">
|
||||||
<div className="form-inline form-group page-number pull-right">
|
<div className="form-inline form-group page-number pull-right">
|
||||||
{this.renderPaginationButtons()}
|
{this.renderPaginationButtons()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const connectedComponent = withTranslation('Common')(PaginationArea);
|
const connectedComponent = withTranslation('Common')(TablePagination);
|
||||||
export { connectedComponent as PaginationArea };
|
export { connectedComponent as TablePagination };
|
||||||
122
platform/ui/src/components/studyList/TableSearchFilter.js
Normal file
122
platform/ui/src/components/studyList/TableSearchFilter.js
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import moment from 'moment';
|
||||||
|
import { isInclusivelyBeforeDay } from 'react-dates';
|
||||||
|
import CustomDateRangePicker from './CustomDateRangePicker.js';
|
||||||
|
import { Icon } from './../../elements/Icon';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function TableSearchFilter(props) {
|
||||||
|
const {
|
||||||
|
meta,
|
||||||
|
values,
|
||||||
|
onSort,
|
||||||
|
onValueChange,
|
||||||
|
sortFieldName,
|
||||||
|
sortDirection,
|
||||||
|
// TODO: Rename
|
||||||
|
studyListDateFilterNumDays
|
||||||
|
} = props;
|
||||||
|
const [focusedInput, setFocusedInput] = useState(null);
|
||||||
|
const [t] = useTranslation(); // 'Common'?
|
||||||
|
|
||||||
|
const sortIcons = ['sort', 'sort-up', 'sort-down'];
|
||||||
|
const sortIconForSortField =
|
||||||
|
sortDirection === 'asc' ? sortIcons[1] : sortIcons[2];
|
||||||
|
//
|
||||||
|
const today = moment();
|
||||||
|
const lastWeek = moment().subtract(7, 'day');
|
||||||
|
const lastMonth = moment().subtract(1, 'month');
|
||||||
|
const defaultStartDate = moment().subtract(studyListDateFilterNumDays, 'days');
|
||||||
|
const defaultEndDate = today;
|
||||||
|
const studyDatePresets = [
|
||||||
|
{
|
||||||
|
text: t('Today'),
|
||||||
|
start: today,
|
||||||
|
end: today,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: t('Last 7 days'),
|
||||||
|
start: lastWeek,
|
||||||
|
end: today,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: t('Last 30 days'),
|
||||||
|
start: lastMonth,
|
||||||
|
end: today,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return meta.map((field, i) => {
|
||||||
|
const { displayText, fieldName, inputType } = field;
|
||||||
|
const isSortField = sortFieldName === fieldName;
|
||||||
|
const sortIcon = isSortField ? sortIconForSortField : sortIcons[0];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<th key={`${fieldName}-${i}`}>
|
||||||
|
<label
|
||||||
|
htmlFor={`filter-${fieldName}`}
|
||||||
|
onClick={() => onSort(fieldName)}
|
||||||
|
>
|
||||||
|
{`${displayText} `}
|
||||||
|
<Icon name={sortIcon} style={{ fontSize: '12px' }} />
|
||||||
|
</label>
|
||||||
|
{inputType === 'text' && (
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id={`filter-${fieldName}`}
|
||||||
|
className="form-control studylist-search"
|
||||||
|
value={values[fieldName]}
|
||||||
|
onChange={e => onValueChange(fieldName, e.target.value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{inputType === 'date-range' && (
|
||||||
|
// https://github.com/airbnb/react-dates
|
||||||
|
<CustomDateRangePicker
|
||||||
|
// Required
|
||||||
|
startDate={studyListDateFilterNumDays ? defaultStartDate : null}
|
||||||
|
startDateId="start-date"
|
||||||
|
endDate={studyListDateFilterNumDays ? defaultEndDate : null}
|
||||||
|
endDateId="end-date"
|
||||||
|
// TODO: We need a dynamic way to determine which fields values to update
|
||||||
|
onDatesChange={({ startDate, endDate, preset = false }) => {
|
||||||
|
onValueChange('studyDateTo', startDate);
|
||||||
|
onValueChange('studyDateFrom', endDate);
|
||||||
|
}}
|
||||||
|
focusedInput={focusedInput}
|
||||||
|
onFocusChange={updatedVal => setFocusedInput(updatedVal)}
|
||||||
|
// Optional
|
||||||
|
numberOfMonths={1} // For med and small screens? 2 for large?
|
||||||
|
showClearDates={true}
|
||||||
|
anchorDirection="left"
|
||||||
|
presets={studyDatePresets}
|
||||||
|
hideKeyboardShortcutsPanel={true}
|
||||||
|
isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</th>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
TableSearchFilter.propTypes = {
|
||||||
|
meta: PropTypes.arrayOf(
|
||||||
|
PropTypes.shape({
|
||||||
|
displayText: PropTypes.string.isRequired,
|
||||||
|
fieldName: PropTypes.string.isRequired,
|
||||||
|
inputType: PropTypes.oneOf(['text', 'date-range']).isRequired,
|
||||||
|
size: PropTypes.number.isRequired,
|
||||||
|
})
|
||||||
|
).isRequired,
|
||||||
|
values: PropTypes.object.isRequired,
|
||||||
|
onSort: PropTypes.func.isRequired,
|
||||||
|
sortFieldName: PropTypes.string,
|
||||||
|
sortDirection: PropTypes.oneOf([null, 'asc', 'desc']),
|
||||||
|
};
|
||||||
|
|
||||||
|
TableSearchFilter.defaultProps = {};
|
||||||
|
|
||||||
|
export { TableSearchFilter };
|
||||||
|
export default TableSearchFilter;
|
||||||
@ -1 +1,4 @@
|
|||||||
export { StudyList } from './StudyList.js';
|
export { StudyList } from './StudyList.js';
|
||||||
|
export { TableSearchFilter } from './TableSearchFilter.js';
|
||||||
|
export { TablePagination } from './TablePagination.js';
|
||||||
|
export { PageToolbar } from './PageToolbar.js';
|
||||||
|
|||||||
24
platform/ui/src/components/studyList/internal/bkdr-hash.js
Normal file
24
platform/ui/src/components/studyList/internal/bkdr-hash.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
/**
|
||||||
|
* BKDR Hash (modified version)
|
||||||
|
*
|
||||||
|
* @param {String} str string to hash
|
||||||
|
* @returns {Number}
|
||||||
|
*/
|
||||||
|
function BKDRHash(str) {
|
||||||
|
const seed = 131;
|
||||||
|
const seed2 = 137;
|
||||||
|
let hash = 0;
|
||||||
|
// make hash more sensitive for short string like 'a', 'b', 'c'
|
||||||
|
str += 'x';
|
||||||
|
// Note: Number.MAX_SAFE_INTEGER equals 9007199254740991
|
||||||
|
var MAX_SAFE_INTEGER = parseInt(9007199254740991 / seed2);
|
||||||
|
for (var i = 0; i < str.length; i++) {
|
||||||
|
if (hash > MAX_SAFE_INTEGER) {
|
||||||
|
hash = parseInt(hash / seed2);
|
||||||
|
}
|
||||||
|
hash = hash * seed + str.charCodeAt(i);
|
||||||
|
}
|
||||||
|
return hash;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BKDRHash;
|
||||||
145
platform/ui/src/components/studyList/internal/color-hash.js
Normal file
145
platform/ui/src/components/studyList/internal/color-hash.js
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
import BKDRHash from './bkdr-hash';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert RGB Array to HEX
|
||||||
|
*
|
||||||
|
* @param {Array} RGBArray - [R, G, B]
|
||||||
|
* @returns {String} 6 digits hex starting with #
|
||||||
|
*/
|
||||||
|
function RGB2HEX(RGBArray) {
|
||||||
|
let hex = '#';
|
||||||
|
RGBArray.forEach(function(value) {
|
||||||
|
if (value < 16) {
|
||||||
|
hex += 0;
|
||||||
|
}
|
||||||
|
hex += value.toString(16);
|
||||||
|
});
|
||||||
|
return hex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert HSL to RGB
|
||||||
|
*
|
||||||
|
* @see {@link http://zh.wikipedia.org/wiki/HSL和HSV色彩空间} for further information.
|
||||||
|
* @param {Number} H Hue ∈ [0, 360)
|
||||||
|
* @param {Number} S Saturation ∈ [0, 1]
|
||||||
|
* @param {Number} L Lightness ∈ [0, 1]
|
||||||
|
* @returns {Array} R, G, B ∈ [0, 255]
|
||||||
|
*/
|
||||||
|
function HSL2RGB(H, S, L) {
|
||||||
|
H /= 360;
|
||||||
|
|
||||||
|
const q = L < 0.5 ? L * (1 + S) : L + S - L * S;
|
||||||
|
const p = 2 * L - q;
|
||||||
|
|
||||||
|
return [H + 1 / 3, H, H - 1 / 3].map(function(color) {
|
||||||
|
if (color < 0) {
|
||||||
|
color++;
|
||||||
|
}
|
||||||
|
if (color > 1) {
|
||||||
|
color--;
|
||||||
|
}
|
||||||
|
if (color < 1 / 6) {
|
||||||
|
color = p + (q - p) * 6 * color;
|
||||||
|
} else if (color < 0.5) {
|
||||||
|
color = q;
|
||||||
|
} else if (color < 2 / 3) {
|
||||||
|
color = p + (q - p) * 6 * (2 / 3 - color);
|
||||||
|
} else {
|
||||||
|
color = p;
|
||||||
|
}
|
||||||
|
return Math.round(color * 255);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function isArray(o) {
|
||||||
|
return Object.prototype.toString.call(o) === '[object Array]';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Color Hash Class
|
||||||
|
*
|
||||||
|
* @class
|
||||||
|
*/
|
||||||
|
const ColorHash = function(options = {}) {
|
||||||
|
const LS = [options.lightness, options.saturation].map(function(param) {
|
||||||
|
param = param || [0.35, 0.5, 0.65]; // note that 3 is a prime
|
||||||
|
return isArray(param) ? param.concat() : [param];
|
||||||
|
});
|
||||||
|
|
||||||
|
this.L = LS[0];
|
||||||
|
this.S = LS[1];
|
||||||
|
|
||||||
|
if (typeof options.hue === 'number') {
|
||||||
|
options.hue = { min: options.hue, max: options.hue };
|
||||||
|
}
|
||||||
|
if (typeof options.hue === 'object' && !isArray(options.hue)) {
|
||||||
|
options.hue = [options.hue];
|
||||||
|
}
|
||||||
|
if (typeof options.hue === 'undefined') {
|
||||||
|
options.hue = [];
|
||||||
|
}
|
||||||
|
this.hueRanges = options.hue.map(function(range) {
|
||||||
|
return {
|
||||||
|
min: typeof range.min === 'undefined' ? 0 : range.min,
|
||||||
|
max: typeof range.max === 'undefined' ? 360 : range.max,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
this.hash = options.hash || BKDRHash;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the hash in [h, s, l].
|
||||||
|
* Note that H ∈ [0, 360); S ∈ [0, 1]; L ∈ [0, 1];
|
||||||
|
*
|
||||||
|
* @param {String} str string to hash
|
||||||
|
* @returns {Array} [h, s, l]
|
||||||
|
*/
|
||||||
|
ColorHash.prototype.hsl = function(str) {
|
||||||
|
var H, S, L;
|
||||||
|
var hash = this.hash(str);
|
||||||
|
|
||||||
|
if (this.hueRanges.length) {
|
||||||
|
var range = this.hueRanges[hash % this.hueRanges.length];
|
||||||
|
var hueResolution = 727; // note that 727 is a prime
|
||||||
|
H =
|
||||||
|
(((hash / this.hueRanges.length) % hueResolution) *
|
||||||
|
(range.max - range.min)) /
|
||||||
|
hueResolution +
|
||||||
|
range.min;
|
||||||
|
} else {
|
||||||
|
H = hash % 359; // note that 359 is a prime
|
||||||
|
}
|
||||||
|
hash = parseInt(hash / 360);
|
||||||
|
S = this.S[hash % this.S.length];
|
||||||
|
hash = parseInt(hash / this.S.length);
|
||||||
|
L = this.L[hash % this.L.length];
|
||||||
|
|
||||||
|
return [H, S, L];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the hash in [r, g, b].
|
||||||
|
* Note that R, G, B ∈ [0, 255]
|
||||||
|
*
|
||||||
|
* @param {String} str string to hash
|
||||||
|
* @returns {Array} [r, g, b]
|
||||||
|
*/
|
||||||
|
ColorHash.prototype.rgb = function(str) {
|
||||||
|
var hsl = this.hsl(str);
|
||||||
|
return HSL2RGB.apply(this, hsl);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the hash in hex
|
||||||
|
*
|
||||||
|
* @param {String} str string to hash
|
||||||
|
* @returns {String} hex with #
|
||||||
|
*/
|
||||||
|
ColorHash.prototype.hex = function(str) {
|
||||||
|
var rgb = this.rgb(str);
|
||||||
|
return RGB2HEX(rgb);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ColorHash;
|
||||||
@ -62,7 +62,7 @@ class AboutModal extends Component {
|
|||||||
|
|
||||||
renderTableRow(item) {
|
renderTableRow(item) {
|
||||||
return (
|
return (
|
||||||
<tr key={item.name}>
|
<tr key={item.name} style={{ backgroundColor: 'transparent' }}>
|
||||||
<td>{item.name}</td>
|
<td>{item.name}</td>
|
||||||
<td>
|
<td>
|
||||||
{item.link ? (
|
{item.link ? (
|
||||||
|
|||||||
@ -42,19 +42,6 @@ h3, h1
|
|||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
pre
|
|
||||||
display: block;
|
|
||||||
padding: 9.5px;
|
|
||||||
margin: 0 0 10px;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 1.42857143;
|
|
||||||
color: #333;
|
|
||||||
word-break: break-all;
|
|
||||||
word-wrap: break-word;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
button, input, select, textarea
|
button, input, select, textarea
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
|
|||||||
4
platform/ui/src/hooks/index.js
Normal file
4
platform/ui/src/hooks/index.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import useMedia from './useMedia.js';
|
||||||
|
import useDebounce from './useDebounce.js';
|
||||||
|
|
||||||
|
export { useDebounce, useMedia };
|
||||||
41
platform/ui/src/hooks/useDebounce.js
Normal file
41
platform/ui/src/hooks/useDebounce.js
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A hook to set a value
|
||||||
|
*
|
||||||
|
* @param {*} value - A value to "set"
|
||||||
|
* @param {number} delay - The debounce delay for setting the value
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export default function useDebounce(value, delay) {
|
||||||
|
const [debouncedValue, setDebouncedValue] = useState(value);
|
||||||
|
|
||||||
|
useEffect(
|
||||||
|
() => {
|
||||||
|
// Set debouncedValue to value (passed in) after the specified delay
|
||||||
|
const handler = setTimeout(() => {
|
||||||
|
setDebouncedValue(value);
|
||||||
|
}, delay);
|
||||||
|
|
||||||
|
// Return a cleanup function that will be called every time useEffect is
|
||||||
|
// re-called. useEffect will only be re-called if value changes (see the
|
||||||
|
// inputs array below).
|
||||||
|
//
|
||||||
|
// This is how we prevent debouncedValue from changing if value is changed
|
||||||
|
// within the delay period. Timeout gets cleared and restarted.
|
||||||
|
//
|
||||||
|
// To put it in context, if the user is typing within our app's search
|
||||||
|
// box, we don't want the debouncedValue to update until they've stopped
|
||||||
|
// typing for more than 500ms.
|
||||||
|
return () => {
|
||||||
|
clearTimeout(handler);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// Only re-call effect if value changes
|
||||||
|
// You could also add the "delay" var to inputs array if you need to be
|
||||||
|
// able to change that dynamically.
|
||||||
|
[value]
|
||||||
|
);
|
||||||
|
|
||||||
|
return debouncedValue;
|
||||||
|
}
|
||||||
54
platform/ui/src/hooks/useMedia.js
Normal file
54
platform/ui/src/hooks/useMedia.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @example <caption></caption>
|
||||||
|
* const currentViewportSize = useMedia(
|
||||||
|
* // Media queries
|
||||||
|
* ['(min-width: 1500px)', '(min-width: 1000px)', '(min-width: 600px)'],
|
||||||
|
* // Value to return for matched media query
|
||||||
|
* ['large', 'medium', 'small'],
|
||||||
|
* // Default value
|
||||||
|
* 'medium'
|
||||||
|
* );
|
||||||
|
* @param {string[]} queries
|
||||||
|
* @param {*} values
|
||||||
|
* @param {*} defaultValue
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
function useMedia(queries, values, defaultValue) {
|
||||||
|
// Array containing a media query list for each query
|
||||||
|
const mediaQueryLists = queries.map(q => window.matchMedia(q));
|
||||||
|
|
||||||
|
// Function that gets value based on matching media query
|
||||||
|
const getValue = () => {
|
||||||
|
// Get index of first media query that matches
|
||||||
|
const index = mediaQueryLists.findIndex(mql => mql.matches);
|
||||||
|
|
||||||
|
// Return related value or defaultValue if none
|
||||||
|
return typeof values[index] !== 'undefined' ? values[index] : defaultValue;
|
||||||
|
};
|
||||||
|
|
||||||
|
// State and setter for matched value
|
||||||
|
const [value, setValue] = useState(getValue);
|
||||||
|
|
||||||
|
useEffect(
|
||||||
|
() => {
|
||||||
|
// Event listener callback
|
||||||
|
// Note: By defining getValue outside of useEffect we ensure that it has ...
|
||||||
|
// ... current values of hook args (as this hook callback is created once on mount).
|
||||||
|
const handler = () => setValue(getValue);
|
||||||
|
|
||||||
|
// Set a listener for each media query with above handler as callback.
|
||||||
|
mediaQueryLists.forEach(mql => mql.addListener(handler));
|
||||||
|
|
||||||
|
// Remove listeners on cleanup
|
||||||
|
return () => mediaQueryLists.forEach(mql => mql.removeListener(handler));
|
||||||
|
},
|
||||||
|
[] // Empty array ensures effect is only run on mount and unmount
|
||||||
|
);
|
||||||
|
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useMedia;
|
||||||
@ -8,6 +8,7 @@ import {
|
|||||||
MeasurementTableItem,
|
MeasurementTableItem,
|
||||||
Overlay,
|
Overlay,
|
||||||
OverlayTrigger,
|
OverlayTrigger,
|
||||||
|
PageToolbar,
|
||||||
QuickSwitch,
|
QuickSwitch,
|
||||||
RoundedButtonGroup,
|
RoundedButtonGroup,
|
||||||
SelectTree,
|
SelectTree,
|
||||||
@ -16,6 +17,8 @@ import {
|
|||||||
StudyList,
|
StudyList,
|
||||||
TableList,
|
TableList,
|
||||||
TableListItem,
|
TableListItem,
|
||||||
|
TableSearchFilter,
|
||||||
|
TablePagination,
|
||||||
ThumbnailEntry,
|
ThumbnailEntry,
|
||||||
ToolbarSection,
|
ToolbarSection,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
@ -23,6 +26,7 @@ import {
|
|||||||
UserPreferences,
|
UserPreferences,
|
||||||
UserPreferencesModal,
|
UserPreferencesModal,
|
||||||
} from './components';
|
} from './components';
|
||||||
|
import { useDebounce, useMedia } from './hooks';
|
||||||
|
|
||||||
// Elements
|
// Elements
|
||||||
import {
|
import {
|
||||||
@ -69,6 +73,7 @@ export {
|
|||||||
Overlay,
|
Overlay,
|
||||||
OverlayTrigger,
|
OverlayTrigger,
|
||||||
PlayClipButton,
|
PlayClipButton,
|
||||||
|
PageToolbar,
|
||||||
QuickSwitch,
|
QuickSwitch,
|
||||||
Range,
|
Range,
|
||||||
RoundedButtonGroup,
|
RoundedButtonGroup,
|
||||||
@ -81,6 +86,8 @@ export {
|
|||||||
StudyList,
|
StudyList,
|
||||||
TableList,
|
TableList,
|
||||||
TableListItem,
|
TableListItem,
|
||||||
|
TableSearchFilter,
|
||||||
|
TablePagination,
|
||||||
ThumbnailEntry,
|
ThumbnailEntry,
|
||||||
Toolbar,
|
Toolbar,
|
||||||
ToolbarButton,
|
ToolbarButton,
|
||||||
@ -93,4 +100,7 @@ export {
|
|||||||
SnackbarProvider,
|
SnackbarProvider,
|
||||||
useSnackbarContext,
|
useSnackbarContext,
|
||||||
withSnackbar,
|
withSnackbar,
|
||||||
|
// Hooks
|
||||||
|
useDebounce,
|
||||||
|
useMedia,
|
||||||
};
|
};
|
||||||
|
|||||||
@ -7,17 +7,8 @@ describe('OHIFStandaloneViewer', () => {
|
|||||||
cy.screenshot();
|
cy.screenshot();
|
||||||
cy.percyCanvasSnapshot('Study List');
|
cy.percyCanvasSnapshot('Study List');
|
||||||
|
|
||||||
cy.get('#studyListData tr')
|
cy.get('[data-cy="study-list-results"] tr')
|
||||||
.its('length')
|
.its('length')
|
||||||
.should('be.gt', 2);
|
.should('be.gt', 2);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('first 2 rows has values', () => {
|
|
||||||
cy.get('#studyListData > :nth-child(1) > .patientId', {
|
|
||||||
timeout: 15000,
|
|
||||||
}).should('be.visible');
|
|
||||||
cy.get('#studyListData > :nth-child(2) > .patientId', {
|
|
||||||
timeout: 15000,
|
|
||||||
}).should('be.visible');
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@ -2,7 +2,9 @@ describe('ViewerRouting', () => {
|
|||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
cy.visit('/');
|
cy.visit('/');
|
||||||
cy.contains('Study List');
|
cy.contains('Study List');
|
||||||
cy.get('#studyListData > :nth-child(1) > .patientId').click();
|
cy.get(
|
||||||
|
'[data-cy="study-list-results"]> :nth-child(1) > .patientId'
|
||||||
|
).click();
|
||||||
});
|
});
|
||||||
|
|
||||||
// it('thumbnails list has more than 2 items', () => {
|
// it('thumbnails list has more than 2 items', () => {
|
||||||
|
|||||||
@ -40,9 +40,9 @@ import {
|
|||||||
*/
|
*/
|
||||||
Cypress.Commands.add('openStudy', patientName => {
|
Cypress.Commands.add('openStudy', patientName => {
|
||||||
cy.openStudyList();
|
cy.openStudyList();
|
||||||
cy.get('#patientName').type(patientName);
|
cy.get('#filter-patientNameOrId').type(patientName);
|
||||||
cy.wait('@getStudies');
|
cy.wait('@getStudies');
|
||||||
cy.get('#studyListData .studylistStudy', { timeout: 5000 })
|
cy.get('[data-cy="study-list-results"]', { timeout: 5000 })
|
||||||
.contains(patientName)
|
.contains(patientName)
|
||||||
.first()
|
.first()
|
||||||
.click({ force: true });
|
.click({ force: true });
|
||||||
@ -56,11 +56,12 @@ Cypress.Commands.add('openStudy', patientName => {
|
|||||||
Cypress.Commands.add('openStudyModality', modality => {
|
Cypress.Commands.add('openStudyModality', modality => {
|
||||||
cy.initRouteAliases();
|
cy.initRouteAliases();
|
||||||
cy.visit('/');
|
cy.visit('/');
|
||||||
cy.get('#modalities')
|
|
||||||
|
cy.get('#filter-accessionOrModalityOrDescription')
|
||||||
.type(modality)
|
.type(modality)
|
||||||
.wait(2000);
|
.wait(2000);
|
||||||
|
|
||||||
cy.get('#studyListData')
|
cy.get('[data-cy="study-list-results"]')
|
||||||
.contains(modality)
|
.contains(modality)
|
||||||
.first()
|
.first()
|
||||||
.click();
|
.click();
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import { hot } from 'react-hot-loader/root';
|
import { hot } from 'react-hot-loader/root';
|
||||||
|
|
||||||
|
// TODO: This should not be here
|
||||||
import './config';
|
import './config';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
|||||||
@ -1,11 +1,13 @@
|
|||||||
|
/* Viewer Route */
|
||||||
.entry-header {
|
.entry-header {
|
||||||
padding: 10px 10px 0;
|
padding: 10px 15px;
|
||||||
height: var(--top-bar-height);
|
height: var(--top-bar-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Home Page */
|
||||||
.entry-header.header-big {
|
.entry-header.header-big {
|
||||||
background: rgba(21, 25, 30, 0.7);
|
background: rgba(21, 25, 30, 0.7);
|
||||||
padding: 10px var(--study-list-padding);
|
padding: 35px var(--study-list-padding);
|
||||||
height: auto;
|
height: auto;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -29,7 +31,7 @@
|
|||||||
|
|
||||||
.entry-header.header-big .header-brand {
|
.entry-header.header-big .header-brand {
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: 25px 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-logo-image {
|
.header-logo-image {
|
||||||
@ -41,7 +43,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.entry-header.header-big .header-logo-image {
|
.entry-header.header-big .header-logo-image {
|
||||||
margin: 0 20px 0 0;
|
margin-right: 20px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
@ -97,26 +99,45 @@
|
|||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-versionInfo {
|
.notification-bar {
|
||||||
display: inline-block;
|
display: none;
|
||||||
color: black;
|
position: absolute;
|
||||||
background: #9ccef9;
|
height: 20px;
|
||||||
padding: 0px 8px;
|
line-height: 20px;
|
||||||
border-radius: 16px;
|
width: 100%;
|
||||||
font-size: 12px;
|
background-color: #91b9cd;
|
||||||
margin-left: 10px;
|
color: #ffffff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-versionInfoHome {
|
@media only screen and (max-width: 768px) {
|
||||||
display: block;
|
.entry-header,
|
||||||
color: black;
|
.entry-header.header-big {
|
||||||
position: absolute;
|
padding: 30px 15px 10px 15px;
|
||||||
bottom: 16px;
|
}
|
||||||
right: 0;
|
.entry-header.header-big .header-logo-image {
|
||||||
background: #9ccef9;
|
margin: 0 10px 0 0;
|
||||||
padding: 0px 8px;
|
width: 25px;
|
||||||
border-radius: 16px;
|
height: 25px;
|
||||||
font-size: 12px;
|
}
|
||||||
font-weight: bold;
|
|
||||||
|
.entry-header.header-big .header-logo-text {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Account for notification bar height */
|
||||||
|
.entry-header.header-big .header-brand {
|
||||||
|
}
|
||||||
|
|
||||||
|
.dd-menu {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toggle Notification Bar */
|
||||||
|
.notification-bar {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.header-menu .research-use {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import './Header.css';
|
import './Header.css';
|
||||||
import './Header.css';
|
|
||||||
|
|
||||||
import { Link, withRouter } from 'react-router-dom';
|
import { Link, withRouter } from 'react-router-dom';
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
@ -84,12 +83,15 @@ class Header extends Component {
|
|||||||
// TODO: reset `this.hotKeysData`
|
// TODO: reset `this.hotKeysData`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ANTD -- Hamburger, Drawer, Menu
|
||||||
render() {
|
render() {
|
||||||
const { t } = this.props;
|
const { t } = this.props;
|
||||||
const { appConfig = {} } = this.context;
|
const { appConfig = {} } = this.context;
|
||||||
const showStudyList =
|
const showStudyList =
|
||||||
appConfig.showStudyList !== undefined ? appConfig.showStudyList : true;
|
appConfig.showStudyList !== undefined ? appConfig.showStudyList : true;
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<div className="notification-bar">{t('INVESTIGATIONAL USE ONLY')}</div>
|
||||||
<div className={`entry-header ${this.props.home ? 'header-big' : ''}`}>
|
<div className={`entry-header ${this.props.home ? 'header-big' : ''}`}>
|
||||||
<div className="header-left-box">
|
<div className="header-left-box">
|
||||||
{this.props.location && this.props.location.studyLink && (
|
{this.props.location && this.props.location.studyLink && (
|
||||||
@ -101,15 +103,6 @@ class Header extends Component {
|
|||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<span
|
|
||||||
className={`${
|
|
||||||
this.props.home ? 'header-versionInfoHome' : 'header-versionInfo'
|
|
||||||
}`}
|
|
||||||
data-cy="header-version-info"
|
|
||||||
>
|
|
||||||
v{process.env.VERSION_NUMBER}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
|
|
||||||
{showStudyList && !this.props.home && (
|
{showStudyList && !this.props.home && (
|
||||||
@ -126,8 +119,12 @@ class Header extends Component {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="header-menu">
|
<div className="header-menu">
|
||||||
<span className="research-use">{t('INVESTIGATIONAL USE ONLY')}</span>
|
<span className="research-use">
|
||||||
|
{t('INVESTIGATIONAL USE ONLY')}
|
||||||
|
</span>
|
||||||
<Dropdown title={t('Options')} list={this.options} align="right" />
|
<Dropdown title={t('Options')} list={this.options} align="right" />
|
||||||
|
|
||||||
|
{/* TODO: We need a Modal service */}
|
||||||
<AboutModal
|
<AboutModal
|
||||||
{...this.state}
|
{...this.state}
|
||||||
onCancel={() =>
|
onCancel={() =>
|
||||||
@ -138,6 +135,7 @@ class Header extends Component {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,7 +7,9 @@
|
|||||||
color: var(--text-primary-color);
|
color: var(--text-primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-brand:hover, .header-brand:active, .header-band:visited {
|
.header-brand:hover,
|
||||||
|
.header-brand:active,
|
||||||
|
.header-band:visited {
|
||||||
color: var(--text-primary-color);
|
color: var(--text-primary-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
@ -23,3 +25,9 @@
|
|||||||
width: 30px;
|
width: 30px;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.header-logo-text {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -12,6 +12,13 @@ function OHIFLogo() {
|
|||||||
href="http://ohif.org"
|
href="http://ohif.org"
|
||||||
>
|
>
|
||||||
<Icon name="ohif-logo" className="header-logo-image" />
|
<Icon name="ohif-logo" className="header-logo-image" />
|
||||||
|
{/* Logo text would fit smaller displays at two lines:
|
||||||
|
*
|
||||||
|
* Open Health
|
||||||
|
* Imaging Foundation
|
||||||
|
*
|
||||||
|
* Or as `OHIF` on really small displays
|
||||||
|
*/}
|
||||||
<Icon name="ohif-text-logo" className="header-logo-text" />
|
<Icon name="ohif-text-logo" className="header-logo-text" />
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -38,3 +38,10 @@
|
|||||||
transition: var(--sidepanel-transition);
|
transition: var(--sidepanel-transition);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
/* Account for "Investigational Use" banner height */
|
||||||
|
.FlexboxLayout {
|
||||||
|
height: calc(100% - var(--toolbar-height) - var(--top-bar-height) - 16px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
import StudyListWithData from './StudyListWithData.js';
|
import StudyListRoute from './StudyListRoute.js';
|
||||||
|
|
||||||
const isActive = a => a.active === true;
|
const isActive = a => a.active === true;
|
||||||
|
|
||||||
@ -16,6 +16,6 @@ const mapStateToProps = state => {
|
|||||||
const ConnectedStudyList = connect(
|
const ConnectedStudyList = connect(
|
||||||
mapStateToProps,
|
mapStateToProps,
|
||||||
null
|
null
|
||||||
)(StudyListWithData);
|
)(StudyListRoute);
|
||||||
|
|
||||||
export default ConnectedStudyList;
|
export default ConnectedStudyList;
|
||||||
|
|||||||
552
platform/viewer/src/studylist/StudyListRoute.js
Normal file
552
platform/viewer/src/studylist/StudyListRoute.js
Normal file
@ -0,0 +1,552 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import Dropzone from 'react-dropzone';
|
||||||
|
import OHIF from '@ohif/core';
|
||||||
|
import { withRouter } from 'react-router-dom';
|
||||||
|
import { withTranslation } from 'react-i18next';
|
||||||
|
import {
|
||||||
|
StudyList,
|
||||||
|
PageToolbar,
|
||||||
|
TablePagination,
|
||||||
|
useDebounce,
|
||||||
|
useMedia,
|
||||||
|
} from '@ohif/ui';
|
||||||
|
import ConnectedHeader from '../connectedComponents/ConnectedHeader.js';
|
||||||
|
import * as RoutesUtil from '../routes/routesUtil';
|
||||||
|
import moment from 'moment';
|
||||||
|
import ConnectedDicomFilesUploader from '../googleCloud/ConnectedDicomFilesUploader';
|
||||||
|
import ConnectedDicomStorePicker from '../googleCloud/ConnectedDicomStorePicker';
|
||||||
|
import filesToStudies from '../lib/filesToStudies.js';
|
||||||
|
|
||||||
|
// Contexts
|
||||||
|
import UserManagerContext from '../context/UserManagerContext';
|
||||||
|
import WhiteLabellingContext from '../context/WhiteLabellingContext';
|
||||||
|
import AppContext from '../context/AppContext';
|
||||||
|
|
||||||
|
const { urlUtil: UrlUtil } = OHIF.utils;
|
||||||
|
|
||||||
|
function StudyListRoute(props) {
|
||||||
|
const { history, server, t, user, studyListFunctionsEnabled } = props;
|
||||||
|
// ~~ STATE
|
||||||
|
const [sort, setSort] = useState({
|
||||||
|
fieldName: 'patientName',
|
||||||
|
direction: 'desc',
|
||||||
|
});
|
||||||
|
const [filterValues, setFilterValues] = useState({
|
||||||
|
studyDateTo: null,
|
||||||
|
studyDateFrom: null,
|
||||||
|
patientName: '',
|
||||||
|
patientId: '',
|
||||||
|
accessionNumber: '',
|
||||||
|
studyDate: '',
|
||||||
|
modalities: '',
|
||||||
|
studyDescription: '',
|
||||||
|
//
|
||||||
|
patientNameOrId: '',
|
||||||
|
accessionOrModalityOrDescription: '',
|
||||||
|
//
|
||||||
|
allFields: '',
|
||||||
|
});
|
||||||
|
const [studies, setStudies] = useState([]);
|
||||||
|
const [searchStatus, setSearchStatus] = useState({
|
||||||
|
isSearchingForStudies: false,
|
||||||
|
error: null,
|
||||||
|
});
|
||||||
|
const [activeModalId, setActiveModalId] = useState(null);
|
||||||
|
const [rowsPerPage, setRowsPerPage] = useState(25);
|
||||||
|
const [pageNumber, setPageNumber] = useState(0);
|
||||||
|
// ~~ RESPONSIVE
|
||||||
|
const displaySize = useMedia(
|
||||||
|
['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
|
||||||
|
['large', 'medium', 'small'],
|
||||||
|
'small'
|
||||||
|
);
|
||||||
|
// ~~ DEBOUNCED INPUT
|
||||||
|
const debouncedSort = useDebounce(sort, 200);
|
||||||
|
const debouncedFilters = useDebounce(filterValues, 250);
|
||||||
|
|
||||||
|
// Google Cloud Adapter for DICOM Store Picking
|
||||||
|
const { appConfig = {} } = AppContext;
|
||||||
|
const isGoogleCHAIntegrationEnabled =
|
||||||
|
!server && appConfig.enableGoogleCloudAdapter;
|
||||||
|
if (isGoogleCHAIntegrationEnabled) {
|
||||||
|
setActiveModalId('DicomStorePicker');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Called when relevant state/props are updated
|
||||||
|
// Watches filters and sort, debounced
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchStudies = async () => {
|
||||||
|
try {
|
||||||
|
setSearchStatus({ error: null, isSearchingForStudies: true });
|
||||||
|
|
||||||
|
const response = await getStudyList(
|
||||||
|
server,
|
||||||
|
debouncedFilters,
|
||||||
|
debouncedSort,
|
||||||
|
rowsPerPage,
|
||||||
|
pageNumber,
|
||||||
|
displaySize
|
||||||
|
);
|
||||||
|
|
||||||
|
setStudies(response);
|
||||||
|
setSearchStatus({ error: null, isSearchingForStudies: false });
|
||||||
|
} catch (error) {
|
||||||
|
console.warn(error);
|
||||||
|
setSearchStatus({ error: true, isFetching: false });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchStudies();
|
||||||
|
}, [debouncedFilters, debouncedSort, rowsPerPage, pageNumber, displaySize]);
|
||||||
|
|
||||||
|
// TODO: Update Server
|
||||||
|
// if (this.props.server !== prevProps.server) {
|
||||||
|
// this.setState({
|
||||||
|
// modalComponentId: null,
|
||||||
|
// searchData: null,
|
||||||
|
// studies: null,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
const onDrop = async acceptedFiles => {
|
||||||
|
try {
|
||||||
|
const studiesFromFiles = await filesToStudies(acceptedFiles);
|
||||||
|
setStudies(studiesFromFiles);
|
||||||
|
} catch (error) {
|
||||||
|
setSearchStatus({ isSearchingForStudies: false, error });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (searchStatus.error) {
|
||||||
|
return <div>Error: {JSON.stringify(searchStatus.error)}</div>;
|
||||||
|
} else if (studies === [] && !activeModalId) {
|
||||||
|
return <div>Loading...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
let healthCareApiButtons = null;
|
||||||
|
let healthCareApiWindows = null;
|
||||||
|
|
||||||
|
if (appConfig.enableGoogleCloudAdapter) {
|
||||||
|
const isModalOpen = activeModalId === 'DicomStorePicker';
|
||||||
|
updateURL(isModalOpen, appConfig, server, history);
|
||||||
|
|
||||||
|
healthCareApiWindows = (
|
||||||
|
<ConnectedDicomStorePicker
|
||||||
|
isOpen={activeModalId === 'DicomStorePicker'}
|
||||||
|
onClose={() => setActiveModalId(null)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
healthCareApiButtons = (
|
||||||
|
<div
|
||||||
|
className="form-inline btn-group pull-right"
|
||||||
|
style={{ padding: '20px' }}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={() => setActiveModalId('DicomStorePicker')}
|
||||||
|
>
|
||||||
|
{t('Change DICOM Store')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSort(fieldName) {
|
||||||
|
let sortFieldName = fieldName;
|
||||||
|
let sortDirection = 'asc';
|
||||||
|
|
||||||
|
if (fieldName === sort.fieldName) {
|
||||||
|
if (sort.direction === 'asc') {
|
||||||
|
sortDirection = 'desc';
|
||||||
|
} else {
|
||||||
|
sortFieldName = null;
|
||||||
|
sortDirection = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setSort({
|
||||||
|
fieldName: sortFieldName,
|
||||||
|
direction: sortDirection,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFilterChange(fieldName, value) {
|
||||||
|
const updatedFilterValues = Object.assign({}, filterValues);
|
||||||
|
|
||||||
|
updatedFilterValues[fieldName] = value;
|
||||||
|
setFilterValues(updatedFilterValues);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<WhiteLabellingContext.Consumer>
|
||||||
|
{whiteLabelling => (
|
||||||
|
<UserManagerContext.Consumer>
|
||||||
|
{userManager => (
|
||||||
|
<ConnectedHeader
|
||||||
|
home={true}
|
||||||
|
user={user}
|
||||||
|
userManager={userManager}
|
||||||
|
>
|
||||||
|
{whiteLabelling.logoComponent}
|
||||||
|
</ConnectedHeader>
|
||||||
|
)}
|
||||||
|
</UserManagerContext.Consumer>
|
||||||
|
)}
|
||||||
|
</WhiteLabellingContext.Consumer>
|
||||||
|
<div className="study-list-header">
|
||||||
|
<div className="header">
|
||||||
|
<h1 style={{ fontWeight: 300, fontSize: '22px' }}>
|
||||||
|
{t('StudyList')}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div className="actions">
|
||||||
|
{studyListFunctionsEnabled && (
|
||||||
|
<PageToolbar
|
||||||
|
onImport={() => setActiveModalId('DicomFilesUploader')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<span className="study-count">{studies.length}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="table-head-background" />
|
||||||
|
<div className="study-list-container">
|
||||||
|
{/* STUDY LIST OR DROP ZONE? */}
|
||||||
|
<StudyList
|
||||||
|
isLoading={searchStatus.isSearchingForStudies}
|
||||||
|
hasError={searchStatus.error === true}
|
||||||
|
// Rows
|
||||||
|
studies={studies}
|
||||||
|
onSelectItem={studyInstanceUID => {
|
||||||
|
const viewerPath = RoutesUtil.parseViewerPath(appConfig, server, {
|
||||||
|
studyInstanceUids: studyInstanceUID,
|
||||||
|
});
|
||||||
|
history.push(viewerPath);
|
||||||
|
}}
|
||||||
|
// Table Header
|
||||||
|
sort={sort}
|
||||||
|
onSort={handleSort}
|
||||||
|
filterValues={filterValues}
|
||||||
|
onFilterChange={handleFilterChange}
|
||||||
|
studyListDateFilterNumDays={appConfig.studyListDateFilterNumDays}
|
||||||
|
>
|
||||||
|
{studyListFunctionsEnabled ? (
|
||||||
|
<ConnectedDicomFilesUploader
|
||||||
|
isOpen={activeModalId === 'DicomFilesUploader'}
|
||||||
|
onClose={() => setActiveModalId(null)}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
{healthCareApiButtons}
|
||||||
|
{healthCareApiWindows}
|
||||||
|
</StudyList>
|
||||||
|
}{/* PAGINATION FOOTER */}
|
||||||
|
<TablePagination
|
||||||
|
currentPage={pageNumber}
|
||||||
|
nextPageFunc={() => setPageNumber(pageNumber + 1)}
|
||||||
|
prevPageFunc={() => setPageNumber(pageNumber - 1)}
|
||||||
|
onRowsPerPageChange={rows => setRowsPerPage(rows)}
|
||||||
|
rowsPerPage={rowsPerPage}
|
||||||
|
recordCount={studies.length}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
StudyListRoute.propTypes = {
|
||||||
|
filters: PropTypes.object,
|
||||||
|
patientId: PropTypes.string,
|
||||||
|
server: PropTypes.object,
|
||||||
|
user: PropTypes.object,
|
||||||
|
history: PropTypes.object,
|
||||||
|
studyListFunctionsEnabled: PropTypes.bool,
|
||||||
|
};
|
||||||
|
|
||||||
|
StudyListRoute.defaultProps = {
|
||||||
|
studyListFunctionsEnabled: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
function updateURL(isModalOpen, appConfig, server, history) {
|
||||||
|
if (isModalOpen) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const listPath = RoutesUtil.parseStudyListPath(appConfig, server);
|
||||||
|
|
||||||
|
if (UrlUtil.paramString.isValidPath(listPath)) {
|
||||||
|
const { location = {} } = history;
|
||||||
|
if (location.pathname !== listPath) {
|
||||||
|
history.replace(listPath);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Not ideal, but we use displaySize to determine how the filters should be used
|
||||||
|
* to build the collection of promises we need to fetch a result set.
|
||||||
|
*
|
||||||
|
* @param {*} server
|
||||||
|
* @param {*} filters
|
||||||
|
* @param {object} sort
|
||||||
|
* @param {string} sort.fieldName - field to sort by
|
||||||
|
* @param {string} sort.direction - direction to sort
|
||||||
|
* @param {number} rowsPerPage - Number of results to return
|
||||||
|
* @param {number} pageNumber - Used to determine results offset
|
||||||
|
* @param {string} displaySize - small, medium, large
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
async function getStudyList(
|
||||||
|
server,
|
||||||
|
filters,
|
||||||
|
sort,
|
||||||
|
rowsPerPage,
|
||||||
|
pageNumber,
|
||||||
|
displaySize
|
||||||
|
) {
|
||||||
|
const {
|
||||||
|
allFields,
|
||||||
|
patientNameOrId,
|
||||||
|
accessionOrModalityOrDescription,
|
||||||
|
} = filters;
|
||||||
|
const sortFieldName = sort.fieldName || 'patientName';
|
||||||
|
const sortDirection = sort.direction || 'desc';
|
||||||
|
const studyDateFrom =
|
||||||
|
filters.studyDateFrom ||
|
||||||
|
moment()
|
||||||
|
.subtract(25000, 'days')
|
||||||
|
.toDate();
|
||||||
|
const studyDateTo = filters.studyDateTo || new Date();
|
||||||
|
|
||||||
|
const mappedFilters = {
|
||||||
|
patientId: filters.patientId,
|
||||||
|
patientName: filters.patientName,
|
||||||
|
accessionNumber: filters.accessionNumber,
|
||||||
|
studyDescription: filters.studyDescription,
|
||||||
|
modalitiesInStudy: filters.modalities,
|
||||||
|
// NEVER CHANGE
|
||||||
|
studyDateFrom,
|
||||||
|
studyDateTo,
|
||||||
|
limit: rowsPerPage,
|
||||||
|
offset: pageNumber * rowsPerPage,
|
||||||
|
fuzzymatching: server.supportsFuzzyMatching === true,
|
||||||
|
};
|
||||||
|
|
||||||
|
const studies = await _fetchStudies(server, mappedFilters, displaySize, {
|
||||||
|
allFields,
|
||||||
|
patientNameOrId,
|
||||||
|
accessionOrModalityOrDescription,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Only the fields we use
|
||||||
|
const mappedStudies = studies.map(study => {
|
||||||
|
return {
|
||||||
|
accessionNumber: study.accessionNumber, // "1"
|
||||||
|
modalities: study.modalities, // "SEG\\MR"
|
||||||
|
// numberOfStudyRelatedInstances: "3"
|
||||||
|
// numberOfStudyRelatedSeries: "3"
|
||||||
|
// patientBirthdate: undefined
|
||||||
|
patientId: study.patientId, // "NOID"
|
||||||
|
patientName: study.patientName, // "NAME^NONE"
|
||||||
|
// patientSex: "M"
|
||||||
|
// referringPhysicianName: undefined
|
||||||
|
studyDate: study.studyDate, // "Jun 28, 2002"
|
||||||
|
studyDescription: study.studyDescription, // "BRAIN"
|
||||||
|
// studyId: "No Study ID"
|
||||||
|
studyInstanceUid: study.studyInstanceUid, // "1.3.6.1.4.1.5962.99.1.3814087073.479799962.1489872804257.3.0"
|
||||||
|
// studyTime: "160956.0"
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// For our smaller displays, map our field name to a single
|
||||||
|
// field we can actually sort by.
|
||||||
|
const sortFieldNameMapping = {
|
||||||
|
allFields: 'patientName',
|
||||||
|
patientNameOrId: 'patientName',
|
||||||
|
accessionOrModalityOrDescription: 'modalities',
|
||||||
|
};
|
||||||
|
const mappedSortFieldName =
|
||||||
|
sortFieldNameMapping[sortFieldName] || sortFieldName;
|
||||||
|
|
||||||
|
const sortedStudies = _sortStudies(
|
||||||
|
mappedStudies,
|
||||||
|
mappedSortFieldName,
|
||||||
|
sortDirection
|
||||||
|
);
|
||||||
|
|
||||||
|
// Because we've merged multiple requests, we may have more than
|
||||||
|
// our rows per page. Let's `take` that number from our sorted array.
|
||||||
|
// This "might" cause paging issues.
|
||||||
|
const numToTake =
|
||||||
|
sortedStudies.length < rowsPerPage ? sortedStudies.length : rowsPerPage;
|
||||||
|
const result = sortedStudies.slice(0, numToTake);
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* @param {object[]} studies - Array of studies to sort
|
||||||
|
* @param {string} studies.studyDate - Date in 'MMM DD, YYYY' format
|
||||||
|
* @param {string} field - name of properties on study to sort by
|
||||||
|
* @param {string} order - 'asc' or 'desc'
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
function _sortStudies(studies, field, order) {
|
||||||
|
// Make sure our studyDate is in a valid format and create copy of studies array
|
||||||
|
const sortedStudies = studies.map(study => {
|
||||||
|
if (!moment(study.studyDate, 'MMM DD, YYYY', true).isValid()) {
|
||||||
|
study.studyDate = moment(study.studyDate, 'YYYYMMDD').format(
|
||||||
|
'MMM DD, YYYY'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return study;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Sort by field
|
||||||
|
sortedStudies.sort(function (a, b) {
|
||||||
|
let fieldA = a[field];
|
||||||
|
let fieldB = b[field];
|
||||||
|
if (field === 'studyDate') {
|
||||||
|
fieldA = moment(fieldA).toISOString();
|
||||||
|
fieldB = moment(fieldB).toISOString();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Order
|
||||||
|
if (order === 'desc') {
|
||||||
|
if (fieldA < fieldB) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
if (fieldA > fieldB) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
} else {
|
||||||
|
if (fieldA > fieldB) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
if (fieldA < fieldB) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return sortedStudies;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* We're forced to do this because DICOMWeb does not support "AND|OR" searches
|
||||||
|
* across multiple fields. This allows us to make multiple requests, remove
|
||||||
|
* duplicates, and return the result set as if it were supported
|
||||||
|
*
|
||||||
|
* @param {object} server
|
||||||
|
* @param {Object} filters
|
||||||
|
* @param {string} displaySize - small, medium, or large
|
||||||
|
* @param {string} multi.allFields
|
||||||
|
* @param {string} multi.patientNameOrId
|
||||||
|
* @param {string} multi.accessionOrModalityOrDescription
|
||||||
|
*/
|
||||||
|
async function _fetchStudies(
|
||||||
|
server,
|
||||||
|
filters,
|
||||||
|
displaySize,
|
||||||
|
{ allFields, patientNameOrId, accessionOrModalityOrDescription }
|
||||||
|
) {
|
||||||
|
let queryFiltersArray = [filters];
|
||||||
|
|
||||||
|
if (displaySize === 'small') {
|
||||||
|
const firstSet = _getQueryFiltersForValue(
|
||||||
|
filters,
|
||||||
|
[
|
||||||
|
'patientId',
|
||||||
|
'patientName',
|
||||||
|
'accessionNumber',
|
||||||
|
'studyDescription',
|
||||||
|
'modalitiesInStudy',
|
||||||
|
],
|
||||||
|
allFields
|
||||||
|
);
|
||||||
|
|
||||||
|
if (firstSet.length) {
|
||||||
|
queryFiltersArray = firstSet;
|
||||||
|
}
|
||||||
|
} else if (displaySize === 'medium') {
|
||||||
|
const firstSet = _getQueryFiltersForValue(
|
||||||
|
filters,
|
||||||
|
['patientId', 'patientName'],
|
||||||
|
patientNameOrId
|
||||||
|
);
|
||||||
|
|
||||||
|
const secondSet = _getQueryFiltersForValue(
|
||||||
|
filters,
|
||||||
|
['accessionNumber', 'studyDescription', 'modalitiesInStudy'],
|
||||||
|
accessionOrModalityOrDescription
|
||||||
|
);
|
||||||
|
|
||||||
|
if (firstSet.length || secondSet.length) {
|
||||||
|
queryFiltersArray = firstSet.concat(secondSet);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const queryPromises = [];
|
||||||
|
|
||||||
|
queryFiltersArray.forEach(filter => {
|
||||||
|
const searchStudiesPromise = OHIF.studies.searchStudies(server, filter);
|
||||||
|
queryPromises.push(searchStudiesPromise);
|
||||||
|
});
|
||||||
|
|
||||||
|
const lotsOfStudies = await Promise.all(queryPromises);
|
||||||
|
const studies = [];
|
||||||
|
|
||||||
|
// Flatten and dedupe
|
||||||
|
lotsOfStudies.forEach(arrayOfStudies => {
|
||||||
|
if (arrayOfStudies) {
|
||||||
|
arrayOfStudies.forEach(study => {
|
||||||
|
if (!studies.some(s => s.studyInstanceUid === study.studyInstanceUid)) {
|
||||||
|
studies.push(study);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return studies;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* @param {*} filters
|
||||||
|
* @param {*} fields - Array of string fields
|
||||||
|
* @param {*} value
|
||||||
|
*/
|
||||||
|
function _getQueryFiltersForValue(filters, fields, value) {
|
||||||
|
const queryFilters = [];
|
||||||
|
|
||||||
|
if (value === '' || !value) {
|
||||||
|
return queryFilters;
|
||||||
|
}
|
||||||
|
|
||||||
|
fields.forEach(field => {
|
||||||
|
const filter = Object.assign(
|
||||||
|
{
|
||||||
|
patientId: '',
|
||||||
|
patientName: '',
|
||||||
|
accessionNumber: '',
|
||||||
|
studyDescription: '',
|
||||||
|
modalitiesInStudy: '',
|
||||||
|
},
|
||||||
|
filters
|
||||||
|
);
|
||||||
|
|
||||||
|
filter[field] = value;
|
||||||
|
queryFilters.push(filter);
|
||||||
|
});
|
||||||
|
|
||||||
|
return queryFilters;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withRouter(withTranslation('Common')(StudyListRoute));
|
||||||
@ -1,349 +0,0 @@
|
|||||||
import React, { Component } from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Dropzone from 'react-dropzone';
|
|
||||||
import OHIF from '@ohif/core';
|
|
||||||
import { withRouter } from 'react-router-dom';
|
|
||||||
import { withTranslation } from 'react-i18next';
|
|
||||||
import { StudyList } from '@ohif/ui';
|
|
||||||
import ConnectedHeader from '../connectedComponents/ConnectedHeader.js';
|
|
||||||
import * as RoutesUtil from '../routes/routesUtil';
|
|
||||||
import moment from 'moment';
|
|
||||||
import isEqual from 'lodash.isequal';
|
|
||||||
import ConnectedDicomFilesUploader from '../googleCloud/ConnectedDicomFilesUploader';
|
|
||||||
import ConnectedDicomStorePicker from '../googleCloud/ConnectedDicomStorePicker';
|
|
||||||
import filesToStudies from '../lib/filesToStudies.js';
|
|
||||||
|
|
||||||
const { urlUtil: UrlUtil } = OHIF.utils;
|
|
||||||
// Contexts
|
|
||||||
import UserManagerContext from '../context/UserManagerContext';
|
|
||||||
import WhiteLabellingContext from '../context/WhiteLabellingContext';
|
|
||||||
import AppContext from '../context/AppContext';
|
|
||||||
|
|
||||||
class StudyListWithData extends Component {
|
|
||||||
static contextType = AppContext;
|
|
||||||
state = {
|
|
||||||
searchOutdated: true,
|
|
||||||
studies: [],
|
|
||||||
searchingStudies: false,
|
|
||||||
error: null,
|
|
||||||
modalComponentId: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
filters: PropTypes.object,
|
|
||||||
patientId: PropTypes.string,
|
|
||||||
server: PropTypes.object,
|
|
||||||
user: PropTypes.object,
|
|
||||||
history: PropTypes.object,
|
|
||||||
studyListFunctionsEnabled: PropTypes.bool,
|
|
||||||
};
|
|
||||||
|
|
||||||
static defaultProps = {
|
|
||||||
studyListFunctionsEnabled: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
static rowsPerPage = 25;
|
|
||||||
static defaultSort = { field: 'patientName', order: 'desc' };
|
|
||||||
|
|
||||||
static studyListDateFilterNumDays = 25000; // TODO: put this in the settings
|
|
||||||
static defaultStudyDateFrom = moment()
|
|
||||||
.subtract(StudyListWithData.studyListDateFilterNumDays, 'days')
|
|
||||||
.toDate();
|
|
||||||
static defaultStudyDateTo = new Date();
|
|
||||||
static defaultSearchData = {
|
|
||||||
currentPage: 0,
|
|
||||||
rowsPerPage: StudyListWithData.rowsPerPage,
|
|
||||||
studyDateFrom: StudyListWithData.defaultStudyDateFrom,
|
|
||||||
studyDateTo: StudyListWithData.defaultStudyDateTo,
|
|
||||||
sortData: StudyListWithData.defaultSort,
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const { appConfig = {} } = this.context;
|
|
||||||
// TODO: Avoid using timepoints here
|
|
||||||
//const params = { studyInstanceUids, seriesInstanceUids, timepointId, timepointsFilter={} };
|
|
||||||
if (!this.props.server && appConfig.enableGoogleCloudAdapter) {
|
|
||||||
this.setState({
|
|
||||||
modalComponentId: 'DicomStorePicker',
|
|
||||||
searchOutdated: false,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.searchForStudies({
|
|
||||||
...StudyListWithData.defaultSearchData,
|
|
||||||
...(this.props.filters || {}),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps, prevState) {
|
|
||||||
const hasNewServer = !isEqual(this.props.server, prevProps.server);
|
|
||||||
|
|
||||||
const { searchOutdated, searchingStudies } = this.state;
|
|
||||||
|
|
||||||
if (!searchingStudies) {
|
|
||||||
if (hasNewServer) {
|
|
||||||
const { appConfig = {} } = this.context;
|
|
||||||
|
|
||||||
const newState = {
|
|
||||||
searchOutdated: true,
|
|
||||||
studies: null,
|
|
||||||
};
|
|
||||||
if (appConfig.enableGoogleCloudAdapter) {
|
|
||||||
newState.modalComponentId = null;
|
|
||||||
}
|
|
||||||
this.setState(newState);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (searchOutdated) {
|
|
||||||
this.searchForStudies();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
searchForStudies = (searchData = StudyListWithData.defaultSearchData) => {
|
|
||||||
const { server = {} } = this.props;
|
|
||||||
const filter = {
|
|
||||||
patientId: searchData.patientId,
|
|
||||||
patientName: searchData.patientName,
|
|
||||||
accessionNumber: searchData.accessionNumber,
|
|
||||||
studyDescription: searchData.studyDescription,
|
|
||||||
modalitiesInStudy: searchData.modalities,
|
|
||||||
studyDateFrom: searchData.studyDateFrom,
|
|
||||||
studyDateTo: searchData.studyDateTo,
|
|
||||||
limit: searchData.rowsPerPage,
|
|
||||||
offset: searchData.currentPage * searchData.rowsPerPage,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (server.supportsFuzzyMatching) {
|
|
||||||
filter.fuzzymatching = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: add sorting
|
|
||||||
const promise = OHIF.studies.searchStudies(server, filter);
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
searchingStudies: true,
|
|
||||||
});
|
|
||||||
promise
|
|
||||||
.then(studies => {
|
|
||||||
if (!studies) {
|
|
||||||
studies = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
const { field, order } = searchData.sortData;
|
|
||||||
let sortedStudies = studies.map(study => {
|
|
||||||
if (!moment(study.studyDate, 'MMM DD, YYYY', true).isValid()) {
|
|
||||||
study.studyDate = moment(study.studyDate, 'YYYYMMDD').format(
|
|
||||||
'MMM DD, YYYY'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return study;
|
|
||||||
});
|
|
||||||
|
|
||||||
sortedStudies.sort(function(a, b) {
|
|
||||||
let fieldA = a[field];
|
|
||||||
let fieldB = b[field];
|
|
||||||
if (field === 'studyDate') {
|
|
||||||
fieldA = moment(fieldA).toISOString();
|
|
||||||
fieldB = moment(fieldB).toISOString();
|
|
||||||
}
|
|
||||||
if (order === 'desc') {
|
|
||||||
if (fieldA < fieldB) {
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
if (fieldA > fieldB) {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
} else {
|
|
||||||
if (fieldA > fieldB) {
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
if (fieldA < fieldB) {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
studies: sortedStudies,
|
|
||||||
searchingStudies: false,
|
|
||||||
searchOutdated: false,
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
this.setState({
|
|
||||||
error: true,
|
|
||||||
searchingStudies: false,
|
|
||||||
searchOutdated: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
throw new Error(error);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
onImport = () => {
|
|
||||||
this.openModal('DicomFilesUploader');
|
|
||||||
};
|
|
||||||
|
|
||||||
openModal = modalComponentId => {
|
|
||||||
this.setState({
|
|
||||||
modalComponentId,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
closeModal = () => {
|
|
||||||
this.setState({ modalComponentId: null });
|
|
||||||
};
|
|
||||||
|
|
||||||
onSelectItem = studyInstanceUID => {
|
|
||||||
const { appConfig = {} } = this.context;
|
|
||||||
const { server } = this.props;
|
|
||||||
const viewerPath = RoutesUtil.parseViewerPath(appConfig, server, {
|
|
||||||
studyInstanceUids: studyInstanceUID,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (UrlUtil.paramString.isValidPath(viewerPath)) {
|
|
||||||
this.props.history.push(viewerPath);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
updateURL(modalOpened) {
|
|
||||||
if (!modalOpened) {
|
|
||||||
const { appConfig = {} } = this.context;
|
|
||||||
const { server } = this.props;
|
|
||||||
const listPath = RoutesUtil.parseStudyListPath(appConfig, server);
|
|
||||||
|
|
||||||
if (UrlUtil.paramString.isValidPath(listPath)) {
|
|
||||||
const { location = {} } = this.props.history;
|
|
||||||
if (location.pathname !== listPath) {
|
|
||||||
this.props.history.replace(listPath);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onSearch = searchData => {
|
|
||||||
this.searchForStudies(searchData);
|
|
||||||
};
|
|
||||||
|
|
||||||
closeModals = () => {
|
|
||||||
this.setState({
|
|
||||||
modalComponentId: null,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { appConfig = {} } = this.context;
|
|
||||||
const onDrop = async acceptedFiles => {
|
|
||||||
try {
|
|
||||||
const studies = await filesToStudies(acceptedFiles);
|
|
||||||
|
|
||||||
this.setState({ studies });
|
|
||||||
} catch (error) {
|
|
||||||
this.setState({ error });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (this.state.error) {
|
|
||||||
return <div>Error: {JSON.stringify(this.state.error)}</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
let healthCareApiButtons = null;
|
|
||||||
let healthCareApiWindows = null;
|
|
||||||
|
|
||||||
if (appConfig.enableGoogleCloudAdapter) {
|
|
||||||
const modalOpened = this.state.modalComponentId === 'DicomStorePicker';
|
|
||||||
this.updateURL(modalOpened);
|
|
||||||
|
|
||||||
healthCareApiWindows = (
|
|
||||||
<ConnectedDicomStorePicker
|
|
||||||
isOpen={modalOpened}
|
|
||||||
onClose={this.closeModals}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
healthCareApiButtons = (
|
|
||||||
<div
|
|
||||||
className="form-inline btn-group pull-right"
|
|
||||||
style={{ padding: '20px' }}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
className="btn btn-primary"
|
|
||||||
onClick={() => this.openModal('DicomStorePicker')}
|
|
||||||
>
|
|
||||||
{this.props.t('Change DICOM Store')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const studyList = (
|
|
||||||
<div className="paginationArea">
|
|
||||||
{this.state.studies || this.state.searchingStudies ? (
|
|
||||||
<StudyList
|
|
||||||
loading={this.state.searchingStudies}
|
|
||||||
studies={this.state.studies}
|
|
||||||
studyListFunctionsEnabled={this.props.studyListFunctionsEnabled}
|
|
||||||
onImport={this.onImport}
|
|
||||||
onSelectItem={this.onSelectItem}
|
|
||||||
pageSize={this.rowsPerPage}
|
|
||||||
defaultSort={StudyListWithData.defaultSort}
|
|
||||||
studyListDateFilterNumDays={
|
|
||||||
StudyListWithData.studyListDateFilterNumDays
|
|
||||||
}
|
|
||||||
onSearch={this.onSearch}
|
|
||||||
>
|
|
||||||
{this.props.studyListFunctionsEnabled ? (
|
|
||||||
<ConnectedDicomFilesUploader
|
|
||||||
isOpen={this.state.modalComponentId === 'DicomFilesUploader'}
|
|
||||||
onClose={this.closeModals}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
{healthCareApiButtons}
|
|
||||||
{healthCareApiWindows}
|
|
||||||
</StudyList>
|
|
||||||
) : (
|
|
||||||
<Dropzone onDrop={onDrop}>
|
|
||||||
{({ getRootProps, getInputProps }) => (
|
|
||||||
<div {...getRootProps()} className={'drag-drop-instructions'}>
|
|
||||||
<h3>
|
|
||||||
{this.props.t(
|
|
||||||
'Drag and Drop DICOM files here to load them in the Viewer'
|
|
||||||
)}
|
|
||||||
</h3>
|
|
||||||
<h4>
|
|
||||||
{this.props.t("Or click to load the browser's file selector")}
|
|
||||||
</h4>
|
|
||||||
<input {...getInputProps()} style={{ display: 'none' }} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Dropzone>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<WhiteLabellingContext.Consumer>
|
|
||||||
{whiteLabelling => (
|
|
||||||
<UserManagerContext.Consumer>
|
|
||||||
{userManager => (
|
|
||||||
<ConnectedHeader
|
|
||||||
home={true}
|
|
||||||
user={this.props.user}
|
|
||||||
userManager={userManager}
|
|
||||||
>
|
|
||||||
{whiteLabelling.logoComponent}
|
|
||||||
</ConnectedHeader>
|
|
||||||
)}
|
|
||||||
</UserManagerContext.Consumer>
|
|
||||||
)}
|
|
||||||
</WhiteLabellingContext.Consumer>
|
|
||||||
{studyList}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default withRouter(withTranslation('Common')(StudyListWithData));
|
|
||||||
81
yarn.lock
81
yarn.lock
@ -3164,7 +3164,7 @@ aggregate-error@^3.0.0:
|
|||||||
clean-stack "^2.0.0"
|
clean-stack "^2.0.0"
|
||||||
indent-string "^4.0.0"
|
indent-string "^4.0.0"
|
||||||
|
|
||||||
airbnb-prop-types@^2.10.0, airbnb-prop-types@^2.15.0, airbnb-prop-types@^2.8.1:
|
airbnb-prop-types@^2.10.0, airbnb-prop-types@^2.14.0, airbnb-prop-types@^2.15.0, airbnb-prop-types@^2.8.1:
|
||||||
version "2.15.0"
|
version "2.15.0"
|
||||||
resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.15.0.tgz#5287820043af1eb469f5b0af0d6f70da6c52aaef"
|
resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.15.0.tgz#5287820043af1eb469f5b0af0d6f70da6c52aaef"
|
||||||
integrity sha512-jUh2/hfKsRjNFC4XONQrxo/n/3GG4Tn6Hl0WlFQN5PY9OMC9loSCoAYKnZsWaP8wEfd5xcrPloK0Zg6iS1xwVA==
|
integrity sha512-jUh2/hfKsRjNFC4XONQrxo/n/3GG4Tn6Hl0WlFQN5PY9OMC9loSCoAYKnZsWaP8wEfd5xcrPloK0Zg6iS1xwVA==
|
||||||
@ -7164,6 +7164,14 @@ env-variable@0.0.x:
|
|||||||
resolved "https://registry.yarnpkg.com/env-variable/-/env-variable-0.0.5.tgz#913dd830bef11e96a039c038d4130604eba37f88"
|
resolved "https://registry.yarnpkg.com/env-variable/-/env-variable-0.0.5.tgz#913dd830bef11e96a039c038d4130604eba37f88"
|
||||||
integrity sha512-zoB603vQReOFvTg5xMl9I1P2PnHsHQQKTEowsKKD7nseUfJq6UWzK+4YtlWUO1nhiQUxe6XMkk+JleSZD1NZFA==
|
integrity sha512-zoB603vQReOFvTg5xMl9I1P2PnHsHQQKTEowsKKD7nseUfJq6UWzK+4YtlWUO1nhiQUxe6XMkk+JleSZD1NZFA==
|
||||||
|
|
||||||
|
enzyme-shallow-equal@^1.0.0:
|
||||||
|
version "1.0.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.0.tgz#d8e4603495e6ea279038eef05a4bf4887b55dc69"
|
||||||
|
integrity sha512-VUf+q5o1EIv2ZaloNQQtWCJM9gpeux6vudGVH6vLmfPXFLRuxl5+Aq3U260wof9nn0b0i+P5OEUXm1vnxkRpXQ==
|
||||||
|
dependencies:
|
||||||
|
has "^1.0.3"
|
||||||
|
object-is "^1.0.1"
|
||||||
|
|
||||||
err-code@^1.0.0:
|
err-code@^1.0.0:
|
||||||
version "1.1.2"
|
version "1.1.2"
|
||||||
resolved "https://registry.yarnpkg.com/err-code/-/err-code-1.1.2.tgz#06e0116d3028f6aef4806849eb0ea6a748ae6960"
|
resolved "https://registry.yarnpkg.com/err-code/-/err-code-1.1.2.tgz#06e0116d3028f6aef4806849eb0ea6a748ae6960"
|
||||||
@ -7951,7 +7959,7 @@ fb-watchman@^2.0.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
bser "^2.0.0"
|
bser "^2.0.0"
|
||||||
|
|
||||||
fbjs@^0.8.0, fbjs@^0.8.4:
|
fbjs@^0.8.0:
|
||||||
version "0.8.17"
|
version "0.8.17"
|
||||||
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
|
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
|
||||||
integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
|
integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
|
||||||
@ -15053,6 +15061,13 @@ raf-schd@^4.0.2:
|
|||||||
resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0"
|
resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0"
|
||||||
integrity sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ==
|
integrity sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ==
|
||||||
|
|
||||||
|
raf@^3.4.1:
|
||||||
|
version "3.4.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
|
||||||
|
integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
|
||||||
|
dependencies:
|
||||||
|
performance-now "^2.1.0"
|
||||||
|
|
||||||
ramda@0.24.1:
|
ramda@0.24.1:
|
||||||
version "0.24.1"
|
version "0.24.1"
|
||||||
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857"
|
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857"
|
||||||
@ -15124,14 +15139,6 @@ re-resizable@^4.11.0:
|
|||||||
resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-4.11.0.tgz#d5df10bda445c4ec0945751a223bf195afb61890"
|
resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-4.11.0.tgz#d5df10bda445c4ec0945751a223bf195afb61890"
|
||||||
integrity sha512-dye+7rERqNf/6mDT1iwps+4Gf42420xuZgygF33uX178DxffqcyeuHbBuJ382FIcB5iP6mMZOhfW7kI0uXwb/Q==
|
integrity sha512-dye+7rERqNf/6mDT1iwps+4Gf42420xuZgygF33uX178DxffqcyeuHbBuJ382FIcB5iP6mMZOhfW7kI0uXwb/Q==
|
||||||
|
|
||||||
react-addons-shallow-compare@^15.6.2:
|
|
||||||
version "15.6.2"
|
|
||||||
resolved "https://registry.yarnpkg.com/react-addons-shallow-compare/-/react-addons-shallow-compare-15.6.2.tgz#198a00b91fc37623db64a28fd17b596ba362702f"
|
|
||||||
integrity sha1-GYoAuR/DdiPbZKKP0XtZa6NicC8=
|
|
||||||
dependencies:
|
|
||||||
fbjs "^0.8.4"
|
|
||||||
object-assign "^4.1.0"
|
|
||||||
|
|
||||||
react-bootstrap-modal@4.2.0:
|
react-bootstrap-modal@4.2.0:
|
||||||
version "4.2.0"
|
version "4.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/react-bootstrap-modal/-/react-bootstrap-modal-4.2.0.tgz#010b3ca9230a3c147fa5fc6aa39b6971e34151bd"
|
resolved "https://registry.yarnpkg.com/react-bootstrap-modal/-/react-bootstrap-modal-4.2.0.tgz#010b3ca9230a3c147fa5fc6aa39b6971e34151bd"
|
||||||
@ -15168,25 +15175,26 @@ react-cornerstone-viewport@2.x.x:
|
|||||||
prop-types "^15.7.2"
|
prop-types "^15.7.2"
|
||||||
react-resize-detector "^4.2.1"
|
react-resize-detector "^4.2.1"
|
||||||
|
|
||||||
react-dates@18.4.1:
|
react-dates@21.2.1:
|
||||||
version "18.4.1"
|
version "21.2.1"
|
||||||
resolved "https://registry.yarnpkg.com/react-dates/-/react-dates-18.4.1.tgz#82aa0bb4faaa9cdb9547d61c791af2180beda20e"
|
resolved "https://registry.yarnpkg.com/react-dates/-/react-dates-21.2.1.tgz#a979ed6876326ccfbf754a019bc95458cc061ad8"
|
||||||
integrity sha512-ew6HiORfbJkEGlJ+5SMC5GtgI87zj2BqNv8tRsdnPtgLMt5fY2Z9dUFxc+XATeRHs+wOm4ku0dlKWpuqBzYapQ==
|
integrity sha512-jGZGQjiYur6lTvnhgQvnOLR2ACmV10LDZow3anNSAFAuKsWny3NKrnlXJ+gdRMv3amCF8TrMwsa+3cplv3OWIQ==
|
||||||
dependencies:
|
dependencies:
|
||||||
airbnb-prop-types "^2.10.0"
|
airbnb-prop-types "^2.15.0"
|
||||||
consolidated-events "^1.1.1 || ^2.0.0"
|
consolidated-events "^1.1.1 || ^2.0.0"
|
||||||
|
enzyme-shallow-equal "^1.0.0"
|
||||||
is-touch-device "^1.0.1"
|
is-touch-device "^1.0.1"
|
||||||
lodash "^4.1.1"
|
lodash "^4.1.1"
|
||||||
object.assign "^4.1.0"
|
object.assign "^4.1.0"
|
||||||
object.values "^1.0.4"
|
object.values "^1.1.0"
|
||||||
prop-types "^15.6.1"
|
prop-types "^15.7.2"
|
||||||
react-addons-shallow-compare "^15.6.2"
|
raf "^3.4.1"
|
||||||
react-moment-proptypes "^1.6.0"
|
react-moment-proptypes "^1.6.0"
|
||||||
react-outside-click-handler "^1.2.0"
|
react-outside-click-handler "^1.2.4"
|
||||||
react-portal "^4.1.5"
|
react-portal "^4.2.0"
|
||||||
react-with-direction "^1.3.0"
|
react-with-direction "^1.3.1"
|
||||||
react-with-styles "^3.2.0"
|
react-with-styles "^4.0.1"
|
||||||
react-with-styles-interface-css "^4.0.2"
|
react-with-styles-interface-css "^6.0.0"
|
||||||
|
|
||||||
react-dev-utils@^5.0.2:
|
react-dev-utils@^5.0.2:
|
||||||
version "5.0.3"
|
version "5.0.3"
|
||||||
@ -15422,7 +15430,7 @@ react-moment-proptypes@^1.6.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
moment ">=1.6.0"
|
moment ">=1.6.0"
|
||||||
|
|
||||||
react-outside-click-handler@^1.2.0:
|
react-outside-click-handler@^1.2.4:
|
||||||
version "1.3.0"
|
version "1.3.0"
|
||||||
resolved "https://registry.yarnpkg.com/react-outside-click-handler/-/react-outside-click-handler-1.3.0.tgz#3831d541ac059deecd38ec5423f81e80ad60e115"
|
resolved "https://registry.yarnpkg.com/react-outside-click-handler/-/react-outside-click-handler-1.3.0.tgz#3831d541ac059deecd38ec5423f81e80ad60e115"
|
||||||
integrity sha512-Te/7zFU0oHpAnctl//pP3hEAeobfeHMyygHB8MnjP6sX5OR8KHT1G3jmLsV3U9RnIYo+Yn+peJYWu+D5tUS8qQ==
|
integrity sha512-Te/7zFU0oHpAnctl//pP3hEAeobfeHMyygHB8MnjP6sX5OR8KHT1G3jmLsV3U9RnIYo+Yn+peJYWu+D5tUS8qQ==
|
||||||
@ -15453,7 +15461,7 @@ react-perfect-scrollbar@^1.5.0:
|
|||||||
perfect-scrollbar "^1.4.0"
|
perfect-scrollbar "^1.4.0"
|
||||||
prop-types "^15.6.1"
|
prop-types "^15.6.1"
|
||||||
|
|
||||||
react-portal@^4.1.5:
|
react-portal@^4.2.0:
|
||||||
version "4.2.0"
|
version "4.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.2.0.tgz#5400831cdb0ae64dccb8128121cf076089ab1afd"
|
resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.2.0.tgz#5400831cdb0ae64dccb8128121cf076089ab1afd"
|
||||||
integrity sha512-Zf+vGQ/VEAb5XAy+muKEn48yhdCNYPZaB1BWg1xc8sAZWD8pXTgPtQT4ihBdmWzsfCq8p8/kqf0GWydSBqc+Eg==
|
integrity sha512-Zf+vGQ/VEAb5XAy+muKEn48yhdCNYPZaB1BWg1xc8sAZWD8pXTgPtQT4ihBdmWzsfCq8p8/kqf0GWydSBqc+Eg==
|
||||||
@ -15566,7 +15574,7 @@ react-with-direction@1.3.0:
|
|||||||
object.values "^1.0.4"
|
object.values "^1.0.4"
|
||||||
prop-types "^15.6.0"
|
prop-types "^15.6.0"
|
||||||
|
|
||||||
react-with-direction@^1.3.0:
|
react-with-direction@^1.3.1:
|
||||||
version "1.3.1"
|
version "1.3.1"
|
||||||
resolved "https://registry.yarnpkg.com/react-with-direction/-/react-with-direction-1.3.1.tgz#9fd414564f0ffe6947e5ff176f6132dd83f8b8df"
|
resolved "https://registry.yarnpkg.com/react-with-direction/-/react-with-direction-1.3.1.tgz#9fd414564f0ffe6947e5ff176f6132dd83f8b8df"
|
||||||
integrity sha512-aGcM21ZzhqeXFvDCfPj0rVNYuaVXfTz5D3Rbn0QMz/unZe+CCiLHthrjQWO7s6qdfXORgYFtmS7OVsRgSk5LXQ==
|
integrity sha512-aGcM21ZzhqeXFvDCfPj0rVNYuaVXfTz5D3Rbn0QMz/unZe+CCiLHthrjQWO7s6qdfXORgYFtmS7OVsRgSk5LXQ==
|
||||||
@ -15580,23 +15588,24 @@ react-with-direction@^1.3.0:
|
|||||||
object.values "^1.0.4"
|
object.values "^1.0.4"
|
||||||
prop-types "^15.6.2"
|
prop-types "^15.6.2"
|
||||||
|
|
||||||
react-with-styles-interface-css@^4.0.2:
|
react-with-styles-interface-css@^6.0.0:
|
||||||
version "4.0.3"
|
version "6.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/react-with-styles-interface-css/-/react-with-styles-interface-css-4.0.3.tgz#c4a61277b2b8e4126b2cd25eca3ac4097bd2af09"
|
resolved "https://registry.yarnpkg.com/react-with-styles-interface-css/-/react-with-styles-interface-css-6.0.0.tgz#b53da7fa8359d452cb934cface8738acaef7b5fe"
|
||||||
integrity sha512-wE43PIyjal2dexxyyx4Lhbcb+E42amoYPnkunRZkb9WTA+Z+9LagbyxwsI352NqMdFmghR0opg29dzDO4/YXbw==
|
integrity sha512-6khSG1Trf4L/uXOge/ZAlBnq2O2PEXlQEqAhCRbvzaQU4sksIkdwpCPEl6d+DtP3+IdhyffTWuHDO9lhe1iYvA==
|
||||||
dependencies:
|
dependencies:
|
||||||
array.prototype.flat "^1.2.1"
|
array.prototype.flat "^1.2.1"
|
||||||
global-cache "^1.2.1"
|
global-cache "^1.2.1"
|
||||||
|
|
||||||
react-with-styles@^3.2.0:
|
react-with-styles@^4.0.1:
|
||||||
version "3.2.3"
|
version "4.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/react-with-styles/-/react-with-styles-3.2.3.tgz#b058584065bb36c0d80ccc911725492692db8a61"
|
resolved "https://registry.yarnpkg.com/react-with-styles/-/react-with-styles-4.0.1.tgz#22b5170d39769b643dd650cc183e9419650af12d"
|
||||||
integrity sha512-MTI1UOvMHABRLj5M4WpODfwnveHaip6X7QUMI2x6zovinJiBXxzhA9AJP7MZNaKqg1JRFtHPXZdroUC8KcXwlQ==
|
integrity sha512-J77k4E2Dcm4SpfbQEet2KyRjZJtPCWD1PVkOB5vIOJewg/VEIMkb2MVVxusLTh1nwtfo7cnxY6gHytF6NcBkLQ==
|
||||||
dependencies:
|
dependencies:
|
||||||
|
airbnb-prop-types "^2.14.0"
|
||||||
hoist-non-react-statics "^3.2.1"
|
hoist-non-react-statics "^3.2.1"
|
||||||
object.assign "^4.1.0"
|
object.assign "^4.1.0"
|
||||||
prop-types "^15.6.2"
|
prop-types "^15.7.2"
|
||||||
react-with-direction "^1.3.0"
|
react-with-direction "^1.3.1"
|
||||||
|
|
||||||
react@^16.8.6:
|
react@^16.8.6:
|
||||||
version "16.11.0"
|
version "16.11.0"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user