+ 
+
+
+
+ HED tags in recording metadata (click for info)
+
+
+ ;
+ }
+}
+
+export default HasHEDIcon;
diff --git a/modules/electrophysiology_browser/jsx/components/HasHedIcon.js b/modules/electrophysiology_browser/jsx/components/HasHedIcon.js
new file mode 100644
index 00000000000..51ca0527991
--- /dev/null
+++ b/modules/electrophysiology_browser/jsx/components/HasHedIcon.js
@@ -0,0 +1,48 @@
+import {Component} from 'react';
+
+/**
+ * HED Icon for data table column
+ *
+ */
+class HasHEDIcon extends Component {
+ /**
+ * @constructor
+ * @param {object} props - React Component properties
+ */
+ constructor(props) {
+ super(props);
+ }
+
+ /**
+ * Renders the React component.
+ *
+ * @return {React.ReactNode} - React markup for the component
+ */
+ render() {
+ return <>
+
+
+
+
+ HED tags in recording metadata (click for info)
+
+
+ ;
+ }
+}
+
+export default HasHEDIcon;
diff --git a/modules/electrophysiology_browser/jsx/components/electrophysiology_session_panels.js b/modules/electrophysiology_browser/jsx/components/electrophysiology_session_panels.js
index afba3e7e763..d96b817f1e2 100644
--- a/modules/electrophysiology_browser/jsx/components/electrophysiology_session_panels.js
+++ b/modules/electrophysiology_browser/jsx/components/electrophysiology_session_panels.js
@@ -41,9 +41,7 @@ class FilePanel extends Component {
+
+
+
+ HED tags in recording metadata (click for info)
+
+
+ ;
+ }
+}
+
+export default HasHEDIcon;
diff --git a/modules/electrophysiology_browser/jsx/components/HasHedIcon.js b/modules/electrophysiology_browser/jsx/components/HasHedIcon.js
new file mode 100644
index 00000000000..51ca0527991
--- /dev/null
+++ b/modules/electrophysiology_browser/jsx/components/HasHedIcon.js
@@ -0,0 +1,48 @@
+import {Component} from 'react';
+
+/**
+ * HED Icon for data table column
+ *
+ */
+class HasHEDIcon extends Component {
+ /**
+ * @constructor
+ * @param {object} props - React Component properties
+ */
+ constructor(props) {
+ super(props);
+ }
+
+ /**
+ * Renders the React component.
+ *
+ * @return {React.ReactNode} - React markup for the component
+ */
+ render() {
+ return <>
+
+
+
+
+ HED tags in recording metadata (click for info)
+
+
+ ;
+ }
+}
+
+export default HasHEDIcon;
diff --git a/modules/electrophysiology_browser/jsx/components/electrophysiology_session_panels.js b/modules/electrophysiology_browser/jsx/components/electrophysiology_session_panels.js
index afba3e7e763..d96b817f1e2 100644
--- a/modules/electrophysiology_browser/jsx/components/electrophysiology_session_panels.js
+++ b/modules/electrophysiology_browser/jsx/components/electrophysiology_session_panels.js
@@ -41,9 +41,7 @@ class FilePanel extends Component {
@@ -99,7 +97,7 @@ class FilePanel extends Component {
FilePanel.propTypes = {
id: PropTypes.string,
- title: PropTypes.string,
+ title: PropTypes.object,
data: PropTypes.array,
children: PropTypes.node,
};
diff --git a/modules/electrophysiology_browser/jsx/components/electrophysiology_session_summary.js b/modules/electrophysiology_browser/jsx/components/electrophysiology_session_summary.js
index 578f83b65be..8c30fdb1d43 100644
--- a/modules/electrophysiology_browser/jsx/components/electrophysiology_session_summary.js
+++ b/modules/electrophysiology_browser/jsx/components/electrophysiology_session_summary.js
@@ -31,7 +31,7 @@ class SummaryPanel extends Component {
Summary}
>
,
+ },
{label: 'Acquisition Time', show: true},
{label: 'Insertion Time', show: true},
{label: 'Links', show: true},
diff --git a/modules/electrophysiology_browser/jsx/electrophysiologySessionView.js b/modules/electrophysiology_browser/jsx/electrophysiologySessionView.js
index 59785e3f58d..88f7dabf403 100644
--- a/modules/electrophysiology_browser/jsx/electrophysiologySessionView.js
+++ b/modules/electrophysiology_browser/jsx/electrophysiologySessionView.js
@@ -18,7 +18,6 @@ import {SummaryPanel} from './components/electrophysiology_session_summary';
import {DownloadPanel} from './components/DownloadPanel';
import Sidebar from './components/Sidebar';
import SidebarContent from './components/SidebarContent';
-
let EEGLabSeriesProvider;
let SeriesRenderer;
let EEGMontage;
@@ -241,6 +240,12 @@ class ElectrophysiologySessionView extends Component {
datasetTags:
dbEntry
&& dbEntry.file.datasetTags,
+ datasetTagEndorsements:
+ dbEntry
+ && dbEntry.file.datasetTagEndorsements,
+ eegMontage:
+ dbEntry
+ && dbEntry.file.eegMontage,
}));
this.setState({
@@ -342,8 +347,10 @@ class ElectrophysiologySessionView extends Component {
events,
hedSchema,
datasetTags,
+ datasetTagEndorsements,
electrodesURL,
coordSystemURL,
+ eegMontage,
} = this.state.database[i];
const file = this.state.database[i].file;
const splitPagination = [];
@@ -359,11 +366,32 @@ class ElectrophysiologySessionView extends Component {
>{j+1}
);
}
+ const recordingHasHED = events.hed_tags.length > 0 ||
+ Object.keys(datasetTags).some((column) => {
+ return Object.keys(datasetTags[column]).filter((columnValue) => {
+ return datasetTags[column][columnValue].length > 0;
+ }).some((columnValue) => {
+ if (column === 'trial_type') {
+ return events.instances.some((event) => {
+ return event['TrialType'] === columnValue;
+ });
+ } else if (column === 'value') {
+ return events.instances.some((event) => {
+ return event['EventValue'] === columnValue;
+ });
+ }
+
+ return events.extra_columns.some((prop) => {
+ return prop.PropertyName === column &&
+ prop.PropertyValue === columnValue;
+ });
+ });
+ });
database.push(
{this.state.database[i].file.name}}
data={this.state.database[i].file.details}
>
{EEG_VIS_ENABLED &&
@@ -378,18 +406,23 @@ class ElectrophysiologySessionView extends Component {
coordSystemURL={coordSystemURL}
hedSchema={hedSchema}
datasetTags={datasetTags}
+ datasetTagEndorsements={datasetTagEndorsements}
physioFileID={this.state.database[i].file.id}
samplingFrequency={
this.state.database[i].file.summary[0].value
}
+ eegMontageName={eegMontage}
+ recordingHasHED={recordingHasHED}
>
+ {'Signal Viewer' + (file.splitData
+ ? ' [split ' + (file.splitData?.splitIndex + 1) + ']'
+ : ''
+ )}
+
}
>
{file.splitData &&
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/EEGLabSeriesProvider.tsx b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/EEGLabSeriesProvider.tsx
index f107fb46ecf..d9afe61891d 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/EEGLabSeriesProvider.tsx
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/eeglab/EEGLabSeriesProvider.tsx
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, createRef} from 'react';
import {tsvParse} from 'd3-dsv';
import {applyMiddleware, createStore, Store} from 'redux';
import {Provider} from 'react-redux';
@@ -7,7 +7,9 @@ import thunk from 'redux-thunk';
import {fetchJSON, fetchText} from '../ajax';
import {rootEpic, rootReducer} from '../series/store';
import {emptyChannels, setChannels} from '../series/store/state/channels';
-import {DEFAULT_MAX_CHANNELS, DEFAULT_TIME_INTERVAL} from '../vector';
+import {
+ DEFAULT_CHANNEL_DELIMITER, DEFAULT_MAX_CHANNELS, DEFAULT_TIME_INTERVAL,
+} from '../vector';
import {
setDatasetMetadata,
setDatasetTags,
@@ -18,8 +20,7 @@ import {
} from '../series/store/state/dataset';
import {setDomain, setInterval} from '../series/store/state/bounds';
import {
- setCoordinateSystem,
- setElectrodes,
+ setCoordinateSystem, setElectrodes,
} from '../series/store/state/montage';
import {EventMetadata, HEDSchemaElement} from '../series/store/types';
import TriggerableModal from 'jsx/TriggerableModal';
@@ -39,13 +40,22 @@ type CProps = {
coordSystemURL: string,
hedSchema: HEDSchemaElement[],
datasetTags: any,
+ datasetTagEndorsements: any,
events: EventMetadata,
physioFileID: number,
limit: number,
- samplingFrequency: number,
+ samplingFrequency: string,
+ eegMontageName: string,
+ recordingHasHED: boolean,
children: React.ReactNode,
};
+const MenuOption = {
+ 'TAG_MODE': 'View/Edit Tags',
+ 'ENDORSEMENT_MODE': 'Endorse Tags',
+ 'JSON_MODE': 'View JSON',
+};
+
/**
* EEGLabSeriesProvider component
*/
@@ -65,6 +75,11 @@ class EEGLabSeriesProvider extends Component {
applyMiddleware(thunk, epicMiddleware)
);
+ this.state = {
+ activeMenuOption: 'TAG_MODE',
+ datasetTaggerTabsRef: createRef(),
+ };
+
epicMiddleware.run(rootEpic);
const {
@@ -74,22 +89,26 @@ class EEGLabSeriesProvider extends Component {
coordSystemURL,
hedSchema,
datasetTags,
+ datasetTagEndorsements,
events,
physioFileID,
limit,
samplingFrequency,
+ eegMontageName,
+ recordingHasHED,
} = props;
+
if (!window.EEGLabSeriesProviderStore) {
window.EEGLabSeriesProviderStore = [];
}
window.EEGLabSeriesProviderStore[chunksURL] = this.store;
+
/**
*
- * @returns {void} - Confirmation dialog to prevent accidental page leave
*/
window.onbeforeunload = function() {
- const dataset =
- window.EEGLabSeriesProviderStore[chunksURL].getState().dataset;
+ const dataset = window.EEGLabSeriesProviderStore[chunksURL]
+ .getState().dataset;
if ([...dataset.addedTags, ...dataset.deletedTags].length > 0) {
return 'Are you sure you want to leave unsaved changes behind?';
}
@@ -99,16 +118,34 @@ class EEGLabSeriesProvider extends Component {
Object.keys(datasetTags).forEach((column) => {
formattedDatasetTags[column] = {};
Object.keys(datasetTags[column]).forEach((value) => {
- formattedDatasetTags[column][value] =
- datasetTags[column][value].map((tag) => {
+ formattedDatasetTags[column][value]
+ = datasetTags[column][value].map((tag) => {
+ const hedEndorsements = datasetTagEndorsements
+ .filter((endorsement) => {
+ return endorsement.HEDRelID === tag.ID;
+ }).map((endorsement) => {
+ const endorserName =
+ `${endorsement.FirstName.substring(0, 1)}.` +
+ endorsement.LastName;
+ return {
+ EndorsedBy: endorserName,
+ EndorsedByID: endorsement.EndorsedByID,
+ EndorsementComment: endorsement.EndorsementComment,
+ EndorsementStatus: endorsement.EndorsementStatus,
+ EndorsementTime: endorsement.LastUpdate,
+ };
+ });
return {
...tag,
AdditionalMembers: parseInt(tag.AdditionalMembers),
+ TaggerName: tag.TaggerName === 'Origin'
+ ? 'Data Authors' : tag.TaggerName,
+ TaggedBy: tag.TaggedBy,
+ Endorsements: hedEndorsements,
};
});
});
});
-
this.store.dispatch(setPhysioFileID(physioFileID));
this.store.dispatch(setHedSchemaDocument(hedSchema));
this.store.dispatch(setDatasetTags(formattedDatasetTags));
@@ -127,10 +164,10 @@ class EEGLabSeriesProvider extends Component {
// if request fails don't resolve
.catch((error) => {
console.error(error);
- return new Promise(null);
+ return Promise.resolve();
})];
} else {
- return [new Promise(null)];
+ return [Promise.resolve()];
}
};
@@ -138,11 +175,7 @@ class EEGLabSeriesProvider extends Component {
({json, url}) => {
if (json) {
const {
- channelMetadata,
- shapes,
- timeInterval,
- seriesRange,
- validSamples,
+ channelMetadata, shapes, timeInterval, seriesRange, validSamples,
} = json;
this.store.dispatch(
setDatasetMetadata({
@@ -154,6 +187,8 @@ class EEGLabSeriesProvider extends Component {
seriesRange,
limit,
samplingFrequency,
+ eegMontageName,
+ recordingHasHED,
})
);
this.store.dispatch(setChannels(emptyChannels(
@@ -166,41 +201,70 @@ class EEGLabSeriesProvider extends Component {
}
).then(() => {
const epochs = [];
+ const channelDelimiter = events['channel_delimiter'].length > 0
+ ? events['channel_delimiter']
+ : DEFAULT_CHANNEL_DELIMITER;
+ this.store.dispatch(
+ setDatasetMetadata({channelDelimiter: channelDelimiter})
+ );
+
events.instances.map((instance) => {
- const epochIndex =
- epochs.findIndex(
- (e) => e.physiologicalTaskEventID
- === instance.PhysiologicalTaskEventID
- );
+ const epochIndex = epochs.findIndex(
+ (e) => e.physiologicalTaskEventID
+ === instance.PhysiologicalTaskEventID
+ );
- const extraColumns = Array.from(
- events.extraColumns
- ).filter((column) => {
- return column.PhysiologicalTaskEventID
+ const extraColumns = Array.from(events['extra_columns'])
+ .filter((column) => {
+ return column['PhysiologicalTaskEventID']
=== instance.PhysiologicalTaskEventID;
- });
+ });
- const hedTags = Array.from(events.hedTags).filter((column) => {
- return column.PhysiologicalTaskEventID
+ const hedTags = Array.from(events['hed_tags']).filter((column) => {
+ return column['PhysiologicalTaskEventID']
=== instance.PhysiologicalTaskEventID;
}).map((hedTag) => {
const foundTag = hedSchema.find((tag) => {
- return tag.id === hedTag.HEDTagID;
+ return tag.id === hedTag['HEDTagID'];
});
- const additionalMembers = parseInt(hedTag.AdditionalMembers);
+
+ const additionalMembers = parseInt(
+ hedTag['AdditionalMembers'] as string
+ );
+
+ const hedEndorsements = events['hed_endorsements']
+ .filter((endorsement) => {
+ return endorsement['HEDRelID'] === hedTag['ID'];
+ }).map((endorsement) => {
+ const endorserName =
+ `${endorsement['FirstName'].substring(0, 1)}.` +
+ endorsement['LastName'];
+ return {
+ EndorsedBy: endorserName,
+ EndorsedByID: endorsement['EndorsedByID'],
+ EndorsementComment: endorsement['EndorsementComment'],
+ EndorsementStatus: endorsement['EndorsementStatus'],
+ EndorsementTime: endorsement['LastUpdate'],
+ };
+ });
// Currently only supporting schema-defined HED tags
return {
schemaElement: foundTag ?? null,
HEDTagID: foundTag ? foundTag.id : null,
- ID: hedTag.ID,
- PropertyName: hedTag.PropertyName,
- PropertyValue: hedTag.PropertyValue,
- TagValue: hedTag.TagValue,
- Description: hedTag.Description,
- HasPairing: hedTag.HasPairing,
- PairRelID: hedTag.PairRelID,
- AdditionalMembers: isNaN(additionalMembers) ? 0 : additionalMembers,
+ ID: hedTag['ID'],
+ PropertyName: hedTag['PropertyName'],
+ PropertyValue: hedTag['PropertyValue'],
+ TagValue: hedTag['TagValue'],
+ Description: hedTag['Description'],
+ HasPairing: hedTag['HasPairing'],
+ PairRelID: hedTag['PairRelID'],
+ AdditionalMembers: isNaN(additionalMembers)
+ ? 0 : additionalMembers,
+ TaggerName: hedTag['TaggerName'] === 'Origin'
+ ? 'Data Authors' : hedTag['TaggerName'],
+ TaggedBy: hedTag['TaggedBy'],
+ Endorsements: hedEndorsements,
};
});
@@ -217,7 +281,11 @@ class EEGLabSeriesProvider extends Component {
trialType: instance.TrialType,
properties: extraColumns,
hed: hedTags,
- channels: 'all',
+ channels: ['n/a', null].includes(instance.Channel)
+ ? []
+ : channelDelimiter.length > 0
+ ? instance.Channel.split(channelDelimiter)
+ : [instance.Channel],
physiologicalTaskEventID: instance.PhysiologicalTaskEventID,
});
} else {
@@ -237,15 +305,16 @@ class EEGLabSeriesProvider extends Component {
this.store.dispatch(setFilteredEpochs({
plotVisibility: sortedEpochs.reduce((indices, epoch, index) => {
if (!(epoch.onset < 1 && epoch.duration >= timeInterval[1])) {
- // Full-recording events not visible by default
- indices.push(index);
+ indices.push(index); // Full-recording events not visible by default
}
return indices;
}, []),
columnVisibility: [],
+ searchVisibility: [],
}));
});
+
Promise.race(racers(fetchText, electrodesURL))
.then((text) => {
if (!(typeof text.json === 'string'
@@ -265,7 +334,7 @@ class EEGLabSeriesProvider extends Component {
});
Promise.race(racers(fetchJSON, coordSystemURL))
- .then( ({json, _}) => {
+ .then( ({json}) => {
if (json) {
const {
EEGCoordinateSystem,
@@ -294,42 +363,99 @@ class EEGLabSeriesProvider extends Component {
render() {
const [signalViewer, ...rest] = React.Children.toArray(this.props.children);
+ const hedTagLogo = (
+
+ );
+
return (
-
+
);
}
+ const strikethroughText = (text) => {
+ const combiner = '\u0336';
+ return text
+ .split('')
+ .map(char => char + combiner)
+ .join('');
+ }
+
const buildHEDBadges = (hedTags: HEDTag[], belongsToEvent: boolean = false) => {
const rootTags = hedTags.filter((tag) => {
return !hedTags.some((t) => {
@@ -643,7 +892,7 @@ const AnnotationForm = ({
const tagBadges = [];
rootTags.forEach((tag) => {
- if (deletedTagIDs.includes(tag.ID)) {
+ if (deletedTagIDs.includes(tag.ID.toString())) {
return;
}
let groupColorIndex = 0;
@@ -666,7 +915,7 @@ const AnnotationForm = ({
if (groupTag.PairRelID === null) {
tagBadgeGroup.push(buildHEDBadge(groupTag, belongsToEvent));
} else {
- if (groupTag.HasPairing === '1') {
+ if (groupTag.HasPairing == '1') {
if (groupTag.AdditionalMembers > 0 || tagBadgeSubgroup.length === 0) {
let commaIndex = getNthMemberTrailingBadgeIndex(
tagBadgeGroup,
@@ -719,10 +968,20 @@ const AnnotationForm = ({
return tagBadges;
}
+ const closePanel = () => {
+ setRightPanel('eventList');
+ handleReset();
+ setCurrentAnnotation(null);
+ setTimeSelection(null);
+ updateActiveEpoch(null);
+ setPanelIsDirty(false);
+ }
+
return (
+ );
+
return (
-
-
-
-
+ <>
+ {
+ this.setState({activeMenuOption: menuOption});
+ }}
+ filenamePrefix={this.props.chunksURL[0]
+ .split('/').at(-1) // filename
+ .split('_').slice(0, -1) // prefix
+ .join('_')
+ }
+ />
{signalViewer}
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/AnnotationForm.tsx b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/AnnotationForm.tsx
index ca7d93991d0..081b5dd37fb 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/AnnotationForm.tsx
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/AnnotationForm.tsx
@@ -1,10 +1,5 @@
import React, {useEffect, useState} from 'react';
-import {
- Epoch as EpochType,
- RightPanel,
- HEDTag,
- HEDSchemaElement,
-} from '../store/types';
+import {ChannelMetadata, Epoch as EpochType, HEDSchemaElement, HEDTag, RightPanel,} from '../store/types';
import {connect} from 'react-redux';
import {setTimeSelection} from '../store/state/timeSelection';
import {setRightPanel} from '../store/state/rightPanel';
@@ -16,9 +11,12 @@ import {
updateActiveEpoch
} from '../store/logic/filterEpochs';
import {RootState} from '../store';
-import {setActiveEpoch, setEpochs} from '../store/state/dataset';
+import {setEpochs} from '../store/state/dataset';
import {setCurrentAnnotation} from '../store/state/currentAnnotation';
import {NumericElement, SelectElement, TextboxElement} from './Form';
+import Panel from './Panel';
+import Modal from 'jsx/Modal';
+import EEGMontage from "./EEGMontage";
import swal from 'sweetalert2';
import {InfoIcon} from "./components";
import {colorOrder} from "../../color";
@@ -27,6 +25,7 @@ import {colorOrder} from "../../color";
type CProps = {
timeSelection?: [number, number],
epochs: EpochType[],
+ domain: [number, number],
filteredEpochs: number[],
setTimeSelection: (_: [number, number]) => void,
setRightPanel: (_: RightPanel) => void,
@@ -39,6 +38,12 @@ type CProps = {
interval: [number, number],
hedSchema: HEDSchemaElement[],
datasetTags: any,
+ channelDelimiter: string,
+ channelMetadata: ChannelMetadata[],
+ panelIsDirty: boolean,
+ setPanelIsDirty: (_: boolean) => void,
+ eventChannels: string[],
+ setEventChannels: (_: string[] ) => void,
};
/**
@@ -46,6 +51,7 @@ type CProps = {
* @param root0
* @param root0.timeSelection
* @param root0.epochs
+ * @param root0.domain
* @param root0.setTimeSelection
* @param root0.setRightPanel
* @param root0.setEpochs
@@ -57,10 +63,17 @@ type CProps = {
* @param root0.interval
* @param root0.hedSchema
* @param root0.datasetTags
+ * @param root0.channelDelimiter
+ * @param root0.channelMetadata
+ * @param root0.panelIsDirty
+ * @param root0.setPanelIsDirty
+ * @param root0.eventChannels
+ * @param root0.setEventChannels
*/
const AnnotationForm = ({
timeSelection,
epochs,
+ domain,
setTimeSelection,
setRightPanel,
setEpochs,
@@ -72,45 +85,109 @@ const AnnotationForm = ({
interval,
hedSchema,
datasetTags,
+ channelDelimiter,
+ channelMetadata,
+ panelIsDirty,
+ setPanelIsDirty,
+ eventChannels,
+ setEventChannels,
}: CProps) => {
- const [startEvent = '', endEvent = ''] = timeSelection || [];
- const [event, setEvent] = useState<(number | string)[]>(
- [
- startEvent,
- endEvent,
- ]
+ const [eventInterval, setEventInterval] = useState<(number | string)[]>(
+ timeSelection ?? ['', '']
);
const [label, setLabel] = useState(
currentAnnotation ?
- currentAnnotation.label :
- null
+ currentAnnotation.label :
+ null
);
+ const [eventProperties, setEventProperties] = useState({});
const [isSubmitted, setIsSubmitted] = useState(false);
const [isDeleted, setIsDeleted] = useState(false);
const [annoMessage, setAnnoMessage] = useState('');
const [newTags, setNewTags] = useState([]);
const [deletedTagIDs, setDeletedTagIDs] = useState([]);
+ const [throwChannelEditWarning, setThrowChannelEditWarning] = useState(false);
+ const [channelSelectorVisible, setChannelSelectorVisible] = useState(false);
+
+ useEffect(() => {
+ setEventProperties(
+ Object.keys(datasetTags)
+ .filter(column => column !== 'trial_type')
+ .reduce((properties, column) => {
+ const property = currentAnnotation?.properties.find(prop => prop.PropertyName === column);
+ properties[column] = property ? property.PropertyValue : '';
+ return properties;
+ }, {})
+ );
+ }, []);
+
+
// Time Selection
useEffect(() => {
- const [startEvent = '', endEvent = ''] = timeSelection || [];
- setEvent([startEvent, endEvent]);
+ if (!currentAnnotation) {
+ // Only if being created. Time edit not currently allowed
+ const [startEvent, endEvent] = timeSelection ?? [0, 0];
+ setEventInterval([startEvent, endEvent]);
+ }
}, [timeSelection]);
+ useEffect(() => {
+ setPanelIsDirty(
+ (deletedTagIDs.length > 0 ||
+ (newTags.length > 0 && newTags.find((tag) => tag.value !== '')) ||
+ JSON.stringify(eventChannels) !==
+ JSON.stringify(currentAnnotation ? currentAnnotation.channels : [])
+ ) ||
+ (!currentAnnotation && (
+ (label && label.length > 0) ||
+ Object.values(eventProperties).some(((prop: string) => {
+ return prop.length > 0;
+ }))
+ ))
+ )
+ }, [label, eventProperties, deletedTagIDs, newTags, eventChannels, currentAnnotation?.channels]);
+
+ const validateTimeRange = (timeRange) => {
+ return (timeRange[0] || timeRange[0] === 0)
+ && (timeRange[1] || timeRange[1] === 0)
+ && !(
+ timeRange[0] === 0 &&
+ timeRange[1] === 0
+ );
+ }
+
+ // Initiate on load
+ useEffect(() => {
+ setEventChannels(currentAnnotation ? currentAnnotation.channels : []);
+ }, []);
+
+
/**
*
* @param event
*/
const validate = (event) => {
- return (event[0] || event[0] === 0)
- && (event[1] || event[1] === 0)
- && event[0] <= event[1]
- && (
- newTags.some((tag) => tag.value !== '') ||
- deletedTagIDs.length > 0
+ return validateTimeRange(event) &&
+ event[0] <= event[1] && (
+ (
+ currentAnnotation && (
+ newTags.some((tag) => tag.value !== '') ||
+ deletedTagIDs.length > 0 ||
+ JSON.stringify(eventChannels) !== JSON.stringify(currentAnnotation?.channels)
+ )
+ ) || (
+ !currentAnnotation && (
+ (label && label.length > 0) ||
+ Object.values(eventProperties).some(((prop: string) => {
+ return prop.length > 0;
+ })) ||
+ newTags.some((tag) => tag.value !== '')
+ )
+ )
);
- };
+ }
/**
*
@@ -118,19 +195,20 @@ const AnnotationForm = ({
* @param val
*/
const handleStartTimeChange = (id, val) => {
- const value = parseFloat(val);
- setEvent([value, event[1]]);
+ const value = Math.min(Math.max(parseFloat(val), domain[0]), domain[1]);
+ setEventInterval([value, eventInterval[1]]);
- if (validate([value, event[1]])) {
- let endTime = event[1];
+ if (validateTimeRange([value, eventInterval[1]])) {
+ let endTime = eventInterval[1];
if (typeof endTime === 'string') {
endTime = parseFloat(endTime);
}
+
setTimeSelection(
[
- value || null,
- endTime || null,
+ value,
+ endTime,
]
);
}
@@ -142,24 +220,50 @@ const AnnotationForm = ({
* @param val
*/
const handleEndTimeChange = (name, val) => {
- const value = parseFloat(val);
- setEvent([event[0], value]);
+ const value = Math.min(Math.max(parseFloat(val), domain[0]), domain[1]);
+ setEventInterval([eventInterval[0], value]);
- if (validate([event[0], value])) {
- let startTime = event[0];
+ if (validateTimeRange([eventInterval[0], value])) {
+ let startTime = eventInterval[0];
if (typeof startTime === 'string') {
startTime = parseFloat(startTime);
}
setTimeSelection(
[
- startTime || null,
+ startTime,
value,
]
);
}
};
+ /**
+ *
+ * @param name
+ * @param val
+ */
+ const handleDurationChange = (name, val) => {
+ const value = Math.min(Math.max(parseFloat(val), domain[0]), domain[1]);
+ const endTime = parseFloat(eventInterval[0].toString()) + value;
+ setEventInterval([eventInterval[0], endTime]);
+
+ if (validateTimeRange([eventInterval[0], endTime])) {
+ let startTime = eventInterval[0];
+
+ if (typeof startTime === 'string') {
+ startTime = parseFloat(startTime);
+ }
+ setTimeSelection(
+ [
+ startTime,
+ endTime,
+ ]
+ );
+ }
+ };
+
+
/**
*
*/
@@ -174,11 +278,11 @@ const AnnotationForm = ({
}, 2000);
} else {
setNewTags([
- ...newTags,
{
type: tagType,
value: '',
- }
+ },
+ ...newTags,
]);
}
};
@@ -192,7 +296,7 @@ const AnnotationForm = ({
const tagRelID = elementID.split('-').pop();
if (currentAnnotation.hed &&
currentAnnotation.hed.map((tag) => {
- return tag.ID
+ return tag.ID.toString();
}).includes(tagRelID)
) {
setDeletedTagIDs([...deletedTagIDs, tagRelID]);
@@ -236,15 +340,35 @@ const AnnotationForm = ({
*
*/
const handleReset = () => {
+ if (!currentAnnotation) {
+ // Clear all fields
+ setLabel('');
+ setTimeSelection([0, 0]);
+ setEventInterval([0, 0]);
+ setEventProperties(
+ Object.keys(eventProperties)
+ .reduce((props, prop) => {
+ return {
+ ...props,
+ [prop]: '',
+ };
+ }, {})
+ );
+ }
setNewTags([]);
setDeletedTagIDs([]);
+
+ setEventChannels(currentAnnotation
+ ? currentAnnotation.channels
+ : []
+ );
};
/**
*
*/
const handleDelete = () => {
- setIsDeleted(true);
+ // setIsDeleted(true);
};
// Submit
@@ -255,7 +379,7 @@ const AnnotationForm = ({
}
// Validate inputs
- if (!label || !event[0] || !event[1]) {
+ if (!label || !validateTimeRange(eventInterval)) {
swal.fire(
'Warning',
'Please fill out all required fields',
@@ -275,10 +399,14 @@ const AnnotationForm = ({
return node.id;
});
- const currentTagIDs = (currentAnnotation.hed ?? []).map((tag) => {
+ const currentTagIDs = (
+ currentAnnotation
+ ? currentAnnotation.hed ?? []
+ : []
+ ).map((tag) => {
return tag.ID;
}).filter(currentTagID => {
- return !deletedTagIDs.includes(currentTagID)
+ return !deletedTagIDs.includes(currentTagID.toString())
});
// Prevent duplicates
@@ -301,15 +429,21 @@ const AnnotationForm = ({
'/electrophysiology_browser/events/';
// get duration of event
- let startTime = event[0];
- let endTime = event[1];
+ let startTime = eventInterval[0];
+ let endTime = eventInterval[1];
if (typeof startTime === 'string') {
startTime = parseFloat(startTime);
}
if (typeof endTime === 'string') {
endTime = parseFloat(endTime);
}
- const duration = endTime - startTime;
+ const duration = currentAnnotation // Edit not currently allowed
+ ? currentAnnotation.duration
+ : Math.abs(endTime - startTime);
+
+ const onset = currentAnnotation // Edit not currently allowed
+ ? currentAnnotation.onset
+ : Math.min(startTime, endTime);
// set body
// instance_id = null for new events
@@ -320,13 +454,24 @@ const AnnotationForm = ({
currentAnnotation.physiologicalTaskEventID :
null,
instance: {
- onset: startTime,
+ onset: onset,
duration: duration,
label_name: label,
label_description: label,
- channels: 'all',
+ channels: eventChannels.length > 0
+ ? eventChannels
+ : ['n/a'],
added_hed: newTagIDs,
deleted_hed: deletedTagIDs,
+ event_type: 'trial_type',
+ properties: Object.keys(eventProperties)
+ .reduce((properties, propertyName) => {
+ properties[propertyName] =
+ eventProperties[propertyName].length > 0
+ ? eventProperties[propertyName]
+ : 'n/a';
+ return properties;
+ }, {}),
},
};
@@ -339,25 +484,17 @@ const AnnotationForm = ({
return response.json();
}
throw (response);
-
}).then((response) => {
setIsSubmitted(false);
- // if in edit mode, remove old event instance
- if (currentAnnotation !== null) {
- epochs.splice(epochs.indexOf(currentAnnotation), 1);
- }
- // } else {
- // newAnnotation.physiologicalTaskEventID = parseInt(data.instance_id);
- // }
-
const data = response.instance;
- // TODO: Properly handle new event
- const hedTags = Array.from(data.hedTags).map((hedTag : HEDTag) => {
+ // TODO: Properly handle new event -- below line strange
+ const hedTags = Array.from(data.hed_tags).map((hedTag : HEDTag) => {
const foundTag = hedSchema.find((tag) => {
return tag.id === hedTag.HEDTagID;
});
+
// Currently only supporting schema-defined HED tags
return {
schemaElement: foundTag ?? null,
@@ -370,12 +507,21 @@ const AnnotationForm = ({
HasPairing: hedTag.HasPairing,
PairRelID: hedTag.PairRelID,
AdditionalMembers: hedTag.AdditionalMembers,
+ TaggedBy: hedTag.TaggedBy,
+ TaggerName: hedTag.TaggerName === 'Origin'
+ ? 'Data Authors'
+ : hedTag.TaggerName,
+ Endorsements: data.hed_endorsements
+ .filter((endorsement) => {
+ return endorsement.HEDRelID === hedTag.ID;
+ }),
}
});
const epochLabel = [null, 'n/a'].includes(data.instance.TrialType)
- ? null
- : data.instance.TrialType;
+ ? null
+ : data.instance.TrialType;
+
const newAnnotation : EpochType = {
onset: parseFloat(data.instance.Onset),
duration: parseFloat(data.instance.Duration),
@@ -383,30 +529,46 @@ const AnnotationForm = ({
label: epochLabel ?? data.instance.EventValue,
value: data.instance.EventValue,
trialType: data.instance.TrialType,
- properties: data.extraColumns,
+ properties: data.extra_columns,
hed: hedTags,
- channels: 'all',
+ channels: data.instance.Channel === 'n/a'
+ ? []
+ : data.instance.Channel.split(channelDelimiter),
physiologicalTaskEventID: data.instance.PhysiologicalTaskEventID,
};
- epochs.push(newAnnotation);
- setEpochs(
- epochs
- .sort(function(a, b) {
- return a.onset - b.onset;
- })
- );
- // Reset Form
- handleReset();
- setCurrentAnnotation(newAnnotation);
+ // Maintain index
+ if (currentAnnotation !== null) {
+ const eventIndex = epochs.indexOf(currentAnnotation);
+ setEpochs([
+ ...epochs.slice(0, eventIndex),
+ newAnnotation,
+ ...epochs.slice(eventIndex + 1),
+ ]);
+ } else {
+ epochs.push(newAnnotation);
+ setEpochs(
+ epochs
+ .sort(function(a, b) {
+ return a.onset - b.onset;
+ })
+ );
+ }
// Display success message
setAnnoMessage(currentAnnotation ?
'Event Updated!' :
'Event Added!');
+ setCurrentAnnotation(newAnnotation);
+
+ // handleReset();
+ setNewTags([]);
+ setDeletedTagIDs([]);
+
setTimeout(() => {
setAnnoMessage(''); // Empty string will cause success div to hide
+ updateActiveEpoch(epochs.indexOf(currentAnnotation ? currentAnnotation : newAnnotation));
}, 2000);
}).catch((error) => {
console.error(error);
@@ -431,7 +593,7 @@ const AnnotationForm = ({
useEffect(() => {
if (isDeleted) {
const url = window.location.origin
- + '/electrophysiology_browser/events/';
+ + '/electrophysiology_browser/events/';
const body = {
physioFileID: physioFileID,
instance_id: currentAnnotation ?
@@ -505,14 +667,14 @@ const AnnotationForm = ({
}
const addHedTagOptions = [
- {
- type: 'SCORE',
- value: 'SCORE Artifacts',
- },
{
type: 'DATASET',
value: 'Tags in current dataset',
},
+ {
+ type: 'ARTIFACTS',
+ value: 'HED 8.3.0 Artifacts',
+ },
]
const buildPropertyOptions = (optgroup: string, parentHED: string) => {
@@ -524,7 +686,7 @@ const AnnotationForm = ({
label: tag.name,
longName: tag.longName,
value: tag.id,
- optgroup: optgroup,
+ optgroup: `${optgroup} [${tag.schemaName}]`,
Description: tag.description,
}
}).sort((tagA, tagB) => {
@@ -535,11 +697,11 @@ const AnnotationForm = ({
const artifactTagOptions = [
...buildPropertyOptions(
'Biological-artifact',
- 'Artifact/Biological-artifact/'
+ 'Property/Data-property/Data-artifact/Biological-artifact/'
),
...buildPropertyOptions(
- 'Non-biological-artifact',
- 'Artifact/Non-biological-artifact/'
+ 'Nonbiological-artifact',
+ 'Property/Data-property/Data-artifact/Nonbiological-artifact/'
),
];
@@ -561,7 +723,9 @@ const AnnotationForm = ({
label: schemaElement.name,
longName: schemaElement.longName,
value: schemaElement.id,
- optgroup: optGroup.length > 0 ? optGroup : schemaElement.name,
+ optgroup: optGroup.length > 0
+ ? `${optGroup} [${schemaElement.schemaName}]`
+ : schemaElement.name,
Description: schemaElement.description,
}
}
@@ -579,7 +743,7 @@ const AnnotationForm = ({
const getOptions = (optionType: string) => {
switch (optionType) {
- case 'SCORE':
+ case 'ARTIFACTS':
return artifactTagOptions;
case 'DATASET':
return getUniqueDatasetTags();
@@ -605,12 +769,21 @@ const AnnotationForm = ({
return (
-
-
+ <>
+
+
-
+
+ {hedTagLogo}
+
+
Dataset Tag Manager
-
+
+
+
+ More about HED
+
- More about HED
-
+
}
label="Open Dataset Tag Manager"
>
-
+
- -
+ {
+ Object.keys(MenuOption).map((menuOption) => {
+ return (
+
- { + this.setState({activeMenuOption: menuOption}); + }} + > + { + event.preventDefault(); + }} + > + {MenuOption[menuOption]} + + + ); + }) + } +
-
- {hedTag.schemaElement.name}
-
+
+ {hedTag.schemaElement.name}
+
{hedTag.schemaElement.description}
+ +
+
+
+
+ Tagged By:
+
+
+ {hedTag.TaggerName}
+
+
+
+
+ Endorsed By:
+
+
+
+
+ {
+ hedTag.Endorsements.length > 0
+ ? hedTag.Endorsements
+ .filter((endorsement) => {
+ return ['Endorsed', 'Caveat']
+ .includes(endorsement.EndorsementStatus);
+ })
+ .map((endorsement, i) => {
+ return
+ {endorsement.EndorsedBy}
+
+
+ })
+ : 'n/a'
+ }
+
+
- {currentAnnotation ? 'Edit' : 'Add'} Event
- {
- if (deletedTagIDs.length > 0 ||
- (newTags.length > 0 && newTags.find((tag) => tag.value !== '')
- )) {
- if (!confirm('Are you sure you want to discard your changes? ' +
- ' Otherwise, press cancel and "Submit" your changes')) {
- return;
- }
- }
- setRightPanel('eventList');
- setCurrentAnnotation(null);
- setTimeSelection(null);
- updateActiveEpoch(null);
+ borderTopLeftRadius: 0,
}}
- >
+ >
+ {currentAnnotation ? 'Edit Event' : 'Add Event'}
-
+
+
Event Name
- setLabel(value)}
+ required={false/*currentAnnotation === null*/}
+ disabled={currentAnnotation !== null}
+ labelOuterClass={'flex-basis-40'}
+ labelClass={'control-label'}
+ elementClass={'additional-columns-outer'}
+ inputClass={'additional-columns-inner'}
/>
*/}
+ {/* Delete*/}
+ {/* */}
+ {/*}*/}
{annoMessage && (
- {
- currentAnnotation.label === currentAnnotation.trialType
- ? 'trial_type'
- : 'value'
- }
-
-
- }
- value={currentAnnotation ? currentAnnotation.label : ""}
- required={true}
- readonly={true}
- />
-
+
{
- currentAnnotation && currentAnnotation.properties.length > 0 && (
+ Object.keys(datasetTags)
+ .filter(column => column !== 'trial_type')
+ .length > 0 && (
<>
-
-
+ eventInterval[0])
+ ? (
+ Math.round((
+ // Math.abs(
+ parseFloat(eventInterval[1].toString()) - parseFloat(eventInterval[0].toString())
+ // )
+ + Number.EPSILON) * 1000) / 1000
+ ).toString()
+ : '0'
+ }
+ required={currentAnnotation === null}
+ onUserInput={handleDurationChange}
+ />
+
+
+
+
+
+
+
+
+ { setChannelSelectorVisible(false); }}
+ show={channelSelectorVisible}
+ >
+ {
+ return channelMetadata.findIndex((channel) => {
+ return channel.name === channelName;
+ })
+ }).filter(index => index !== -1),
+ }}
+ contentHeight='75vh'
+ cssClass={'scale-1_5'}
+ editChannels={true}
+ setCancelWarning={setThrowChannelEditWarning}
+ setEventChannels={setEventChannels}
+ eventChannels={eventChannels}
+ setChannelSelectorVisible={setChannelSelectorVisible}
+ />
+
+
+
+ {
+ [...eventChannels, ...(currentAnnotation?.channels ?? [])].length < 5 &&
+
+ }
+
+
+ {
+ [...eventChannels, ...(currentAnnotation?.channels ?? [])].length > 0
+ ? Array.from((new Set([...eventChannels, ...(currentAnnotation?.channels ?? [])])))
+ .sort((channelA, channelB) => {
+ return channelMetadata.findIndex(channel => channel.name === channelA)
+ - channelMetadata.findIndex(channel => channel.name === channelB);
+ })
+ .map((channel, i) => {
+ return
+ {i > 0 && <>{channelDelimiter} }
+
+ {channel}
+ {/*!currentAnnotation?.channels.includes(channel) ? '*' : ''*/}
+
+
+ })
+ : 'n/a'
+ }
+
+
+
- {
- currentAnnotation.properties.map((property) => {
- return (
-
+ Additional Columns
+
}
-
+ initCollapsed={true}
+ collapsed={true}
+ style={{
+ padding: '0 15px',
+ margin: '5px 15px 0 15px',
+ }}
+ >
+
+
+
)
}
-
+ {
+ Object.keys(datasetTags)
+ .filter(column => column !== 'trial_type')
+ .map((property, i) => {
+ return (
+ prop.PropertyName === property)
+ ? currentAnnotation.properties.find(prop => prop.PropertyName === property).PropertyValue
+ : 'n/a'
+ : eventProperties[property]
+ }
+ onUserInput={
+ (_, value) => setEventProperties({
+ ...eventProperties,
+ [property]: value,
+ })
+ }
+ required={false}
+ disabled={currentAnnotation !== null}
+ labelOuterClass={'flex-basis-40'}
+ labelClass={'event-label code-mimic word-break-word'}
+ elementClass={'additional-columns-outer'}
+ inputClass={'additional-columns-inner'}
+ />
+ );
+ })
+ }
+
+
-
+
+ {/*{currentAnnotation &&*/}
+ {/*
+
-
-
-
+
+ {
+ currentAnnotation && currentAnnotation.hed && (
+ currentAnnotation.hed.some(hedTag => hedTag.TaggerName !== 'Data Authors') ||
+ getTagsForEpoch(currentAnnotation, datasetTags, hedSchema)
+ .some(hedTag => hedTag.TaggerName !== 'Data Authors')
+ ) && (
+ <>
+ ※ = Not tagged by Data Authors
+
+ )
+ }
+
+
{
currentAnnotation && currentAnnotation.hed &&
- getTagsForEpoch(currentAnnotation, datasetTags, hedSchema)
- .length > 0 && (
+ getTagsForEpoch(currentAnnotation, datasetTags, hedSchema).length > 0 && (
<>
Dataset
{
@@ -882,7 +1328,7 @@ const AnnotationForm = ({
&& currentAnnotation.hed.length > 0
) || newTags.length > 0
) && (
- Instance
+ Instance
)
}
{
@@ -894,28 +1340,66 @@ const AnnotationForm = ({
return badge;
})
}
+
+ {
+ const addOption = addHedTagOptions.find((option) => {
+ return option.value === value;
+ })
+ handleAddTag(addOption.type)
+ }}
+ />
+
+ Add tag from:
+
+
{
newTags.map((tag, tagIndex) => {
+ const emptyText = `Select ${
+ addHedTagOptions.find((option) => {
+ return option.type === newTags[tagIndex].type;
+ })
+ .value // Plural -- make singular
+ .split(' ')
+ .map((s, i) => s.slice(-1) === 's' ? s.slice(0, -1) : s)
+ .join(' ')
+ }`;
+
return (
- <>
+
{
- handleTagChange(tagIndex, value);
+ handleTagChange(
+ tagIndex,
+ value === emptyText ? '' : value
+ );
}}
useOptionGroups={true}
/>
);
})
}
- handleRemoveAddedTag(tagIndex)}
style={{
position: 'relative',
@@ -931,59 +1415,87 @@ const AnnotationForm = ({
>
x
-
+
- {
- const addOption = addHedTagOptions.find((option) => {
- return option.value === value;
- })
- handleAddTag(addOption.type)
- }}
- />
- {/**/}
- {/* Add Tag*/}
- {/**/}
-
- Select tag from:
-
-
+
+
+
+
+
+ void) => ({
setTimeSelection: R.compose(
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/DatasetTagger.tsx b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/DatasetTagger.tsx
index f3e3e2ef9d0..3280ab0350b 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/DatasetTagger.tsx
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/DatasetTagger.tsx
@@ -1,15 +1,38 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {MutableRefObject, useEffect, useRef, useState} from 'react';
import * as R from 'ramda';
import {connect} from "react-redux";
import {RootState} from "../store";
-import {SelectDropdown} from 'jsx/MultiSelectDropdown';
-import {CheckboxElement} from 'jsx/Form';
-import {HEDTag, HEDSchemaElement} from "../store/types";
-import {setAddedTags, setDatasetTags, setDeletedTags, setRelOverrides} from "../store/state/dataset";
+import {CheckboxElement, SelectDropdown} from './Form';
+import Panel from './Panel'; // Different from ./Panel
+import {HEDSchemaElement, HEDTag} from "../store/types";
+import {setAddedTags, setDatasetTags, setDeletedTags, setRelOverrides, setDatasetMetadata} from "../store/state/dataset";
import swal from "sweetalert2";
-import {buildHEDString, getNthMemberTrailingBadgeIndex} from "../store/logic/filterEpochs";
+import {buildHEDString, getNthMemberTrailingBadgeIndex, getRootTags} from "../store/logic/filterEpochs";
import {colorOrder} from "../../color";
+const TagAction = {
+ 'Select': {
+ text: 'Select Action',
+ icon: undefined,
+ color: 'white',
+ },
+ 'Endorsed': {
+ text: 'Endorse',
+ icon: 'flag',
+ color: 'green',
+ },
+ 'Caveat': {
+ text: 'Caveat',
+ icon: 'flag',
+ color: 'red',
+ },
+ 'Comment': {
+ text: 'Comment',
+ icon: 'comment',
+ color: '#256eb6',
+ },
+}
+
type CProps = {
physioFileID: number,
hedSchema: HEDSchemaElement[],
@@ -19,8 +42,15 @@ type CProps = {
deletedTags: HEDTag[],
setAddedTags: (_: HEDTag[]) => void,
setDeletedTags: (_: HEDTag[]) => void,
+ channelDelimiter: string,
setRelOverrides: (_: HEDTag[]) => void,
setDatasetTags: (_: any) => void,
+ activeMenuTab: string,
+ setActiveMenuTab: (_: string) => void,
+ tabsRef: MutableRefObject,
+ tagsHaveChanges: boolean,
+ setDatasetMetadata: (_: any) => void,
+ filenamePrefix: string,
};
/**
@@ -32,10 +62,17 @@ type CProps = {
* @param root0.hedSchema
* @param root0.addedTags
* @param root0.deletedTags
+ * @param root0.channelDelimiter
* @param root0.setAddedTags
* @param root0.setDeletedTags
* @param root0.setDatasetTags
* @param root0.setRelOverrides
+ * @param root0.activeMenuTab
+ * @param root0.setActiveMenuTab
+ * @param root0.tabsRef
+ * @param root0.tagsHaveChanges
+ * @param root0.setDatasetMetadata
+ * @param root0.filenamePrefix
*/
const DatasetTagger = ({
physioFileID,
@@ -44,10 +81,17 @@ const DatasetTagger = ({
hedSchema,
addedTags,
deletedTags,
+ channelDelimiter,
setAddedTags,
setDeletedTags,
setDatasetTags,
setRelOverrides,
+ activeMenuTab,
+ setActiveMenuTab,
+ tabsRef,
+ tagsHaveChanges,
+ setDatasetMetadata,
+ filenamePrefix,
}: CProps) => {
const tagListID = 'searchable-hed-tags';
const [searchText, setSearchText] = useState('');
@@ -61,8 +105,53 @@ const DatasetTagger = ({
const [datasetTooltip, setDatasetTooltip] = useState({
title: '',
description: '',
+ taggedBy: 0,
+ taggerName: '',
+ endorsements: [],
});
const [activeHEDSchemas, setActiveHEDSchemas] = useState({});
+ const [numJSONSpaces, setNumJSONSpaces] = useState(2);
+ const [showUnpublishedTags, setShowUnpublishedTags] = useState(false);
+
+ const [activeEndorsementMenuItem, setActiveEndorsementMenuItem] = useState({
+ action: 'Select',
+ commentText: '',
+ });
+ const endorsementMenuRef = useRef(null);
+
+
+ const handleOutsideClick = (event) => {
+ // Currently the best way to distinguish outer box
+ if (event.target.style.zIndex === '9999') {
+ event.stopPropagation();
+ }
+ }
+
+ const resetAllChanges = () => {
+ setAddedTags([]);
+ setDeletedTags([]);
+ setRelOverrides([]);
+ setGroupedTags([]);
+ }
+
+ const onModalClose = (event) => {
+ if ([...addedTags, ...deletedTags].length > 0) {
+ event.stopPropagation();
+ swal.fire({
+ title: 'Are you sure?',
+ text: 'Leaving this window will result in the loss of any information entered.',
+ type: 'warning',
+ showCancelButton: true,
+ confirmButtonText: 'Proceed',
+ cancelButtonText: 'Cancel',
+ }).then((result) => {
+ if (result.value) {
+ resetAllChanges();
+ event.target.dispatchEvent((new Event('click', { bubbles: true, cancelable: true })));
+ }
+ });
+ }
+ }
useEffect(() => {
// Initialize active HED schemas
@@ -73,8 +162,32 @@ const DatasetTagger = ({
}
});
setActiveHEDSchemas(activeSchemas);
+
+ // ff only one column, preselect it
+ if (Object.keys(datasetTags).length === 1) {
+ setColumnTo(Object.keys(datasetTags)[0]);
+ }
+
+ // Prevent default behaviour
+ document.querySelector('#tag-modal-container > div')
+ .addEventListener('click', handleOutsideClick, true);
+
+ return () => {
+ document.querySelector('#tag-modal-container > div')
+ ?.removeEventListener('click', handleOutsideClick, true);
+
+ };
+
+
+ // Tabs initially invisible
+ // tabsRef.current.style.display = 'none';
+ // setActiveMenuTab('TAG_MODE');
}, []);
+ useEffect(() => {
+ setDatasetMetadata({ tagsHaveChanges: false, });
+ }, [tagsHaveChanges]);
+
const generateTagID = (index: number) => {
return `add_${Date.now()}${index}`;
}
@@ -105,11 +218,8 @@ const DatasetTagger = ({
confirmButtonText: 'Yes, reset all changes!'
}).then((result) => {
if (result.value) {
- setAddedTags([]);
- setDeletedTags([]);
- setRelOverrides([]);
- setGroupedTags([]);
-; }
+ resetAllChanges();
+ }
});
}
@@ -226,7 +336,9 @@ const DatasetTagger = ({
return mapping.AddID === addedTagID;
});
if (tagMapping) {
- addedTag.ID = tagMapping.RelID
+ addedTag.ID = tagMapping.RelID;
+ addedTag.TaggerName = tagMapping.TaggerName;
+ addedTag.TaggedBy = tagMapping.TaggedBy;
if (pairRelTagMapping) {
addedTag.PairRelID = pairRelTagMapping.RelID;
}
@@ -292,6 +404,7 @@ const DatasetTagger = ({
});
setDatasetTags(updatedDatasetTags);
+ setDatasetMetadata({ tagsHaveChanges: true });
setAddedTags([]);
setDeletedTags([]);
setRelOverrides([]);
@@ -347,14 +460,16 @@ const DatasetTagger = ({
}
useEffect(() => {
- const openTagViewerClasses = document
- .querySelector('#tag-modal-container > button')
- .classList;
-
- if ([...addedTags, ...deletedTags].length > 0) {
- openTagViewerClasses.add('tag-modal-container-dirty');
- } else {
- openTagViewerClasses.remove('tag-modal-container-dirty');
+ // Override onClose()
+ document
+ .querySelector(
+ '#tag-modal-container > div > div > div > span'
+ ).addEventListener('click', onModalClose, true);
+
+ return () => {
+ document.querySelector(
+ '#tag-modal-container > div > div > div > span')
+ ?.removeEventListener('click', onModalClose, true);
}
}, [addedTags, deletedTags])
@@ -393,33 +508,27 @@ const DatasetTagger = ({
HasPairing: '0',
PairRelID: null,
AdditionalMembers: 0,
+ TaggedBy: 0,
+ TaggerName: 'You',
+ Endorsements: [],
}
]);
setSearchText('');
setSearchTextValid(false);
} else {
- console.error('Failed to add tag. TODO: report')
+ console.log('Failed to add tag. TODO: report')
}
}
- const getRootTags = (tags: HEDTag[]) => {
- return tags.filter((tag) => {
- return tag.ID &&
- !tags.some((t) => {
- return tag.ID === t.PairRelID;
- })
- });
- }
-
const handleRemoveTag = (tagRelID: any) => {
if (groupMode) {
- console.warn('If you want to delete a tag, you cannot be in "Group Mode". Press the "Tag Mode" button');
+ console.log('If you want to delete a tag, you cannot be in "Group Mode". Press the "Tag Mode" button');
return;
}
const tagsToSearch = applyOverrides(datasetTags[activeColumnName][activeFieldValue]);
const tagFromDataset = tagsToSearch.find((tag) => {
- return tag.ID === tagRelID;
+ return tag.ID == tagRelID;
})
if (tagFromDataset) {
@@ -427,11 +536,11 @@ const DatasetTagger = ({
const rootTags = getRootTags(tagsToSearch);
const tagInRootTags = rootTags.find((tag) => {
- return tag.ID === tagFromDataset.ID
+ return tag.ID == tagFromDataset.ID
});
const tagInGroupedTags = applyOverrides(groupedTags).find((tag) => {
- return tag.ID === tagFromDataset.ID;
+ return tag.ID == tagFromDataset.ID;
})
if (!tagInGroupedTags && tagInRootTags && tagInRootTags.PairRelID === null) {
@@ -448,16 +557,16 @@ const DatasetTagger = ({
// Remove tag from addedTags
if (tagRelID.startsWith('add_')) {
const tagFromAdded = updatedAddedTags.find((tag) => {
- return tag.ID === tagRelID;
+ return tag.ID == tagRelID;
});
const tagInGroupedTags = tagFromAdded
? updatedGroupedTags.find((tag) => {
- return tag.ID === tagFromDataset.ID;
+ return tag.ID == tagFromDataset.ID;
})
: false;
if (!tagInGroupedTags && tagFromAdded) {
setAddedTags(updatedAddedTags.filter((tag) => {
- return tag !== tagFromAdded;
+ return tag != tagFromAdded;
}));
}
}
@@ -482,6 +591,13 @@ const DatasetTagger = ({
const handleFieldValueChange = (e) => {
setActiveFieldValue(e.target.value);
setGroupedTags([]);
+ tabsRef.current.style.display = 'block'; // overkill - revise
+ }
+
+ const setColumnTo = (columnName: string) => {
+ setActiveColumnName(columnName);
+ setActiveFieldValue(null);
+ setSearchText('');
}
const handleColumnValueChange = (e) => {
@@ -497,6 +613,24 @@ const DatasetTagger = ({
}).length;
}
+ // TODO: Revise this -- Breaks when a comment is present (different from HEDEndorsement)
+ const tagInGroupIsEndorsed = (tag: HEDTag, tagList: HEDTag[]) => {
+ return tag.Endorsements.length === 0 ||
+ tag.Endorsements.every((endorsement) => {
+ return endorsement.EndorsementStatus !== 'Endorsed'
+ }) || (
+ tag.PairRelID !== null &&
+ tagInGroupIsEndorsed(tagList.find(t => t.ID === tag.PairRelID), tagList)
+ );
+ }
+
+ const allTagsAreEndorsed = (hedTags: HEDTag[]) => {
+ return hedTags.length > 0 &&
+ !getRootTags(hedTags).some((rootTag) => {
+ return tagInGroupIsEndorsed(rootTag, hedTags);
+ });
+ }
+
const buildDataList = (onlyParentNodes: boolean) => {
return (