@gpa-gemstone/common-pages 0.0.117 → 0.0.119

package/lib/EventCharacteristicFilter.js

@@ -102,9 +102,9 @@ var EventCharacteristicFilter = function (props) {
                 (NullOrNaN(filter.transientMin) || filter.transientMax >= filter.transientMin));
         return true;
     }
-    var sagsSelected = props.eventTypeFilter.find(function (i) { var _a, _b; return (_b = i == ((_a = props.eventTypes.find(function (item) { return item.Name == 'Sag'; })) === null || _a === void 0 ? void 0 : _a.ID)) !== null && _b !== void 0 ? _b : -1; }) != null;
-    var swellsSelected = props.eventTypeFilter.find(function (i) { var _a, _b; return (_b = i == ((_a = props.eventTypes.find(function (item) { return item.Name == 'Swell'; })) === null || _a === void 0 ? void 0 : _a.ID)) !== null && _b !== void 0 ? _b : -1; }) != null;
-    var transientsSelected = props.eventTypeFilter.find(function (i) { var _a, _b; return (_b = i == ((_a = props.eventTypes.find(function (item) { return item.Name == 'Transient'; })) === null || _a === void 0 ? void 0 : _a.ID)) !== null && _b !== void 0 ? _b : -1; }) != null;
+    var sagsSelected = props.eventTypeFilter.find(function (i) { var _a; return i == ((_a = props.eventTypes.find(function (item) { return item.Name == 'Sag'; })) === null || _a === void 0 ? void 0 : _a.ID); }) != null;
+    var swellsSelected = props.eventTypeFilter.find(function (i) { var _a; return i == ((_a = props.eventTypes.find(function (item) { return item.Name == 'Swell'; })) === null || _a === void 0 ? void 0 : _a.ID); }) != null;
+    var transientsSelected = props.eventTypeFilter.find(function (i) { var _a; return i == ((_a = props.eventTypes.find(function (item) { return item.Name == 'Transient'; })) === null || _a === void 0 ? void 0 : _a.ID); }) != null;
     if (newEventCharacteristicFilter === null || props.eventTypeFilter === null)
         return null;
     return (react_1.default.createElement("fieldset", { className: "border", style: { padding: '10px', height: '100%' } },
@@ -116,20 +116,11 @@ var EventCharacteristicFilter = function (props) {
                         react_1.default.createElement("div", { className: 'input-group input-group-sm', style: { width: '100%' } },
                             react_1.default.createElement(react_forms_1.Select, { Record: newEventCharacteristicFilter, Label: 'Mag-Dur:', Field: 'curveID', Setter: setNewEventCharacteristicFilter, Options: props.magDurCurves.map(function (v) { return ({ Value: v.ID.toString(), Label: v.Name }); }) })),
                         react_1.default.createElement("div", { className: 'form-check form-check-inline' },
-                            react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
-                                    setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { curveInside: true, curveOutside: false }));
-                                }, checked: newEventCharacteristicFilter.curveInside && !props.eventCharacteristicFilter.curveOutside }),
-                            react_1.default.createElement("label", { className: "form-check-label" }, "Inside")),
-                        react_1.default.createElement("div", { className: 'form-check form-check-inline' },
-                            react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
-                                    setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { curveOutside: true, curveInside: false }));
-                                }, checked: newEventCharacteristicFilter.curveOutside && !newEventCharacteristicFilter.curveInside }),
-                            react_1.default.createElement("label", { className: "form-check-label" }, "Outside")),
-                        react_1.default.createElement("div", { className: 'form-check form-check-inline' },
-                            react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
-                                    setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { curveOutside: true, curveInside: true }));
-                                }, checked: newEventCharacteristicFilter.curveOutside && newEventCharacteristicFilter.curveInside }),
-                            react_1.default.createElement("label", { className: "form-check-label" }, "Both"))))),
+                            react_1.default.createElement(react_forms_1.RadioButtons, { Record: newEventCharacteristicFilter, Label: '', Field: 'sagType', Setter: setNewEventCharacteristicFilter, Options: [
+                                    { Value: 'LL', Label: 'LL' },
+                                    { Value: 'LN', Label: 'LN' },
+                                    { Value: 'both', Label: 'Both' }
+                                ] }))))),
             react_1.default.createElement("div", { className: "col-4" },
                 react_1.default.createElement("form", null,
                     react_1.default.createElement("label", { style: { margin: 0 } }, "Duration (cycle):"),
@@ -155,20 +146,11 @@ var EventCharacteristicFilter = function (props) {
                                     react_1.default.createElement(react_forms_1.Input, { Record: newEventCharacteristicFilter, Label: '', Disabled: !sagsSelected, Field: 'sagMax', Setter: setNewEventCharacteristicFilter, Valid: validMinMax, Feedback: 'Invalid Max', Type: 'number', Size: 'small', AllowNull: true })))),
                         react_1.default.createElement("div", { className: "row justify-content-md-center" },
                             react_1.default.createElement("div", { className: 'form-check form-check-inline' },
-                                react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
-                                        setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { sagType: 'LL' }));
-                                    }, checked: newEventCharacteristicFilter.sagType == 'LL' }),
-                                react_1.default.createElement("label", { className: "form-check-label" }, "LL")),
-                            react_1.default.createElement("div", { className: 'form-check form-check-inline' },
-                                react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
-                                        setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { sagType: 'LN' }));
-                                    }, checked: newEventCharacteristicFilter.sagType == 'LN' }),
-                                react_1.default.createElement("label", { className: "form-check-label" }, "LN")),
-                            react_1.default.createElement("div", { className: 'form-check form-check-inline' },
-                                react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
-                                        setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { sagType: 'both' }));
-                                    }, checked: newEventCharacteristicFilter.sagType == 'both' }),
-                                react_1.default.createElement("label", { className: "form-check-label" }, "Both")))))),
+                                react_1.default.createElement(react_forms_1.RadioButtons, { Record: newEventCharacteristicFilter, Label: '', Field: 'sagType', Setter: setNewEventCharacteristicFilter, Options: [
+                                        { Value: 'LL', Label: 'LL' },
+                                        { Value: 'LN', Label: 'LN' },
+                                        { Value: 'both', Label: 'Both' }
+                                    ] })))))),
             react_1.default.createElement("div", { className: "col-4" },
                 react_1.default.createElement(react_forms_1.MultiCheckBoxSelect, { Options: newPhases, Label: 'Phases', ItemTooltip: 'dark', OnChange: function (evt, Options) {
                         var phaseList = [];
@@ -195,20 +177,11 @@ var EventCharacteristicFilter = function (props) {
                                     react_1.default.createElement(react_forms_1.Input, { Record: newEventCharacteristicFilter, Label: '', Disabled: !transientsSelected, Field: 'transientMax', Setter: setNewEventCharacteristicFilter, Valid: validMinMax, Feedback: 'Invalid Max', Size: 'small', AllowNull: true, Type: 'number' })))),
                         react_1.default.createElement("div", { className: "row justify-content-md-center" },
                             react_1.default.createElement("div", { className: 'form-check form-check-inline' },
-                                react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
-                                        setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { transientType: 'LL' }));
-                                    }, checked: newEventCharacteristicFilter.transientType == 'LL' }),
-                                react_1.default.createElement("label", { className: "form-check-label" }, "LL")),
-                            react_1.default.createElement("div", { className: 'form-check form-check-inline' },
-                                react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
-                                        setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { transientType: 'LN' }));
-                                    }, checked: newEventCharacteristicFilter.transientType == 'LN' }),
-                                react_1.default.createElement("label", { className: "form-check-label" }, "LN")),
-                            react_1.default.createElement("div", { className: 'form-check form-check-inline' },
-                                react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
-                                        setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { transientType: 'both' }));
-                                    }, checked: newEventCharacteristicFilter.transientType == 'both' }),
-                                react_1.default.createElement("label", { className: "form-check-label" }, "Both")))))),
+                                react_1.default.createElement(react_forms_1.RadioButtons, { Record: newEventCharacteristicFilter, Label: '', Field: 'sagType', Setter: setNewEventCharacteristicFilter, Options: [
+                                        { Value: 'LL', Label: 'LL' },
+                                        { Value: 'LN', Label: 'LN' },
+                                        { Value: 'both', Label: 'Both' }
+                                    ] })))))),
             react_1.default.createElement("div", { className: "col-4" },
                 react_1.default.createElement("form", null,
                     react_1.default.createElement("label", { style: { margin: 0 } }, "Swells (p.u.):"),
@@ -223,19 +196,10 @@ var EventCharacteristicFilter = function (props) {
                                     react_1.default.createElement(react_forms_1.Input, { Record: newEventCharacteristicFilter, Label: '', Disabled: !swellsSelected, Field: 'swellMax', Setter: setNewEventCharacteristicFilter, Valid: validMinMax, Feedback: 'Invalid Max', Type: 'number', Size: 'small', AllowNull: true })))),
                         react_1.default.createElement("div", { className: "row justify-content-md-center" },
                             react_1.default.createElement("div", { className: 'form-check form-check-inline' },
-                                react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
-                                        setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { swellType: 'LL' }));
-                                    }, checked: newEventCharacteristicFilter.swellType == 'LL' }),
-                                react_1.default.createElement("label", { className: "form-check-label" }, "LL")),
-                            react_1.default.createElement("div", { className: 'form-check form-check-inline' },
-                                react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
-                                        setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { swellType: 'LN' }));
-                                    }, checked: newEventCharacteristicFilter.swellType == 'LN' }),
-                                react_1.default.createElement("label", { className: "form-check-label" }, "LN")),
-                            react_1.default.createElement("div", { className: 'form-check form-check-inline' },
-                                react_1.default.createElement("input", { className: "form-check-input", type: "radio", onChange: function () {
-                                        setNewEventCharacteristicFilter(__assign(__assign({}, newEventCharacteristicFilter), { swellType: 'both' }));
-                                    }, checked: newEventCharacteristicFilter.swellType == 'both' }),
-                                react_1.default.createElement("label", { className: "form-check-label" }, "Both")))))))));
+                                react_1.default.createElement(react_forms_1.RadioButtons, { Record: newEventCharacteristicFilter, Label: '', Field: 'sagType', Setter: setNewEventCharacteristicFilter, Options: [
+                                        { Value: 'LL', Label: 'LL' },
+                                        { Value: 'LN', Label: 'LN' },
+                                        { Value: 'both', Label: 'Both' }
+                                    ] })))))))));
 };
 exports.default = EventCharacteristicFilter;

