AnnotationStoreEditorWidget

Source

index.js
import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactWidgets/AnnotationStoreEditorWidget.mcss';
import deepEquals from 'mout/src/lang/deepEquals';

import ActionListWidget from '../ActionListWidget';
import AnnotationEditorWidget from '../AnnotationEditorWidget';

function button(label, action, iconClass) {
return (
<div key={label} className={style.button} onClick={action}>
{label}
{iconClass && <i className={iconClass} />}
</div>
);
}

export default function render(props) {
if (!props.annotations) {
return null;
}

const listAnnotation = Object.keys(props.annotations).map((id, index) => ({
name: props.annotations[id].name,
action: `${index}`,
data: `${id}`,
active: props.annotation ? props.annotation.id === id : false,
}));

const onActivateAnnotation = (name, action, data) => {
props.onChange('select', data, props.annotations[data]);
};

const storeAction = (action) => () => {
props.onChange(action, props.annotation.id, props.annotation);
};

const buttons = [];

if (props.annotation && props.annotations[props.annotation.id]) {
const storedSelectedAnnotation = props.annotations[props.annotation.id];
if (
storedSelectedAnnotation.generation === props.annotation.generation ||
(props.ignoreGeneration &&
deepEquals(
Object.assign({}, storedSelectedAnnotation, {
generation: props.annotation.generation,
}),
props.annotation
))
) {
buttons.push(button('Delete', storeAction('delete'), style.deleteIcon));
} else {
buttons.push(
button('Save as new', storeAction('new'), style.saveAsNewIcon)
);
buttons.push(button('Revert', storeAction('reset'), style.revertIcon));
buttons.push(button('Update', storeAction('save'), style.updateIcon));
}
} else if (
props.annotation &&
props.annotation.selection.type !== 'empty' &&
!props.annotation.readOnly
) {
buttons.push(button('Save', storeAction('new'), style.saveAsNewIcon));
}

return (
<div className={style.container}>
<div className={style.topLine}>
<section className={style.list}>
<ActionListWidget
list={listAnnotation}
onClick={onActivateAnnotation}
/>
</section>
<section className={style.editor}>
<AnnotationEditorWidget
annotation={props.annotation}
scores={props.scores}
ranges={props.ranges}
getLegend={props.getLegend}
onChange={props.onAnnotationChange}
rationaleOpen={props.rationaleOpen}
showUncertainty={props.showUncertainty}
/>
</section>
</div>
<div className={style.buttonLine}>
<section className={style.buttonsSection}>
{button('Reset', () => props.onChange('pushEmpty'), style.resetIcon)}
</section>
<section className={style.buttonsSection}>{buttons}</section>
</div>
</div>
);
}

render.propTypes = {
annotation: PropTypes.object,
annotations: PropTypes.object,

scores: PropTypes.array,
ranges: PropTypes.object,
getLegend: PropTypes.func,
rationaleOpen: PropTypes.bool,
showUncertainty: PropTypes.bool,
ignoreGeneration: PropTypes.bool,

onAnnotationChange: PropTypes.func,
onChange: PropTypes.func,
};

render.defaultProps = {
onAnnotationChange(annotation, isEditing) {},
onChange(action, id, annotation) {},
rationaleOpen: false,
showUncertainty: true,
ignoreGeneration: false,

annotation: undefined,
annotations: undefined,

scores: undefined,
ranges: undefined,
getLegend: undefined,
};