@corva/ui 0.38.0-1 → 0.38.0-6

package/src/effects/useDevCenterApp.js

@@ -0,0 +1,66 @@
+import { useState, useEffect } from 'react';
+import { getAppIdentifier } from '~/utils/devcenter';
+
+const COMPONENTS = {};
+
+const useCorvaApp = ({ CLIAppComponent, CLIAppSettings, url, appKey, version }) => {
+  const appName = getAppIdentifier(appKey, version);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const AppComponent =
+    CLIAppComponent || (COMPONENTS[appName] && COMPONENTS[appName].component) || null;
+  const AppSettings =
+    CLIAppSettings || (COMPONENTS[appName] && COMPONENTS[appName].settings) || null;
+  const finishLoading = () => setIsLoading(false);
+
+  useEffect(() => {
+    const AppSource = COMPONENTS[appName];
+
+    if (!url || !appName || (AppComponent && AppSettings)) return;
+
+    if ((!CLIAppComponent && !AppSource) || (AppSource && AppSource.component)) {
+      setIsLoading(true);
+
+      if (!AppSource || !AppSource.script) {
+        const scriptFile = document.createElement('script');
+
+        scriptFile.src = url;
+
+        scriptFile.onload = () => {
+          COMPONENTS[appName] = window[appName] && window[appName].default;
+          finishLoading();
+        };
+
+        COMPONENTS[appName] = {
+          component: null,
+          script: scriptFile,
+        };
+
+        setTimeout(() => document.body.appendChild(scriptFile));
+      }
+
+      const { script } = COMPONENTS[appName];
+
+      if (script.onload) {
+        const loaderCallback = script.onload;
+        script.onload = () => {
+          loaderCallback();
+          finishLoading();
+        };
+      }
+
+      script.onabort = finishLoading;
+
+      script.error = finishLoading;
+    }
+  }, [url]);
+
+
+  return {
+    isLoading,
+    AppComponent,
+    AppSettings,
+  };
+};
+
+export default useCorvaApp;

package/src/effects/useEscPress.js

@@ -0,0 +1,19 @@
+import { useEffect, useCallback } from 'react';
+
+const useEscPress = (callback) => {
+  const onKeyDown = useCallback((event) => {
+    if(event.keyCode === 27) {
+      callback()
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', onKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown, false);
+    };
+  }, []);
+};
+
+export default useEscPress;

package/src/effects/useOutsideClick.js

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+const useOutsideClick = (ref, callback) => {
+  const handleClick = e => {
+    // NOTE: Check if it's not a material popover/popup
+    const muiPopover = e.target.closest('.MuiPopover-root');
+    const muiDialog = e.target.closest('.MuiDialog-container');
+    const reactModal = e.target.closest('.ReactModalPortal');
+    if (
+      ref.current &&
+      !ref.current.contains(e.target) &&
+      !muiPopover &&
+      !muiDialog &&
+      !reactModal
+    )
+      callback();
+  };
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClick);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  });
+};
+export default useOutsideClick;

package/src/effects/useSignedURL.js

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+import { getS3DownloadLink } from '~/clients/jsonApi';
+
+function useSignedURL(fileName) {
+  const [signedURL, setSignedURL] = useState('');
+
+  useEffect(() => {
+    if (fileName)
+      getS3DownloadLink(fileName)
+        .then(response => setSignedURL(response.url))
+        .catch(() => setSignedURL(''));
+  }, [fileName]);
+
+  return signedURL;
+}
+
+export default useSignedURL;

package/src/effects/useSubscriptions.js