package/lib/EventTypeFilter.js

@@ -134,11 +134,13 @@ var EventSearchTypeCategory = function (props) {
                 props.Data.filter(function (item) { return props.SelectedID.find(function (i) { return i == item.ID; }) == null; }).length == 0 ? 'un' : '',
                 "select all)")),
         react_1.default.createElement("form", null,
-            react_1.default.createElement("ul", { style: { listStyleType: 'none', padding: 0, position: 'relative', float: 'left' } }, props.Data.map(function (item) { return react_1.default.createElement("li", { key: item.ID },
-                react_1.default.createElement("label", null,
-                    react_1.default.createElement("input", { type: "checkbox", onChange: function (e) {
-                            props.OnChange(item, e.target.checked);
-                        }, checked: props.SelectedID.find(function (i) { return i == item.ID; }) != null }),
-                    item.Description)); }))));
+            react_1.default.createElement("ul", { style: { listStyleType: 'none', padding: 0, position: 'relative', float: 'left' } }, props.Data.map(function (item) {
+                return react_1.default.createElement("li", { key: item.ID },
+                    react_1.default.createElement("label", null,
+                        react_1.default.createElement("input", { type: "checkbox", onChange: function (e) {
+                                props.OnChange(item, e.target.checked);
+                            }, checked: props.SelectedID.find(function (i) { return i == item.ID; }) != null }),
+                        item.Description));
+            }))));
 };
 exports.default = EventTypeFilter;

package/lib/TimeFilter/QuickSelects.d.ts

