Skip to content

Commit

Permalink
OpenConceptLab/ocl_issues#1454 | cascade input parameters in Operatio…
Browse files Browse the repository at this point in the history
…ns Panel
  • Loading branch information
snyaggarwal committed Jan 4, 2023
1 parent d31c7b4 commit 27bcdfb
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 2 deletions.
20 changes: 20 additions & 0 deletions src/common/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,3 +49,23 @@ export const OPENMRS_URL = 'https://openmrs.openconceptlab.org';
export const DEFAULT_FHIR_SERVER_FOR_LOCAL_ID = 6;
export const FHIR_OPERATIONS = ['$validate-code', '$lookup'];
export const UUID_LENGTH = 8+4+4+4+12+4; // last 4 is for 4 hyphens

export const CASCADE_OPTIONS = {
method: [
{id: 'sourcetoconcepts', name: 'Mappings & Target Concepts'},
{id: 'sourcemappings', name: 'Mappings'},
],
view: ['flat', 'hierarchy']
}
export const DEFAULT_CASCADE_PARAMS = {
method: 'sourcetoconcepts',
mapTypes: '',
excludeMapTypes: '',
returnMapTypes: '*',
cascadeHierarchy: true,
cascadeMappings: true,
includeRetired: false,
cascadeLevels: '*',
reverse: false,
view: 'flat'
}
123 changes: 123 additions & 0 deletions src/components/common/CascadeParametersForm.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
import React from 'react';
import { CASCADE_OPTIONS, DEFAULT_CASCADE_PARAMS } from '../../common/constants';
import {
TextField, FormControl, InputLabel, Select, MenuItem, FormControlLabel, Checkbox
} from '@mui/material';
import { map } from 'lodash'

const CascadeParametersForm = ({onChange, defaultParams}) => {
const [params, setParams] = React.useState(defaultParams || {...DEFAULT_CASCADE_PARAMS})

const _onChange = (param, value) => {
let newParams = {...params, [param]: value}
setParams(newParams)
onChange(newParams)
}

return (
<div className='col-xs-12 no-side-padding'>
<div className='col-xs-12 no-side-padding' style={{marginBottom: '10px'}}>
<FormControl fullWidth>
<InputLabel>Method</InputLabel>
<Select
value={params.method}
label="Method"
onChange={event => _onChange('method', event.target.value)}
size='small'
>
{
map(CASCADE_OPTIONS.method, method => (
<MenuItem size='small' value={method.id} key={method.id}>
{`${method.name} (${method.id})`}
</MenuItem>
))
}
</Select>
</FormControl>
</div>
<div className='col-xs-12 no-side-padding' style={{marginBottom: '10px'}}>
<FormControlLabel
size='small'
onChange={event => _onChange('cascadeHierarchy', event.target.checked)}
value={params.cascadeHierarchy}
control={<Checkbox size='small' checked={params.cascadeHierarchy} />}
label="Cascade Hierarchy"
labelPlacement="right"
/>
<FormControlLabel
size='small'
onChange={event => _onChange('cascadeMappings', event.target.checked)}
value={params.cascadeMappings}
control={<Checkbox size='small' checked={params.cascadeMappings} />}
label="Cascade Mappings"
labelPlacement="right"
/>
<FormControlLabel
size='small'
onChange={event => _onChange('includeRetired', event.target.checked)}
value={params.includeRetired}
control={<Checkbox size='small' checked={params.includeRetired} />}
label="Include Retired"
labelPlacement="right"
/>
<FormControlLabel
size='small'
onChange={event => _onChange('reverse', event.target.checked)}
value={params.reverse}
control={<Checkbox size='small' checked={params.reverse} />}
label="Cascade Direction Backwards"
labelPlacement="right"
/>
<FormControlLabel
size='small'
onChange={event => _onChange('view', event.target.checked ? 'hierarchy' : 'flat')}
value={params.view === 'hierarchy'}
control={<Checkbox size='small' checked={params.view === 'hierarchy'} />}
label="Hierarchical Response"
labelPlacement="right"
/>
</div>
<div className='col-xs-12 no-side-padding' style={{marginBottom: '10px'}}>
<TextField
fullWidth
value={params.cascadeLevels}
label='Cascade Levels'
onChange={event => _onChange('cascadeLevels', event.target.value)}
size='small'
placeholder='e.g. 1, 2, 3...*'
/>
</div>
<div className='col-xs-12 no-side-padding' style={{marginBottom: '10px'}}>
<TextField
fullWidth
value={params.mapTypes}
label='MapTypes'
onChange={event => _onChange('mapTypes', event.target.value)}
size='small'
placeholder='e.g. Q-AND-A,CONCEPT-SET'
/>
</div>
<div className='col-xs-12 no-side-padding' style={{marginBottom: '10px'}}>
<TextField
fullWidth
value={params.excludeMapTypes}
label='ExcludeMapTypes'
onChange={event => _onChange('excludeMapTypes', event.target.value)}
size='small'
placeholder='e.g. Q-AND-A,CONCEPT-SET'
/>
</div>
<div className='col-xs-12 no-side-padding' style={{marginBottom: '10px'}}>
<TextField
fullWidth
value={params.returnMapTypes}
label='ReturnMapTypes'
onChange={event => _onChange('returnMapTypes', event.target.value)}
size='small'
/>
</div>
</div>
)
}