@@ -0,0 +1,178 @@
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { parse } from 'querystring';
+import uuidV1 from 'uuid/v1';
+import { castArray, omit, differenceBy, concat, merge, mapValues } from 'lodash';
+import { getAppKeyFromStackTrace } from '~/clients/utils';
+import { getAppStorage, getDataAppStorage, getDataAppStorageAggregate } from '~/clients/jsonApi';
+
+import { getSubscriptionId } from '../clients/subscriptions';
+
+function getSubscriptionWithId(sub, hookId, appKey) {
+  const subId = getSubscriptionId(sub, hookId);
+  return { ...sub, hookId, subId, appInstanceId: subId, app_key: appKey };
+}
+
+async function fetchInitialSubscriptionsDataDeprecated(subscriptions, { timeQuery, appKey }) {
+  const requests = subscriptions.map(
+    async ({ provider, collection, assetId, subscribeOnly, params }) => {
+      if (subscribeOnly) return null;
+      const queryFromParameters = params.query;
+      const queryFromTime = timeQuery ? `{timestamp#lte#${timeQuery.timestamp.$lte}` : '';
+      const separator = queryFromParameters && queryFromTime ? 'AND' : '';
+      const query = `${queryFromParameters}${separator}${queryFromTime}`;
+
+      try {
+        return await getAppStorage(provider, collection, assetId, {
+          ...params,
+          ...(query ? { query } : {}),
+          appKey,
+        });
+      } catch (e) {
+        return [];
+      }
+    }
+  );
+  return Promise.all(requests);
+}
+
+async function fetchInitialSubscriptionsData(subscriptions, { timeQuery, appKey }) {
+  const requests = subscriptions.map(
+    async ({ provider, collection, assetId, subscribeOnly, params = {} }) => {
+      if (subscribeOnly) return null;
+
+      // NOTE: Use different endpoint for aggregate queries
+      // https://data.qa.corva.ai/docs#/default/aggregate_api_v1_data__provider___dataset__aggregate__get
+      if (params.aggregate)
+        return getDataAppStorageAggregate(provider, collection, {
+          ...mapValues(params.aggregate, JSON.stringify),
+        });
+
+      const query = JSON.stringify(merge({ asset_id: assetId }, params.query, timeQuery));
+      const { limit = 1, sort = '{"timestamp": 1}' } = params;
+
+      try {
+        const options = {
+          ...params,
+          limit,
+          sort,
+          query,
+          appKey,
+        };
+
+        return await getDataAppStorage(provider, collection, options);
+      } catch (e) {
+        return [];
+      }
+    }
+  );
+  return Promise.all(requests);
+}
+
+/**
+ * A hook to subscribe to the corva socket updates
+ * @param {Object | Object[]} subscriptions - subscription params
+ * @param {number} subscriptions.limit - only save given amount of records
+ * @param {boolean} subscriptions.subscribeOnly - do NOT send initial requests for the data
+ * @param {boolean} subscriptions.alwaysSubscribe - will always subscribe, even when well timeline used
+ * and do NOT store previously received data if true
+ * @param {Object | Object} options - various hook options
+ * @param {Object | Object} options.timestamp - requested time (usually from well timeline).
+ * If provided only the initial request is being sent with the {"timestamp": {"$lte":time}} query added.
+ */
+function useSubscriptions(subscriptions, { timestamp, isOldApiUsed } = {}) {
+  const [data, setData] = useState({});
+  // NOTE: Declare this hook id to differentiate between hooks
+  const hookIdRef = useRef();
+  if (!hookIdRef.current) hookIdRef.current = uuidV1();
+  const { subscribe, unsubscribe, socket } = window[Symbol.for('socket')];
+  const appKey = useMemo(() => getAppKeyFromStackTrace(), []);
+
+  // NOTE: Save previous subscriptions to detect added/removed subscriptions
+  const prevSubscriptionsRef = useRef([]);
+  const currentSubscriptions = castArray(subscriptions).map(sub =>
+    getSubscriptionWithId(sub, hookIdRef.current, appKey)
+  );
+
+  // NOTE: This string is used to trigger effects
+  const currentSubscriptionsIdsJoined = currentSubscriptions.map(sub => sub.subId).join();
+  const timeQuery = useMemo(() => {
+    if (timestamp) return { timestamp: { $lte: timestamp } };
+    const timeFromLocation = parse(window.location.search).time;
+    return timeFromLocation ? { timestamp: { $lte: new Date(timeFromLocation) / 1000 } } : null;
+  }, [window.location.search, timestamp]);
+
+  useEffect(() => {
+    const onDataReceive = event => {
+      // NOTE: Skip other effects subscriptions' events
+      if (event.hookId !== hookIdRef.current) return;
+      setData(prevData => {
+        let nextData = event.data;
+        if (event.subId in prevData && !event.subscribeOnly) {
+          nextData = concat(prevData[event.subId], event.data);
+        }
+
+        if (event.params && event.params.limit) nextData = nextData.slice(-event.params.limit);
+
+        return {
+          ...prevData,
+          [event.subId]: nextData,
+        };
+      });
+    };
+    if (socket) socket.on('data', onDataReceive);
+    // NOTE: Delete onDataReceive callback on unmounting
+    return () => socket && socket.off('data', onDataReceive);
+  }, []);
+
+  useEffect(() => {
+    const { current: prevSubscriptions } = prevSubscriptionsRef;
+    prevSubscriptions.forEach(unsubscribe);
+    prevSubscriptionsRef.current = [];
+  }, [timeQuery]);
+
+  useEffect(() => {
+    const { current: prevSubscriptions } = prevSubscriptionsRef;
+    const addedSubscriptions = differenceBy(currentSubscriptions, prevSubscriptions, 'subId');
+    const deletedSubscriptions = differenceBy(prevSubscriptions, currentSubscriptions, 'subId');
+    addedSubscriptions.forEach(subscription => {
+      // NOTE: only subscribe when the timestamp wasn't provided (well timeline wasn't used)
+      if (!timeQuery || subscription.alwaysSubscribe) subscribe(subscription);
+    });
+    deletedSubscriptions.forEach(unsubscribe);
+
+    prevSubscriptionsRef.current = currentSubscriptions;
+
+    // NOTE: Migrate to new api after https://corvaqa.atlassian.net/browse/DC-1090 is done
+    const fetchFunc = isOldApiUsed
+      ? fetchInitialSubscriptionsDataDeprecated
+      : fetchInitialSubscriptionsData;
+    fetchFunc(addedSubscriptions, { timeQuery, appKey, isOldApiUsed }).then(subsData =>
+      setData(prevData => {
+        // NOTE: Here we omit data from deleted subscriptions
+        const nextData = omit(
+          prevData,
+          deletedSubscriptions.map(sub => sub.subId)
+        );
+
+        addedSubscriptions.forEach((sub, idx) => {
+          if (subsData[idx] !== null) nextData[sub.subId] = subsData[idx];
+        });
+        return nextData;
+      })
+    );
+  }, [currentSubscriptionsIdsJoined, timeQuery]);
+
+  // NOTE: Clear all subscriptions on unmounting
+  useEffect(() => () => prevSubscriptionsRef.current.forEach(unsubscribe), []);
+
+  return useMemo(
+    () =>
+      currentSubscriptions.map(({ subId }) => ({
+        loading: !(subId in data),
+        data: data[subId],
+      })),
+    [data, currentSubscriptionsIdsJoined]
+  );
+}
+
+export default useSubscriptions;

