feature/ipi-dataloggers (#195)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hhd-ui",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "private": true,
   "dependencies": {
     "@ag-grid-community/client-side-row-model": "^30.0.3",

src/app-bundles/create-auth-bundle.js

@@ -61,7 +61,7 @@ const createAuthBundle = (opts) => {
         try {
           xhr(url, (err, response, body) => {
             if (err) {
-              throw new Error('Login Response not ok');
+              throw new Error(`Login Response not ok. ${err}`);
             } else {
               const token = typeof body === 'string' ? body : JSON.parse(body);
               dispatch({

src/app-bundles/instrument-sensors-bundle.js

@@ -31,11 +31,11 @@ export default {
   selectInstrumentSensorsMeasurements: (state) => state.instrumentSensors.measurements,
   selectInstrumentSensorsLastFetched: (state) => state.instrumentSensors._lastFetched,
 
-  doFetchInstrumentSensorsById: () => ({ dispatch, store, apiGet }) => {
+  doFetchInstrumentSensorsById: (type) => ({ dispatch, store, apiGet }) => {
     dispatch({ type: 'INSTRUMENT_SENSORS_BY_ID_FETCH_START' });
     const { instrumentId } = store.selectInstrumentsIdByRoute();
 
-    const url = `/instruments/saa/${instrumentId}/segments`;
+    const url = `/instruments/${type}/${instrumentId}/segments`;
 
     apiGet(url, (err, body) => {
       if (err) {
@@ -52,11 +52,11 @@ export default {
     });
   },
 
-  doUpdateInstrumentSensor: (formData) => ({ dispatch, store, apiPut }) => {
+  doUpdateInstrumentSensor: (type, formData) => ({ dispatch, store, apiPut }) => {
     dispatch({ type: 'INSTRUMENT_SENSOR_UPDATE_START' });
 
     const { instrumentId } = store.selectInstrumentsIdByRoute();
-    const url = `/instruments/saa/${instrumentId}/segments`;
+    const url = `/instruments/${type}/${instrumentId}/segments`;
 
     apiPut(url, formData, (err, _body) => {
       if (err) {
@@ -68,10 +68,10 @@ export default {
     });
   },
 
-  doFetchInstrumentSensorMeasurements: (before, after) => ({ dispatch, store, apiGet }) => {
+  doFetchInstrumentSensorMeasurements: (type, before, after) => ({ dispatch, store, apiGet }) => {
     dispatch({ type: 'SENSOR_MEASUREMENTS_FETCH_START' });
     const { instrumentId } = store.selectInstrumentsIdByRoute();
-    const url = `/instruments/saa/${instrumentId}/measurements?before=${before}&after=${after}`;
+    const url = `/instruments/${type}/${instrumentId}/measurements?before=${before}&after=${after}`;
 
     apiGet(url, (err, body) => {
       if (err) {
@@ -86,6 +86,5 @@ export default {
     });
 
     dispatch({ type: 'SENSOR_MEASUREMENTS_FETCH_FINISHED' });
-
   },
 };

src/app-components/domain-select.jsx

@@ -29,7 +29,7 @@ export default connect(
             size='small'
             defaultValue={options.find(el => el.value === defaultValue)}
             isOptionEqualToValue={(opt, val) => opt.value === val.value}
-            onChange={e => setSelectValue(e.target.innerText)}
+            onChange={(_e, value) => setSelectValue(value?.label)}
             renderInput={(params) => <TextField {...params} placeholder='Select one...' />}
             options={options}
             fullWidth

src/app-pages/help/apiHelp.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import Card from '../../app-components/card/card';
+
+const apiURL = import.meta.env.DEV
+  ? 'http://localhost:8080'
+  : import.meta.env.VITE_API_URL;
+
+const ApiHelp = () => (
+  <Card className='mt-2'>
+    <Card.Body>
+      <p>
+        <strong className='pr-3'>Q:</strong>I want to view and interact with the API. Where can I find documetation for the API?
+      </p>
+      <p className='text-dark'>
+        The API is hosted at the link below. Simply click the link to be directed towards the swagger documentation. The documentation
+        is also interactable, requiring a Bearer token to authenticate and make requests with.
+      </p>
+      <hr />
+      <div>
+        <p className='text-primary'>Click the link below to view the Swagger Documentation for the API:</p>
+        <a href={`${apiURL}/swagger/index.html`} target='_blank' rel='noreferrer'>{apiURL}/swagger/index.html</a>
+      </div>
+    </Card.Body>
+  </Card>
+);
+
+export default ApiHelp;

src/app-pages/help/help.jsx

@@ -1,16 +1,18 @@
 import React from 'react';
 
+import ApiHelp from './apiHelp';
 import Hero from '../../app-components/hero';
 import Onboarding from './onboarding';
 
 const HelpPage = () => (
   <>
     <Hero />
-    <section>
+    <section className='mb-4'>
       <div className='container'>
         <h3 className='mt-3 mb-6'>Frequently Asked Questions</h3>
         <hr className='mb-6' />
         <Onboarding />
+        <ApiHelp />
       </div>
     </section>
   </>

src/app-pages/help/onboarding.jsx

@@ -117,7 +117,6 @@ const DownloadCSVButton = ({ csvContent, filename }) => {
 export default connect(
   'selectDomainsItemsByGroup',
   ({ domainsItemsByGroup }) => {
-    // NotesXYZ are additional information to be included with each tab
     const NotesInstruments = () => (
       <div>
         <p className='text-info'>Optional Fields:</p>
@@ -171,14 +170,18 @@ export default connect(
 
     const buildContent = (title, csvData, notes) => (
       <div>
-        <div className='float-right'>
-          <DownloadCSVButton
-            csvContent={csvData}
-            filename={`${title}.csv`}
-          />
-        </div>
-        <CSV arr={csvData} />
-        <section className='section has-background-'>
+        {csvData && (
+          <>
+            <div className='float-right'>
+              <DownloadCSVButton
+                csvContent={csvData}
+                filename={`${title}.csv`}
+              />
+            </div>
+            <CSV arr={csvData} />
+          </>
+        )}
+        <section className='section has-background'>
           {notes}
         </section>
       </div>
@@ -214,7 +217,7 @@ export default connect(
             <strong className='pr-3'>Q:</strong>I want to try the site with my
             own projects. How should I organize my dataset for upload?
           </p>
-          <p className='text-muted'>
+          <p className='text-dark'>
             Glad you asked! The site supports .csv uploads of Instruments, Timeseries, Timeseries
             measurements and Inclinometer measurements at this time. Uploaders for Projects are coming soon. To get organized,
             start with <span className='has-text-weight-bold'>projects</span>{' '}

src/app-pages/instrument/details.jsx

@@ -5,10 +5,11 @@ import { Edit, Refresh, SettingsOutlined } from '@mui/icons-material';
 import AlertEntry from './alert/alert-entry';
 import Button from '../../app-components/button';
 import Card from '../../app-components/card';
-import DepthBasedPlots from './depth-based-plots';
+import SaaDepthBasedPlots from './saa-depth-based-plots';
 import Dropdown from '../../app-components/dropdown';
 import InstrumentDisplay from './instrument-display';
 import InstrumentForm from '../../common/forms/instrument-form';
+import IpiDepthBasedPlots from './ipi-depth-based-plots';
 import LoginMessage from '../../app-components/login-message';
 import Map from '../../app-components/classMap';
 import NoAlerts from './alert/no-alerts';
@@ -54,12 +55,13 @@ export default connect(
 
     const timeseries = timeseriesByInstrumentId[instrument.id] || [];
     const isShapeArray = instrument?.type === 'SAA';
+    const isIPI = instrument?.type === 'IPI';
     const len = timeseries.length;
 
     let firstTimeseries = null;
     if (len && len > 0) firstTimeseries = timeseries[0];
 
-    if (isShapeArray && !notifcationFired && !instrument?.opts?.initial_time) {
+    if ((isShapeArray || isIPI) && !notifcationFired && !instrument?.opts?.initial_time) {
       setNotificationFired(true);
       doNotificationFire({
         title: 'Missing Initial Time',
@@ -71,7 +73,7 @@ export default connect(
               size='small'
               variant='info'
               text='Set Initial Time'
-              handleClick={() => doModalOpen(SetInitialTimeModal, {}, 'lg')}
+              handleClick={() => doModalOpen(SetInitialTimeModal, { type: isShapeArray ? 'saa' : 'ipi'}, 'lg')}
             />
           </span>
         ),
@@ -178,7 +180,12 @@ export default connect(
         </section>
         {isShapeArray && (
           <section className='container-fluid my-4'>
-            <DepthBasedPlots />
+            <SaaDepthBasedPlots />
+          </section>
+        )}
+        {isIPI && (
+          <section className='container-fluid my-4'>
+            <IpiDepthBasedPlots />
           </section>
         )}
         <section className='container-fluid my-4'>