export default CascadeParametersForm;
16 changes: 14 additions & 2 deletions src/components/common/OperationsDrawer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@ import { OperationsContext } from '../app/LayoutContext';
import {
getFHIRServerConfigFromCurrentContext, getAppliedServerConfig, getServerConfigsForCurrentUser, copyURL
} from '../../common/utils';
import { FHIR_OPERATIONS, GREEN, ERROR_RED, BLACK } from '../../common/constants';
import { FHIR_OPERATIONS, GREEN, ERROR_RED, BLACK, DEFAULT_CASCADE_PARAMS } from '../../common/constants';
import APIService from '../../services/APIService';
import CascadeParametersForm from './CascadeParametersForm';

const drawerWidth = 350;
const useStyles = makeStyles(theme => ({
Expand Down Expand Up @@ -142,6 +143,7 @@ const OperationsDrawer = () => {
const [url, setURL] = React.useState(null);
const [isFetching, setIsFetching] = React.useState(false);
const [selectedFHIRServerId, setSelectedFHIRServerId] = React.useState(get(fhirServer, 'id', ''))
const [cascadeParams, setCascadeParams] = React.useState({...DEFAULT_CASCADE_PARAMS})
const onOperationChange = event => setOperation(event.target.value)
const onExecute = event => {
setIsFetching(true)
Expand Down Expand Up @@ -182,7 +184,8 @@ const OperationsDrawer = () => {
setURL(null)
}
} else {
APIService.new().overrideURL(parentItem.version_url || parentItem.url).appendToUrl(`concepts/${code}/${operation}/`).get().then(
let queryParams = operation === '$cascade' ? cascadeParams : {}
APIService.new().overrideURL(parentItem.version_url || parentItem.url).appendToUrl(`concepts/${code}/${operation}/`).get(null, null, queryParams).then(
_response => {
setURL(_response.config.url)
setResponse(_response)
Expand Down Expand Up @@ -329,6 +332,15 @@ const OperationsDrawer = () => {
</FormControl>
</div>
</div>
{
operation === '$cascade' &&
<div className='col-xs-12 no-side-padding'>
<h4 style={{marginTop: '30px', marginBottom: '15px'}}>
Cascade Parameters
</h4>
<CascadeParametersForm onChange={setCascadeParams} />
</div>
}
<div className='col-xs-12 no-side-padding' style={{textAlign: 'right', margin: '15px 0'}}>
<Button onClick={onExecute} variant='contained' disabled={!operation}>Execute</Button>
</div>
Expand Down

0 comments on commit 27bcdfb

Please sign in to comment.