package/src/exampleApp/ChartActionsListExample.js

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import Slider from '@material-ui/core/Slider';
+
+import ChartActionsList from '~/components/ChartActionsList';
+
+const RangeApp = () => {
+  const [values, setValues] = useState({
+    left: 10000,
+    right: 15000,
+    min: 0,
+    max: 20269.7,
+  });
+  
+  const onChange = values => {
+    setValues(val => ({ ...val, ...values }));
+  };
+
+  const changeRanges = () => {
+    setValues({
+      left: 5386.8,
+      right: 18427,
+      min: 0,
+      max: 18427,
+    });
+  };
+
+  return (
+    <div style={{ margin: '100px 500px' }}>
+      <button onClick={changeRanges}>Reset (change) ranges</button>
+      <h1>
+        Min: {values.min}. Max: {values.max}
+        <br />
+        (left) {values.left} - {values.right} (right)
+      </h1>
+      <Slider 
+        min={values.min}
+        max={values.max}
+        value={[values.left, values.right]}
+      />
+      <ChartActionsList
+        min={values.min}
+        max={values.max}
+        left={values.left}
+        right={values.right}
+        onChange={onChange}
+      />
+    </div>
+  );
+};
+
+export default RangeApp;

package/src/exampleApp/ExampleApp.css

@@ -0,0 +1,12 @@
+.exampleApp {
+  padding: 20px;
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+}
+
+.loadingContainer {
+  position: relative;
+}

package/src/exampleApp/ExampleApp.js

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import { Button } from '@material-ui/core';
+
+import LoadingIndicator from '~/components/LoadingIndicator';
+
+import styles from './ExampleApp.css';
+
+// NOTE: This example app is created just to test the components you implement inside this repo
+
+function ExampleApp() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <div className={styles.exampleApp}>
+      <Button onClick={() => setIsLoading(!isLoading)}>Toggle loader</Button>
+      <div className={styles.loadingContainer}>{isLoading && <LoadingIndicator />}</div>
+    </div>
+  );
+}
+
+export default ExampleApp;

