[dataquery] New Data Query Module

Makefile

@@ -62,6 +62,9 @@ data_release:
 instrument_manager:
 	target=instrument_manager npm run compile
 
+dataquery:
+	target=dataquery npm run compile
+
 login:
 	target=login npm run compile
 

modules/dataquery/jsx/calcpayload.tsx

@@ -0,0 +1,55 @@
+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) => {
+            // console.log('payload ', val);
+            const fieldpayload: APIQueryField = {
+                module: val.module,
+                category: val.category,
+                field: val.field,
+            };
+            // console.log('payload visits', val.visits);
+            if (val.visits) {
+                fieldpayload.visits = val.visits;
+                // convert from React select to static string
+                // payload.visits = val.visits.map( (visitOption) => visitOption.value);
+            }
+            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;
+}
+

modules/dataquery/jsx/components/expansionpanels.tsx

@@ -0,0 +1,122 @@
+import React, {useState} from 'react';
+
+/**
+ * Component to render a single panel
+ *
+ * @param {object} props - The React Props
+ * @param {boolean} props.defaultOpen - Whether the default should default open
+ * @param {boolean} props.alwaysOpen - Whether the panel can not be collapsed
+ * @param {string} props.title - The panel title
+ * @param {React.ReactElement} props.content - The panel body
+ * @returns {React.ReactElement} - The rendered panel
+ */
+const Panel = (props: {
+    defaultOpen: boolean,
+    alwaysOpen: boolean,
+    title: string,
+    content: React.ReactElement,
+}) => {
+  const [active, setActive] = useState(props.defaultOpen);
+
+  const styles = {
+    accordion: {
+      default: {
+        width: '100%',
+        padding: '18px',
+        outline: 'none',
+        color: '#246EB6',
+        fontSize: '15px',
+        cursor: props.alwaysOpen ? 'default' : 'pointer',
+        textAlign: 'center' as const,
+        backgroundColor: '#fff',
+        border: '1px solid #246EB6',
+        transition: '0.4s',
+      },
+      active: {
+        color: '#fff',
+        textAlign: 'left' as const,
+        backgroundColor: '#246EB6',
+      },
+    },
+    panel: {
+      default: {
+        display: 'none',
+        padding: '20px 18px',
+        backgroundColor: '#fff',
+        border: '1px solid #246EB6',
+        overflow: 'hidden',
+      },
+      active: {
+        display: 'block',
+        margin: '0 0 10px 0',
+      },
+    },
+  };
+
+  /**
+   * Handle clicking on the header
+   *
+   * @returns {void}
+   */
+  const handleExpansionClick = () => {
+    if (props.alwaysOpen) return;
+    setActive((active) => !active);
+  };
+
+  const styleAccordion: React.CSSProperties = {
+    ...styles.accordion.default,
+    ...(active ? styles.accordion.active : {}),
+  };
+
+  const stylePanel: React.CSSProperties = {
+    ...styles.panel.default,
+    ...(active ? styles.panel.active : {}),
+  };
+
+  return (
+    <div>
+      <button onClick={() => handleExpansionClick()}
+              style={styleAccordion}>
+        {props.title}
+      </button>
+      <div style={stylePanel}>
+        {props.content}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * 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 (
+    <div className={'container-fluid'}
+         style={{margin: '0 auto', maxWidth: '900px'}}>
+      { props.panels.map((panel, index) => (
+        <Panel
+          key={index}
+          title={panel.title}
+          content={panel.content}
+          alwaysOpen={panel.alwaysOpen}
+          defaultOpen={panel.defaultOpen || props.alwaysOpen || true}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ExpansionPanels;

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<SelectGroup>) => {
+        // The callback should be (e: SelectOption) but typescript
+        // is convinced that it's a SingleValue<SelectGroup>.
+        // 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 (
+        <div>
+            <Select options={groups} onChange={selected}
+                 menuPortalTarget={document.body}
+                 styles={{menuPortal:
+                    /**
+                     * Add a z-index to ensure the element stays visible
+                     *
+                     * @param {object} base - the base CSS
+                     * @returns {object} - the new CSS with z-index added
+                     */
+                    (base) => ({...base, zIndex: 9999})}
+                }
+                 placeholder={placeholder}
+            />
+        </div>
+    );
+}
+
+export default FilterableSelectGroup;