@@ -1,4 +1,4 @@
-import { ITimeFilter } from '../TimeFilter';
+import { ITimeFilter } from './TimeFilter';
 export type DateUnit = ('datetime-local' | 'date' | 'time');
 interface IQuickSelect {
     label: string;

package/lib/TimeFilter/QuickSelects.js

@@ -36,7 +36,7 @@ function getFormat(format) {
     else if (format == "time")
         return 'HH:mm:ss.SSS';
     else
-        return 'MM/DD/YYYY HH:mm:ss.SSS'; // default format
+        return 'MM/DD/YYYY HH:mm:ss.SSS';
 }
 //update all quick selects to use new timefilters
 exports.AvailableQuickSelects = [
@@ -46,8 +46,7 @@ exports.AvailableQuickSelects = [
             var t = moment_1.default.utc().add(offset, 'minutes').startOf('hour');
             return {
                 start: t.format(getFormat(format)),
-                unit: 'm',
-                duration: 60,
+                end: t.add(60, 'm').format(getFormat(format)),
             };
         },
         hideQuickPick: function (f) {
@@ -130,8 +129,8 @@ exports.AvailableQuickSelects = [
             var t = moment_1.default.utc().add(offset, 'minutes').startOf('week');
             return {
                 start: t.format(getFormat(format)),
-                unit: 'h',
-                duration: 7 * 24,
+                unit: 'd',
+                duration: 7
             };
         },
         hideQuickPick: function (f) {
@@ -144,8 +143,8 @@ exports.AvailableQuickSelects = [
             var t = moment_1.default.utc().add(offset, 'minutes').startOf('week');
             return {
                 end: t.format(getFormat(format)),
-                unit: 'h',
-                duration: 7 * 24,
+                unit: 'd',
+                duration: 7
             };
         },
         hideQuickPick: function (f) {
@@ -158,8 +157,8 @@ exports.AvailableQuickSelects = [
             var t = moment_1.default.utc().add(offset, 'minutes').startOf('day');
             return {
                 end: t.format(getFormat(format)),
-                unit: 'h',
-                duration: 7 * 24,
+                unit: 'd',
+                duration: 7
             };
         },
         hideQuickPick: function (f) {
@@ -170,11 +169,10 @@ exports.AvailableQuickSelects = [
         label: 'This Month', createFilter: function (tz, format) {
             var offset = moment_timezone_1.default.tz(moment_1.default.utc().startOf('month').format('YYYY-MM-DDTHH:mm:ss.SSSSS'), tz).utcOffset();
             var t = moment_1.default.utc().add(offset, 'minutes').startOf('month');
-            var window = (t.daysInMonth() * 24);
             return {
                 start: t.format(getFormat(format)),
-                unit: 'h',
-                duration: window,
+                unit: 'd',
+                duration: t.daysInMonth()
             };
         },
         hideQuickPick: function (f) {
@@ -185,11 +183,10 @@ exports.AvailableQuickSelects = [
         label: 'Last Month', createFilter: function (tz, format) {
             var offset = moment_timezone_1.default.tz(moment_1.default.utc().startOf('month').subtract(1, 'month').format('YYYY-MM-DDTHH:mm:ss.SSSSS'), tz).utcOffset();
             var t = moment_1.default.utc().add(offset, 'minutes').startOf('month').subtract(1, 'month');
-            var window = (t.daysInMonth() * 24);
             return {
                 start: t.format(getFormat(format)),
-                unit: 'h',
-                duration: window,
+                unit: 'd',
+                duration: t.daysInMonth()
             };
         },
         hideQuickPick: function (f) {
@@ -266,7 +263,8 @@ exports.AvailableQuickSelects = [
             var t = moment_1.default.utc().add(offset, 'minutes').startOf('year');
             return {
                 start: t.format(getFormat(format)),
-                end: t.endOf('year').format(getFormat(format))
+                unit: 'M',
+                duration: 12
             };
         },
         hideQuickPick: function (f) {
@@ -275,11 +273,12 @@ exports.AvailableQuickSelects = [
     },
     {
         label: 'Last Year', createFilter: function (tz, format) {
-            var offset = moment_timezone_1.default.tz(moment_1.default.utc().startOf('year').subtract(1, 'year').format('YYYY-MM-DDTHH:mm:ss.SSSSS'), tz).utcOffset();
-            var t = moment_1.default.utc().add(offset, 'minute').startOf('year').subtract(1, 'year');
+            var offset = moment_timezone_1.default.tz(moment_1.default.utc().startOf('year').format('YYYY-MM-DDTHH:mm:ss.SSSSS'), tz).utcOffset();
+            var t = moment_1.default.utc().add(offset, 'minutes').startOf('year');
             return {
-                start: t.format(getFormat(format)),
-                end: t.endOf('year').format(getFormat(format)),
+                end: t.format(getFormat(format)),
+                unit: 'M',
+                duration: 12
             };
         },
         hideQuickPick: function (f) {

package/lib/{TimeFilter.d.ts → TimeFilter/TimeFilter.d.ts}

@@ -1,15 +1,13 @@
 import * as React from 'react';
-import { IStartEnd, IStartDuration, IEndDuration, ICenterDuration, TimeUnit } from './TimeWindowUtils';
-import { DateUnit } from './TimeFilter/QuickSelects';
-export type ITimeFilter = IStartEnd | IStartDuration | IEndDuration | ICenterDuration;
-export declare function getTimeWindow(flt: ITimeFilter, format?: string): {
-    center: string;
+import { IStartEnd, IStartDuration, IEndDuration, TimeUnit } from './TimeWindowUtils';
+import { DateUnit } from './QuickSelects';
+interface ITimeWindow {
     start: string;
     end: string;
     unit: TimeUnit;
     duration: number;
-    halfDuration: number;
-};
+}
+export type ITimeFilter = IStartEnd | IStartDuration | IEndDuration;
 /**
 *    filter: an interface of IStartEnd | IStartDuration | IEndDuration | ICenterDuration
 *    showQuickSelect: displays Quick Select component
@@ -17,12 +15,14 @@ export declare function getTimeWindow(flt: ITimeFilter, format?: string): {
 */
 interface IProps {
     filter: ITimeFilter;
-    setFilter: (center: string, start: string, end: string, unit: TimeUnit, duration: number) => void;
+    setFilter: (start: string, end: string, unit: TimeUnit, duration: number) => void;
     showQuickSelect: boolean;
-    dateTimeSetting: 'center' | 'startWindow' | 'endWindow' | 'startEnd';
+    dateTimeSetting: 'startWindow' | 'endWindow' | 'startEnd';
     timeZone: string;
     isHorizontal: boolean;
     format?: DateUnit;
+    showHelpMessage?: boolean;
 }
 declare const TimeFilter: (props: IProps) => React.JSX.Element;
+export declare function getTimeWindowFromFilter(flt: ITimeFilter, format?: string): ITimeWindow;
 export default TimeFilter;

package/lib/TimeFilter/TimeFilter.js

@@ -0,0 +1,224 @@
+"use strict";
+//******************************************************************************************************
+//  TimeFilter.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  09/16/2021 - Christoph Lackner
+//       Generated original version of source code.
+//  06/20/2024 - Ali Karrar
+//       Moved TimeFilter from SEBrowser to gemstone
+//******************************************************************************************************
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimeWindowFromFilter = getTimeWindowFromFilter;
+var React = __importStar(require("react"));
+var react_forms_1 = require("@gpa-gemstone/react-forms");
+var TimeWindowUtils_1 = require("./TimeWindowUtils");
+var moment_1 = __importDefault(require("moment"));
+var QuickSelects_1 = require("./QuickSelects");
+var lodash_1 = __importDefault(require("lodash"));
+var TimeFilter = function (props) {
+    var _a, _b, _c, _d;
+    var format = (0, QuickSelects_1.getFormat)(props.format);
+    var QuickSelects = React.useMemo(function () { return QuickSelects_1.AvailableQuickSelects.filter(function (qs) { return !qs.hideQuickPick(props.format); }); }, [props.format]);
+    var _e = React.useState(-1), activeQP = _e[0], setActiveQP = _e[1];
+    var _f = React.useState(getTimeWindowFromFilter(props.filter, format)), filter = _f[0], setFilter = _f[1];
+    // Checks typing of ITimeFilter and then compares to ITimeWindow
+    function isEqual(timeWindow, timeFilter) {
+        var flt = getTimeWindowFromFilter(timeFilter, format);
+        return lodash_1.default.isEqual(timeWindow, flt);
+    }
+    React.useEffect(function () {
+        if (!isEqual(filter, props.filter)) {
+            props.setFilter(filter.start, filter.end, filter.unit, filter.duration);
+        }
+    }, [filter]);
+    React.useEffect(function () {
+        if (!isEqual(filter, props.filter)) {
+            var flt = getTimeWindowFromFilter(props.filter, format);
+            setFilter(flt);
+        }
+    }, [props.filter]);
+    return (React.createElement("fieldset", { className: "border", style: { padding: '10px', height: '100%', overflow: 'hidden' } },
+        React.createElement("legend", { className: "w-auto", style: { fontSize: 'large' } }, "Date/Time Filter:"),
+        React.createElement(Row, { addRow: props.isHorizontal, class: 'm-0' },
+            props.dateTimeSetting === 'startWindow' || props.dateTimeSetting === 'startEnd' ?
+                React.createElement(Row, { addRow: !props.isHorizontal, class: 'm-0' },
+                    React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? props.dateTimeSetting === 'startEnd' ? 'col-2' : 'col-4' : 'col-6') : 'col-12 p-0' },
+                        React.createElement(react_forms_1.DatePicker, { Record: filter, Field: "start", Help: ((_a = props.showHelpMessage) !== null && _a !== void 0 ? _a : true) ? "All times are in system time. System time is currently set to ".concat(props.timeZone, ". ") : undefined, Setter: function (r) {
+                                var flt = props.dateTimeSetting === 'startWindow' ?
+                                    getTimeWindowFromFilter({ start: r.start, duration: r.duration, unit: r.unit }, format) :
+                                    getTimeWindowFromFilter({ start: r.start, end: r.end }, format);
+                                setFilter(flt);
+                                setActiveQP(-1);
+                            }, Label: 'Start of Time Window:', Type: (_b = props.format) !== null && _b !== void 0 ? _b : 'datetime-local', Valid: function () { return true; }, Format: format }),
+                        props.showQuickSelect && props.dateTimeSetting === 'startWindow' ?
+                            React.createElement(StartWindowForm, { IsHorizontal: props.isHorizontal, Filter: filter, SetFilter: setFilter, SetActiveQP: setActiveQP, Format: format, ShowQuickSelect: props.showQuickSelect })
+                            : null))
+                : null,
+            props.dateTimeSetting === 'endWindow' || props.dateTimeSetting === 'startEnd' ?
+                React.createElement(Row, { addRow: !props.isHorizontal, class: 'm-0' },
+                    React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? props.dateTimeSetting === 'startEnd' ? 'col-2' : 'col-4' : 'col-6') : 'col-12 p-0' },
+                        React.createElement(react_forms_1.DatePicker, { Record: filter, Field: "end", Help: ((_c = props.showHelpMessage) !== null && _c !== void 0 ? _c : true) ? "All times are in system time. System time is currently set to ".concat(props.timeZone, ". ") : undefined, Setter: function (r) {
+                                var flt = props.dateTimeSetting === 'endWindow' ?
+                                    getTimeWindowFromFilter({ end: r.end, duration: r.duration, unit: r.unit }, format) :
+                                    getTimeWindowFromFilter({ start: r.start, end: r.end }, format);
+                                setFilter(flt);
+                                setActiveQP(-1);
+                            }, Label: 'End of Time Window :', Type: (_d = props.format) !== null && _d !== void 0 ? _d : 'datetime-local', Valid: function () { return true; }, Format: format }),
+                        props.showQuickSelect && props.dateTimeSetting === 'endWindow' ?
+                            React.createElement(EndWindowForm, { IsHorizontal: props.isHorizontal, Filter: filter, SetFilter: setFilter, SetActiveQP: setActiveQP, Format: format, ShowQuickSelect: props.showQuickSelect })
+                            : null))
+                : null,
+            props.dateTimeSetting === 'startWindow' && !props.showQuickSelect ?
+                React.createElement(StartWindowForm, { IsHorizontal: props.isHorizontal, Filter: filter, SetFilter: setFilter, SetActiveQP: setActiveQP, Format: format, ShowQuickSelect: props.showQuickSelect })
+                : null,
+            props.dateTimeSetting === 'endWindow' && !props.showQuickSelect ?
+                React.createElement(EndWindowForm, { IsHorizontal: props.isHorizontal, Filter: filter, SetFilter: setFilter, SetActiveQP: setActiveQP, Format: format, ShowQuickSelect: props.showQuickSelect })
+                : null,
+            props.showQuickSelect ?
+                React.createElement("div", { className: props.isHorizontal ? "col-8 ".concat(props.dateTimeSetting !== 'startEnd' ? 'pt-3' : '') : 'row m-0 flex-grow-1' },
+                    React.createElement(Row, { addRow: props.isHorizontal, class: "m-0 justify-content-center align-items-center" }, QuickSelects.map(function (qs, i) {
+                        if (i % 3 !== 0)
+                            return null;
+                        return (React.createElement("div", { key: i, className: props.isHorizontal && props.dateTimeSetting === 'startEnd' ? 'col-2' : "col-4", style: { paddingLeft: (props.isHorizontal && props.dateTimeSetting === 'startEnd' ? 0 : (i % 9 == 0 ? 15 : 0)), paddingRight: (props.isHorizontal && props.dateTimeSetting === 'startEnd' ? 2 : ((i % 18 == 6 || i % 18 == 15) ? 15 : 2)), marginTop: 10 } },
+                            React.createElement("ul", { className: "list-group", key: i },
+                                React.createElement("li", { key: i, style: { cursor: 'pointer' }, onClick: function () {
+                                        var flt = getTimeWindowFromFilter(QuickSelects[i].createFilter(props.timeZone, props.format), format);
+                                        props.setFilter(flt.start, flt.end, flt.unit, flt.duration);
+                                        setActiveQP(i);
+                                    }, className: "item badge badge-" + (i == activeQP ? "primary" : "secondary") }, QuickSelects[i].label),
+                                i + 1 < QuickSelects.length ?
+                                    React.createElement("li", { key: i + 1, style: { marginTop: 3, cursor: 'pointer' }, className: "item badge badge-" + (i + 1 == activeQP ? "primary" : "secondary"), onClick: function () {
+                                            var flt = getTimeWindowFromFilter(QuickSelects[i + 1].createFilter(props.timeZone, props.format), format);
+                                            props.setFilter(flt.start, flt.end, flt.unit, flt.duration);
+                                            setActiveQP(i + 1);
+                                        } }, QuickSelects[i + 1].label)
+                                    : null,
+                                i + 2 < QuickSelects.length ?
+                                    React.createElement("li", { key: i + 2, style: { marginTop: 3, cursor: 'pointer' }, className: "item badge badge-" + (i + 2 == activeQP ? "primary" : "secondary"), onClick: function () {
+                                            var flt = getTimeWindowFromFilter(QuickSelects[i + 2].createFilter(props.timeZone, props.format), format);
+                                            props.setFilter(flt.start, flt.end, flt.unit, flt.duration);
+                                            setActiveQP(i + 2);
+                                        } }, QuickSelects[i + 2].label)
+                                    : null)));
+                    })))
+                : null)));
+};
+var StartWindowForm = function (props) {
+    return (React.createElement(Row, { addRow: !props.IsHorizontal, class: 'm-0' },
+        React.createElement("div", { className: props.IsHorizontal ? props.ShowQuickSelect ? 'col-12 p-0' : 'col-6' : 'col-12 p-0' },
+            React.createElement("div", { className: 'form-group' },
+                React.createElement("label", { style: { width: '100%', position: 'relative', float: "left" } }, "Time Window(+): "),
+                React.createElement("div", { className: 'row' },
+                    React.createElement("div", { className: 'col-6' },
+                        React.createElement(react_forms_1.Input, { Record: props.Filter, Field: 'duration', Label: '', Valid: function () { return true; }, Type: 'number', Setter: function (r) {
+                                props.SetFilter(getTimeWindowFromFilter({ start: r.start, duration: r.duration, unit: r.unit }, props.Format));
+                                props.SetActiveQP(-1);
+                            } })),
+                    React.createElement("div", { className: 'col-6' },
+                        React.createElement(react_forms_1.Select, { Record: props.Filter, Label: '', Field: 'unit', Options: TimeWindowUtils_1.units.map(function (unit) { return ({ Value: unit, Label: (0, TimeWindowUtils_1.readableUnit)(unit) }); }), Setter: function (r) {
+                                props.SetFilter(getTimeWindowFromFilter({ start: r.start, duration: r.duration, unit: r.unit }, props.Format));
+                                props.SetActiveQP(-1);
+                            } })))))));
+};
+var EndWindowForm = function (props) {
+    return (React.createElement(Row, { addRow: !props.IsHorizontal, class: 'm-0' },
+        React.createElement("div", { className: props.IsHorizontal ? props.ShowQuickSelect ? 'col-12 p-0' : 'col-6' : 'col-12 p-0' },
+            React.createElement("div", { className: 'form-group' },
+                React.createElement("label", { style: { width: '100%', position: 'relative', float: "left" } }, "Time Window(-): "),
+                React.createElement("div", { className: 'row' },
+                    React.createElement("div", { className: 'col-6' },
+                        React.createElement(react_forms_1.Input, { Record: props.Filter, Field: 'duration', Label: '', Valid: function () { return true; }, Type: 'number', Setter: function (r) {
+                                props.SetFilter(getTimeWindowFromFilter({ end: r.end, duration: r.duration, unit: r.unit }, props.Format));
+                                props.SetActiveQP(-1);
+                            } })),
+                    React.createElement("div", { className: 'col-6' },
+                        React.createElement(react_forms_1.Select, { Record: props.Filter, Label: '', Field: 'unit', Options: TimeWindowUtils_1.units.map(function (unit) { return ({ Value: unit, Label: (0, TimeWindowUtils_1.readableUnit)(unit) }); }), Setter: function (r) {
+                                props.SetFilter(getTimeWindowFromFilter({ end: r.end, duration: r.duration, unit: r.unit }, props.Format));
+                                props.SetActiveQP(-1);
+                            } })))))));
+};
+// Returns a row div element with props as children of row 
+function Row(props) {
+    var _a;
+    if (props.addRow) {
+        return React.createElement("div", { className: "row ".concat((_a = props.class) !== null && _a !== void 0 ? _a : '') }, props.children);
+    }
+    return React.createElement(React.Fragment, null, props.children);
+}
+// Converts ITimeFilter to an ITimeWindow filter
+function getTimeWindowFromFilter(flt, format) {
+    var start;
+    var end;
+    var unit;
+    var duration;
+    var formatFunction = function (start, end, unit, duration) { return ({
+        start: start.format(format),
+        end: end.format(format),
+        unit: unit,
+        duration: duration,
+    }); };
+    if ('start' in flt && 'duration' in flt) { // type is IStartDuration
+        start = (0, moment_1.default)(flt.start, format);
+        duration = flt.duration;
+        unit = flt.unit;
+        end = (0, TimeWindowUtils_1.addDuration)(start, duration, unit);
+        return formatFunction(start, end, unit, duration);
+    }
+    if ('end' in flt && 'duration' in flt) { // type is IEndDuration
+        end = (0, moment_1.default)(flt.end, format);
+        duration = flt.duration;
+        unit = flt.unit;
+        start = (0, TimeWindowUtils_1.addDuration)(end, -duration, unit);
+        return formatFunction(start, end, unit, duration);
+    }
+    if ('start' in flt && 'end' in flt) { // type is IStartEnd
+        start = (0, moment_1.default)(flt.start, format);
+        end = (0, moment_1.default)(flt.end, format);
+        unit = (0, TimeWindowUtils_1.findAppropriateUnit)(start, end);
+        duration = end.diff(start, unit);
+        return formatFunction(start, end, unit, duration);
+    }
+    throw TypeError("Unexpected type in getTimeWindowFromFilter, filter is: ".concat(flt.toString()));
+}
+exports.default = TimeFilter;

package/lib/{TimeWindowUtils.d.ts → TimeFilter/TimeWindowUtils.d.ts}

@@ -1,26 +1,38 @@
 import moment from 'moment';
+/**
+ * Interface represents picking a time based on Start Date and End Date
+ */
 export interface IStartEnd {
     start: string;
     end: string;
 }
+/**
+ * Interface represents picking a time based on Start Date and Duration
+ */
 export interface IStartDuration {
     start: string;
     duration: number;
     unit: TimeUnit;
 }
+/**
+ * Interface represents picking a time based on End Date and Duration
+ */
 export interface IEndDuration {
     end: string;
     duration: number;
     unit: TimeUnit;
 }
-export interface ICenterDuration {
-    center: string;
-    halfDuration: number;
-    unit: TimeUnit;
-}
 export type TimeUnit = 'y' | 'M' | 'w' | 'd' | 'h' | 'm' | 's' | 'ms';
 export declare const units: TimeUnit[];
-export declare function findAppropriateUnit(startTime: moment.Moment, endTime: moment.Moment, unit?: TimeUnit, useHalfWindow?: boolean): [TimeUnit, number];
+export declare const dateTimeFormat = "DD MM YYYY hh:mm:ss.SSS";
+/**
+* A Function to determine the most appropriate unit for a window of time specified by start and end time
+*/
+export declare function findAppropriateUnit(startTime: moment.Moment, endTime: moment.Moment): TimeUnit;
+/**
+* Function to handle adding or subtracting duration
+*/
 export declare function getStartEndTime(center: moment.Moment, duration: number, unit: TimeUnit): [moment.Moment, moment.Moment];
+export declare function addDuration(start: moment.Moment, duration: number, unit: TimeUnit): moment.Moment;
 export declare function getMoment(date: string, format?: string, time?: string): moment.Moment;
 export declare function readableUnit(unit: TimeUnit): "Year(s)" | "Month(s)" | "Week(s)" | "Day(s)" | "Hour(s)" | "Minute(s)" | "Second(s)" | "Millisecond(s)";

package/lib/{TimeWindowUtils.js → TimeFilter/TimeWindowUtils.js}

@@ -3,9 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.units = void 0;
+exports.dateTimeFormat = exports.units = void 0;
 exports.findAppropriateUnit = findAppropriateUnit;
 exports.getStartEndTime = getStartEndTime;
+exports.addDuration = addDuration;
 exports.getMoment = getMoment;
 exports.readableUnit = readableUnit;
 //******************************************************************************************************
@@ -33,47 +34,49 @@ exports.readableUnit = readableUnit;
 //******************************************************************************************************
 var moment_1 = __importDefault(require("moment"));
 exports.units = ['ms', 's', 'm', 'h', 'd', 'w', 'M', 'y'];
-/*
+exports.dateTimeFormat = 'DD MM YYYY hh:mm:ss.SSS';
+/**
 * A Function to determine the most appropriate unit for a window of time specified by start and end time
 */
-function findAppropriateUnit(startTime, endTime, unit, useHalfWindow) {
-    var unitIndex = exports.units.findIndex(function (u) { return u == unit; });
-    if (unit === undefined)
-        unitIndex = 7;
+function findAppropriateUnit(startTime, endTime) {
+    var unitIndex = 7;
     var diff = endTime.diff(startTime, exports.units[unitIndex], true);
-    if (useHalfWindow !== undefined && useHalfWindow)
-        diff = diff / 2;
     for (var i = unitIndex; i >= 1; i--) {
-        if (i == 6) // Remove month as appropriate due to innacuracy in definition (31/30/28/29 days)
-            continue;
         if (Number.isInteger(diff)) {
-            return [exports.units[i], diff];
+            return exports.units[i];
         }
         var nextI = i - 1;
-        if (nextI == 6)
-            nextI = 5;
         diff = endTime.diff(startTime, exports.units[nextI], true);
-        if (useHalfWindow !== undefined && useHalfWindow)
-            diff = diff / 2;
         if (diff > 65000) {
             diff = endTime.diff(startTime, exports.units[i], true);
-            if (useHalfWindow !== undefined && useHalfWindow)
-                diff = diff / 2;
-            return [exports.units[i], Math.round(diff)];
+            return exports.units[i];
         }
     }
-    return [exports.units[0], Math.round(diff)];
+    return exports.units[0];
 }
-/*
-* Determines a start time and end time for a window given by center time and duration
+/**
+* Function to handle adding or subtracting duration
 */
 function getStartEndTime(center, duration, unit) {
-    var d = moment_1.default.duration(duration, unit);
-    var start = center.clone().subtract(d.asHours(), 'h');
-    var end = center.clone().add(d.asHours(), 'h');
+    var start = addDuration(center, -duration, unit);
+    var end = addDuration(center, duration, unit);
     return [start, end];
 }
 /*
+* Function to handle adding or subtracting duration
+*/
+function addDuration(start, duration, unit) {
+    var t1 = start.clone();
+    var floor = duration > 0 ? Math.floor(duration) : Math.ceil(duration); // if duration is negative, use Math.ceil() to get the floor
+    var ceil = duration > 0 ? Math.ceil(duration) : Math.floor(duration); // if duration is negative, use Math.floor() to get the ceil
+    if (floor == ceil && exports.units.findIndex(function (u) { return u == unit; }) >= 4) // if duration is integer, add duration without modifying
+        return t1.add(duration, unit);
+    t1.add(floor, unit);
+    var t2 = t1.clone().add(Math.sign(duration), unit); // Adds a duration of 1 or -1 depending on the sign of input duration
+    var hours = t2.diff(t1, 'h', true) * Math.abs(duration - floor); // Calculates the difference in hours between t2 and t1 and adds to t1
+    return t1.add(hours, 'h');
+}
+/*
 * Returns a formatted version of date and time provided
 */
 function getMoment(date, format, time) {

package/lib/index.d.ts

@@ -8,8 +8,9 @@ import { DefaultSearch } from './SearchBar';
 import SelectPopup from './StandardSelectPopup';
 import { DefaultSelects } from './SelectionPopup';
 import ErrorBoundary from './ErrorBoundary';
-import TimeFilter from './TimeFilter';
+import TimeFilter from './TimeFilter/TimeFilter';
 import EventTypeFilter from './EventTypeFilter';
 import EventCharacteristicFilter from './EventCharacteristicFilter';
 import NavBarFilterButton from './NavBarFilterButton';
-export { TimeFilter, EventTypeFilter, EventCharacteristicFilter, NavBarFilterButton, Setting, Note, ValueList, ByValueList, User, ByUser, DefaultSearch, SelectPopup, DefaultSelects, ErrorBoundary };
+import * as TimeWindowUtils from './TimeFilter/TimeWindowUtils';
+export { TimeFilter, TimeWindowUtils, EventTypeFilter, EventCharacteristicFilter, NavBarFilterButton, Setting, Note, ValueList, ByValueList, User, ByUser, DefaultSearch, SelectPopup, DefaultSelects, ErrorBoundary };

package/lib/index.js

@@ -21,11 +21,34 @@
 //       Generated original version of source code.
 //
 // ******************************************************************************************************
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorBoundary = exports.DefaultSelects = exports.SelectPopup = exports.DefaultSearch = exports.ByUser = exports.User = exports.ByValueList = exports.ValueList = exports.Note = exports.Setting = exports.NavBarFilterButton = exports.EventCharacteristicFilter = exports.EventTypeFilter = exports.TimeFilter = void 0;
+exports.ErrorBoundary = exports.DefaultSelects = exports.SelectPopup = exports.DefaultSearch = exports.ByUser = exports.User = exports.ByValueList = exports.ValueList = exports.Note = exports.Setting = exports.NavBarFilterButton = exports.EventCharacteristicFilter = exports.EventTypeFilter = exports.TimeWindowUtils = exports.TimeFilter = void 0;
 var Setting_1 = __importDefault(require("./Setting"));
 exports.Setting = Setting_1.default;
 var Note_1 = __importDefault(require("./Note"));
@@ -46,7 +69,7 @@ var SelectionPopup_1 = require("./SelectionPopup");
 Object.defineProperty(exports, "DefaultSelects", { enumerable: true, get: function () { return SelectionPopup_1.DefaultSelects; } });
 var ErrorBoundary_1 = __importDefault(require("./ErrorBoundary"));
 exports.ErrorBoundary = ErrorBoundary_1.default;
-var TimeFilter_1 = __importDefault(require("./TimeFilter"));
+var TimeFilter_1 = __importDefault(require("./TimeFilter/TimeFilter"));
 exports.TimeFilter = TimeFilter_1.default;
 var EventTypeFilter_1 = __importDefault(require("./EventTypeFilter"));
 exports.EventTypeFilter = EventTypeFilter_1.default;
@@ -54,3 +77,5 @@ var EventCharacteristicFilter_1 = __importDefault(require("./EventCharacteristic
 exports.EventCharacteristicFilter = EventCharacteristicFilter_1.default;
 var NavBarFilterButton_1 = __importDefault(require("./NavBarFilterButton"));
 exports.NavBarFilterButton = NavBarFilterButton_1.default;
+var TimeWindowUtils = __importStar(require("./TimeFilter/TimeWindowUtils"));
+exports.TimeWindowUtils = TimeWindowUtils;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/common-pages",
-  "version": "0.0.117",
+  "version": "0.0.119",
   "description": "Common UI pages for GPA products",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -44,12 +44,12 @@
     "typescript": "5.5.3"
   },
   "dependencies":   {
-    "@gpa-gemstone/application-typings": "0.0.76",
-    "@gpa-gemstone/gpa-symbols": "0.0.41",
-    "@gpa-gemstone/helper-functions": "0.0.34",
-    "@gpa-gemstone/react-forms": "1.1.71",
-    "@gpa-gemstone/react-interactive": "1.0.131",
-    "@gpa-gemstone/react-table": "1.2.53",
+    "@gpa-gemstone/application-typings": "0.0.77",
+    "@gpa-gemstone/gpa-symbols": "0.0.42",
+    "@gpa-gemstone/helper-functions": "0.0.35",
+    "@gpa-gemstone/react-forms": "1.1.73",
+    "@gpa-gemstone/react-interactive": "1.0.133",
+    "@gpa-gemstone/react-table": "1.2.55",
     "@reduxjs/toolkit": "1.8.3",
     "crypto-js": "^4.2.0",
     "moment": "^2.29.4",

package/lib/TimeFilter.js

@@ -1,273 +0,0 @@
-"use strict";
-//******************************************************************************************************
-//  TimeFilter.tsx - Gbtc
-//
-//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
-//
-//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
-//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
-//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
-//  file except in compliance with the License. You may obtain a copy of the License at:
-//
-//      http://opensource.org/licenses/MIT
-//
-//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
-//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
-//  License for the specific language governing permissions and limitations.
-//
-//  Code Modification History:
-//  ----------------------------------------------------------------------------------------------------
-//  09/16/2021 - Christoph Lackner
-//       Generated original version of source code.
-//  06/20/2024 - Ali Karrar
-//       Moved TimeFilter from SEBrowser to gemstone
-//******************************************************************************************************
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimeWindow = getTimeWindow;
-var React = __importStar(require("react"));
-var moment_1 = __importDefault(require("moment"));
-var react_forms_1 = require("@gpa-gemstone/react-forms");
-var TimeWindowUtils_1 = require("./TimeWindowUtils");
-var QuickSelects_1 = require("./TimeFilter/QuickSelects");
-// Converts ITimeFilter to an ITimeWindow filter           
-function getTimeWindow(flt, format) {
-    var _a, _b;
-    var _c, _d, _e;
-    var center, start, end, unit, duration, halfDuration;
-    if ('center' in flt && 'halfDuration' in flt) { // type is ICenterDuration
-        center = (0, TimeWindowUtils_1.getMoment)(flt.center, format);
-        _a = (0, TimeWindowUtils_1.getStartEndTime)(center, flt.halfDuration, flt.unit), start = _a[0], end = _a[1];
-        unit = flt.unit;
-        halfDuration = flt.halfDuration;
-        duration = halfDuration * 2;
-    }
-    else if ('start' in flt && 'duration' in flt) { // type is IStartDuration
-        start = (0, TimeWindowUtils_1.getMoment)(flt.start, format);
-        var d = moment_1.default.duration(flt.duration / 2.0, flt.unit);
-        center = start.clone().add(d);
-        end = center.clone().add(d);
-        unit = flt.unit;
-        duration = flt.duration,
-            halfDuration = duration / 2.0;
-    }
-    else if ('end' in flt && 'duration' in flt) { // type is IEndDuration
-        end = (0, TimeWindowUtils_1.getMoment)(flt.end, format);
-        var d = moment_1.default.duration(flt.duration / 2.0, flt.unit);
-        center = end.clone().subtract(d);
-        start = center.clone().subtract(d);
-        unit = flt.unit;
-        duration = flt.duration,
-            halfDuration = duration / 2.0;
-    }
-    else if ('start' in flt && 'end' in flt) { // type is IStartEnd
-        start = (0, TimeWindowUtils_1.getMoment)(flt.start, format);
-        end = (0, TimeWindowUtils_1.getMoment)(flt.end, format);
-        _b = (0, TimeWindowUtils_1.findAppropriateUnit)(start, end, undefined, true), unit = _b[0], halfDuration = _b[1];
-        var d = moment_1.default.duration(halfDuration, unit);
-        center = start.clone().add(d);
-        duration = halfDuration * 2;
-    }
-    return { center: (_c = center === null || center === void 0 ? void 0 : center.format(format)) !== null && _c !== void 0 ? _c : '',
-        start: (_d = start === null || start === void 0 ? void 0 : start.format(format)) !== null && _d !== void 0 ? _d : '',
-        end: (_e = end === null || end === void 0 ? void 0 : end.format(format)) !== null && _e !== void 0 ? _e : '',
-        unit: unit !== null && unit !== void 0 ? unit : 'ms',
-        duration: duration !== null && duration !== void 0 ? duration : 0,
-        halfDuration: halfDuration !== null && halfDuration !== void 0 ? halfDuration : 0 };
-}
-// Returns a row div element with props as children of row 
-function Row(props) {
-    var _a;
-    if (props.addRow) {
-        return React.createElement("div", { className: "row ".concat((_a = props.class) !== null && _a !== void 0 ? _a : '') }, props.children);
-    }
-    return React.createElement(React.Fragment, null, props.children);
-}
-var TimeFilter = function (props) {
-    var _a, _b, _c;
-    var format = (0, QuickSelects_1.getFormat)(props.format);
-    var QuickSelects = React.useMemo(function () { return QuickSelects_1.AvailableQuickSelects.filter(function (qs) { return !qs.hideQuickPick(props.format); }); }, [props.format]);
-    var _d = React.useState(-1), activeQP = _d[0], setActiveQP = _d[1];
-    var _e = React.useState(getTimeWindow(props.filter, format)), filter = _e[0], setFilter = _e[1];
-    React.useEffect(function () {
-        if (!isEqual(filter, props.filter))
-            props.setFilter(filter.center, filter.start, filter.end, filter.unit, filter.duration);
-    }, [filter]);
-    //Checks typing of ITimeFilter and then compares to ITimeWindow
-    function isEqual(flt1, flt2) {
-        var flt = getTimeWindow(flt2, format);
-        return flt1.center == flt.center &&
-            flt1.unit == flt.unit &&
-            flt1.duration == flt.duration;
-    }
-    React.useEffect(function () {
-        if (!isEqual(filter, props.filter)) {
-            var flt = getTimeWindow(props.filter, format);
-            setFilter(flt);
-        }
-    }, [props.filter]);
-    return (React.createElement("fieldset", { className: "border", style: { padding: '10px', height: '100%' } },
-        React.createElement("legend", { className: "w-auto", style: { fontSize: 'large' } }, "Date/Time Filter:"),
-        React.createElement(Row, { addRow: props.isHorizontal },
-            props.dateTimeSetting === 'center' ?
-                React.createElement(Row, { addRow: !props.isHorizontal },
-                    React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-2' : 'col-6') : 'col-12' },
-                        React.createElement(react_forms_1.DatePicker, { Record: filter, Field: "center", Help: "All times are in system time. System time is currently set to ".concat(props.timeZone, ". "), Setter: function (r) {
-                                setFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { center: r.center, start: r.start, end: r.end })); });
-                                setActiveQP(-1);
-                            }, Label: 'Time Window Center:', Type: (_a = props.format) !== null && _a !== void 0 ? _a : 'datetime-local', Valid: function () { return true; }, Format: format })))
-                : null,
-            props.dateTimeSetting === 'startWindow' || props.dateTimeSetting === 'startEnd' ?
-                React.createElement(Row, { addRow: !props.isHorizontal },
-                    React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-2' : 'col-6') : 'col-12' },
-                        React.createElement(react_forms_1.DatePicker, { Record: filter, Field: "start", Help: "All times are in system time. System time is currently set to ".concat(props.timeZone, ". "), Setter: function (r) {
-                                var _a;
-                                var halfDur = filter.halfDuration;
-                                var unit = filter.unit;
-                                if (props.dateTimeSetting === 'startEnd') {
-                                    _a = (0, TimeWindowUtils_1.findAppropriateUnit)((0, TimeWindowUtils_1.getMoment)(r.start, format), (0, TimeWindowUtils_1.getMoment)(filter.end, format), undefined, true), unit = _a[0], halfDur = _a[1];
-                                }
-                                var flt = getTimeWindow({ start: r.start, duration: halfDur * 2, unit: unit }, format);
-                                setFilter(flt);
-                                setActiveQP(-1);
-                            }, Label: 'Start of Time Window:', Type: (_b = props.format) !== null && _b !== void 0 ? _b : 'datetime-local', Valid: function () { return true; }, Format: format })))
-                : null,
-            props.dateTimeSetting === 'endWindow' || props.dateTimeSetting === 'startEnd' ?
-                React.createElement(Row, { addRow: !props.isHorizontal },
-                    React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-2' : 'col-6') : 'col-12' },
-                        React.createElement(react_forms_1.DatePicker, { Record: filter, Field: "end", Help: "All times are in system time. System time is currently set to ".concat(props.timeZone, ". "), Setter: function (r) {
-                                var _a;
-                                var halfDur = filter.halfDuration;
-                                var unit = filter.unit;
-                                if (props.dateTimeSetting === 'startEnd') {
-                                    _a = (0, TimeWindowUtils_1.findAppropriateUnit)((0, TimeWindowUtils_1.getMoment)(filter.start, format), (0, TimeWindowUtils_1.getMoment)(r.end, format), undefined, true), unit = _a[0], halfDur = _a[1];
-                                }
-                                var flt = getTimeWindow({ end: r.end, duration: halfDur * 2, unit: unit }, format);
-                                setFilter(flt);
-                                setActiveQP(-1);
-                            }, Label: 'End of Time Window :', Type: (_c = props.format) !== null && _c !== void 0 ? _c : 'datetime-local', Valid: function () { return true; }, Format: format })))
-                : null,
-            props.dateTimeSetting === 'center' ?
-                React.createElement(React.Fragment, null,
-                    React.createElement("label", { style: { width: '100%', position: 'relative', float: "left" } }, "Time Window(+/-): "),
-                    React.createElement(Row, { addRow: !props.isHorizontal },
-                        React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-1' : 'col-3') : 'col-6' },
-                            React.createElement(react_forms_1.Input, { Record: filter, Field: 'halfDuration', Setter: function (r) {
-                                    var flt = getTimeWindow({ center: filter.center, halfDuration: r.halfDuration, unit: filter.unit }, format);
-                                    setFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { duration: r.duration, halfDuration: r.halfDuration, start: flt.start, end: flt.end })); });
-                                    setActiveQP(-1);
-                                }, Label: '', Valid: function () { return true; }, Type: 'number' })),
-                        React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-1' : 'col-3') : 'col-6' },
-                            React.createElement(react_forms_1.Select, { Record: filter, Label: '', Field: 'unit', Setter: function (r) {
-                                    var flt = getTimeWindow({ center: filter.center, halfDuration: filter.halfDuration, unit: r.unit }, format);
-                                    setFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { unit: r.unit, start: flt.start, end: flt.end })); });
-                                    setActiveQP(-1);
-                                }, Options: TimeWindowUtils_1.units.map(function (unit) { return ({
-                                    Value: unit,
-                                    Label: (0, TimeWindowUtils_1.readableUnit)(unit)
-                                }); }) }))))
-                : null,
-            props.dateTimeSetting === 'startWindow' ?
-                React.createElement(React.Fragment, null,
-                    React.createElement("label", { style: { width: '100%', position: 'relative', float: "left" } }, "Time Window(+): "),
-                    React.createElement(Row, { addRow: !props.isHorizontal },
-                        React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-1' : 'col-3') : 'col-6' },
-                            React.createElement(react_forms_1.Input, { Record: filter, Field: 'duration', Setter: function (r) {
-                                    var flt = getTimeWindow({ start: filter.start, duration: r.duration, unit: filter.unit }, format);
-                                    setFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { duration: r.duration, halfDuration: r.halfDuration, center: flt.center, end: flt.end })); });
-                                    setActiveQP(-1);
-                                }, Label: '', Valid: function () { return true; }, Type: 'number' })),
-                        React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-1' : 'col-3') : 'col-6' },
-                            React.createElement(react_forms_1.Select, { Record: filter, Label: '', Field: 'unit', Setter: function (r) {
-                                    var flt = getTimeWindow({ start: filter.start, duration: filter.duration, unit: r.unit }, format);
-                                    setFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { unit: r.unit, center: flt.center, end: flt.end })); });
-                                    setActiveQP(-1);
-                                }, Options: TimeWindowUtils_1.units.map(function (unit) { return ({
-                                    Value: unit,
-                                    Label: (0, TimeWindowUtils_1.readableUnit)(unit)
-                                }); }) }))))
-                : null,
-            props.dateTimeSetting === 'endWindow' ?
-                React.createElement(React.Fragment, null,
-                    React.createElement("label", { style: { width: '100%', position: 'relative', float: "left" } }, "Time Window(-): "),
-                    React.createElement(Row, { addRow: !props.isHorizontal },
-                        React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-1' : 'col-3') : 'col-6' },
-                            React.createElement(react_forms_1.Input, { Record: filter, Field: 'duration', Setter: function (r) {
-                                    var flt = getTimeWindow({ end: filter.end, duration: r.duration, unit: filter.unit }, format);
-                                    setFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { duration: r.duration, halfDuration: r.halfDuration, center: flt.center, start: flt.start })); });
-                                    setActiveQP(-1);
-                                }, Label: '', Valid: function () { return true; }, Type: 'number' })),
-                        React.createElement("div", { className: props.isHorizontal ? (props.showQuickSelect ? 'col-1' : 'col-3') : 'col-6' },
-                            React.createElement(react_forms_1.Select, { Record: filter, Label: '', Field: 'unit', Setter: function (r) {
-                                    var flt = getTimeWindow({ end: filter.end, duration: filter.duration, unit: r.unit }, format);
-                                    setFilter(function (prevFilter) { return (__assign(__assign({}, prevFilter), { unit: r.unit, center: flt.center, start: flt.start })); });
-                                    setActiveQP(-1);
-                                }, Options: TimeWindowUtils_1.units.map(function (unit) { return ({
-                                    Value: unit,
-                                    Label: (0, TimeWindowUtils_1.readableUnit)(unit)
-                                }); }) }))))
-                : null,
-            props.showQuickSelect ?
-                React.createElement("div", { className: props.isHorizontal ? 'col-8' : 'row' },
-                    React.createElement(Row, { addRow: props.isHorizontal, class: "justify-content-center" }, QuickSelects.map(function (qs, i) {
-                        if (i % 3 !== 0)
-                            return null;
-                        return (React.createElement("div", { key: i, className: props.isHorizontal ? 'col-2' : "col-4", style: { paddingLeft: (props.isHorizontal ? 0 : (i % 9 == 0 ? 15 : 0)), paddingRight: (props.isHorizontal ? 2 : ((i % 18 == 6 || i % 18 == 15) ? 15 : 2)), marginTop: 10 } },
-                            React.createElement("ul", { className: "list-group", key: i },
-                                React.createElement("li", { key: i, style: { cursor: 'pointer' }, onClick: function () {
-                                        var flt = getTimeWindow(QuickSelects[i].createFilter(props.timeZone, props.format), format);
-                                        props.setFilter(flt.center, flt.start, flt.end, flt.unit, flt.duration);
-                                        setActiveQP(i);
-                                    }, className: "item badge badge-" + (i == activeQP ? "primary" : "secondary") }, QuickSelects[i].label),
-                                i + 1 < QuickSelects.length ?
-                                    React.createElement("li", { key: i + 1, style: { marginTop: 3, cursor: 'pointer' }, className: "item badge badge-" + (i + 1 == activeQP ? "primary" : "secondary"), onClick: function () {
-                                            var flt = getTimeWindow(QuickSelects[i + 1].createFilter(props.timeZone, props.format), format);
-                                            props.setFilter(flt.center, flt.start, flt.end, flt.unit, flt.duration);
-                                            setActiveQP(i + 1);
-                                        } }, QuickSelects[i + 1].label) : null,
-                                i + 2 < QuickSelects.length ?
-                                    React.createElement("li", { key: i + 2, style: { marginTop: 3, cursor: 'pointer' }, className: "item badge badge-" + (i + 2 == activeQP ? "primary" : "secondary"), onClick: function () {
-                                            var flt = getTimeWindow(QuickSelects[i + 2].createFilter(props.timeZone, props.format), format);
-                                            props.setFilter(flt.center, flt.start, flt.end, flt.unit, flt.duration);
-                                            setActiveQP(i + 2);
-                                        } }, QuickSelects[i + 2].label) : null)));
-                    })))
-                : null)));
-};
-exports.default = TimeFilter;