package/src/exampleApp/ParameterChartExample.js

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import AddCircleOutline from '@material-ui/icons/AddCircleOutline';
+import styles from './ExampleApp.css';
+
+import { ParameterCharts, AddEditTrack } from '../components/ParameterCharts';
+
+import asset1 from './data/parametersWitsAndDysfanction.json';
+import asset2 from './data/parametersWitsAndDysfanction2.json';
+
+// NOTE: This example app is created just to test the components you implement inside this repo
+const mapping = [{"collection":"wits","key":"data.rop","name":"ROP","unit":"ft/h","unitType":"velocity"},{"collection":"wits","key":"data.diff_press","name":"Diff Press","unit":"psi","unitType":"pressure"},{"collection":"wits","key":"data.rotary_rpm","name":"Rotary RPM","unit":"rpm","unitType":"rpm"},{"collection":"wits","key":"data.weight_on_bit","name":"WOB","unit":"klbf","unitType":"force"},{"collection":"wits","key":"data.mud_flow_in","name":"Flow In","unit":"gal/min","unitType":"volumeFlowRate"},{"collection":"wits","key":"data.hook_load","name":"Hook load","unit":"klbf","unitType":"force"},{"collection":"wits","key":"data.standpipe_pressure","name":"Standpipe Pressure","unit":"psi","unitType":"pressure"},{"collection":"wits","key":"data.rotary_torque","name":"Rotary Torque","unit":"ft-klbf","unitType":"torque"},{"collection":"drillingDysfunction","key":"health.lateral.rms_avg_health","name":"Lateral RMS Average","unit":"gRMS","unitType":"gravityRMS"},{"collection":"drillingDysfunction","key":"health.axial.rms_avg_health","name":"Axial RMS Average","unit":"gRMS","unitType":"gravityRMS"},{"collection":"drillingDysfunction","key":"health.lateral.peak_shock_count_health","name":"Shock Lateral g","unit":"g","unitType":"gravity"},{"collection":"drillingDysfunction","key":"health.axial.peak_shock_count_health","name":"Shock Axial g","unit":"g","unitType":"gravity"},{"collection":"wits","key":"data.continuous_inclination","name":"Continuous Inclination","unit":"deg","unitType":"angle"},{"collection":"wits","key":"data.gamma_ray","name":"Gamma","unit":"api","unitType":"api"},{"collection":"wits","key":"data.gravity_tool_face_mean","name":"Toolface3","unit":"deg","unitType":"angle"}];
+const indexes = {"min":20254.71,"max":20255.90,"keys":{"wits":{"key":"data.hole_depth","collection":"wits","name":"Depth","unit":"ft","unitType":"length"},"drillingDysfunction":{"key":"md","collection":"drillingDysfunction","name":"Depth","unit":"ft","unitType":"length"}}};
+
+const singleChannelData = { asset1, asset2 };
+const regularData = asset1;
+
+const regularSettings = {"parameterChart":[{"id":"edb11f70-9e81-11eb-91ec-8d4896ed058f","name":"New Track","traces":[{"unit":"ft-klbf","name":"Rotary Torque","lineColor":"#72bb1b","lineWidth":1,"autoScale":true,"id":"b5e6d27e-a7e2-46d1-91ba-0e7de36b7c2d","collection":"wits","unitType":"torque","dashStyle":"Solid","traceType":"line","key":"data.rotary_torque"},{"traceType":"line","dashStyle":"Solid","color":"#ccc","lineWidth":1,"autoScale":true,"key":"data.diff_press","collection":"wits","name":"Diff Press","unit":"psi","unitType":"pressure","id":"30745428-575b-4856-8276-899d0af0b232"}]},{"name":"New Track","traces":[{"traceType":"line","dashStyle":"Dash","color":"#f10e0e","lineWidth":1,"autoScale":true,"key":"data.rop","collection":"wits","name":"ROP","unit":"ft/h","unitType":"velocity","id":"4b8e6dfd-34a6-427d-ad9a-6f12037c8125"}],"id":"df3d5eb0-9f60-11eb-b60b-9db340114f36"}]};
+const singleChannelSettings =  {"parameterChart":[{"name":"New Track","traces":[{"traceType":"line","dashStyle":"Solid","lineColor":"#ccc","lineWidth":1,"autoScale":true,"key":"data.weight_on_bit","id":"data.weight_on_bit","collection":"wits","name":"WOB","unit":"klbf","unitType":"force"}],"assets":["asset1","asset2"],"id":"934968d0-b31c-11eb-9063-538e9feb03b1","value":"data.rop"},{"name":"New Track","traces":[{"traceType":"line","dashStyle":"Solid","lineColor":"#ccc","lineWidth":1,"autoScale":true,"key":"data.rop","id":"data.rop","collection":"wits","name":"ROP","unit":"ft/h","unitType":"velocity"}],"id":"6a58e280-b49c-11eb-8380-3fb2746bd585"}]}
+
+const isSingleChannelEnabled = true;
+
+function ExampleApp() {
+  const [settings, setSettings] = useState(isSingleChannelEnabled ? singleChannelSettings : regularSettings);
+  return (
+    <div className={styles.exampleApp}>
+      <p>Settings {JSON.stringify(settings)}</p>
+      <AddEditTrack settings={settings} onSettingsChange={setSettings} mapping={mapping} multipleAssets>
+        <AddCircleOutline color="primary" fontSize="small" />
+      </AddEditTrack>
+      <ParameterCharts
+        data={isSingleChannelEnabled ? singleChannelData : regularData}
+        mapping={mapping}
+        settings={settings}
+        onSettingsChange={setSettings}
+        horizontal
+        indexes={indexes}
+        isLoading={false}
+        multipleAssets={isSingleChannelEnabled}
+        // settingsKey
+        assestColors={{ asset1: '#FF0000', asset2: '#1E90FF' }}
+      />
+    </div>
+  );
+}
+
+export default ExampleApp;

