- Add a thread entry:
+
+ {
+ this.state.entryID < 0 ?
+ Add a comment: :
+ Update comment:
+ }
+
{/function}
{function name=createText}
-
+
{/function}
{function name=createLogDropdown}
@@ -107,7 +111,7 @@
{elseif $node['DataType'] eq 'date_format'}
{call createDateFormat k=$id v=$v d=$node['Disabled']}
{elseif $node['DataType'] eq 'email'}
- {call createEmail k=$id v=$id d=$node['Disabled']}
+ {call createEmail k=$id v=$v d=$node['Disabled']}
{elseif $node['DataType'] eq 'textarea'}
{call createTextArea k=$id v=$v d=$node['Disabled']}
{elseif $node['DataType'] eq 'lookup_center'}
@@ -161,6 +165,7 @@
To configure study cohorts click here .
To configure study projects click here .
+
To configure the diagnosis trajectory of the study click here .
diff --git a/modules/configuration/test/TestPlan.md b/modules/configuration/test/TestPlan.md
index 14d3982f493..3a262da195d 100644
--- a/modules/configuration/test/TestPlan.md
+++ b/modules/configuration/test/TestPlan.md
@@ -72,3 +72,26 @@ project_cohort_rel table in the database.
[Manual Test]
5. Test the breadcrumb to see if you can navigate back to the main config page.
[Automation Test]
+6. Go back to the project configuration page. Click on the cohort link at the top of the page and
+confirm that it brings you to the cohort configuration page.
+ [Manual Test]
+
+## Diagnosis Evolution
+
+1. Click on the diagnosis evolution link at the top of the page and confirm that it brings you to
+the diagnosis trajectory configuration page.
+ [Manual Test]
+2. Click the 'New Diagnosis Trajectory' tab in the left column navigation. Try to add a new trajectory.
+ [Manual Test]
+3. Test that you cannot add a diagnosis trajectory for any source field or instrument that does not exist in the selected visit. Also test that you can add multiple source fields.
+ [Manual Test]
+4. Validate that you cannot create duplicate trajectory names.
+ [Manual Test]
+5. Validate that you cannot duplicate an order number within the same project.
+ [Manual Test]
+6. Test editing a currently existing trajectory. Test resetting the form as well with
+the reset button.
+ [Manual Test]
+7. Test deleting a currently existing trajectory.
+8. Test the breadcrumb to see if you can navigate back to the main config page.
+ [Automation Test]
diff --git a/modules/dataquery/jsx/calcpayload.tsx b/modules/dataquery/jsx/calcpayload.tsx
new file mode 100644
index 00000000000..0229cf71103
--- /dev/null
+++ b/modules/dataquery/jsx/calcpayload.tsx
@@ -0,0 +1,51 @@
+import {QueryTerm, QueryGroup} from './querydef';
+import {
+ APIQueryObject,
+ APIQueryField,
+ APIQueryGroupField,
+ APIQueryCriteriaGroup,
+} from './types';
+/**
+ * Calculates the payload to submit to the search endpoint
+ * to run the query.
+ *
+ * @param {APIQueryField[]} fields - the fields to query
+ * @param {QueryGroup} filters - the root of the filters
+ * @returns {APIQueryObject} - The query to send to the API
+ */
+export function calcPayload(
+ fields: APIQueryField[],
+ filters: QueryGroup
+): APIQueryObject {
+ const payload: APIQueryObject = {
+ type: 'candidates',
+ fields: fields.map((val: APIQueryField) => {
+ const fieldpayload: APIQueryField = {
+ module: val.module,
+ category: val.category,
+ field: val.field,
+ };
+ if (val.visits) {
+ fieldpayload.visits = val.visits;
+ }
+ return fieldpayload;
+ },
+ ),
+ };
+ if (filters.group.length > 0) {
+ payload.criteria = {
+ operator: filters.operator,
+ group: filters.group.map( (val) => {
+ if (val instanceof QueryTerm) {
+ return val as APIQueryGroupField;
+ } else if (val instanceof QueryGroup) {
+ return val as APIQueryCriteriaGroup;
+ } else {
+ throw new Error('Invalid query');
+ }
+ }),
+ };
+ }
+ return payload;
+}
+
diff --git a/modules/dataquery/jsx/components/expansionpanels.tsx b/modules/dataquery/jsx/components/expansionpanels.tsx
new file mode 100644
index 00000000000..c8a5510fa73
--- /dev/null
+++ b/modules/dataquery/jsx/components/expansionpanels.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Panel from 'jsx/Panel';
+
+/**
+ * Render a series of expansion panels
+ *
+ * @param {object} props - React props
+ * @param {boolean?} props.alwaysOpen - If true, panels can not be toggled
+ * @param {object} props.panels - Array of individual panels
+ * @returns {React.ReactElement} - The panels
+ */
+const ExpansionPanels = (props: {
+ alwaysOpen?: boolean,
+ panels: {
+ title: string,
+ content: React.ReactElement,
+ defaultOpen?: boolean,
+ alwaysOpen: boolean,
+ }[]
+}) => {
+ return (
+
+ { props.panels.map((panel, index) => (
+
+ {panel.content}
+
+ ))}
+
+ );
+};
+
+export default ExpansionPanels;
diff --git a/modules/dataquery/jsx/components/filterableselectgroup.tsx b/modules/dataquery/jsx/components/filterableselectgroup.tsx
new file mode 100644
index 00000000000..6ef42e2015d
--- /dev/null
+++ b/modules/dataquery/jsx/components/filterableselectgroup.tsx
@@ -0,0 +1,90 @@
+import Select, {SingleValue} from 'react-select';
+
+type SelectOption = {
+ label: string,
+ value: string,
+ module: string,
+};
+
+type SelectGroup = {
+ label: string,
+ options: SelectOption[],
+};
+/**
+ * Render a select with option groups that can be
+ * filtered
+ *
+ * @param {object} props - react props
+ * @param {function} props.onChange - Callback on selection change
+ * @param {string?} props.placeholder - An optional placeholder value when no elements are selected
+ * @param {object} props.groups - Groups to select the dropdown into
+ * @param {function} props.mapGroupName - A mapper from backend to frontend name for groups
+ * @returns {React.ReactElement} - The element
+ */
+function FilterableSelectGroup(props: {
+ onChange: (module: string, value: string) => void,
+ placeholder?: string,
+ groups: object,
+ mapGroupName?: (module: string) => string,
+}) {
+ const groups: SelectGroup[] = [];
+ const placeholder = props.placeholder || 'Select a category';
+ for (const [module, subcategories]
+ of Object.entries(props.groups)) {
+ const options: SelectOption[] = [];
+ for (const [value, desc]
+ of Object.entries(subcategories) as unknown as [string, string]) {
+ options.push({
+ value: value,
+ label: desc,
+ module: module,
+ });
+ }
+
+ let label = module;
+ if (props.mapGroupName) {
+ label = props.mapGroupName(module);
+ }
+ groups.push({
+ label: label,
+ options: options,
+ });
+ }
+
+ /**
+ * Callback to call when the selection changes.
+ *
+ * @param {object} e - The click event callback
+ * @param {string} e.module - The module
+ * @param {string} e.value - The value
+ * @returns {void}
+ */
+ const selected = (e: SingleValue
) => {
+ // The callback should be (e: SelectOption) but typescript
+ // is convinced that it's a SingleValue.
+ // console.log(e) confirms that it has the same structure
+ // as SelectOption, so just convert it and explicitly
+ // cast it unsafely to make the compiler happy.
+ const val: SelectOption = e as unknown as SelectOption;
+ props.onChange(val.module, val.value);
+ };
+ return (
+
+ ({...base, zIndex: 9999})}
+ }
+ placeholder={placeholder}
+ />
+
+ );
+}
+
+export default FilterableSelectGroup;
diff --git a/modules/dataquery/jsx/criteriaterm.tsx b/modules/dataquery/jsx/criteriaterm.tsx
new file mode 100644
index 00000000000..8a90309b849
--- /dev/null
+++ b/modules/dataquery/jsx/criteriaterm.tsx
@@ -0,0 +1,167 @@
+import FieldDisplay from './fielddisplay';
+import {QueryTerm} from './querydef';
+import {Operators} from './types';
+import {FieldDictionary, FullDictionary} from './types';
+
+/**
+ * Convert an operator serialization back to unicode for
+ * display.
+ *
+ * @param {string} op - the backend operator
+ * @returns {string} - The frontend value to display for op
+ */
+function op2str(op: string): string {
+ switch (op) {
+ case 'lt': return '<';
+ case 'lte': return '≤';
+ case 'eq': return '=';
+ case 'neq': return '≠';
+ case 'gte': return '≥';
+ case 'gt': return '>';
+ case 'in': return 'in';
+ case 'startsWith': return 'starts with';
+ case 'contains': return 'contains';
+ case 'endsWith': return 'ends with';
+ case 'isnotnull': return 'has data';
+ case 'isnull': return 'has no data';
+ case 'exists': return 'exists';
+ case 'notexists': return 'does not exist';
+ case 'numberof': return 'number of';
+ default: console.error('Unhandle operator');
+ return '';
+ }
+}
+
+/**
+ * Get the dictionary for a given term
+ *
+ * @param {QueryTerm} term - The term whose dictionary
+ should be extracted
+ * @param {FullDictionary} dict - all loaded dictionaries
+ * @returns {FieldDictionary} - The dictionary for this term
+ */
+function getDictionary(
+ term: QueryTerm,
+ dict: FullDictionary
+): FieldDictionary|null {
+ if (!dict || !dict[term.module] || !dict[term.module][term.category]
+ || !dict[term.module][term.category][term.fieldname]) {
+ return null;
+ }
+ return dict[term.module][term.category][term.fieldname];
+}
+
+/**
+ * Renders a single term of a condition
+ *
+ * @param {object} props - React props
+ * @param {QueryTerm} props.term - The term being rendered
+ * @param {FullDictionary} props.fulldictionary - The full dictionary
+ * @param {function} props.mapModuleName - backend => human friendly name mapper
+ * @param {function} props.mapCategoryName - backend => human friendly name mapper
+ * @returns {React.ReactElement} - The term to display
+ */
+export function CriteriaTerm(props: {
+ term: QueryTerm,
+ fulldictionary: FullDictionary,
+ mapModuleName: (module: string) => string,
+ mapCategoryName: (module: string, category: string) => string,
+}) {
+ const containerStyle: React.CSSProperties ={
+ display: 'flex' as const,
+ flexWrap: 'nowrap' as const,
+ flexDirection: 'row' as const,
+ justifyContent: 'space-evenly',
+ width: '100%',
+ alignItems: 'center',
+ };
+
+ const fieldStyle = {
+ width: '33%',
+ };
+ const opStyle = {
+ width: '33%',
+ textAlign: 'center' as const,
+ };
+ const valueStyle = {
+ width: '33%',
+ display: 'flex',
+ alignItems: 'center',
+ };
+
+ let visits;
+ if (props.term.visits) {
+ visits = '';
+ if (props.term.visits.length == 1) {
+ visits += props.term.visits[0];
+ } else {
+ for (let i = 0; i < props.term.visits.length; i++) {
+ visits += props.term.visits[i];
+ if (i == props.term.visits.length-2) {
+ visits += ' or ';
+ } else if (i < props.term.visits.length-2) {
+ visits += ', ';
+ }
+ }
+ }
+ visits =
+ at visit
+ {visits}
+
;
+ }
+
+ let value;
+ if (props.term.op == Operators.IN) {
+ const liststyle = {
+ margin: 0,
+ padding: 0,
+ listStylePosition: 'inside' as const,
+ listStyleType: 'disc',
+ };
+
+ value =
+ {(props.term.value as string[]).map(
+ (val, idx) => {val}
+ )}
+ ;
+ } else {
+ value = {props.term.value} ;
+ }
+
+ let cardinalityWarning;
+ const dict = getDictionary(props.term, props.fulldictionary);
+ if (!dict) {
+ // This sometimes happens when first loading, before the dictionary
+ // is retrieved, so we do not print an error.
+ } else if (dict.cardinality == 'many') {
+ cardinalityWarning =
+
+
+
{op2str(props.term.op)}
+
+
{value}
+
{visits}
+ {cardinalityWarning}
+
+
(null);
+ useEffect(() => {
+ if (props.scrollTo == true && scrollRef.current !== null) {
+ scrollRef.current.scrollIntoView({
+ behavior: 'smooth',
+ });
+ props.resetScrollTo();
+ }
+ }, [props.scrollTo]);
+
+ let visits;
+ let selectedVisits: string[];
+
+ if (value.scope === 'session') {
+ /**
+ * Callback for React Select to handle selected option
+ * change
+ *
+ * @param {VisitOption[]} newvisits - The newly selected visits
+ * @returns {void}
+ */
+ const selected = (newvisits: readonly VisitOption[]) => {
+ props.onChangeVisitList(
+ props.module,
+ props.category,
+ item,
+ newvisits.map( (visit: VisitOption) => visit.value),
+ );
+ };
+
+ const selectOptions: string[] = value.visits || [];
+
+ if (props.selected && (typeof props.selected.visits !== 'undefined')) {
+ selectedVisits = props.selected.visits;
+ } else {
+ selectedVisits = selectOptions.filter((visit: string) => {
+ return props.defaultVisits.includes(visit);
+ });
+ }
+
+ if (props.selected) {
+ visits = e.stopPropagation()}>
+
Visits
+ {
+ return {value: visit, label: visit};
+ })
+ }
+ isMulti
+ onChange={selected}
+ placeholder='Select Visits'
+ value={selectedVisits.map( (visit: string): VisitOption => {
+ return {value: visit, label: visit};
+ })
+ }
+ menuPortalTarget={document.body}
+ styles={
+ {menuPortal:
+ /**
+ * Adds appropriate zIndex to the react select's base CSS
+ *
+ * @param {object} base - The current CSS
+ * @returns {object} New CSS with z-index added
+ */
+ (base) => ({...base, zIndex: 9999}),
+ }
+ }
+ closeMenuOnSelect={false}
+ />
+ ;
+ }
+ }
+ const download = value.type == 'URI' ?
+ props.onFieldToggle(
+ props.module,
+ props.category,
+ item,
+ selectedVisits,
+ )}>
+
+ {item}
+ {value.description} {download}
+
+ {visits}
+
(false);
+ const [zoomTo, setZoomTo] = useState(null);
+ useEffect(() => {
+ if (!syncVisits) {
+ return;
+ }
+ let modifiedvisits = false;
+ props.selected.forEach( (field: APIQueryField) => {
+ // Valid visits according to the dictionary
+ const category = props.fulldictionary[field.module][field.category];
+ const dict = category[field.field];
+
+ if (dict.scope == 'candidate') {
+ return;
+ }
+ if (typeof dict.visits !== 'undefined') {
+ const newvisits = dict.visits.filter((visit) => {
+ return props.defaultVisits.includes(visit);
+ });
+ field.visits = newvisits;
+ modifiedvisits = true;
+ }
+ });
+ if (modifiedvisits) {
+ props.setSelected([...props.selected]);
+ }
+ }, [syncVisits, props.defaultVisits]);
+ const displayed: string[] = Object.keys(
+ props.displayedFields || {}
+ ).filter((value) => {
+ if (activeFilter === '') {
+ // No filter set
+ return true;
+ }
+
+ // Filter with a case insensitive comparison to either the description or
+ // the field name displayed to the user
+ const lowerFilter = activeFilter.toLowerCase();
+ const desc = props.displayedFields[value].description;
+ return (value.toLowerCase().includes(lowerFilter)
+ || desc.toLowerCase().includes(lowerFilter));
+ });
+
+ const fields = displayed.map((item: string) => {
+ /**
+ * Return true if this element equals
+ * the selected.
+ *
+ * @param {APIQueryField} element - The element
+ * @returns {boolean} - true if equal
+ */
+ const equalField = (element: APIQueryField) => {
+ return (element.module == props.module
+ && element.category === props.category
+ && element.field == item);
+ };
+ const selobj = props.selected.find(equalField);
+ return setZoomTo(null)}
+ key={item}
+ item={item}
+ value={props.displayedFields[item]}
+ selected={selobj}
+ module={props.module}
+ category={props.category}
+ onFieldToggle={props.onFieldToggle}
+ onChangeVisitList={props.onChangeVisitList}
+ defaultVisits={props.defaultVisits}
+ />;
+ });
+
+ /**
+ * Set the filter that is being applied to displayed fields
+ *
+ * @param {React.ChangeEventHandler} e - The mouse event
+ */
+ const setFilter = (e: React.FormEvent) => {
+ const target = e.target as HTMLInputElement;
+ setActiveFilter(target.value);
+ };
+
+ /**
+ * Add all items from the selected category to selected fields
+ *
+ * @returns {void}
+ */
+ const addAll = () => {
+ const toAdd = displayed.map((item) => {
+ const dict = props.displayedFields[item];
+ const retObj: APIQueryField = {
+ module: props.module,
+ category: props.category,
+ field: item,
+ };
+ // Only include defined visits which intersect
+ // with the default ones, convert to the react-select
+ // format used internally.
+ if (dict.visits) {
+ retObj['visits'] = dict.visits.filter((visit) => {
+ return props.defaultVisits.includes(visit);
+ });
+ }
+ return retObj;
+ });
+ props.onAddAll(toAdd);
+ };
+ /**
+ * Removes all items from the currently selected category
+ *
+ * @returns {void}
+ */
+ const removeAll = () => {
+ const toRemove = displayed.map((item) => {
+ const dict = props.displayedFields[item];
+ return {
+ module: props.module,
+ category: props.category,
+ field: item,
+ dictionary: dict,
+ };
+ });
+ props.onRemoveAll(toRemove);
+ };
+
+ let fieldList: React.ReactElement|null = null;
+ if (props.category) {
+ // Put into a short variable name for line length
+ const mCategories = props.allCategories.categories[props.module];
+ const cname = mCategories[props.category];
+ let defaultVisits;
+ if (props.defaultVisits) {
+ const allVisits = props.allVisits.map((el) => {
+ return {value: el, label: el};
+ });
+ const selectedVisits = props.defaultVisits.map((el) => {
+ return {value: el, label: el};
+ });
+ defaultVisits =
+
Default Visits
+
({...base, zIndex: 9999}),
+ }
+ }
+ value={selectedVisits}
+ closeMenuOnSelect={false}
+ />
+
+ setSyncVisits(value)
+ } />
+
+
+
+
{cname} fields
+
+ {defaultVisits}
+
+
+
+
+
+
+ Add all
+
+
+ Remove all
+
+
+
+
+
{fields}
+
+
+
+
Available Fields
+ props.allCategories.modules[key]}
+ onChange={props.onCategoryChange}
+ />
+ {fieldList}
+
+
+
+
+
Selected Fields
+
+ Clear
+
+
+
{
+ setZoomTo(item);
+ props.onCategoryChange(module, category);
+ }}
+ />
+
+
+
+
(null);
+
+ const [draggingIdx, setDraggingIdx] = useState(null);
+ const [droppingIdx, setDroppingIdx] = useState(null);
+
+ /**
+ * Move the currently selected item from draggingIdx to
+ * droppingIdx.
+ *
+ * @returns {void}
+ */
+ const moveSelected = () => {
+ if (draggingIdx=== null || droppingIdx === null) {
+ return;
+ }
+ const newSelected: APIQueryField[] = props.selected;
+
+ const removed: APIQueryField = newSelected.splice(draggingIdx, 1)[0];
+ const newIdx: number|null = (droppingIdx||0 <= draggingIdx||0)
+ ? droppingIdx
+ : (droppingIdx - 1);
+
+ if (newIdx == null) {
+ return;
+ }
+ newSelected.splice(
+ newIdx,
+ 0,
+ removed,
+ );
+ props.setSelected([...newSelected]);
+ setDroppingIdx(null);
+ setDraggingIdx(null);
+ };
+
+ const fields = props.selected.map((item, i) => {
+ /**
+ * Removes an item from the selected
+ *
+ * @param {APIQueryField} item - The field to remove
+ * @returns {void}
+ */
+ const removeField = (item: APIQueryField) => {
+ props.removeField(item.module, item.category, item.field);
+ };
+ const style: React.CSSProperties = {display: 'flex',
+ flexWrap: 'nowrap' as const,
+ cursor: 'grab',
+ justifyContent: 'space-between'};
+ if (removingIdx === i) {
+ style.textDecoration = 'line-through' as const;
+ }
+ if (droppingIdx === i) {
+ style.borderTop = 'thin solid black';
+ }
+ if (draggingIdx == i) {
+ style.background = '#f5f5f5';
+ }
+ let fieldvisits;
+ if (item.visits) {
+ const style = {
+ fontStyle: 'italic',
+ color: '#aaa',
+ fontSize: '0.7em',
+ marginLeft: 20,
+ };
+ fieldvisits = {item.visits.join(', ')} ;
+ }
+ return ( {
+ props.snapToView(item.module, item.category, item.field);
+ }}
+ onDragStart={() => {
+ setDraggingIdx(i);
+ }}
+
+ onDragEnd={() => {
+ setDraggingIdx(null);
+ setDroppingIdx(null);
+ }}
+
+ onDragEnter={() => {
+ setDroppingIdx(i);
+ }}
+
+ onDragOver ={(e) => {
+ e.stopPropagation();
+ e.preventDefault();
+ }}
+ onDrop={() => moveSelected()}
+ >
+
+
{item.field}
+ {getDictionaryDescription(
+ item.module,
+ item.category,
+ item.field,
+ props.fulldictionary,
+ )}
+ {fieldvisits}
+
+
setRemovingIdx(i)}
+ onMouseLeave={() => setRemovingIdx(null)}>
+ removeField(item)}
+ style={{cursor: 'pointer'}} />
+
+
setDroppingIdx(nItems) }
+ onDragOver ={(e) => {
+ e.stopPropagation();
+ e.preventDefault();
+ }}
+ onDrop={() => moveSelected()}>
+
);
+ }
+
+ return {fields}
;
+}
+
+
+export default DefineFields;
diff --git a/modules/dataquery/jsx/definefilters.addfiltermodal.tsx b/modules/dataquery/jsx/definefilters.addfiltermodal.tsx
new file mode 100644
index 00000000000..b3f36f67541
--- /dev/null
+++ b/modules/dataquery/jsx/definefilters.addfiltermodal.tsx
@@ -0,0 +1,445 @@
+import {useState} from 'react';
+import FilterableSelectGroup from './components/filterableselectgroup';
+import Modal from 'jsx/Modal';
+import Select from 'react-select';
+import swal from 'sweetalert2';
+import {
+ NumericElement,
+ DateElement,
+ TimeElement,
+ SelectElement,
+ TextboxElement,
+} from 'jsx/Form';
+import {QueryTerm, QueryGroup} from './querydef';
+import {
+ Operators,
+ FieldDictionary,
+ DictionaryCategory,
+ VisitOption,
+} from './types';
+import {CategoriesAPIReturn} from './hooks/usedatadictionary';
+
+/**
+ * Renders a selectable list of visits
+ *
+ * @param {object} props - React props
+ * @param {string[]} props.selected - The currently selected visits
+ * @param {string[]} props.options - The valid options
+ * @param {function} props.onChange - callback when the value selected changes
+ * @returns {React.ReactElement} - The visit list dropdown
+ */
+function VisitList(props: {
+ selected: string[],
+ options: string[],
+ onChange: (newvals: string[]) => void,
+}) {
+ const selectOptions: VisitOption[] = props.options.map(
+ (vl) => {
+ return {value: vl, label: vl};
+ }
+ );
+
+ const selectedVisits = selectOptions.filter((opt) => {
+ return props.selected.includes(opt.value);
+ });
+
+ return {
+ props.onChange(
+ newvals.map((valobj) => valobj.value)
+ );
+ }}
+ placeholder='Select Visits'
+ value={selectedVisits}
+ menuPortalTarget={document.body}
+ styles={{menuPortal:
+ /**
+ * Required for rendering properly on top of window.
+ *
+ * @param {object} base - The base from React Select
+ * @returns {object} - The new CSS object
+ */
+ (base) => ({...base, zIndex: 9999})}
+ }
+ closeMenuOnSelect={false}
+ />;
+}
+
+/**
+ * Render a modal window for adding a filter
+ *
+ * @param {object} props - React props
+ * @param {QueryGroup} props.query - The current query
+ * @param {function} props.closeModal - Callback to close the modal
+ * @param {function} props.addQueryGroupItem - Callback to add criteria to a querygroup
+ * @param {CategoriesAPIReturn} props.categories - List of categories
+ * @param {function} props.onCategoryChange - Callback to change the current category
+ * @param {DictionaryCategory} props.displayedFields - The fields from the current category to display
+ * @param {string} props.module - The module of the currently selected category
+ * @param {string} props.category - The currently selected category
+ * @returns {React.ReactElement} - The modal window
+ */
+function AddFilterModal(props: {
+ query: QueryGroup,
+ closeModal: () => void,
+ addQueryGroupItem: (group: QueryGroup, condition: QueryTerm) => void,
+ categories: CategoriesAPIReturn,
+
+ onCategoryChange: (module: string, category: string) => void,
+ displayedFields: DictionaryCategory,
+
+ module: string,
+ category: string,
+}) {
+ let fieldSelect;
+ let criteriaSelect;
+ let visitSelect;
+ let cardinalityWarning;
+ const [fieldDictionary, setFieldDictionary]
+ = useState(null);
+ const [fieldname, setFieldname] = useState(null);
+ const [op, setOp] = useState(null);
+ const [value, setValue] = useState('');
+ const [selectedVisits, setSelectedVisits] = useState(null);
+
+ if (props.displayedFields) {
+ const options: { Fields: {[key: string]: string}} = {'Fields': {}};
+ for (const [key, value] of Object.entries(props.displayedFields)) {
+ options['Fields'][key] = value.description;
+ }
+ fieldSelect = {
+ const dict = props.displayedFields[fieldname];
+ setFieldDictionary(dict);
+ setFieldname(fieldname);
+ if (dict.visits) {
+ setSelectedVisits(dict.visits);
+ }
+ }}
+ placeholder="Select a field" />;
+ }
+
+ if (fieldDictionary) {
+ let valueSelect;
+ if (op) {
+ valueSelect = valueInput(fieldDictionary, op, value, setValue);
+ }
+
+ criteriaSelect =
+
Criteria
+
+
+ {
+ setOp(operator as Operators);
+ }}
+ placeholder="Select an operator"
+ />
+
+
{valueSelect}
+
+
e.stopPropagation()}>
+
for at least one of the following visits
+
+
+
This field may exist multiple times for a
+ single {fieldDictionary.scope}. Adding a criteria
+ based on it means that it must match for at least
+ one of the data points.
+
+
+
Field
+
+
+ props.categories.modules[key]}
+ onChange={props.onCategoryChange} />
+
+
+ {fieldSelect}
+
+
+ {cardinalityWarning}
+ {criteriaSelect}
+ {visitSelect}
+
;
+}
+
+
+/**
+ * Get a list of possible query operators based on a field's dictionary
+ *
+ * @param {object} dict - the field dictionary
+ * @returns {object} - list of options for this dictionary
+ */
+function getOperatorOptions(dict: FieldDictionary) {
+ let options: {[operator: string]: string};
+
+ if (dict.type == 'integer' || dict.type == 'date' ||
+ dict.type == 'interval' || dict.type == 'time' ||
+ dict.type == 'decimal') {
+ // Comparable data types
+ options = {
+ 'lt': '<',
+ 'lte': '≤',
+ 'eq': '=',
+ 'neq': '≠',
+ 'gte': '≥',
+ 'gt': '>',
+ };
+ } else if (dict.type == 'enumeration') {
+ // Enumerations are a dropdown. Comparable operators
+ // are meaningless, but the options are a dropdown
+ // and we might be looking for an option "in" any
+ // of the selected choices.
+ options = {
+ 'eq': '=',
+ 'neq': '≠',
+ 'in': 'in',
+ };
+ } else if (dict.type == 'string' ||
+ dict.type == 'URI') {
+ // We might be looking for a substring.
+ options = {
+ 'eq': '=',
+ 'neq': '≠',
+ 'startsWith': 'starts with',
+ 'contains': 'contains',
+ 'endsWith': 'ends with',
+ };
+ } else {
+ // fall back to == and !=, valid for any type.
+ options = {'eq': '=', 'neq': '≠'};
+ }
+
+ // Possible cardinalities are unique, single,
+ // optional, or many. Unique and single don't
+ // change the possible operators, optional or
+ // 1-many cardinalities have a couple more
+ // things you can check.
+ if (dict.cardinality == 'optional') {
+ options['isnotnull'] = 'has data';
+ options['isnull'] = 'has no data';
+ } else if (dict.cardinality == 'many') {
+ options['exists'] = 'exists';
+ options['notexists'] = 'does not exist';
+ options['numberof'] = 'number of';
+ }
+ return options;
+}
+
+
+/**
+ * Returns an input field for getting the value of a filter criteria
+ * in a context-sensitive way
+ *
+ * @param {object} fielddict - The field dictionary
+ * @param {string} op - The operator selected
+ * @param {string|string[]} value - The current value
+ * @param {string} setValue - a callback when a new value is selected
+ * @returns {React.ReactElement} - the react element
+ */
+function valueInput(fielddict: FieldDictionary,
+ op: Operators,
+ value: string|string[],
+ setValue: (val: string) => void
+) {
+ const vs: string = value as string;
+ switch (op) {
+ case 'exists':
+ case 'notexists':
+ case 'isnull':
+ case 'isnotnull':
+ return setValue(value)} />;
+ }
+
+ switch (fielddict.type) {
+ case 'date':
+ return setValue(value)} />;
+ case 'time':
+ // There's no time element type in LORIS, so use the HTML5
+ // one with bootstrap styling that matches the rest of our
+ // elements
+ return setValue(value)
+ }
+ />;
+ case 'URI':
+ // Should this be input type="url"?
+ return setValue(value)}
+ name='value'
+ value={vs} />;
+ case 'integer':
+ return setValue(value)} />;
+ case 'boolean':
+ return {
+ setValue(value);
+ }}
+ placeholder="Select a value"
+ />;
+ case 'enumeration':
+ const opts: {[key: string]: string} = {};
+ for (let i = 0;
+ fielddict.options && i < fielddict.options.length;
+ i++
+ ) {
+ const opt = fielddict.options[i];
+ opts[opt] = opt;
+ }
+ if (op == 'in') {
+ return setValue(value)}
+ value={value}
+ sortByValue={false}
+ />;
+ }
+ return {
+ setValue(value);
+ }}
+ placeholder="Select a value"
+ />;
+ default:
+ return setValue(value)}
+ name='value'
+ value={vs} />;
+ }
+}
+
+export default AddFilterModal;
diff --git a/modules/dataquery/jsx/definefilters.importcsvmodal.tsx b/modules/dataquery/jsx/definefilters.importcsvmodal.tsx
new file mode 100644
index 00000000000..512f6bd837b
--- /dev/null
+++ b/modules/dataquery/jsx/definefilters.importcsvmodal.tsx
@@ -0,0 +1,208 @@
+import Modal from 'jsx/Modal';
+import {QueryGroup, QueryTerm} from './querydef';
+import {useState} from 'react';
+import Papa from 'papaparse';
+import swal from 'sweetalert2';
+import {FileElement} from 'jsx/Form';
+
+/**
+ * Render a modal window for adding a filter
+ *
+ * @param {object} props - React props
+ * @param {function} props.setQuery - Function to set the current criteria
+ * @param {function} props.closeModal - Callback to close the current modal
+ * @returns {React.ReactElement} - The import modal window
+ */
+function ImportCSVModal(props: {
+ setQuery: (root: QueryGroup) => void,
+ closeModal: () => void,
+}) {
+ const [csvFile, setCSVFile] = useState(null);
+ const [csvHeader, setCSVHeader] = useState(false);
+ const [csvType, setCSVType] = useState('candidate');
+ const [idType, setIdType] = useState('PSCID');
+ /**
+ * Promise for handling modal closing. Always accepts.
+ *
+ * @returns {Promise} - a stub promise
+ */
+ const submitPromise = () =>
+ new Promise((resolve) => {
+ resolve(null);
+ }
+ );
+
+ const candIDRegex = new RegExp('^[1-9][0-9]{5}$');
+
+ /**
+ * Callback function for after papaparse has parsed the csv
+ *
+ * @param {any} value - the value from papaparse callback
+ */
+ const csvParsed = (value: Papa.ParseResult) => {
+ if (value.errors && value.errors.length > 0) {
+ console.error(value.errors);
+ swal.fire({
+ type: 'error',
+ title: 'Invalid CSV',
+ text: 'Could not parse CSV file',
+ });
+ }
+
+ // If candidates: validate 1 column
+ // If sessions: validate 2 columns
+ const expectedLength = (csvType === 'session' ? 2 : 1);
+ const startLine = csvHeader ? 1 : 0;
+ for (let i = startLine; i < value.data.length; i++) {
+ if (value.data[i].length != expectedLength) {
+ swal.fire({
+ type: 'error',
+ title: 'Invalid CSV',
+ text: 'Expected ' + expectedLength + ' columns in CSV.'
+ + ' Got ' + value.data[i].length + ' on line ' +
+ (i+1) + '.',
+ });
+ return;
+ }
+ if (idType === 'CandID') {
+ if (candIDRegex.test(value.data[i][0]) !== true) {
+ swal.fire({
+ type: 'error',
+ title: 'Invalid DCC ID',
+ text: 'Invalid DCC ID (' + value.data[i][0]
+ + ') on line '
+ + (i+1) + '.',
+ });
+ }
+ }
+ }
+
+ // Now that it's been validated, build a new query
+ const newQuery = new QueryGroup('or');
+ for (let i = startLine; i < value.data.length; i++) {
+ if (csvType === 'session') {
+ const sessionGroup = new QueryGroup('and');
+ sessionGroup.addTerm(
+ new QueryTerm(
+ 'candidate_parameters',
+ 'Identifiers',
+ idType,
+ 'eq',
+ value.data[i][0],
+ ),
+ );
+ sessionGroup.addTerm(
+ new QueryTerm(
+ 'candidate_parameters',
+ 'Meta',
+ 'VisitLabel',
+ 'eq',
+ value.data[i][1],
+ ),
+ );
+ newQuery.group.push(sessionGroup);
+ } else {
+ newQuery.addTerm(
+ new QueryTerm(
+ 'candidate_parameters',
+ 'Identifiers',
+ idType,
+ 'eq',
+ value.data[i][0],
+ ),
+ );
+ }
+ }
+
+ props.setQuery(newQuery);
+ props.closeModal();
+ };
+
+ const dtstyle = {
+ marginLeft: '1em',
+ marginTop: '1em',
+ };
+
+ return
+
+ ;
+}
+
+export default ImportCSVModal;
diff --git a/modules/dataquery/jsx/definefilters.tsx b/modules/dataquery/jsx/definefilters.tsx
new file mode 100644
index 00000000000..3e97e519ab7
--- /dev/null
+++ b/modules/dataquery/jsx/definefilters.tsx
@@ -0,0 +1,400 @@
+import {useState, useEffect} from 'react';
+import {APIQueryField} from './types';
+import {QueryTerm, QueryGroup} from './querydef';
+import AddFilterModal from './definefilters.addfiltermodal';
+import ImportCSVModal from './definefilters.importcsvmodal';
+import QueryTree from './querytree';
+import {CriteriaTerm} from './criteriaterm';
+import InfoPanel from 'jsx/InfoPanel';
+import {ButtonElement} from 'jsx/Form';
+import {FullDictionary, DictionaryCategory} from './types';
+import {calcPayload} from './calcpayload';
+import {CategoriesAPIReturn} from './hooks/usedatadictionary';
+import React from 'react';
+
+/**
+ * The define filters tab of the DQT
+ *
+ * @param {object} props - React props
+ * @param {APIQueryField[]} props.fields - The fields selected
+ * @param {QueryGroup} props.query - The criteria currently selected
+ * @param {function} props.setQuery - Sets the current criteria
+ * @param {CategoriesAPIReturn} props.categories - The list of categories displayed
+ * @param {DictionaryCategory} props.displayedFields - All fields from the currently selected category
+ * @param {string} props.module - The module of the currently selected module
+ * @param {string} props.category - The currently selected category
+ * @param {function} props.onCategoryChange - Callback to call when the category changes
+ * @param {FullDictionary} props.fulldictionary - The fully loaded dictionary
+ * @param {function} props.mapModuleName - Mapper from backend name to frontend name
+ * @param {function} props.mapCategoryName - Mapper from backend name to frontend name
+ * @param {function} props.getModuleFields - Function that will ensure a module's fields
+ * are fully populated in fulldictionary
+ * @param {function} props.addQueryGroupItem - Function that will add a new term to the
+ * existing QueryGroup
+ * @param {function} props.addNewQueryGroup - Function that will add a new QueryGroup subgroup
+ * to the existing QueryGroup
+ * @param {function} props.removeQueryGroupItem - Function that will remove an item from a
+ * QueryGroup by index.
+ * @returns {React.ReactElement} - The Define Filters page
+ */
+function DefineFilters(props: {
+ fields: APIQueryField[],
+ query: QueryGroup,
+ categories: CategoriesAPIReturn,
+ setQuery: (newcriteria: QueryGroup) => void,
+
+ module: string,
+ category: string,
+
+ displayedFields: DictionaryCategory, // fields from currently selected category
+ onCategoryChange: (module: string, category: string) => void,
+ fulldictionary: FullDictionary,
+ mapModuleName: (module: string) => string,
+ mapCategoryName: (module: string, category: string) => string,
+ getModuleFields: (module: string) => void,
+
+ addQueryGroupItem: (
+ querygroup: QueryGroup,
+ condition: QueryTerm
+ ) => QueryGroup,
+ addNewQueryGroup: (group: QueryGroup) => void,
+ removeQueryGroupItem: (group: QueryGroup, i: number) => QueryGroup,
+}) : React.ReactElement {
+ let displayquery: React.ReactNode = null;
+ const [addModal, setAddModal] = useState(false);
+ const [csvModal, setCSVModal] = useState(false);
+ const [showAdvanced, setShowAdvanced] = useState(false);
+ // The subgroup used for the "Add Filter" modal window
+ // to add to. Default to top level unless click from a
+ // query group, in which case the callback changes it
+ // to that group.
+ const [modalQueryGroup, setModalGroup] = useState(props.query);
+ const [deleteItemIndex, setDeleteItemIndex] = useState(null);
+ const [queryMatches, setQueryMatches] = useState(null);
+ useEffect(() => {
+ setQueryMatches(null);
+ const payload = calcPayload(props.fields, props.query);
+ fetch(
+ '/dataquery/queries',
+ {
+ method: 'POST',
+ credentials: 'same-origin',
+ body: JSON.stringify(payload),
+ },
+ ).then(
+ (resp) => {
+ if (!resp.ok) {
+ throw new Error('Error creating query.');
+ }
+ return resp.json();
+ }
+ ).then(
+ (data) => {
+ fetch(
+ '/dataquery/queries/'
+ + data.QueryID + '/count',
+ {
+ method: 'GET',
+ credentials: 'same-origin',
+ }
+ ).then((resp) => {
+ if (!resp.ok) {
+ throw new Error('Could not get count.');
+ }
+ return resp.json();
+ }).then((result) => {
+ setQueryMatches(result.count);
+ });
+ }
+ );
+ }, [props.fields, props.query]);
+
+ const bGroupStyle = {
+ display: 'flex' as const,
+ flexWrap: 'wrap' as const,
+ marginTop: '1ex',
+ };
+
+ const mapModuleName = props.mapModuleName;
+ const mapCategoryName = props.mapCategoryName;
+
+ const advancedLabel = showAdvanced ? 'Hide Advanced' : 'Show Advanced';
+ let advancedButtons;
+ const toggleAdvancedButton = (
+
+
+ {
+ e.preventDefault();
+ setShowAdvanced(!showAdvanced);
+ }}
+ />
+
+
+
The "nested groups" options are advanced options for queries
+ that do not have any specific condition at the
+ base of the query.
+ Use Add nested "or" condition groups if
+ you need to build a query of the form.
+ (a or b) and (c or d) [or (e and f)..] .
+
+
+ {
+ e.preventDefault();
+ props.query.operator = 'and';
+ props.addNewQueryGroup(props.query);
+ }}
+ />
+
+
+ Use Add nested "and" condition groups if you
+ need to build a query of the form
+ (a and b) or (c and d) [or (e and f)..] .
+
+
+ {
+ e.preventDefault();
+ props.query.operator = 'or';
+ props.addNewQueryGroup(props.query);
+ }}
+ />
+
+
+
+
Currently querying for ALL candidates.
+
You can add conditions by clicking one of the buttons below.
+
Click Add Condition to add one or more conditions
+ to your filters (ie. "Date Of Birth < 2015-02-15"). This is
+ most likely where you want to start your filters.
+
+
You can also import a population from a CSV by clicking
+ the Import from CSV button.
+
The advanced options are for queries that do not have
+ a condition to add at the base of the query.
+
+
+
+
+
Use New "and" subgroup if the rest of the
+ query you need to write is a subgroup consisting
+ of "and" conditions. ie your query is of the form:
+
+ (your condition above) or (c and d [and e and f..])
+
+
+
{
+ e.preventDefault();
+ props.query.operator = 'or';
+ props.addNewQueryGroup(props.query);
+ }} />
+ Use New "or" subgroup if the rest of the
+ query you need to write is a subgroup consisting
+ of "or" conditions. ie your query is of the form:
+
+ (your condition above) and (c or d [or e or f..])
+
+
+ {
+ e.preventDefault();
+ props.query.operator = 'and';
+ props.addNewQueryGroup(props.query);
+ }} />
+
+
+
Currently querying for any candidates with:
+
+
+
+
Currently querying for any candidates with:
+
+
setAddModal(false)}
+ addQueryGroupItem={(querygroup, condition) => {
+ const newquery = props.addQueryGroupItem(
+ querygroup,
+ condition,
+ );
+ setModalGroup(newquery);
+ }}
+ categories={props.categories}
+ onCategoryChange={props.onCategoryChange}
+ displayedFields={props.displayedFields}
+
+ module={props.module}
+ category={props.category}
+ />)
+ : '';
+ const csvModalHTML = csvModal ? (
+ setCSVModal(false)}
+ />
+ ) : '';
+
+ const matchCount = queryMatches === null
+ ?
// So the header doesn't jump around
+ : Query matches {queryMatches} candidates
;
+ return (
+ {modal}
+ {csvModalHTML}
+
+
Current Query
+ {matchCount}
+
+
+ Note that only candidates which you have permission to
+ access in LORIS are included in results. Number of
+ results may vary from other users running the same query.
+
+ {displayquery}
+
+
+ {description}
+
+
+ {props.mapCategoryName(props.module, props.category)}
+ ({props.mapModuleName(props.module)})
+
+
} e - Callback for when hovering over the delete icon
+ * @returns {void}
+ */
+ onClick: (e: React.MouseEvent) => {
+ e.preventDefault();
+ setActiveTab('Info');
+ },
+ },
+ ];
+ if (activeTab == 'DefineFields'
+ || activeTab == 'DefineFilters'
+ || activeTab == 'ViewData') {
+ breadcrumbs.push({
+ text: 'Define Fields',
+ /**
+ * OnClick handler for the define fields breadcrumb
+ *
+ * @param {React.MouseEventHandler} e - Callback for when hovering over the delete icon
+ * @returns {void}
+ */
+ onClick: (e) => {
+ e.preventDefault();
+ setActiveTab('DefineFields');
+ },
+ });
+ }
+ if (activeTab == 'DefineFilters'
+ || activeTab == 'ViewData') {
+ breadcrumbs.push({
+ text: 'Define Filters',
+ /**
+ * OnClick handler for the define filters breadcrumb
+ *
+ * @param {React.MouseEventHandler} e - Callback for when hovering over the delete icon
+ * @returns {void}
+ */
+ onClick: (e) => {
+ e.preventDefault();
+ setActiveTab('DefineFilters');
+ },
+ });
+ }
+
+ if (activeTab == 'ViewData') {
+ breadcrumbs.push({
+ text: 'View Data',
+ /**
+ * OnClick handler for the View Data breadcrumb
+ *
+ * @param {React.MouseEventHandler} e - Callback for when hovering over the delete icon
+ * @returns {void}
+ */
+ onClick: (e) => {
+ e.preventDefault();
+ setActiveTab('View Data');
+ },
+ });
+ }
+
+ if (breadcrumbsRoot) {
+ breadcrumbsRoot.render(
+ ,
+];
+
+/**
+ * React hook to use a data dictionary loaded from a LORIS server.
+ *
+ * @returns {array} - The retrieved dictionary and a callback to populate a new module into it
+ */
+function useDataDictionary(): DataDictionaryReturnType {
+ const [fulldictionary, setDictionary] = useState({});
+ // XXX: This should be {[module: string]: Promise} but then
+ // typescript says the key is always defined when we try and check if
+ // it's set, need to figure out the correct way to do that, for now just use any
+ const [pendingModules, setPendingModules] = useState({});
+
+ /**
+ * Fetch a module's dictionary and cache it into fulldictionary.
+ *
+ * @param {string} module - The module name to fetch the dictionary for
+ * @returns {Promise} - A promise that resolves to module's dictionary
+ */
+ const fetchModuleDictionary = (module: string): Promise => {
+ if (fulldictionary[module]) {
+ const promise = Promise.resolve(fulldictionary[module]);
+ return promise;
+ }
+ if (pendingModules[module]) {
+ return pendingModules[module];
+ }
+ const promise: Promise = new Promise(
+ (resolve, reject) => {
+ fetch('/dictionary/module/' + module,
+ {credentials: 'same-origin'}
+ ).then((resp) => {
+ if (!resp.ok) {
+ throw new Error('Invalid response');
+ }
+ return resp.json();
+ }).then((result) => {
+ fulldictionary[module] = result;
+ setDictionary({...fulldictionary});
+
+ resolve(result);
+ }).catch( (error) => {
+ console.error(error);
+ reject(error);
+ });
+ }
+ );
+ const newUsedModules = pendingModules;
+ newUsedModules[module] = promise;
+ setPendingModules(newUsedModules);
+ return promise;
+ };
+ return [fulldictionary, fetchModuleDictionary];
+}
+
+export {useDataDictionary, useCategories};
diff --git a/modules/dataquery/jsx/hooks/usequery.tsx b/modules/dataquery/jsx/hooks/usequery.tsx
new file mode 100644
index 00000000000..20a84bbe2c8
--- /dev/null
+++ b/modules/dataquery/jsx/hooks/usequery.tsx
@@ -0,0 +1,328 @@
+import {useState} from 'react';
+import {QueryGroup, QueryTerm} from '../querydef';
+import {APIQueryField} from '../types';
+
+type FieldActions = {
+ clear: () => void,
+ remove: (module: string, category: string, field: string) => void,
+ modifyVisits: (
+ module: string,
+ category: string,
+ field: string,
+ visits: string[]
+ ) => void,
+ removeMany: (removeelements: APIQueryField[]) => void,
+ addRemoveField: (
+ module: string,
+ category: string,
+ field: string,
+ visits: string[]
+ ) => void,
+ addMany: (elements: APIQueryField[]) => void,
+ setFields: (fields: APIQueryField[]) => void,
+}
+
+type useQueryReturnType = [
+ QueryGroup,
+ (fields: APIQueryField[], filters: QueryGroup|null) => void,
+ APIQueryField[],
+ FieldActions,
+ {
+ addQueryGroupItem: (
+ querygroup: QueryGroup,
+ condition: QueryTerm
+ ) => QueryGroup,
+ removeQueryGroupItem: (
+ querygroup: QueryGroup,
+ idx: number
+ ) => QueryGroup,
+ addNewQueryGroup: (parentgroup: QueryGroup) => void,
+ setCriteria: (newcriteria: QueryGroup) => void,
+ },
+];
+
+/**
+ * React hook to manage loading of queries.
+ *
+ * @returns {useQueryReturnType} - A veritable plethora of actions and values
+ */
+function useQuery(): useQueryReturnType {
+ const [fields, setFields] = useState([]);
+ const [criteria, setCriteria] = useState(new QueryGroup('and'));
+
+ /**
+ * Add a term to the current QueryGroup
+ *
+ * @param {QueryGroup} querygroup - The group to add the term to
+ * @param {QueryTerm} condition - The term to add to the group
+ * @returns {QueryGroup} - The new QueryGroup
+ */
+ const addQueryGroupItem = (
+ querygroup: QueryGroup,
+ condition: QueryTerm,
+ ): QueryGroup => {
+ // clone the top level query to force
+ // a new rendering
+ const newquery = new QueryGroup(criteria.operator);
+
+ // Add to this level of the tree
+ querygroup.addTerm(condition);
+
+
+ newquery.group = [...criteria.group];
+ setCriteria(newquery);
+ return newquery;
+ };
+
+ /**
+ * Remove a given index from the current QueryGroup and return
+ * a new group.
+ *
+ * @param {QueryGroup} querygroup - The querygroup to remove an item from
+ * @param {number} idx - The index to remove
+ * @returns {QueryGroup} - the new QueryGroup
+ */
+ const removeQueryGroupItem = (
+ querygroup: QueryGroup,
+ idx: number
+ ): QueryGroup => {
+ // Remove from this level of the tree
+ querygroup.removeTerm(idx);
+
+ // clone the top level query to force
+ // a new rendering
+ const newquery = new QueryGroup(criteria.operator);
+
+ newquery.group = [...criteria.group];
+ setCriteria(newquery);
+
+ return newquery;
+ };
+
+ /**
+ * Add a new, empty query group to the end of a QueryGroup
+ *
+ * @param {QueryGroup} parentgroup - the group to get a new querygroup child
+ * @returns {void}
+ */
+ const addNewQueryGroup = (parentgroup: QueryGroup): void => {
+ // Add to this level of the tree
+ parentgroup.addGroup();
+
+ // clone the top level query to force
+ // a new rendering
+ const newquery = new QueryGroup(criteria.operator);
+ newquery.group = [...criteria.group];
+
+ setCriteria(newquery);
+ };
+
+ /**
+ * Load a new query as the currently managed query by this hook.
+ *
+ * @param {APIQueryField[]} fields - The fields of the new query
+ * @param {QueryGroup} filters - The filters of the new query.
+ * @returns {void}
+ */
+ const loadQuery = (
+ fields: APIQueryField[],
+ filters: QueryGroup|null
+ ): void => {
+ setFields(fields);
+ if (!filters) {
+ setCriteria(new QueryGroup('and'));
+ } else {
+ setCriteria(filters);
+ }
+ };
+ const fieldActions: FieldActions = {
+ /**
+ * Clear all fields from this query
+ *
+ * @returns {void}
+ */
+ clear: function() {
+ setFields([]);
+ },
+ /**
+ * Remove a field from this query
+ *
+ * @param {string} module - The module of the field to remove
+ * @param {string} category - The category of the field to remove
+ * @param {string} field - The field to remove
+ * @returns {void}
+ */
+ remove: (
+ module: string,
+ category: string,
+ field: string,
+ ): void => {
+ /**
+ * Returns true if an element in fields is equal to this field
+ *
+ * @param {APIQueryField} element - The element to compare
+ * @returns {boolean} - true if equal
+ */
+ const equalField = (element: APIQueryField): boolean => {
+ return (element.module == module
+ && element.category === category
+ && element.field == field);
+ };
+ const newfields = fields.filter((el) => !(equalField(el)));
+ setFields(newfields);
+ },
+ /**
+ * Modify the visits for a selected field
+ *
+ * @param {string} module - The module of the field to modify
+ * @param {string} category - The category of the field to modify
+ * @param {string} field - The field to modify
+ * @param {string[]} visits - The new visits for the field
+ * @returns {void}
+ */
+ modifyVisits: (
+ module: string,
+ category: string,
+ field: string,
+ visits: string[]
+ ) => {
+ const newfields: APIQueryField[] = [...fields];
+
+ /**
+ * Returns true if an element in fields is equal to this field
+ *
+ * @param {APIQueryField} element - The element to compare
+ * @returns {boolean} - true if equal
+ */
+ const equalField = (element: APIQueryField) => {
+ return (element.module == module
+ && element.category === category
+ && element.field == field);
+ };
+
+ for (let i = 0; i < newfields.length; i++) {
+ if (equalField(newfields[i])) {
+ newfields[i].visits = visits;
+ setFields(newfields);
+ return;
+ }
+ }
+ },
+ /**
+ * Toggle whether a field is present by adding it if missing or removing it if
+ * present.
+ *
+ * @param {string} module - the module for the field
+ * @param {string} category - the category for the field
+ * @param {string} field - the field name
+ * @param {string[]} visits - the list of visits to add if adding
+ */
+ addRemoveField: (
+ module: string,
+ category: string,
+ field: string,
+ visits: string[]
+ ): void => {
+ const newFieldObj: APIQueryField = {
+ module: module,
+ category: category,
+ field: field,
+ visits: visits,
+ };
+ /**
+ * Returns true if an element in fields is equal to this field
+ *
+ * @param {APIQueryField} element - The element to compare
+ * @returns {boolean} - true if equal
+ */
+ const equalField = (element: APIQueryField) => {
+ return (element.module == module
+ && element.category === category
+ && element.field == field);
+ };
+ if (fields.some(equalField)) {
+ // Remove
+ const newfields: APIQueryField[] = fields.filter(
+ (el) => !(equalField(el))
+ );
+ setFields(newfields);
+ } else {
+ // Add
+ const newfields: APIQueryField[] = [...fields, newFieldObj];
+ setFields(newfields);
+ }
+ },
+ /**
+ * Remove multiple elements from the current query
+ *
+ * @param {APIQueryField[]} removeelements - The elements to remove
+ * @returns {void}
+ */
+ removeMany: (removeelements: APIQueryField[]): void => {
+ /**
+ * Returns true if el1 is equal to el2
+ *
+ * @param {APIQueryField} el1 - The first element to compare
+ * @param {APIQueryField} el2 - The second element to compare
+ * @returns {boolean} - true if equal
+ */
+ const equalField = (
+ el1: APIQueryField,
+ el2: APIQueryField
+ ): boolean => {
+ return (el1.module == el2.module
+ && el1.category === el2.category
+ && el1.field == el2.field);
+ };
+ const newfields = fields.filter((el) => {
+ if (removeelements.some((rel) => equalField(rel, el))) {
+ return false;
+ }
+ return true;
+ });
+ setFields(newfields);
+ },
+ /**
+ * Adds many fields to the selected query
+ *
+ * @param {APIQueryField[]} elements - the fields to add
+ * @returns {void}
+ */
+ addMany: (elements: APIQueryField[]): void => {
+ let newfields = fields;
+ for (let i = 0; i < elements.length; i++) {
+ const newFieldObj = elements[i];
+ /**
+ * Returns true if an element in fields is equal to this field
+ *
+ * @param {APIQueryField} element - The element to compare
+ * @returns {boolean} - true if equal
+ */
+ const equalField = (element: APIQueryField) => {
+ return (element.module == newFieldObj.module
+ && element.category === newFieldObj.category
+ && element.field == newFieldObj.field);
+ };
+ if (!newfields.some((el: APIQueryField) => equalField(el))) {
+ newfields = [...newfields, newFieldObj];
+ }
+ }
+ setFields(newfields);
+ },
+ setFields: setFields,
+ };
+ return [
+ criteria,
+ loadQuery,
+ fields,
+ fieldActions,
+ {
+ addQueryGroupItem: addQueryGroupItem,
+ removeQueryGroupItem: removeQueryGroupItem,
+ addNewQueryGroup: addNewQueryGroup,
+ setCriteria: setCriteria,
+ },
+ ];
+}
+
+export default useQuery;
diff --git a/modules/dataquery/jsx/hooks/usesharedqueries.tsx b/modules/dataquery/jsx/hooks/usesharedqueries.tsx
new file mode 100644
index 00000000000..2ac2e1cba9e
--- /dev/null
+++ b/modules/dataquery/jsx/hooks/usesharedqueries.tsx
@@ -0,0 +1,416 @@
+import {useState, useEffect} from 'react';
+import swal from 'sweetalert2';
+import {QueryTerm, QueryGroup} from '../querydef';
+import {FlattenedField, FlattenedQuery, VisitOption} from '../types';
+import {
+ APIQuery,
+ APIQueryRun,
+ APIQueryField,
+ APIQueryGroupField,
+ APIQueryCriteriaGroup,
+} from '../types';
+
+type QueryActionType = [
+ (queryID: number|null) => void,
+ (action: string) => void,
+];
+
+interface FlattenedQueryMap {
+ [queryId: number]: FlattenedQuery
+}
+/**
+ * React hook for triggering toggling of starred queries
+ * on a LORIS server.
+ *
+ * @param {function} onCompleteCallback - an action to perform after pinning
+ * @returns {array} - QueryAction functions
+ */
+function useStarredQueries(onCompleteCallback: () => void): QueryActionType {
+ const [starQueryID, setStarQueryID] = useState(null);
+ const [starAction, setStarAction] = useState('true');
+ useEffect(() => {
+ if (starQueryID == null) {
+ return;
+ }
+
+ fetch(
+ '/dataquery/queries/' + starQueryID + '?star=' + starAction,
+ {
+ method: 'PATCH',
+ credentials: 'same-origin',
+ },
+ ).then( () => {
+ setStarQueryID(null);
+ if (onCompleteCallback) {
+ onCompleteCallback();
+ }
+ }
+ );
+ }, [starQueryID, starAction]);
+ return [setStarQueryID, setStarAction];
+}
+
+/**
+ * React hook for triggering toggling of shared queries
+ * on a LORIS server.
+ *
+ * @param {function} onCompleteCallback - an action to perform after pinning
+ * @returns {array} - QueryAction functions
+ */
+function useShareQueries(onCompleteCallback: () => void): QueryActionType {
+ const [shareQueryID, setShareQueryID] = useState(null);
+ const [shareAction, setShareAction] = useState('true');
+ useEffect(() => {
+ if (shareQueryID == null) {
+ return;
+ }
+
+ fetch(
+ '/dataquery/queries/' + shareQueryID + '?share=' + shareAction,
+ {
+ method: 'PATCH',
+ credentials: 'same-origin',
+ },
+ ).then( () => {
+ setShareQueryID(null);
+ if (onCompleteCallback) {
+ onCompleteCallback();
+ }
+ }
+ );
+ }, [shareQueryID, shareAction]);
+ return [setShareQueryID, setShareAction];
+}
+
+type SharedQueriesType = [
+ {
+ recent: FlattenedQuery[],
+ shared: FlattenedQuery[],
+ top: FlattenedQuery[],
+ },
+ () => void,
+ {
+ star: (queryID: number) => void,
+ unstar: (queryID: number) => void,
+ share: (queryID: number) => void,
+ unshare: (queryID: number) => void,
+ }
+];
+/**
+ * React hook to load recent and shared queries from the server
+ *
+ * @param {string} username - The username accessing the module
+ * @returns {array} - [{queries}, reload function(), {queryActions}]
+ */
+function useSharedQueries(username: string): SharedQueriesType {
+ const [recentQueries, setRecentQueries] = useState([]);
+ const [sharedQueries, setSharedQueries] = useState([]);
+ const [topQueries, setTopQueries] = useState([]);
+
+
+ const [loadQueriesForce, setLoadQueriesForce] = useState(0);
+ /**
+ * Force the client to reload queries
+ *
+ * @returns {void}
+ */
+ const reloadQueries = () => setLoadQueriesForce(loadQueriesForce+1);
+ const [setStarQueryID, setStarAction] = useStarredQueries(reloadQueries);
+ const [setShareQueryID, setShareAction] = useShareQueries(reloadQueries);
+
+ useEffect(() => {
+ fetch('/dataquery/queries', {credentials: 'same-origin'})
+ .then((resp) => {
+ if (!resp.ok) {
+ throw new Error('Invalid response');
+ }
+ return resp.json();
+ }).then((result) => {
+ const convertedshared: FlattenedQuery[] = [];
+ const convertedtop: FlattenedQuery[] = [];
+ const allQueries: FlattenedQueryMap = {};
+ if (result.queries) {
+ result.queries.forEach( (query: APIQuery) => {
+ const flattened: FlattenedQuery = query2flattened(query);
+ allQueries[query.QueryID] = flattened;
+
+ if (query.Pinned == true) {
+ convertedtop.push(flattened);
+ }
+ if (query.Public == true) {
+ // If we're the only person who shared it, don't show it in our
+ // shared queries.
+ // If other people shared it too, then remove ourselves from the
+ // "shared by" list in the Shared Queries panel.
+ if (query.SharedBy.length == 1
+ && query.SharedBy[0] == username
+ ) {
+ // don't include
+ } else {
+ // filter
+ query.SharedBy = query.SharedBy.filter(
+ (item: string) => {
+ return item != username;
+ }
+ );
+ // Make a new copy to avoid mutating the version used by other
+ // tabs
+ const flattened2: FlattenedQuery
+ = query2flattened(query);
+ convertedshared.push(flattened2);
+ }
+ }
+ });
+ }
+ setSharedQueries(convertedshared);
+ setTopQueries(convertedtop);
+ return allQueries;
+ }).then((allQueries) => {
+ fetch('/dataquery/queries/runs', {credentials: 'same-origin'})
+ .then((resp) => {
+ if (!resp.ok) {
+ throw new Error('Invalid response');
+ }
+ return resp.json();
+ }).then((result) => {
+ if (result.queryruns) {
+ const convertedrecent: FlattenedQuery[] = [];
+ result.queryruns.forEach( (queryRun: APIQueryRun) => {
+ const queryObj: FlattenedQuery
+ = allQueries[queryRun.QueryID];
+ if (!queryObj) {
+ console.error(
+ 'Could not get ',
+ queryRun.QueryID,
+ ' from ',
+ allQueries);
+ return;
+ }
+ convertedrecent.push({
+ RunTime: queryRun.RunTime,
+ ...queryObj,
+ });
+ });
+ setRecentQueries(convertedrecent);
+ }
+ });
+ }).catch( (error) => {
+ console.error(error);
+ });
+ }, [loadQueriesForce]);
+
+ return [
+ {
+ recent: recentQueries,
+ shared: sharedQueries,
+ top: topQueries,
+ },
+ reloadQueries,
+ {
+ /**
+ * Stars a query on the server
+ *
+ * @param {number} queryID - The queryID to star
+ * @returns {void}
+ */
+ star: (queryID: number) => {
+ setShareQueryID(null);
+ setStarAction('true');
+ setStarQueryID(queryID);
+ },
+ /**
+ * Unstars a query on the server
+ *
+ * @param {number} queryID - The queryID to unstar
+ * @returns {void}
+ */
+ unstar: (queryID: number) => {
+ setShareQueryID(null);
+ setStarAction('false');
+ setStarQueryID(queryID);
+ },
+ /**
+ * Shares a query on the server
+ *
+ * @param {number} queryID - The queryID to share
+ * @returns {void}
+ */
+ share: (queryID: number) => {
+ setStarQueryID(null);
+ setShareAction('true');
+ setShareQueryID(queryID);
+ },
+ /**
+ * Unshares a query on the server
+ *
+ * @param {number} queryID - The queryID to unshare
+ * @returns {void}
+ */
+ unshare: (queryID: number) => {
+ setStarQueryID(null);
+ setShareAction('false');
+ setShareQueryID(queryID);
+ },
+ },
+ ];
+}
+
+/**
+ * Check if a term from a sub-term from query group is an APIQueryGroupField
+ * or an APIQueryCriteriaGroup
+ *
+ * @param {APIQueryGroupField|APIQueryCriteriaGroup} term - The term to check
+ * @returns {boolean} - true if the term is an APIQueryCriteriaGroup
+ */
+function isAPIQueryCriteriaGroup(
+ term: APIQueryGroupField|APIQueryCriteriaGroup
+): term is APIQueryCriteriaGroup {
+ return (term as APIQueryCriteriaGroup).operator !== undefined;
+}
+/**
+ * Takes a saved query from a JSON object and marshal
+ * it into a QueryGroup object
+ *
+ * @param {object} query - the json object
+ * @returns {QueryGroup} - The object converted into a QueryGroup
+ */
+function unserializeSavedQuery(query: APIQueryCriteriaGroup): QueryGroup {
+ if (!query.operator) {
+ throw new Error('Invalid query tree');
+ }
+ const root = new QueryGroup(query.operator);
+ query.group.forEach((val) => {
+ if (isAPIQueryCriteriaGroup(val)) {
+ const childTree: QueryGroup = unserializeSavedQuery(val);
+ root.group.push(childTree);
+ return;
+ } else {
+ if (!val.module
+ || !val.category
+ || !val.fieldname
+ || !val.op) {
+ console.error('Invalid criteria', val);
+ return;
+ }
+
+ const term = val as APIQueryGroupField;
+
+ root.addTerm(
+ new QueryTerm(
+ term.module,
+ term.category,
+ term.fieldname,
+ term.op,
+ term.value,
+ term.visits,
+ )
+ );
+ }
+ });
+ return root;
+}
+
+/**
+ * React hook to load a query if one was passed in the URL.
+ *
+ * @param {function} loadQuery - function to load the query into React state
+ */
+function useLoadQueryFromURL(
+ loadQuery: (fields: APIQueryField[], filters: QueryGroup|null) => void
+) {
+ // Load query if queryID was passed
+ useEffect(() => {
+ const params = new URLSearchParams(window.location.search);
+ const queryID = params.get('queryID');
+ if (!queryID) {
+ return;
+ }
+ fetch(
+ '/dataquery/queries/' + queryID,
+ {
+ method: 'GET',
+ credentials: 'same-origin',
+ },
+ ).then((resp) => {
+ if (!resp.ok) {
+ throw new Error('Invalid response');
+ }
+ return resp.json();
+ }).then((result) => {
+ if (result.Query.criteria) {
+ result.Query.criteria = unserializeSavedQuery(
+ result.Query.criteria
+ );
+ }
+ loadQuery(result.Query.fields, result.Query.criteria);
+ swal.fire({
+ type: 'success',
+ text: 'Loaded query',
+ });
+ }).catch( (error) => {
+ swal.fire({
+ type: 'error',
+ text: 'Could not load query',
+ });
+ console.error(error);
+ });
+ }, []);
+}
+
+
+/**
+ * Convert a query from the format returned by the API to the format
+ * used by the displayed query list on the main page.
+ *
+ * @param {APIQuery} query - The query to convert
+ * @returns {FlattenedQuery} - The query converted to the new type
+ */
+function query2flattened(query: APIQuery): FlattenedQuery {
+ const rv: FlattenedQuery = {
+ QueryID: query.QueryID,
+ fields: query.Query.fields.map(
+ (field: APIQueryField): FlattenedField => {
+ if (!field.visits) {
+ return {
+ module: field.module,
+ category: field.category,
+ field: field.field,
+ visits: null,
+ };
+ }
+ return {
+ module: field.module,
+ category: field.category,
+ field: field.field,
+ visits: field.visits.map( (vl: string): VisitOption => {
+ return {label: vl, value: vl};
+ }),
+ };
+ }),
+ };
+
+ if (query.Query.criteria) {
+ rv.criteria = unserializeSavedQuery(query.Query.criteria);
+ }
+ if (query.Name) {
+ rv.Name = query.Name;
+ }
+ if (query.AdminName) {
+ rv.AdminName = query.AdminName;
+ }
+ if (query.Public) {
+ rv.Public = query.Public;
+ }
+ if (query.Starred) {
+ rv.Starred = query.Starred;
+ }
+ if (query.SharedBy) {
+ rv.SharedBy = query.SharedBy;
+ }
+ return rv;
+}
+
+export {
+ useSharedQueries,
+ useLoadQueryFromURL,
+};
diff --git a/modules/dataquery/jsx/hooks/usevisits.tsx b/modules/dataquery/jsx/hooks/usevisits.tsx
new file mode 100644
index 00000000000..1fbc4d4f527
--- /dev/null
+++ b/modules/dataquery/jsx/hooks/usevisits.tsx
@@ -0,0 +1,51 @@
+import {useState, useEffect} from 'react';
+import {VisitOption} from '../types';
+
+type UseVisitsReturn = {
+ // All visits that exist on the server
+ all: string[],
+ // The subset of all that were selected by the user as defaults
+ default_: string[],
+ // Callback to set the defaults
+ modifyDefault: (values: readonly VisitOption[]) => void,
+};
+/**
+ * React hook to load a list of valid visits from the server
+ * and manage which should be selected by default
+ *
+ * @returns {UseVisitsReturn} - list of default and all visits
+ */
+function useVisits(): UseVisitsReturn {
+ const [allVisits, setAllVisits] = useState([]);
+ const [defaultVisits, setDefaultVisits] = useState([]);
+ useEffect(() => {
+ fetch('/dataquery/visitlist', {credentials: 'same-origin'})
+ .then((resp) => {
+ if (!resp.ok) {
+ throw new Error('Invalid response');
+ }
+ return resp.json();
+ }).then((result) => {
+ setDefaultVisits(result.Visits);
+ setAllVisits(result.Visits);
+ }
+ ).catch( (error) => {
+ console.error(error);
+ });
+ }, []);
+ return {
+ all: allVisits,
+ default_: defaultVisits,
+ /**
+ * Modify the default visits to use
+ *
+ * @param {VisitOption[]} values - The selected options from ReactSelect
+ * @returns {void}
+ */
+ modifyDefault: (values: readonly VisitOption[]) => {
+ setDefaultVisits(values.map((el) => el.value));
+ },
+ };
+}
+
+export default useVisits;
diff --git a/modules/dataquery/jsx/index.tsx b/modules/dataquery/jsx/index.tsx
new file mode 100644
index 00000000000..f234e44eaa1
--- /dev/null
+++ b/modules/dataquery/jsx/index.tsx
@@ -0,0 +1,261 @@
+import {createRoot} from 'react-dom/client';
+
+import {useState} from 'react';
+
+import Welcome from './welcome';
+import DefineFilters from './definefilters';
+import DefineFields from './definefields';
+import ViewData from './viewdata';
+
+import NextSteps from './nextsteps';
+
+import useBreadcrumbs from './hooks/usebreadcrumbs';
+import useVisits from './hooks/usevisits';
+import useQuery from './hooks/usequery';
+import {useSharedQueries, useLoadQueryFromURL} from './hooks/usesharedqueries';
+
+import {useDataDictionary, useCategories} from './hooks/usedatadictionary';
+import {ModuleDictionary, DictionaryCategory} from './types';
+
+type ActiveCategoryType = {
+ module: string,
+ category: string,
+ currentDictionary: DictionaryCategory,
+ changeCategory: (module: string, category: string) => void,
+};
+
+/**
+ * React hook to manage the selection of an active module and category
+ *
+ * @param {function} retrieveModuleDictionary - a function that will return a
+ promise to retrieve the module's dictionary
+ * @returns {ActiveCategoryType} - an object of the current dictionary and action to change it
+ */
+function useActiveCategory(
+ retrieveModuleDictionary: (module: string) => Promise
+): ActiveCategoryType {
+ const [module, setModule] = useState('');
+ const [category, setCategory] = useState('');
+ const [moduleDict, setModuleDict] = useState({});
+ /**
+ * Change the current category, retrieving the module dictionary from
+ * the server if necessary.
+ *
+ * @param {string} module - the module to become active
+ * @param {string} category - the category to become active
+ * @returns {void}
+ */
+ const changeCategory = (module: string, category: string) => {
+ retrieveModuleDictionary(module).then( (dict) => {
+ setModule(module);
+ setCategory(category);
+ setModuleDict(dict[category]);
+ });
+ };
+ return {
+ module: module,
+ category: category,
+ currentDictionary: moduleDict,
+ changeCategory: changeCategory,
+ };
+}
+
+/**
+ * Return the main page for the DQT
+ *
+ * @param {object} props - React props
+ * @param {boolean} props.queryAdmin - true if the current user has permission to administer study queries
+ * @param {string} props.username - The user accessing the app
+ * @returns {React.ReactElement} - The main page of the app
+ */
+function DataQueryApp(props: {
+ queryAdmin: boolean,
+ username: string
+}) {
+ const [activeTab, setActiveTab] = useState('Info');
+ useBreadcrumbs(activeTab, setActiveTab);
+
+ const [queries, reloadQueries, queryActions]
+ = useSharedQueries(props.username);
+
+ const visits = useVisits();
+
+ const [
+ fulldictionary,
+ fetchModuleDictionary,
+ ] = useDataDictionary();
+ const categories = useCategories();
+
+ const activeCategory = useActiveCategory(
+ fetchModuleDictionary,
+ );
+
+ const [query,
+ loadQuery,
+ selectedFields,
+ fieldActions,
+ criteriaActions,
+ ] = useQuery();
+
+ useLoadQueryFromURL(loadQuery);
+
+ if (!categories) {
+ return Loading...
;
+ }
+ let content;
+
+ /**
+ * Maps a module name from the backend name to a human friendly name.
+ *
+ * @param {string} name - The module name
+ * @returns {string} - the human friendly name
+ */
+ const mapModuleName = (name: string): string => {
+ if (categories && categories.modules) {
+ return categories.modules[name];
+ }
+ return name;
+ };
+ /**
+ * Maps a category name from the backend name to a human friendly name.
+ *
+ * @param {string} module - The module name
+ * @param {string} category - The category name within the module
+ * @returns {string} - the human friendly name
+ */
+ const mapCategoryName = (module: string, category: string): string => {
+ if (categories && categories.categories
+ && categories.categories[module]) {
+ return categories.categories[module][category];
+ }
+ return category;
+ };
+
+ /**
+ * Function to retrieve a module's data dictionary from the server.
+ *
+ * @param {string} module - the module whole fields should be retrieved
+ * @returns {void}
+ */
+ const getModuleFields = (module: string): void => {
+ fetchModuleDictionary(module);
+ };
+
+ switch (activeTab) {
+ case 'Info':
+ content = setActiveTab('DefineFields')}
+
+ queryAdmin={props.queryAdmin}
+ />;
+ break;
+ case 'DefineFields':
+ content = Invalid tab
;
+ }
+ return
+
{content}
+
setActiveTab(page)
+ }/>
+ props.changePage('DefineFields')}
+ />);
+ steps.push( props.changePage('DefineFilters')}
+ />);
+ steps.push( props.changePage('ViewData')}
+ />);
+ } else {
+ // No query loaded, must define fields
+ steps.push( props.changePage('DefineFields')}
+ />);
+ }
+ break;
+ case 'DefineFields':
+ steps.push( props.changePage('DefineFilters')}
+ />);
+ if (canRun) {
+ steps.push( props.changePage('ViewData')}
+ />);
+ }
+ break;
+ case 'DefineFilters':
+ if (canRun) {
+ steps.push( props.changePage('ViewData')}
+ />);
+ }
+ steps.push( props.changePage('DefineFields')}
+ />);
+ break;
+ case 'ViewData':
+ steps.push( props.changePage('DefineFields')}
+ />);
+ steps.push( props.changePage('DefineFilters')}
+ />);
+ break;
+ }
+
+ const expandIcon = setExpanded(!expanded)}
+ > ;
+ const style = expanded ? {
+ background: 'white',
+ padding: '0.5em',
+ paddingLeft: '2em',
+ } : {
+ display: 'none',
+ visibility: 'hidden' as const,
+ padding: '0.5em',
+ paddingLeft: '2em',
+ };
+
+ return (
+
+
+
+
Next Steps
+
+ {steps}
+
+
+
{expandIcon}
+
+
} props.onDeleteHover - Callback for when hovering over the delete icon
+ * @param {React.MouseEventHandler} props.onDeleteLeave - Callback for when no longer hovering over the delete icon
+ * @param {React.MouseEventHandler} props.deleteItem - Callback for when delete is clicked.
+ * @param {QueryGroup} props.activeGroup - The active group that a modal is managing
+ * @param {function} props.newGroup - Callback to create a new group at the end of props.items
+ * @param {function} props.newItem - Callback to create a new item (term) at the end of props.items
+ * @param {function} props.removeQueryGroupItem - Callback that should remove item i from props.items and return a new QueryGroup
+ * @param {function} props.setModalGroup - Callback that should set the group that a modal (managed by the parent) is managing
+ * @param {object} props.mapModuleName - Function to map the backend module name to a user friendly name
+ * @param {object} props.mapCategoryName - Function to map the backend category name to a user friendly name
+ * @param {object} props.fulldictionary - The dictionary of all modules that have been loaded
+ * @returns {React.ReactElement} - the react element
+ */
+function QueryTree(props: {
+ buttonStyle?: React.CSSProperties,
+ buttonGroupStyle?: React.CSSProperties,
+ backgroundColour?: string,
+ items: QueryGroup,
+ subtree?: boolean,
+ onDeleteHover?: React.MouseEventHandler,
+ onDeleteLeave?: React.MouseEventHandler,
+ deleteItem?: React.MouseEventHandler,
+ activeGroup?: QueryGroup,
+ newGroup?: (items: QueryGroup) => void,
+ newItem?: (items: QueryGroup) => void,
+ removeQueryGroupItem?: (items: QueryGroup, i: number) => QueryGroup,
+ setModalGroup?: (newgroup: QueryGroup) => void,
+ fulldictionary: FullDictionary,
+ mapModuleName: (module: string) => string,
+ mapCategoryName: (module: string, category: string) => string,
+}) {
+ const [deleteItemIndex, setDeleteItemIndex] = useState(null);
+
+ /**
+ * Render a single term of the QueryTree group.
+ *
+ * @param {QueryGroup|QueryTerm} item - The item to render from a group
+ * @param {number} i - the index being rendered
+ * @returns {React.ReactElement} - The react element
+ */
+ const renderitem =
+ (item: QueryGroup|QueryTerm, i: number): React.ReactElement => {
+ const operator = i != props.items.group.length-1 ?
+ props.items.operator : '';
+ const style: React.CSSProperties = {
+ display: 'flex' as const,
+ flexDirection: 'column' as const,
+ width: '100%',
+ };
+ const operatorStyle = {
+ alignSelf: 'center',
+ fontWeight: 'bold',
+ };
+ if (deleteItemIndex == i) {
+ style.textDecoration = 'line-through';
+ }
+
+ /**
+ * Deletes an item from the group and call the removeQueryGroupItem
+ * callback.
+ *
+ * @returns {void}
+ */
+ const deleteItem = () => {
+ if (props.removeQueryGroupItem) {
+ const newquery = props.removeQueryGroupItem(
+ props.items,
+ i,
+ );
+ if (props.setModalGroup) {
+ props.setModalGroup(newquery);
+ }
+ }
+ };
+ if (item instanceof QueryTerm) {
+ const deleteIcon = props.removeQueryGroupItem ? (
+
+ setDeleteItemIndex(i)}
+ onMouseLeave={() => setDeleteItemIndex(null)}
+ style={{cursor: 'pointer'}}
+ />
+
+ ) : '';
+
+ return
+
+
+ {operator}
+ ;
+ } else if (item instanceof QueryGroup) {
+ const buttonStyle: React.CSSProperties = deleteItemIndex == i ? {
+ textDecoration: 'line-through',
+ } : {};
+
+ return (
+
+ setDeleteItemIndex(i)}
+ onDeleteLeave={
+ () => setDeleteItemIndex(null)
+ }
+ subtree={true}
+ fulldictionary={props.fulldictionary}
+
+ />
+
+ {operator}
+ );
+ } else {
+ console.error('Invalid tree');
+ }
+ return {i} ;
+ };
+
+ const terms: React.ReactElement[] = props.items.group.map(renderitem);
+ let warning;
+ switch (props.items.group.length) {
+ case 0:
+ warning =
+
+
+ Group does not have any items.
+
+
+
+
+ Group only has 1 item. A group with only 1 item is equivalent
+ to not having the group.
+
+
+
+ );
+ }
+ const marginStyle: React.CSSProperties = props.subtree === true ? {} : {
+ margin: 0,
+ padding: 0,
+ };
+ return (
+
+
+ {terms}
+
+
+
+
+
+
+ {warning}
+ {deleteGroupHTML}
+
+
+
{cellValue(props.data)} ;
+}
+
+/**
+ * Display a progress bar.
+ *
+ * @param {object} props - React props
+ * @param {string} props.type - the type of progress being displayed
+ * @param {number} props.value - The current value
+ * @param {number} props.max - The maximum value
+ * @returns {React.ReactElement} - The ProgressBar element
+ */
+function ProgressBar(props: {type: string, value: number, max: number}) {
+ switch (props.type) {
+ case 'loading':
+ if (props.value == 0) {
+ return Query not yet run ;
+ }
+ return (
+
Loading data:
+
+ {props.value} of {props.max} candidates
+
+
+
Organizing headers:
+
+ {props.value} of {props.max} columns
+
+
+
Organizing data:
+
+ {props.value} of {props.max} columns
+
+
Invalid progress type: {props.type} ;
+}
+
+type RunQueryType = {
+ loading: boolean,
+ data: string[][],
+ totalcount: number,
+};
+/**
+ * React hook to run a given query.
+ *
+ * @param {APIQueryField[]} fields - The fields selected
+ * @param {QueryGroup} filters - The filters selected
+ * @param {function} onRun - Callback to call when the query is run
+ * @returns {RunQueryType} - a description of the status of the loading and the loaded values
+ */
+function useRunQuery(
+ fields: APIQueryField[],
+ filters: QueryGroup,
+ onRun: () => void
+): RunQueryType {
+ const [expectedResults, setExpectedResults] = useState(0);
+ const [resultData, setResultData] = useState([]);
+ const [loading, setLoading] = useState(false);
+
+ useEffect(() => {
+ setLoading(true);
+ const payload: APIQueryObject = calcPayload(fields, filters);
+ fetch(
+ '/dataquery/queries',
+ {
+ method: 'post',
+ credentials: 'same-origin',
+ body: JSON.stringify(payload),
+ },
+ ).then(
+ (resp) => {
+ if (!resp.ok) {
+ throw new Error('Error creating query.');
+ }
+ return resp.json();
+ }
+ ).then(
+ (data) => {
+ const resultbuffer: any[] = [];
+ fetch(
+ '/dataquery/queries/'
+ + data.QueryID + '/count',
+ {
+ method: 'GET',
+ credentials: 'same-origin',
+ }
+ ).then((resp) => resp.json()
+ ).then( (json) => {
+ setExpectedResults(json.count);
+ });
+ fetchDataStream(
+ '/dataquery/queries/' + data.QueryID + '/run',
+ (row: any) => {
+ resultbuffer.push(row);
+ },
+ () => {
+ if (resultbuffer.length % 10 == 0) {
+ setResultData([...resultbuffer]);
+ }
+ },
+ () => {
+ setResultData([...resultbuffer]);
+ setLoading(false);
+ },
+ 'post',
+ );
+ onRun(); // forces query list to be reloaded
+ }
+ ).catch(
+ (msg) => {
+ swal.fire({
+ type: 'error',
+ text: msg,
+ });
+ }
+ );
+ }, [fields, filters]);
+ return {
+ loading: loading,
+ data: resultData,
+ totalcount: expectedResults,
+ };
+}
+
+type DataOrganizationType = {
+ headers: string[],
+ data: TableRow[],
+ status: 'headers'|'data'|'done'|null,
+ progress: number,
+ }
+/**
+ * Hook to re-organize tabulated data returned from the API into the format selected by the user
+ *
+ * @param {RunQueryType} queryData - The data returned by the API
+ * @param {string} visitOrganization - The type of data organization selected by the user
+ * @param {string} headerDisplay - The display to use for the headers
+ * @param {APIQueryField[]} fields - The fields that need to be organized
+ * @param {FullDictionary} fulldictionary - The full dictionary of all selected modules
+ * @returns {object} - the headers and data re-organised according to the user's selection
+ */
+function useDataOrganization(
+ queryData: RunQueryType,
+ visitOrganization: VisitOrgType,
+ headerDisplay: HeaderDisplayType,
+ fields: APIQueryField[],
+ fulldictionary: FullDictionary
+) : DataOrganizationType {
+ const [tableData, setTableData] = useState([]);
+ const [orgStatus, setOrgStatus]
+ = useState<'headers'|'data'|'done'|null>(null);
+ const [progress, setProgress] = useState(0);
+ const [headers, setHeaders] = useState([]);
+ useEffect( () => {
+ if (queryData.loading == true) {
+ return;
+ }
+ setOrgStatus('headers');
+ organizeHeaders(fields,
+ visitOrganization,
+ headerDisplay,
+ fulldictionary,
+ (i) => setProgress(i),
+ ).then( (headers: string[]) => {
+ setHeaders(headers);
+ setOrgStatus('data');
+
+ organizeData(
+ queryData.data,
+ visitOrganization,
+ fulldictionary,
+ fields,
+ (i) => setProgress(i),
+ ).then((data: TableRow[]) => {
+ setTableData(data);
+ setOrgStatus('done');
+ });
+ });
+ }, [visitOrganization, headerDisplay, queryData.loading, queryData.data]);
+ return {
+ 'headers': headers,
+ 'data': tableData,
+
+ 'status': orgStatus,
+ 'progress': progress,
+ };
+}
+
+/**
+ * The View Data tab
+ *
+ * @param {object} props - React props
+ * @param {APIQueryField[]} props.fields - The selected fields
+ * @param {QueryGroup} props.filters - The selected filters
+ * @param {object} props.fulldictionary - the data dictionary
+ * @param {function} props.onRun - Callback for when the query is run
+ * @returns {React.ReactElement} - The ViewData tab
+ */
+function ViewData(props: {
+ fields: APIQueryField[],
+ filters: QueryGroup,
+ onRun: () => void
+ fulldictionary: FullDictionary,
+}) {
+ const [visitOrganization, setVisitOrganization]
+ = useState('inline');
+ const [headerDisplay, setHeaderDisplay]
+ = useState('fieldnamedesc');
+ const queryData = useRunQuery(props.fields, props.filters, props.onRun);
+ const organizedData = useDataOrganization(
+ queryData,
+ visitOrganization,
+ headerDisplay,
+ props.fields,
+ props.fulldictionary
+ );
+
+ let queryTable;
+ if (queryData.loading) {
+ queryTable = Query not yet run ;
+ case 'headers':
+ queryTable = {
+ return {show: true, label: val};
+ })
+ }
+ data={organizedData.data}
+ getMappedCell={
+ organizedMapper(
+ visitOrganization,
+ props.fields,
+ props.fulldictionary,
+ )
+ }
+ getFormattedCell={
+ organizedFormatter(
+ queryData.data,
+ visitOrganization,
+ props.fields,
+ props.fulldictionary,
+ )
+ }
+ hide={
+ {
+ rowsPerPage: false,
+ defaultColumn: true,
+ downloadCSV: visitOrganization == 'inline',
+ }
+ }
+ />;
+ } catch (e) {
+ // OrganizedMapper/Formatter can throw an error
+ // before the loading is complete
+ return Loading..
;
+ }
+ break;
+ default:
+ throw new Error('Unhandled organization status');
+ }
+ }
+
+ return
+
+ setHeaderDisplay(value)
+ }
+ sortByValue={false}
+ />
+
+ setVisitOrganization(value)
+ }
+ sortByValue={false}
+ />
+ {queryTable}
+
;
+}
+
+/**
+ * Organize the session data into tabular data based on
+ * the visit organization settings
+ *
+ * @param {array} resultData - The result of the query as returned by the API
+ * @param {string} visitOrganization - The visit organization
+ * option selected
+ * @param {FullDictionary} fulldict - the full data dictionary
+ * @param {APIQueryField[]} fields - the selected fields from the query.
+ * @param {function} onProgress - Callback to update progress status display.
+ * @returns {string[][]} - The data organized into a tabulated form
+ * such that the result matches the visual table shown by the
+ * frontend cell-for-cell. This may involve adding rows or columns
+ * for the sessions or headers.
+ */
+function organizeData(
+ resultData: string[][],
+ visitOrganization: VisitOrgType,
+ fulldict: FullDictionary,
+ fields: APIQueryField[],
+ onProgress: (i: number) => void
+) : Promise {
+ switch (visitOrganization) {
+ case 'raw':
+ return Promise.resolve(resultData);
+ case 'inline':
+ // Organize with flexbox within the cell by the
+ // formatter
+ return Promise.resolve(resultData);
+ case 'longitudinal':
+ // the formatter splits into multiple cells
+ return Promise.resolve(resultData);
+ case 'crosssection':
+ return new Promise((resolve) => {
+ let rowNum = 0;
+ const promises: Promise[] = [];
+ for (const candidaterow of resultData) {
+ promises.push(new Promise((resolve) => {
+ // Collect list of visits for this candidate
+ setTimeout( () => {
+ const candidatevisits: {[visit: string]: boolean} = {};
+ for (const i in candidaterow) {
+ if (!candidaterow.hasOwnProperty(i)) {
+ continue;
+ }
+ const dictionary = getDictionary(fields[i], fulldict);
+ if (dictionary && dictionary.scope == 'session') {
+ if (candidaterow[i] === null
+ || candidaterow[i] == '') {
+ continue;
+ }
+ const cellobj: any = JSON.parse(candidaterow[i]);
+ for (const session in cellobj) {
+ if (!cellobj.hasOwnProperty(session)) {
+ continue;
+ }
+ const vl: string = cellobj[session].VisitLabel;
+ candidatevisits[vl] = true;
+ }
+ }
+ }
+
+ const dataRows: TableRow[] = [];
+ for (const visit in candidatevisits) {
+ if (!candidatevisits.hasOwnProperty(visit)) {
+ continue;
+ }
+ const dataRow: TableRow = [];
+ dataRow.push(visit);
+ for (let i = 0; i < candidaterow.length; i++) {
+ const dictionary = getDictionary(fields[i], fulldict);
+ if (dictionary && dictionary.scope == 'session') {
+ if (candidaterow[i] === null
+ || candidaterow[i] == '') {
+ dataRow.push(null);
+ continue;
+ }
+ const allCells: SessionRowCell[] = Object.values(
+ JSON.parse(candidaterow[i]));
+ const values: SessionRowCell[] = allCells.filter(
+ (sessionval: SessionRowCell) => {
+ return sessionval.VisitLabel == visit;
+ }
+ );
+ switch (values.length) {
+ case 0:
+ dataRow.push(null);
+ break;
+ case 1:
+ if (typeof values[0].value === 'undefined') {
+ dataRow.push(null);
+ } else {
+ dataRow.push(values[0].value);
+ }
+ break;
+ default:
+ throw new Error('Too many visit values');
+ }
+ } else {
+ dataRow.push(candidaterow[i]);
+ }
+ }
+ dataRows.push(dataRow);
+ }
+ onProgress(rowNum++);
+ resolve(dataRows);
+ });
+ }));
+ }
+
+ Promise.all(promises).then((values: TableRow[][]) => {
+ const mappedData: TableRow[] = [];
+ for (const row of values) {
+ mappedData.push(...row);
+ }
+ resolve(mappedData);
+ });
+ });
+ default: throw new Error('Unhandled visit organization');
+ }
+}
+
+/**
+ * Return a cell formatter specific to the options chosen for a CSV
+ *
+ * @param {string} visitOrganization - The visit organization
+ * option selected
+ * @param {array} fields - The fields selected
+ * @param {array} dict - The full dictionary
+ * @returns {function} - the appropriate column formatter for this data organization
+ */
+function organizedMapper(
+ visitOrganization: VisitOrgType,
+ fields: APIQueryField[],
+ dict: FullDictionary
+) {
+ switch (visitOrganization) {
+ case 'raw':
+ return (fieldlabel: string, value: string|null): string => {
+ if (value === null) {
+ return '';
+ }
+ return value;
+ };
+ case 'crosssection':
+ return (fieldlabel: string, value: string|null): string => {
+ if (value === null) {
+ return '';
+ }
+ return cellValue(value);
+ };
+ case 'longitudinal':
+ return (label: string,
+ value: string|null,
+ row: TableRow,
+ headers: string[],
+ fieldNo: number): (string|null)[]|string|null => {
+ if (value === null) {
+ return '';
+ }
+ const cells = expandLongitudinalCells(value, fieldNo, fields, dict);
+ if (cells === null) {
+ return null;
+ }
+ return cells.map( (val: string|null): string => {
+ if (val === null) {
+ return '';
+ }
+ return cellValue(val);
+ });
+ };
+ default: return (): string => 'error';
+ }
+}
+
+/**
+ * Takes a longitudinal cell with n visits and convert it to
+ * n cells to be displayed in the longitudinal display, for either
+ * CSV or display.
+ *
+ * @param {string|null} value - The raw cell value
+ * @param {number} fieldNo - the raw index of the field
+ * @param {array} fields - The fields selected
+ * @param {array} dict - The full dictionary
+ * @returns {(string|null[])|null} - Expanded array of cells mapped
+ * to display value. Null in an array of (string|null)[] implies
+ * the cell has no data. null being returned directly implies that
+ * there are no table cells to be added based on this data.
+ */
+function expandLongitudinalCells(
+ value: string|null,
+ fieldNo: number,
+ fields: APIQueryField[],
+ dict: FullDictionary
+): (string|null)[]|null {
+ // We added num fields * num visits headers, but
+ // resultData only has numFields rows. For each row
+ // we add multiple table cells for the number of visits
+ // for that fieldNo. ie. we treat cellPos as fieldNo.
+ // This means we need to bail once we've passed the
+ // number of fields we have in resultData.
+ if (fieldNo >= fields.length) {
+ return null;
+ }
+ // if candidate -- return directly
+ // if session -- get visits from query def, put in
+ const fieldobj = fields[fieldNo];
+ const fielddict = getDictionary(fieldobj, dict);
+ if (fielddict === null) {
+ return null;
+ }
+ switch (fielddict.scope) {
+ case 'candidate':
+ if (fielddict.cardinality == 'many') {
+ throw new Error('Candidate cardinality many not implemented');
+ }
+ return [value];
+ case 'session':
+ let displayedVisits: string[];
+ if (fieldobj.visits) {
+ displayedVisits = fieldobj.visits;
+ } else {
+ // All visits
+ if (fielddict.visits) {
+ displayedVisits = fielddict.visits;
+ } else {
+ displayedVisits = [];
+ }
+ }
+ if (!displayedVisits) {
+ displayedVisits = [];
+ }
+ const values = displayedVisits.map((visit) => {
+ if (!value) {
+ return null;
+ }
+ try {
+ const data = JSON.parse(value);
+ for (const session in data) {
+ if (data[session].VisitLabel == visit) {
+ return data[session].value;
+ }
+ }
+ return null;
+ } catch (e) {
+ throw new Error('Internal error');
+ }
+ });
+ return values;
+ }
+}
+/**
+ * Return a cell formatter specific to the options chosen
+ *
+ * @param {array} resultData - The result of the query
+ * @param {string} visitOrganization - The visit organization
+ * option selected
+ * @param {array} fields - The fields selected
+ * @param {array} dict - The full dictionary
+ * @returns {function} - the appropriate column formatter for this data organization
+ */
+function organizedFormatter(
+ resultData: string[][],
+ visitOrganization: VisitOrgType,
+ fields: APIQueryField[],
+ dict: FullDictionary
+) {
+ let callback;
+ switch (visitOrganization) {
+ case 'raw':
+ /**
+ * Callback to return the raw JSON data as returned by the API, in
+ * table form for the DataTable
+ *
+ * @param {string} label - The table header
+ * @param {string} cell - The cell value
+ * @returns {React.ReactElement} - The table cell
+ */
+ callback = (label: string, cell: string): ReactNode => {
+ return {cell} ;
+ };
+ return callback;
+ case 'inline':
+ /**
+ * Callback to format the data as inline data, with a list for each
+ * session inside of a cell for the candidate.
+ *
+ * @param {string} label - The table header
+ * @param {string} cell - The cell value
+ * @param {string[]} row - The entire row
+ * @param {string[]} headers - The entire row's headers
+ * @param {number} fieldNo - the cell index
+ * @returns {React.ReactElement} - The table cell
+ */
+ callback = (
+ label: string,
+ cell: string,
+ row: TableRow,
+ headers: string[],
+ fieldNo: number
+ ): ReactNode => {
+ // if candidate -- return directly
+ // if session -- get visits from query def, put in
+ const fieldobj = fields[fieldNo];
+ const fielddict = getDictionary(fieldobj, dict);
+ if (fielddict === null) {
+ return null;
+ }
+ if (fielddict.scope == 'candidate'
+ && fielddict.cardinality != 'many') {
+ if (cell === '') {
+ return (No data) (No data) ;
+ }
+ try {
+ const json = JSON.parse(cell);
+ for (const sessionid in json) {
+ if (json[sessionid].VisitLabel == visit) {
+ if (fielddict.cardinality === 'many') {
+ return valuesList(
+ json[sessionid].values
+ );
+ } else {
+ return json[sessionid].value;
+ }
+ }
+ }
+ } catch (e) {
+ return (Internal error) ;
+ }
+ return (No data) ;
+ };
+ return (
+
{visit}
+
+
+ {visitval(visit, cell)}
+
+
FIXME: {cell} ;
+ }
+ const value = (
+ {val}
+
);
+ return {value} ;
+ };
+ return callback;
+ case 'longitudinal':
+ /**
+ * Callback to organize this data longitudinally
+ *
+ * @param {string} label - The header label
+ * @param {string} cell - the JSON value of the cell
+ * @param {string[]} row - the entire row
+ * @param {string[]} headers - the headers for the table
+ * @param {number} fieldNo - The field number of this cell
+ * @returns {React.ReactElement} - The table cell
+ */
+ callback = (
+ label: string,
+ cell: string,
+ row: TableRow,
+ headers: string[],
+ fieldNo: number
+ ): ReactNode => {
+ const cells = expandLongitudinalCells(cell, fieldNo, fields, dict);
+ if (cells === null) {
+ return null;
+ }
+ return <>{cells.map((val: string|null) => {
+ if (val === null) {
+ return (No data) No data for visit {val.value} ;
+ });
+ return ();
+}
+
+type VisitOrgType = 'raw' | 'inline' | 'longitudinal' | 'crosssection';
+type HeaderDisplayType = 'fieldname' | 'fielddesc' | 'fieldnamedesc';
+/**
+ * Generate the appropriate table headers based on the visit
+ * organization
+ *
+ * @param {array} fields - the selected fields
+ * @param {string} org - the visit organization
+ * @param {string} display - the header display format
+ * @param {object} fulldict - the data dictionary
+ * @param {function} onProgress - Callback to indicate progress in processing
+ * @returns {array} - A promise which resolves to the array of headers to display
+ * in the frontend table
+ */
+function organizeHeaders(
+ fields: APIQueryField[],
+ org: VisitOrgType,
+ display: HeaderDisplayType,
+ fulldict: FullDictionary,
+ onProgress: (i: number) => void): Promise {
+ /**
+ * Format a header according to the selected display type
+ *
+ * @param {APIQueryField} header - The header to format
+ * @returns {string} - The string to display to the user
+ */
+ const formatHeader = (header: APIQueryField): string => {
+ switch (display) {
+ case 'fieldname': return header.field;
+ case 'fielddesc': return getDictionaryDescription(
+ header.module,
+ header.category,
+ header.field,
+ fulldict
+ );
+ case 'fieldnamedesc': return header.field +
+ ': ' + getDictionaryDescription(
+ header.module,
+ header.category,
+ header.field,
+ fulldict
+ );
+ default:
+ throw new Error('Unhandled field display type');
+ }
+ };
+ switch (org) {
+ case 'raw':
+ return Promise.resolve(fields.map((val, i) => {
+ onProgress(i);
+ return formatHeader(val);
+ }));
+ case 'inline':
+ return Promise.resolve(fields.map((val, i) => {
+ onProgress(i);
+ return formatHeader(val);
+ }));
+ case 'longitudinal':
+ const headers: string[] = [];
+ let i = 0;
+ for (const field of fields) {
+ i++;
+ const dict = getDictionary(field, fulldict);
+
+ if (dict === null) {
+ headers.push('Internal Error');
+ } else if (dict.scope == 'candidate') {
+ headers.push(formatHeader(field));
+ } else {
+ if (typeof field.visits !== 'undefined') {
+ for (const visit of field.visits) {
+ headers.push(formatHeader(field) + ': ' + visit);
+ }
+ }
+ }
+ onProgress(i);
+ }
+ // Split session level selections into multiple headers
+ return Promise.resolve(headers);
+ case 'crosssection':
+ return new Promise( (resolve) => {
+ setTimeout( () => {
+ resolve(['Visit Label',
+ ...fields.map((val, i) => {
+ onProgress(i);
+ return formatHeader(val);
+ }),
+ ]);
+ });
+ });
+ default: throw new Error('Unhandled visit organization');
+ }
+}
+
+export default ViewData;
diff --git a/modules/dataquery/jsx/welcome.adminquerymodal.tsx b/modules/dataquery/jsx/welcome.adminquerymodal.tsx
new file mode 100644
index 00000000000..959750ccf6c
--- /dev/null
+++ b/modules/dataquery/jsx/welcome.adminquerymodal.tsx
@@ -0,0 +1,95 @@
+import Modal from 'jsx/Modal';
+import swal from 'sweetalert2';
+import {useState} from 'react';
+import {CheckboxElement, TextboxElement, FieldsetElement} from 'jsx/Form';
+
+/**
+ * Render a modal window for naming a query
+ *
+ * @param {object} props - React props
+ * @param {number} props.QueryID - The QueryID being modified
+ * @param {string} props.defaultName - The default name to show before edited by the user
+ * @param {function} props.closeModal - A callback to close the modal
+ * @param {function} props.onSubmit - A callback to call on submit
+ * @returns {React.ReactElement} - The modal
+ */
+function AdminQueryModal(props: {
+ QueryID: number,
+ defaultName: string,
+ closeModal: () => void,
+ onSubmit: (name: string, topQuery: boolean, dashboardQuery: boolean)
+ => void,
+}) {
+ const [queryName, setQueryName] = useState(props.defaultName || '');
+ const [topQuery, setTopQuery] = useState(true);
+ const [dashboardQuery, setDashboardQuery] = useState(true);
+ /**
+ * Convert the onSubmit callback to a promise function of the format
+ * expected by jsx/Modal.
+ *
+ * @returns {Promise} - The promise
+ */
+ const submitPromise = () => {
+ let sbmt: Promise = new Promise((resolve, reject) => {
+ if (queryName.trim() == '') {
+ swal.fire({
+ type: 'error',
+ text: 'Must provide a query name to pin query as.',
+ });
+ reject();
+ return;
+ }
+ if (!topQuery && !dashboardQuery) {
+ swal.fire({
+ type: 'error',
+ text: 'Must pin as study query or pin to dashboard.',
+ });
+ reject();
+ return;
+ }
+ resolve([queryName.trim(), topQuery, dashboardQuery]);
+ });
+ if (props.onSubmit) {
+ sbmt = sbmt.then((val: [string, boolean, boolean]) => {
+ const [name, topq, dashq] = val;
+ props.onSubmit(name, topq, dashq);
+ });
+ }
+ return sbmt;
+ };
+ return
+
+ ;
+}
+
+export default AdminQueryModal;
diff --git a/modules/dataquery/jsx/welcome.namequerymodal.tsx b/modules/dataquery/jsx/welcome.namequerymodal.tsx
new file mode 100644
index 00000000000..78c28a4c618
--- /dev/null
+++ b/modules/dataquery/jsx/welcome.namequerymodal.tsx
@@ -0,0 +1,65 @@
+import Modal from 'jsx/Modal';
+import swal from 'sweetalert2';
+import {useState} from 'react';
+import {TextboxElement, FieldsetElement} from 'jsx/Form';
+
+/**
+ * Render a modal window for naming a query
+ *
+ * @param {object} props - React props
+ * @param {number} props.QueryID - The QueryID being modified
+ * @param {string} props.defaultName - The default name to show before edited by the user
+ * @param {function} props.closeModal - A callback to close the modal
+ * @param {function} props.onSubmit - A callback to call on submit
+ * @returns {React.ReactElement} - the query modal element
+ */
+function NameQueryModal(props: {
+ QueryID: number,
+ defaultName: string,
+ closeModal: () => void,
+ onSubmit: (name: string) => void,
+}) {
+ const [queryName, setQueryName] = useState(props.defaultName || '');
+ /**
+ * Convert the onSubmit callback function to a promise expected by Modal
+ *
+ * @returns {Promise} - The submit promise
+ */
+ const submitPromise = (): Promise => {
+ const sbmt = new Promise((resolve, reject) => {
+ if (queryName == '') {
+ swal.fire({
+ type: 'error',
+ text: 'Must provide a query name.',
+ });
+ reject();
+ return;
+ }
+ resolve(queryName);
+ });
+ if (props.onSubmit) {
+ return sbmt.then(props.onSubmit);
+ }
+ return sbmt;
+ };
+ return
+
+ ;
+}
+
+export default NameQueryModal;
diff --git a/modules/dataquery/jsx/welcome.tsx b/modules/dataquery/jsx/welcome.tsx
new file mode 100644
index 00000000000..0e05b9c34de
--- /dev/null
+++ b/modules/dataquery/jsx/welcome.tsx
@@ -0,0 +1,1116 @@
+import ExpansionPanels from './components/expansionpanels';
+import swal from 'sweetalert2';
+import FieldDisplay from './fielddisplay';
+import {useEffect, useState} from 'react';
+import QueryTree from './querytree';
+import {QueryTerm, QueryGroup} from './querydef';
+import NameQueryModal from './welcome.namequerymodal';
+import AdminQueryModal from './welcome.adminquerymodal';
+import getDictionaryDescription from './getdictionarydescription';
+import PaginationLinks from 'jsx/PaginationLinks';
+import {ButtonElement, CheckboxElement, TextboxElement} from 'jsx/Form';
+import {APIQueryField} from './types';
+import {FullDictionary} from './types';
+import {FlattenedField, FlattenedQuery, VisitOption} from './types';
+/**
+ * Return the welcome tab for the DQT
+ *
+ * @param {object} props - React props
+ * @param {FlattenedQuery[]} props.recentQueries - List of recent queries to display
+ * @param {FlattenedQuery[]} props.topQueries - List of top queries to display pinned to the top of the tab
+ * @param {FlattenedQuery[]} props.sharedQueries - List of queries shared with the current user
+ * @param {function} props.onContinue - Callback when the "Continue" button is called in the welcome message
+ * @param {boolean} props.useAdminName - True if the display should display the admin name of the query
+ * @param {boolean} props.queryAdmin - True if the current user can pin study queries
+ * @param {function} props.reloadQueries - Reload the list of queries from the server
+ * @param {function} props.loadQuery - Load a query to replace the active query
+ * @param {function} props.starQuery - Function that will star a query
+ * @param {function} props.unstarQuery - Function that will unstar a query
+ * @param {function} props.shareQuery - Function that will share a query
+ * @param {function} props.unshareQuery - Function that will unshare a query
+ * @param {function} props.getModuleFields - Retrieve a module's fields from the backend and populate them into fulldictionary
+ * @param {object} props.mapModuleName - Function to map the backend module name to a user friendly name
+ * @param {object} props.mapCategoryName - Function to map the backend category name to a user friendly name
+ * @param {object} props.fulldictionary - The dictionary of all modules that have been loaded
+ * @returns {React.ReactElement} - The Welcome tab element
+ */
+function Welcome(props: {
+ recentQueries: FlattenedQuery[]
+ sharedQueries: FlattenedQuery[],
+ topQueries: FlattenedQuery[],
+
+ queryAdmin: boolean,
+
+ onContinue: () => void,
+ reloadQueries: () => void,
+ shareQuery: (queryID: number) => void,
+ unshareQuery: (queryID: number) => void,
+ starQuery: (queryID: number) => void,
+ unstarQuery: (queryID: number) => void,
+ getModuleFields: (module: string) => void,
+ loadQuery: (fields: APIQueryField[], filters: QueryGroup|null) => void,
+ mapModuleName: (module: string) => string,
+ mapCategoryName: (module: string, category: string) => string,
+ fulldictionary:FullDictionary,
+}) {
+ const panels: {
+ title: string,
+ content: React.ReactElement,
+ alwaysOpen: boolean,
+ defaultOpen: boolean,
+ }[] = [];
+ if (props.topQueries.length > 0) {
+ panels.push({
+ title: 'Study Queries',
+ content: (
+
+
+ ),
+ alwaysOpen: false,
+ defaultOpen: true,
+ });
+ }
+ panels.push({
+ title: 'Instructions',
+ content: 0}
+ onContinue={props.onContinue}
+ />,
+ alwaysOpen: false,
+ defaultOpen: true,
+ });
+ panels.push({
+ title: 'Recent Queries',
+ content: (
+
+
+ ),
+ alwaysOpen: false,
+ defaultOpen: true,
+ });
+
+ if (props.sharedQueries.length > 0) {
+ panels.push({
+ title: 'Shared Queries',
+ content: (
+
+
+ ),
+ alwaysOpen: false,
+ defaultOpen: true,
+ });
+ }
+
+ return (
+
+
+ Welcome to the Data Query Tool
+
+ (null);
+ const [adminModalID, setAdminModalID] = useState(null);
+ const [queryName, setQueryName] = useState(null);
+ const [defaultModalQueryName, setDefaultModalQueryName]
+ = useState('');
+
+ const [onlyStarred, setOnlyStarred] = useState(false);
+ const [onlyShared, setOnlyShared] = useState(false);
+ const [onlyNamed, setOnlyNamed] = useState(false);
+ const [noDuplicates, setNoDuplicates] = useState(false);
+ const [queryFilter, setQueryFilter] = useState('');
+ const [fullQuery, setFullQuery]
+ = useState(!props.defaultCollapsed);
+ const [unpinAdminQuery, setUnpinAdminQuery] = useState(null);
+ const [adminPinAction, setAdminPinAction]
+ = useState<'top'|'dashboard'|'top,dashboard'>('top');
+
+ useEffect(() => {
+ const modules = new Set();
+ props.queries.forEach((query) => {
+ query.fields.forEach((field) => {
+ modules.add(field.module);
+ });
+ if (query.criteria) {
+ /**
+ * Add all modules used in the QueryGroup to the modules
+ * set so their fields can be fetched.
+ *
+ * @param {QueryGroup} querygroup - The query group from the criteria
+ * @returns {void}
+ */
+ const addModules = (querygroup: QueryGroup) => {
+ querygroup.group.forEach((item) => {
+ if (item instanceof QueryTerm) {
+ modules.add(item.module);
+ } else if (item instanceof QueryGroup) {
+ addModules(item);
+ }
+ });
+ };
+ addModules(query.criteria);
+ }
+ });
+ modules.forEach((module: string) => {
+ props.getModuleFields(module);
+ });
+ }, [props.queries]);
+
+ useEffect(() => {
+ if (!nameModalID || !queryName) {
+ return;
+ }
+
+ // Prevent re-triggering by resetting the state
+ // before fetching, cache the values we need
+ // to build the URI before setting
+ const id = nameModalID;
+ const name = queryName;
+
+ setNameModalID(null);
+ setQueryName(null);
+
+ fetch(
+ '/dataquery/queries/' + id
+ + '?name=' + encodeURIComponent(name),
+ {
+ method: 'PATCH',
+ credentials: 'same-origin',
+ },
+ ).then((response) => {
+ setQueryName(null);
+ if (response.ok) {
+ if (props.reloadQueries) {
+ props.reloadQueries();
+ }
+ }
+ });
+ }, [queryName]);
+
+ useEffect(() => {
+ if (!adminModalID || !queryName) {
+ return;
+ }
+
+ // Prevent re-triggering by resetting the state
+ // before fetching, cache the values we need
+ // to build the URI before setting
+ const id = adminModalID;
+ const name = queryName;
+
+ setAdminModalID(null);
+ setQueryName(null);
+
+ let param;
+ if (adminPinAction == 'top') {
+ param = 'adminname=' + encodeURIComponent(name);
+ } else if (adminPinAction == 'dashboard') {
+ param = 'dashboardname=' + encodeURIComponent(name);
+ } else if (adminPinAction == 'top,dashboard') {
+ param = 'adminname=' + encodeURIComponent(name)
+ + '&dashboardname=' + encodeURIComponent(name);
+ }
+ fetch(
+ '/dataquery/queries/' + id
+ + '?' + param,
+ {
+ method: 'PATCH',
+ credentials: 'same-origin',
+ },
+ ).then((response) => {
+ if (response.ok) {
+ if (props.reloadQueries) {
+ props.reloadQueries();
+ }
+ }
+ });
+ }, [queryName]);
+
+ useEffect(() => {
+ if (!unpinAdminQuery) {
+ return;
+ }
+
+ // Prevent re-triggering by resetting the state
+ // before fetching, cache the values we need
+ // to build the URI before setting
+ const id = unpinAdminQuery;
+ setUnpinAdminQuery(null);
+
+ fetch(
+ '/dataquery/queries/' + id
+ + '?adminname=',
+ {
+ method: 'PATCH',
+ credentials: 'same-origin',
+ },
+ ).then((response) => {
+ if (response.ok) {
+ if (props.reloadQueries) {
+ props.reloadQueries();
+ }
+ }
+ });
+ }, [unpinAdminQuery]);
+
+ const nameModal: React.ReactNode = (
+ nameModalID == null
+ ? null
+ : setQueryName(name)}
+ closeModal={() => setNameModalID(null) }
+ defaultName={defaultModalQueryName}
+ QueryID={nameModalID}
+ />);
+ const adminModal = adminModalID == null ? '' :
+ {
+ if (topQ && dashboardQ) {
+ setAdminPinAction('top,dashboard');
+ } else if (topQ) {
+ setAdminPinAction('top');
+ } else if (dashboardQ) {
+ setAdminPinAction('dashboard');
+ } else {
+ throw new Error('Modal promise should not have resolved');
+ }
+ setQueryName(name);
+ }}
+ closeModal={() => setAdminModalID(null)}
+ defaultName={defaultModalQueryName}
+ QueryID={adminModalID}
+ />;
+
+ let displayedQueries = props.queries;
+ if (onlyStarred === true) {
+ displayedQueries = displayedQueries.filter(
+ (val) => val.Starred
+ );
+ }
+ if (onlyShared === true) {
+ displayedQueries = displayedQueries.filter(
+ (val) => val.Public
+ );
+ }
+ if (onlyNamed === true) {
+ displayedQueries = displayedQueries.filter(
+ (val) => {
+ if (val.Name || val.Name == '') {
+ return true;
+ }
+ return false;
+ }
+ );
+ }
+ if (noDuplicates === true) {
+ const queryList: {[queryID: number]: FlattenedQuery} = {};
+ const newDisplayedQueries: FlattenedQuery[] = [];
+ displayedQueries.forEach((val) => {
+ if (queryList.hasOwnProperty(val.QueryID)) {
+ return;
+ }
+ queryList[val.QueryID] = val;
+ newDisplayedQueries.push(val);
+ });
+ displayedQueries = newDisplayedQueries;
+ }
+ if (queryFilter != '') {
+ displayedQueries = displayedQueries.filter(
+ (val) => {
+ const lowerQF = queryFilter.toLowerCase();
+ const nameContains = val.Name
+ && val.Name.toLowerCase().includes(lowerQF);
+ const runTimeContains = val.RunTime &&
+ val.RunTime.includes(lowerQF);
+ const sharedByContains = val.SharedBy &&
+ val.SharedBy.map( (s) => s.toLowerCase()).includes(lowerQF);
+ let anyFieldMatches = false;
+ let anyFilterMatches = false;
+ if (val.fields) {
+ for (const field of val.fields) {
+ if (field.field.toLowerCase().includes(lowerQF)) {
+ anyFieldMatches = true;
+ break;
+ }
+ const description = getDictionaryDescription(
+ field.module,
+ field.category,
+ field.field,
+ props.fulldictionary,
+ );
+ if (description.toLowerCase().includes(lowerQF)) {
+ anyFieldMatches = true;
+ break;
+ }
+ }
+ }
+ if (val.criteria) {
+ /**
+ * Sets the anyFieldMatches variable to true if any
+ * criteria in the QueryGroup matches the filter criteria.
+ *
+ * @param {QueryGroup} group - The query group being checked
+ * @returns {void}
+ */
+ const itemInGroupMatches = (group: QueryGroup): void => {
+ for (const field of group.group) {
+ if (field instanceof QueryTerm) {
+ if (field.fieldname
+ && field.fieldname.toLowerCase().includes(
+ lowerQF
+ )) {
+ anyFieldMatches = true;
+ return;
+ }
+ const description = getDictionaryDescription(
+ field.module,
+ field.category,
+ field.fieldname,
+ props.fulldictionary,
+ );
+ if (description
+ && description.toLowerCase().includes(
+ lowerQF
+ )
+ ) {
+ anyFilterMatches = true;
+ return;
+ }
+ } else if (field instanceof QueryGroup) {
+ itemInGroupMatches(field);
+ }
+ }
+ };
+ itemInGroupMatches(val.criteria);
+ }
+ return nameContains
+ || runTimeContains
+ || sharedByContains
+ || anyFieldMatches
+ || anyFilterMatches;
+ });
+ }
+ const starFilter = props.starQuery ?
+ setOnlyStarred(value)
+ }/> : setOnlyShared(value)
+ }/>
+ : setNoDuplicates(value)
+ }/>
+ :
+ {nameModal}
+ {adminModal}
+
+
setQueryFilter(value)
+ }/>
+
+ {starFilter}
+ {shareFilter}
+ setOnlyNamed(value)
+ }/>
+ {duplicateFilter}
+
+ setFullQuery(!value)
+ }/>
+
+
+
+ {displayedQueries.map((query, idx) => {
+ return {
+ return;
+ }
+ }
+
+ unstarQuery={props.unstarQuery ?
+ props.unstarQuery :
+ () => {
+ return;
+ }
+ }
+
+ shareQuery={props.shareQuery ?
+ props.shareQuery :
+ () => {
+ return;
+ }
+ }
+ unshareQuery={
+ props.unshareQuery ?
+ props.unshareQuery :
+ () => {
+ return;
+ }
+ }
+
+ setNameModalID={setNameModalID}
+ setDefaultModalQueryName={setDefaultModalQueryName}
+ setAdminModalID={setAdminModalID}
+
+ queryAdmin={props.queryAdmin}
+ unpinAdminQuery={setUnpinAdminQuery}
+ fulldictionary={props.fulldictionary}
+ />;
+ })}
+
+
(No filters for query) ;
+ }
+ return ((1);
+ const rowsPerPage = 5;
+
+ const start = (pageNum-1)*rowsPerPage;
+ const end = (pageNum)*rowsPerPage;
+ const displayedRange = props.children.slice(start, end);
+ return ;
+}
+
+/**
+ * Display a single query in a QueryList
+ *
+ * @param {object} props - React props
+ * @param {FlattenedQuery} props.query - The query to display
+ * @param {boolean} props.includeRuns - True if query run information should be displayed
+ * @param {function} props.starQuery - Function that will star a query
+ * @param {function} props.unstarQuery - Function that will unstar a query
+ * @param {function} props.shareQuery - Function that will share a query
+ * @param {function} props.unshareQuery - Function that will unshare a query
+ * @param {function} props.unpinAdminQuery - Function that will unpin a query
+ * @param {function} props.loadQuery - Load a query to replace the active query
+ * @param {function} props.setDefaultModalQueryName - Function to set the default name to show in the name query modal
+ * @param {function} props.setNameModalID - Function that will set the queryID to show a name modal for
+ * @param {boolean} props.showFullQueryDefault - True if the query should be expanded by default
+ * @param {boolean} props.queryAdmin - True if the admin query options (ie. pin query) should be shown
+ * @param {function} props.setAdminModalID - Function that will set the queryID to show an admin modal for
+ * @param {object} props.mapModuleName - Function to map the backend module name to a user friendly name
+ * @param {object} props.mapCategoryName - Function to map the backend category name to a user friendly name
+ * @param {object} props.fulldictionary The dictionary of all modules that have been loaded
+ * @returns {React.ReactElement} - The React element
+ */
+function SingleQueryDisplay(props: {
+ query: FlattenedQuery,
+ loadQuery: (fields: APIQueryField[], filters: QueryGroup|null) => void,
+ includeRuns: boolean,
+ showFullQueryDefault: boolean,
+
+ shareQuery: (queryID: number) => void,
+ unshareQuery: (queryID: number) => void,
+ starQuery: (queryID: number) => void,
+ unstarQuery: (queryID: number) => void,
+
+ useAdminName: boolean,
+
+ queryAdmin: boolean,
+ unpinAdminQuery: (queryID: number) => void,
+ setAdminModalID: (queryID: number) => void,
+ setDefaultModalQueryName: (name: string) => void,
+ setNameModalID: (queryID: number) => void,
+
+ mapModuleName: (module: string) => string,
+ mapCategoryName: (module: string, category: string) => string,
+ fulldictionary:FullDictionary,
+}) {
+ const [showFullQuery, setShowFullQuery] =
+ useState(props.showFullQueryDefault);
+ // Reset the collapsed state if the checkbox gets toggled
+ useEffect(() => {
+ setShowFullQuery(props.showFullQueryDefault);
+ }, [props.showFullQueryDefault]);
+
+ let starredIcon;
+ let sharedIcon;
+ const query = props.query;
+
+ if (query.Starred) {
+ starredIcon = props.unstarQuery(query.QueryID)
+ }
+ title="Unstar"
+ className="fa-stack">
+ ;
+ } else {
+ starredIcon = props.starQuery(query.QueryID)
+ }
+ className="fa-stack">
+ ;
+ }
+
+ if (query.Public) {
+ sharedIcon =
+ props.unshareQuery(query.QueryID)
+ }
+ />;
+ } else {
+ sharedIcon =
+ props.shareQuery(query.QueryID)
+ }
+ />;
+ }
+
+ /**
+ * Load this query as the current query, replacing whatever query
+ * is currently loaded.
+ */
+ const loadQuery = () => {
+ const newfields: APIQueryField[] = query.fields.map(
+ (field: FlattenedField) => {
+ const f: APIQueryField = {
+ module: field.module,
+ category: field.category,
+ field: field.field,
+ };
+ if (field.visits) {
+ f.visits = field.visits.map(
+ (visit: VisitOption) => visit.value
+ );
+ }
+ return f;
+ });
+ props.loadQuery(
+ newfields,
+ query.criteria || null,
+ );
+ swal.fire({
+ type: 'success',
+ title: 'Query Loaded',
+ text: 'Successfully loaded query.',
+ });
+ };
+
+ const loadIcon = {
+ props.setDefaultModalQueryName(query.Name || '');
+ props.setAdminModalID(query.QueryID);
+ }
+ }>
+
+
+ :
;
+
+ let msg: React.ReactNode = null;
+ if (query.RunTime) {
+ let desc = query.Name
+ ?
+ {query.Name}
+ (Run at {query.RunTime})
+
+ : You ran this query at {query.RunTime} ;
+ if (!props.includeRuns) {
+ desc = query.Name
+ ?
+ {query.Name}
+
+ : You ran this query ;
+ }
+
+ const nameIcon = {
+ props.setDefaultModalQueryName(query.Name || '');
+ props.setNameModalID(query.QueryID);
+ }} />;
+ msg = {desc}
+ {starredIcon}{sharedIcon}{loadIcon}{nameIcon}{pinIcon}
+
;
+ } else if (query.SharedBy) {
+ const desc = query.Name
+ ?
+ {query.Name}
+ (Shared by {query.SharedBy.join(', ')})
+
+ : Query shared by {query.SharedBy.join(', ')} ;
+ msg = {desc}
+ {loadIcon}{pinIcon}
+
;
+ } else if (query.Name || query.AdminName) {
+ const name = props.useAdminName ? query.AdminName : query.Name;
+ const unpinIcon = props.queryAdmin
+ ? {
+ props.unpinAdminQuery(query.QueryID);
+ }
+ }>
+
+
+ :
;
+ msg = {name} {loadIcon}{unpinIcon}
;
+ } else {
+ console.error('Invalid query. Neither shared nor recent', query);
+ }
+
+ const queryDisplay = !showFullQuery ?
:
+
+
+
Fields
+ {query.fields.map(
+ (fieldobj, fidx) =>
+
+ {query.criteria ?
+
+
Filters
+
+ :
+ }
+
setShowFullQuery(!showFullQuery)}
+ > ;
+ return (
+
+ {expandIcon}
+ {msg}
+
+ {queryDisplay}
+
+
+ ;
+}
+
+/**
+ * An icon to share a query
+ *
+ * @param {object} props - React props
+ * @param {function} props.onClick - Handler to call when icon clicked
+ * @param {function} props.title - the title to show on hover
+ * @param {function} props.isShared - True if the query is currently shared
+ * @returns {React.ReactElement} - The React element
+ */
+function ShareIcon(props: {
+ onClick?: () => void,
+ title?: string,
+ isShared?: boolean,
+}) {
+ return
+ ;
+}
+
+/**
+ * An icon to name a query
+ *
+ * @param {object} props - React props
+ * @param {function} props.onClick - Handler to call when icon clicked
+ * @returns {React.ReactElement} - The React element
+ */
+function NameIcon(props: {
+ onClick?: () => void
+}): React.ReactElement {
+ return (
+
+ );
+}
+
+/**
+ * Displays the message for the introduction panel
+ *
+ * @param {object} props - React props
+ * @param {function} props.onContinue - Action to take when "Continue" button is pressed
+ * @param {boolean} props.hasStudyQueries - Whether or not study queries exist
+ * @returns {React.ReactElement} - The React element
+ */
+function IntroductionMessage(props: {
+ onContinue: () => void,
+ hasStudyQueries: boolean,
+}): React.ReactElement {
+ const studyQueriesParagraph = props.hasStudyQueries ? (
+ Above, there is also a Study Queries panel. This
+ are a special type of shared queries that have been pinned
+ by a study administer to always display at the top of this
+ page.
+ ) : '';
+ return (
+
+
The data query tool allows you to query data
+ within LORIS. There are three steps to defining
+ a query:
+
+
+ First, you must select the fields that you're
+ interested in on the Define Fields
+ page.
+ Next, you can optionally define filters on the
+ Define Filters page to restrict
+ the population that is returned.
+ Finally, you view your query results on
+ the View Data page
+
+
The Next Steps on the bottom right of your
+ screen always the context-sensitive next steps that you
+ can do to build your query.
+
Your recently run queries will be displayed in the
+ Recent Queries panel below. Instead of building
+ a new query, you can reload a query that you've recently run
+ by clicking on the
+
Queries can be shared with others by clicking the Shared Queries panel below the
+ Recent Queries.
+
You may also give a query a name at any time by clicking the
+
+ {studyQueriesParagraph}
+
+
+
+ * @license http://www.gnu.org/licenses/gpl-3.0.txt GPLv3
+ * @link https://www.github.com/aces/Loris/
+ */
+class Dataquery extends \NDB_Page
+{
+ public $skipTemplate = true;
+
+ /**
+ * Check user access permission
+ *
+ * @param \User $user The user whose access is being checked
+ *
+ * @return bool
+ */
+ function _hasAccess(\User $user) : bool
+ {
+ // check user permissions
+ return $user->hasPermission('dataquery_view');
+ }
+
+ /**
+ * Include the column formatter required to display the feedback link colours
+ * in the candidate_list menu
+ *
+ * @return array of javascript to be inserted
+ */
+ function getJSDependencies()
+ {
+ $factory = \NDB_Factory::singleton();
+ $baseURL = $factory->settings()->getBaseURL();
+ $deps = parent::getJSDependencies();
+ return array_merge(
+ $deps,
+ [
+ $baseURL . "/dataquery/js/index.js",
+ ]
+ );
+ }
+}
diff --git a/modules/dataquery/php/module.class.inc b/modules/dataquery/php/module.class.inc
index ce8ebe98788..a3e0c10aed5 100644
--- a/modules/dataquery/php/module.class.inc
+++ b/modules/dataquery/php/module.class.inc
@@ -49,4 +49,80 @@ class Module extends \Module
{
return true;
}
+
+ /**
+ * {@inheritDoc}
+ *
+ * @param string $type The type of widgets to get.
+ * @param \User $user The user widgets are being retrieved for.
+ * @param array $options A type dependent list of options to provide
+ * to the widget.
+ *
+ * @return \LORIS\GUI\Widget[]
+ */
+ public function getWidgets(string $type, \User $user, array $options)
+ {
+ switch ($type) {
+ case 'dashboard':
+ $baseURL = \NDB_Factory::singleton()->settings()->getBaseURL();
+ $provisioner = (
+ new Provisioners\StarredQueries($this->loris, $user)
+ )->filter(
+ new \LORIS\Data\Filters\AccessibleResourceFilter()
+ );
+ $results = $provisioner->execute($user);
+ $starredqueries = [];
+ foreach ($results as $query) {
+ $starredqueries[] = $query;
+ }
+ $widgets = [];
+ if (count($starredqueries) > 0) {
+ $widgets[] = new \LORIS\dashboard\Widget(
+ new \LORIS\dashboard\WidgetContent(
+ "Starred Queries",
+ $this->renderTemplate(
+ "starredwidget.tpl",
+ [
+ 'baseURL' => $baseURL,
+ 'starredqueries' => $starredqueries,
+ ]
+ ),
+ ""
+ ),
+ new \LORIS\dashboard\WidgetDisplayProps("small"),
+ );
+ }
+
+ $provisioner = (
+ new Provisioners\StudyQueries($this->loris, 'dashboard')
+ )->filter(
+ new \LORIS\Data\Filters\AccessibleResourceFilter()
+ );
+
+ $results = $provisioner->execute($user);
+ $studyqueries = [];
+ foreach ($results as $query) {
+ $studyqueries[] = $query;
+
+ }
+ if (count($studyqueries) > 0) {
+ $widgets[] = new \LORIS\dashboard\Widget(
+ new \LORIS\dashboard\WidgetContent(
+ "Study Queries",
+ $this->renderTemplate(
+ "studyquerieswidget.tpl",
+ [
+ 'baseURL' => $baseURL,
+ 'queries' => $studyqueries,
+ ]
+ ),
+ ""
+ ),
+ new \LORIS\dashboard\WidgetDisplayProps("small"),
+ );
+ }
+ return $widgets;
+ }
+ return [];
+ }
}
diff --git a/modules/dataquery/php/provisioners/alluserqueries.class.inc b/modules/dataquery/php/provisioners/alluserqueries.class.inc
index 84869e1f6c9..dc99533b056 100644
--- a/modules/dataquery/php/provisioners/alluserqueries.class.inc
+++ b/modules/dataquery/php/provisioners/alluserqueries.class.inc
@@ -36,7 +36,7 @@ class AllUserQueries extends \LORIS\Data\Provisioners\DBRowProvisioner
(dq.QueryID=dsq.QueryID AND PinType='topquery')
-- Public queries
LEFT JOIN dataquery_shared_queries_rel dshq ON
- (dq.QueryID=dshq.QueryID AND dshq.SharedBy != :userid)
+ (dq.QueryID=dshq.QueryID)
LEFT JOIN users u ON (dshq.SharedBy=u.ID)
LEFT JOIN dataquery_starred_queries_rel starred ON
(starred.QueryID=dq.QueryID AND starred.StarredBy = :userid)
diff --git a/modules/dataquery/php/provisioners/starredqueries.class.inc b/modules/dataquery/php/provisioners/starredqueries.class.inc
new file mode 100644
index 00000000000..78bb8657d51
--- /dev/null
+++ b/modules/dataquery/php/provisioners/starredqueries.class.inc
@@ -0,0 +1,61 @@
+
+ */
+
+namespace LORIS\dataquery\Provisioners;
+use \LORIS\dataquery\Query;
+
+/**
+ * Provisioner to get all starred queries for a given user
+ *
+ * @license http://www.gnu.org/licenses/gpl-3.0.txt GPLv3
+ */
+class StarredQueries extends \LORIS\Data\Provisioners\DBRowProvisioner
+{
+ /**
+ * Create a StarredQueries provisioner, which gets rows for
+ * the starred user queries for a given user.
+ *
+ * @param protected \LORIS\LorisInstance $loris - The LORIS object
+ * @param \User $user - The user whose starred
+ * queries should be retrieved
+ */
+ function __construct(protected \LORIS\LorisInstance $loris, \User $user)
+ {
+ parent::__construct(
+ "SELECT
+ dpq.QueryID,
+ COALESCE(dqn.Name, CONCAT('Query ', dpq.QueryID)) as Name
+ FROM dataquery_starred_queries_rel dpq
+ JOIN dataquery_queries dq
+ ON (dq.QueryID=dpq.QueryID)
+ LEFT JOIN dataquery_query_names dqn
+ ON (dpq.StarredBy=dqn.UserID AND dpq.QueryID=dqn.QueryID)
+ WHERE dpq.StarredBy=:userid",
+ ['userid' => $user->getId()]
+ );
+ }
+
+ /**
+ * {@inheritDoc}
+ *
+ * @param array $row The database row from the LORIS Database class.
+ *
+ * @return \LORIS\Data\DataInstance An instance representing this row.
+ */
+ public function getInstance($row) : \LORIS\Data\DataInstance
+ {
+ return new Query(
+ loris: $this->loris,
+ queryID: $row['QueryID'] !== null
+ ? intval($row['QueryID'])
+ : null,
+ name: $row['Name'],
+ );
+ }
+}
diff --git a/modules/dataquery/php/provisioners/studyqueries.class.inc b/modules/dataquery/php/provisioners/studyqueries.class.inc
new file mode 100644
index 00000000000..8ac9421482f
--- /dev/null
+++ b/modules/dataquery/php/provisioners/studyqueries.class.inc
@@ -0,0 +1,52 @@
+ $pintype],
+ );
+ }
+
+ /**
+ * {@inheritDoc}
+ *
+ * @param array $row The database row from the LORIS Database class.
+ *
+ * @return \LORIS\Data\DataInstance An instance representing this row.
+ */
+ public function getInstance($row) : \LORIS\Data\DataInstance
+ {
+ return new Query(
+ loris: $this->loris,
+ queryID: $row['QueryID'] !== null
+ ? intval($row['QueryID'])
+ : null,
+ query: json_decode($row['Query'], true),
+ name: $row['Name'],
+ );
+ }
+}
diff --git a/modules/dataquery/php/query.class.inc b/modules/dataquery/php/query.class.inc
index 44aa9f7366f..40f4bfab2e2 100644
--- a/modules/dataquery/php/query.class.inc
+++ b/modules/dataquery/php/query.class.inc
@@ -47,7 +47,7 @@ class Query implements \LORIS\StudyEntities\AccessibleResource,
protected \LORIS\LorisInstance $loris,
public readonly int $queryID,
?array $query=null,
- protected ?string $name=null,
+ public ?string $name=null,
protected ?string $adminname=null,
protected ?array $sharedBy=null,
protected ?bool $starred=null,
diff --git a/modules/dataquery/php/visitlist.class.inc b/modules/dataquery/php/visitlist.class.inc
new file mode 100644
index 00000000000..9826e3cfc85
--- /dev/null
+++ b/modules/dataquery/php/visitlist.class.inc
@@ -0,0 +1,94 @@
+dictionaryitem === null) {
+ return new \LORIS\Http\Response\JSON\OK(
+ [
+ 'Visits' => array_values(\Utility::getVisitList()),
+ ],
+ );
+ }
+
+ if ($this->dictionaryitem->getScope()->__toString() !== 'session') {
+ return new \LORIS\Http\Response\JSON\BadRequest(
+ 'Visit list only applicable to session scoped variables'
+ );
+ }
+
+ return new \LORIS\Http\Response\JSON\OK(
+ [
+ 'Visits' =>
+ $this->itemmodule
+ ->getQueryEngine()
+ ->getVisitList($this->itemcategory, $this->dictionaryitem),
+ ],
+ );
+ }
+
+ /**
+ * {@inheritDoc}
+ *
+ * @param \User $user - The user loading the page
+ * @param ServerRequestInterface $request - The page to load resources for
+ *
+ * @return void
+ */
+ public function loadResources(
+ \User $user,
+ ServerRequestInterface $request,
+ ) : void {
+ $queryparams = $request->getQueryParams();
+ if (!isset($queryparams['module']) || !isset($queryparams['item'])) {
+ return;
+ }
+
+ $modules = $this->loris->getActiveModules();
+
+ foreach ($modules as $module) {
+ if ($module->getName() !== $queryparams['module']) {
+ continue;
+ }
+ if (!$module->hasAccess($user)) {
+ continue;
+ }
+
+ $this->itemmodule = $module;
+ $mdict = $module->getQueryEngine()->getDataDictionary();
+
+ if (count($mdict) > 0) {
+ foreach ($mdict as $cat) {
+ foreach ($cat->getItems() as $dictitem) {
+ if ($dictitem->getName() === $queryparams['item']) {
+ $this->dictionaryitem = $dictitem;
+ $this->itemcategory = $cat;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/modules/dataquery/templates/starredwidget.tpl b/modules/dataquery/templates/starredwidget.tpl
new file mode 100644
index 00000000000..6641cfd8737
--- /dev/null
+++ b/modules/dataquery/templates/starredwidget.tpl
@@ -0,0 +1,15 @@
+
diff --git a/modules/dataquery/templates/studyquerieswidget.tpl b/modules/dataquery/templates/studyquerieswidget.tpl
new file mode 100644
index 00000000000..689f135dce9
--- /dev/null
+++ b/modules/dataquery/templates/studyquerieswidget.tpl
@@ -0,0 +1,42 @@
+
+
+
+Note: matches count only includes candidates that you have access to. Results may vary from other users due to permissions.
+
diff --git a/modules/dictionary/php/datadictrow.class.inc b/modules/dictionary/php/datadictrow.class.inc
index 41289c343b8..9097f7b0dd1 100644
--- a/modules/dictionary/php/datadictrow.class.inc
+++ b/modules/dictionary/php/datadictrow.class.inc
@@ -64,7 +64,6 @@ class DataDictRow implements \LORIS\Data\DataInstance,
'datascope' => $scope,
'type' => $this->getDataType(),
'cardinality' => $this->getCardinality(),
- 'visits' => $this->visits,
];
$itype = $this->item->getDataType();
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 ab79a11f815..0771738c896 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
@@ -95,12 +95,19 @@ class EEGLabSeriesProvider extends Component {
Promise.race(racers(fetchJSON, chunksURL, '/index.json')).then(
({json, url}) => {
if (json) {
- const {channelMetadata, shapes, timeInterval, seriesRange} = json;
+ const {
+ channelMetadata,
+ shapes,
+ timeInterval,
+ seriesRange,
+ validSamples,
+ } = json;
this.store.dispatch(
setDatasetMetadata({
chunksURL: url,
channelMetadata,
shapes,
+ validSamples,
timeInterval,
seriesRange,
limit,
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/LineChunk.tsx b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/LineChunk.tsx
index 7f1bde16625..fe3ed61d9b0 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/LineChunk.tsx
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/components/LineChunk.tsx
@@ -7,10 +7,12 @@ import {Group} from '@visx/group';
import {colorOrder} from '../../color';
const LineMemo = R.memoizeWith(
- ({amplitudeScale, filters, channelIndex, traceIndex,
- chunkIndex, isStacked, DCOffset, numChannels,
- numChunks, previousPoint}) =>
- `${amplitudeScale},${filters.join('-')},`
+ ({amplitudeScale, interval, filters,
+ channelIndex, traceIndex, chunkIndex,
+ isStacked, DCOffset, numChannels,
+ numChunks, previousPoint,
+ }) =>
+ `${amplitudeScale},${interval.join('-')},${filters.join('-')},`
+ `${channelIndex}-${traceIndex}-${chunkIndex},`
+ `${isStacked},${DCOffset},${numChannels},`
+ `${numChunks},${previousPoint}`,
@@ -152,7 +154,7 @@ const LineChunk = ({
top={-p0[1]}
>
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/fetchChunks.tsx b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/fetchChunks.tsx
index e7066cfabb3..eb7fd6abb1e 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/fetchChunks.tsx
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/logic/fetchChunks.tsx
@@ -110,7 +110,7 @@ export const createFetchChunksEpic = (fromState: (any) => State) => (
Rx.map(([, state]) => fromState(state)),
Rx.debounceTime(UPDATE_DEBOUNCE_TIME),
Rx.concatMap(({bounds, dataset, channels}) => {
- const {chunksURL, shapes, timeInterval} = dataset;
+ const {chunksURL, shapes, validSamples, timeInterval} = dataset;
if (!chunksURL) {
return of();
}
@@ -123,19 +123,25 @@ export const createFetchChunksEpic = (fromState: (any) => State) => (
const shapeChunks =
shapes.map((shape) => shape[shape.length - 2]);
- const chunkIntervals : chunkIntervals[] = shapeChunks
+ const valuesPerChunk =
+ shapes.map((shape) => shape[shape.length - 1]);
+
+ const chunkIntervals = shapeChunks
.map((numChunks, downsampling) => {
const recordingDuration = Math.abs(
timeInterval[1] - timeInterval[0]
);
+ const filledChunks = (numChunks - 1) +
+ (validSamples[downsampling] / valuesPerChunk[downsampling]);
+
const i0 =
- (numChunks *
+ (filledChunks *
Math.floor(bounds.interval[0] - bounds.domain[0])
) / recordingDuration;
const i1 =
- (numChunks *
+ (filledChunks *
Math.ceil(bounds.interval[1] - bounds.domain[0])
) / recordingDuration;
@@ -145,7 +151,11 @@ export const createFetchChunksEpic = (fromState: (any) => State) => (
];
return {
- interval: interval,
+ interval:
+ [
+ Math.floor(i0),
+ Math.min(Math.ceil(i1), filledChunks),
+ ],
numChunks: numChunks,
downsampling,
};
@@ -164,12 +174,18 @@ export const createFetchChunksEpic = (fromState: (any) => State) => (
const chunkPromises = R.range(...finestChunks.interval).flatMap(
(chunkIndex) => {
const numChunks = finestChunks.numChunks;
+
+ const filledChunks = (numChunks - 1) + (
+ validSamples[finestChunks.downsampling] /
+ valuesPerChunk[finestChunks.downsampling]
+ );
+
const chunkInterval = [
timeInterval[0] +
- (chunkIndex / numChunks) *
+ (chunkIndex / filledChunks) *
(timeInterval[1] - timeInterval[0]),
timeInterval[0] +
- ((chunkIndex + 1) / numChunks) *
+ ((chunkIndex + 1) / filledChunks) *
(timeInterval[1] - timeInterval[0]),
];
if (chunkInterval[0] <= bounds.interval[1]) {
diff --git a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/dataset.tsx b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/dataset.tsx
index 08d7fa07149..399696f0b55 100644
--- a/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/dataset.tsx
+++ b/modules/electrophysiology_browser/jsx/react-series-data-viewer/src/series/store/state/dataset.tsx
@@ -29,6 +29,7 @@ export type Action =
chunksURL: string,
channelNames: string[],
shapes: number[][],
+ validSamples: number[],
timeInterval: [number, number],
seriesRange: [number, number],
limit: number,
@@ -46,6 +47,7 @@ export type State = {
activeEpoch: number | null,
physioFileID: number | null,
shapes: number[][],
+ validSamples: number[],
timeInterval: [number, number],
seriesRange: [number, number],
};
@@ -68,6 +70,7 @@ export const datasetReducer = (
offsetIndex: 1,
limit: DEFAULT_MAX_CHANNELS,
shapes: [],
+ validSamples: [],
timeInterval: [0, 1],
seriesRange: [-1, 2],
},
diff --git a/modules/genomic_browser/jsx/tabs_content/files.js b/modules/genomic_browser/jsx/tabs_content/files.js
index cbd7d3ba7bf..be907b2cc85 100644
--- a/modules/genomic_browser/jsx/tabs_content/files.js
+++ b/modules/genomic_browser/jsx/tabs_content/files.js
@@ -34,6 +34,7 @@ class Files extends Component {
},
};
this.fetchData = this.fetchData.bind(this);
+ this.formatColumn = this.formatColumn.bind(this);
this.openFileUploadModal = this.openFileUploadModal.bind(this);
this.closeFileUploadModal = this.closeFileUploadModal.bind(this);
this.renderFileUploadForm = this.renderFileUploadForm.bind(this);
@@ -149,9 +150,16 @@ class Files extends Component {
formatColumn(column, cell, rowData, rowHeaders) {
let reactElement;
switch (column) {
+ case 'Name':
+ const fileName = rowData.Name.split('/').pop();
+ const url =
+ `${this.props.baseURL
+ }/genomic_browser/FileManager?filename=${fileName}`;
+ reactElement = {fileName} {rowData.PSCID} {rowData.PSCID} {this.state.data.cohorts[parseInt(cell)]} ;
diff --git a/modules/genomic_browser/php/filemanager.class.inc b/modules/genomic_browser/php/filemanager.class.inc
index 8c35329bbd7..a237a53262c 100644
--- a/modules/genomic_browser/php/filemanager.class.inc
+++ b/modules/genomic_browser/php/filemanager.class.inc
@@ -54,6 +54,33 @@ class FileManager extends \NDB_Page implements ETagCalculator
*/
private function _handleGET(ServerRequestInterface $request) : ResponseInterface
{
+ // Parse GET query params.
+ $values = $request->getQueryParams();
+ // GET request for downloading file by ID.
+ if ($values['filename']) {
+ $factory = \NDB_Factory::singleton();
+ $config = $factory->config();
+ $filesDir = \Utility::appendForwardSlash(
+ $config->getSetting('GenomicDataPath')
+ );
+ try {
+ $downloadhandler = new \LORIS\FilesDownloadHandler(
+ new \SplFileInfo($filesDir)
+ );
+ $request = $request->withAttribute(
+ 'filename',
+ $values['filename']
+ );
+ return $downloadhandler->handle($request);
+ } catch (\LorisException $e) {
+ // FilesUploadHandler throws an exception if there's a problem with
+ // the downloaddir.
+ return new \LORIS\Http\Response\JSON\InternalServerError(
+ $e->getMessage()
+ );
+ }
+ }
+
$provisioner = new FilesProvisioner();
$user = $request->getAttribute('user');
diff --git a/modules/genomic_browser/php/uploading/genomicfile.class.inc b/modules/genomic_browser/php/uploading/genomicfile.class.inc
index f220a0cb836..46a9e209219 100644
--- a/modules/genomic_browser/php/uploading/genomicfile.class.inc
+++ b/modules/genomic_browser/php/uploading/genomicfile.class.inc
@@ -468,8 +468,10 @@ class Genomicfile
function setFullPath(&$fileToUpload) : void
{
$config = \NDB_Config::singleton();
- $genomic_data_dir = rtrim($config->getSetting('GenomicDataPath'), '/')
- . '/genomic_uploader/';
+ $genomic_data_dir = rtrim(
+ $config->getSetting('GenomicDataPath'),
+ '/'
+ ) . '/';
$fileToUpload->full_path = $genomic_data_dir
. $fileToUpload->file_name;
diff --git a/modules/imaging_browser/js/imagingbrowser.js b/modules/imaging_browser/js/imagingbrowser.js
index 101e661cd6d..b6ccc5fd802 100644
--- a/modules/imaging_browser/js/imagingbrowser.js
+++ b/modules/imaging_browser/js/imagingbrowser.js
@@ -18,7 +18,7 @@ $(document).ready(function () {
// Open a new window
var w = window.open(
- loris.BaseURL + "/brainbrowser/?minc_id=[" + FileIDs + "]" + extraparam
+ loris.BaseURL + "/brainbrowser/?minc_id=" + FileIDs + extraparam
);
w.focus();
diff --git a/modules/imaging_browser/js/jiv_and_imaging_browser.js b/modules/imaging_browser/js/jiv_and_imaging_browser.js
index b4ba4bdd8e9..079cd6d4b1e 100644
--- a/modules/imaging_browser/js/jiv_and_imaging_browser.js
+++ b/modules/imaging_browser/js/jiv_and_imaging_browser.js
@@ -128,7 +128,7 @@ $(document).ready(function () {
// Open a new window
var w = window.open(
- loris.BaseURL + "/brainbrowser/?minc_id=[" + FileIDs + "]" + extraparam
+ loris.BaseURL + "/brainbrowser/?minc_id=" + FileIDs + extraparam
);
w.focus();
diff --git a/modules/imaging_browser/jsx/ImagePanel.js b/modules/imaging_browser/jsx/ImagePanel.js
index f06e9b5c4da..98de9ea2255 100644
--- a/modules/imaging_browser/jsx/ImagePanel.js
+++ b/modules/imaging_browser/jsx/ImagePanel.js
@@ -751,8 +751,8 @@ class LongitudinalViewButton extends Component {
openWindowHandler(e) {
e.preventDefault();
window.open(
- this.props.BaseURL + '/brainbrowser/?minc_id=[' +
- this.props.OtherTimepoints + ']',
+ this.props.BaseURL + '/brainbrowser/?minc_id=' +
+ this.props.OtherTimepoints,
'BrainBrowser Volume Viewer',
'location = 0,width = auto, height = auto, scrollbars=yes'
);
@@ -894,8 +894,8 @@ class ImagePanelBody extends Component {
*/
openWindowHandler(e) {
e.preventDefault();
- window.open(this.props.BaseURL + '/brainbrowser/?minc_id=[' +
- this.props.FileID + ']', 'BrainBrowser Volume Viewer',
+ window.open(this.props.BaseURL + '/brainbrowser/?minc_id=' +
+ this.props.FileID, 'BrainBrowser Volume Viewer',
'location = 0,width = auto, height = auto, scrollbars=yes');
}
diff --git a/modules/imaging_qc/jsx/imagingQCIndex.js b/modules/imaging_qc/jsx/imagingQCIndex.js
index 70c3b7e6797..3c198d4a717 100644
--- a/modules/imaging_qc/jsx/imagingQCIndex.js
+++ b/modules/imaging_qc/jsx/imagingQCIndex.js
@@ -18,6 +18,7 @@ class ImagingQCIndex extends Component {
ImgData: {},
isLoadedImg: false,
imgFilter: {},
+ error: '',
};
this.fetchData = this.fetchData.bind(this);
}
@@ -80,10 +81,19 @@ class ImagingQCIndex extends Component {
*/
fetchData(url, state) {
return fetch(url, {credentials: 'same-origin'})
- .then((resp) => resp.json())
- .then((data) => this.setState({[state]: data}))
- .catch((error) => {
- this.setState({error: true});
+ .then((resp) => {
+ return resp.text();
+ })
+ .then((data) => {
+ if (data === 'MRI Parameter Form table does not exist') {
+ this.setState({error: data});
+ } else {
+ this.setState({[state]: JSON.parse(data)});
+ }
+ })
+ .catch((error) => {
+ this.setState({error: error});
+ console.log(error);
});
}
@@ -217,7 +227,21 @@ class ImagingQCIndex extends Component {
} else {
return (
-
An error occurred while loading the page.
+ {this.state.error === 'MRI Parameter Form table does not exist' ?
+ <>
+
+ The MRI parameter form instrument must be
+ installed in-order to use this module.
+
+
+ Please contact your administrator
+ if you require this functionality.
+
+ :
+
+ An error occurred while loading the page.
+
+ }
-
- false
-
-
-
- sampleInstrument
-
- sampleInstrumentPermissionName
-
-
- sampleInstrument2
- sampleInstrument2PermissionName
-
-
-
diff --git a/raisinbread/migration.md b/raisinbread/migration.md
index a57cc6d877d..b43d4722180 100644
--- a/raisinbread/migration.md
+++ b/raisinbread/migration.md
@@ -5,7 +5,28 @@
____________________________________________________________________________________________________________________
# 25.0
+2021-03-01-publication-add-columns.sql
+2021-09-13_fix_project_primary_key.sql
+2021-12-01-make_subproject_titles_unique.sql
+2022-03-03-AddHEDTags.sql
+2022-11-22-eeg-additional-events-table.sql
+2022-11-24-electrode-coord-system.sql
+2022-12-01-subprojects_no_more.sql
+2022-12-05-AddVizConfig.sql
+2022-12-20-instrumentpermissions.sql
+2022-12-20-project-name-not-null.sql
+2023-01-19_add_index_on_violations_resolved.sql
+2023-01-31-add-date-stage-change.sql
+2023-02-17-imaging-new-config.sql
+2023-02-24-electrophysiology_uploader.sql
+2023-02-28_create_max_days_inactive_config_for_users.sql
+2023-04-24_add_phase_enc_dir_and_echo_number_to_MRICandidateErrors.sql
+
+## 25.0 - cleanup
+2021-11-17-noextlibs.sql
+2022-12-15-Drop_Flag_status.sql
2023-02-21-unusedconfigs.sql
+2023-07-10-remove_quality_control_from_projects.sql
____________________________________________________________________________________________________________________
# 24.0
2019-07-01_fix_project_in_session.sql
diff --git a/raisinbread/test/api/LorisApiInstrumentsTest.php b/raisinbread/test/api/LorisApiInstrumentsTest.php
index 1a3dd80884c..01dc5eefcf2 100644
--- a/raisinbread/test/api/LorisApiInstrumentsTest.php
+++ b/raisinbread/test/api/LorisApiInstrumentsTest.php
@@ -67,6 +67,95 @@ public function testGetCandidatesCandidVisitInstruments(): void
);
}
+ /**
+ * Tests the HTTP POST request for the
+ * endpoint /candidates/{candid}/{visit}/instruments
+ *
+ * @return void
+ */
+ public function testPostCandidatesCandidVisitInstruments(): void
+ {
+ // Remove all instruments from this CandID.
+ $SessionID = $this->DB->pselectOne(
+ "SELECT ID FROM session WHERE Visit_label=:VL AND CandID=:Candidate",
+ [
+ 'VL' => $this->visitTest,
+ 'Candidate' => $this->candidTest
+ ]
+ );
+ $this->DB->delete("flag", ['SessionID' => $SessionID]);
+
+ // Insert one
+ $json_data = [
+ 'Meta' => [
+ 'CandID' => $this->candidTest,
+ 'Visit' => $this->visitTest,
+ ],
+ "Instruments" => [ 'bmi' ],
+ ];
+ $response = $this->client->request(
+ 'POST',
+ "candidates/$this->candidTest/$this->visitTest/instruments",
+ [
+ 'http_errors' => false,
+ 'headers' => $this->headers,
+ 'json' => $json_data,
+ ]
+ );
+ $this->assertEquals(200, $response->getStatusCode());
+ // Verify the endpoint has a body
+ $body = $response->getBody();
+ $this->assertNotEmpty($body);
+
+ $instrArray = json_decode(
+ (string) utf8_encode(
+ $response->getBody()->getContents()
+ ),
+ true
+ );
+
+ $this->assertSame(gettype($instrArray), 'array');
+
+ $this->assertArrayHasKey(
+ 'CandID',
+ $instrArray['Meta']
+ );
+ $this->assertArrayHasKey(
+ 'Visit',
+ $instrArray['Meta']
+ );
+ $this->assertArrayHasKey(
+ '0',
+ $instrArray['Instruments']
+ );
+ $this->assertEquals($instrArray['Instruments'], ['bmi']);
+
+ // Insert another and make sure they are both there now.
+ $json_data = [
+ 'Meta' => [
+ 'CandID' => $this->candidTest,
+ 'Visit' => $this->visitTest,
+ ],
+ "Instruments" => [ 'testtest' ],
+ ];
+ $response = $this->client->request(
+ 'POST',
+ "candidates/$this->candidTest/$this->visitTest/instruments",
+ [
+ 'http_errors' => false,
+ 'headers' => $this->headers,
+ 'json' => $json_data,
+ ]
+ );
+ $instrArray = json_decode(
+ (string) utf8_encode(
+ $response->getBody()->getContents()
+ ),
+ true
+ );
+ $this->assertEquals(200, $response->getStatusCode());
+ $this->assertEquals($instrArray['Instruments'], ['bmi', 'testtest']);
+ }
/**
* Tests the HTTP GET request for the
* endpoint /candidates/{candid}/{visit}/instruments{instruments}
diff --git a/smarty/templates/email/issue_assigned_modified.tpl b/smarty/templates/email/issue_assigned_modified.tpl
new file mode 100644
index 00000000000..8fa7792263a
--- /dev/null
+++ b/smarty/templates/email/issue_assigned_modified.tpl
@@ -0,0 +1,14 @@
+Subject: Issue Assigned - # {$issueID}
+{$firstname},
+
+The issue "{$title}" that is assigned to you has been modified.
+
+{if $comment !== "null"}
+ {$currentUser} commented: "{$comment}"
+
+{/if}
+Please see the issue here: {$url}
+
+Thank you,
+
+LORIS Team
\ No newline at end of file
diff --git a/smarty/templates/email/issue_change.tpl b/smarty/templates/email/issue_change.tpl
index 8a8b53a9188..9559382c328 100644
--- a/smarty/templates/email/issue_change.tpl
+++ b/smarty/templates/email/issue_change.tpl
@@ -1,9 +1,12 @@
Subject: Change to Issue # - {$issueID}
-
{$firstname},
{$currentUser} has updated an issue "{$title}" you are watching.
+{if $comment !== "null"}
+ {$currentUser} commented: "{$comment}"
+{/if}
+
Please view the changes here: {$url}
Thank you,
diff --git a/smarty/templates/main.tpl b/smarty/templates/main.tpl
index 323deca0e32..ec4b517917c 100644
--- a/smarty/templates/main.tpl
+++ b/smarty/templates/main.tpl
@@ -27,12 +27,14 @@
{$study_title}