package/src/exampleApp/RangeSliderExample.js

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+
+import RangeSlider from '~/components/RangeSlider';
+
+const RangeApp = () => {
+  const [values, setValues] = useState({
+    left: 5386.8,
+    right: 20269.7,
+    min: 0,
+    max: 20269.7,
+  });
+  
+  const [resetInt, setResetInt] = useState(0);
+
+  const onChangeEnd = values => {
+    setValues(val => ({ ...val, ...values }));
+  };
+
+  const changeRanges = () => {
+    setValues({
+      left: 5386.8,
+      right: 18427,
+      min: 0,
+      max: 18427,
+    });
+    setResetInt(1);
+  };
+
+  return (
+    <div style={{ margin: '100px 500px' }}>
+      <button onClick={changeRanges}>Reset (change) ranges</button>
+      <h1>
+        Min: {values.min}. Max: {values.max}
+        <br />
+        (left) {values.left} - {values.right} (right)
+      </h1>
+      <RangeSlider
+        leftRange={values.left}
+        rightRange={values.right}
+        minRange={values.min}
+        maxRange={values.max}
+        onChange={onChangeEnd}
+        hideDecimals
+        resetInt={resetInt}
+        onChangeFinish={onChangeEnd}
+      />
+    </div>
+  );
+};
+
+export default RangeApp;

package/src/exampleApp/data/changeData.js

@@ -0,0 +1,54 @@
+const fs = require('fs');
+const fileData = require('./parametersWitsAndDysfanction.json');
+
+const keys = Object.keys(fileData.wits[0].data).filter((key) => key !== 'hole_depth');
+
+const minMax = {};
+
+const getMinMaxes = (arr, key) => {
+  let min = Infinity;
+  let max = -Infinity;
+  arr.forEach(values => {
+    const val = values.data[key];
+    if (Number.isFinite(val)) {
+      if (val > max) {
+        max = val;
+      }
+      if (val < min) {
+        min = val;
+      }
+    }
+  });
+  return {
+    min,
+    max,
+  };
+};
+
+const generateValue = ({ min, max }) => {
+  return parseFloat((Math.random() * (max - min) + min).toFixed(2));
+};
+
+keys.forEach(key => {
+    minMax[key] = getMinMaxes(fileData.wits, key);
+});
+
+const newData = {
+    wits: fileData.wits.map((item) => {
+        const values = keys.reduce((acc, key) => {
+            return {
+                ...acc,
+                [key]: generateValue(minMax[key])
+            }
+        }, {});
+        return {
+            ...item,
+            data: {
+                ...item.data,
+                ...values
+            }
+        }
+    })
+}
+
+fs.writeFileSync('parametersWitsAndDysfanction2.json', JSON.stringify(newData));