[Time Conductor] add history and select range features (#2932)

* basic brush prototype visible * require alt pressed for grab handle. display only * pan and zoom now co-exist * revert selection to times * make LocalTimeSystem UTCBased (Earth based) * add LocalTimeSystem * make isTimeFixed check reusable * linting * zoom axis sets start and end times * pass isFixed as props so we can watch for change from parent * disable cursor for local time and enable for fixed time * linting * resize brush on window resize * just use d3-brush instead of entire d3 package * WIP prototyping conductor history * set global bounds before emitting change event * WIP conductor history * WIP save history to and pull history from local storage * WIP persistence works * reset axis height after prototyping * conductor history functionality complete * clean up refactoring * add presets code cleanup * axis visual tuning * remove unused function calls * change tick to timespan to avoid confusion * fix bounds to use for timespans on pan axis * linting * linting * more linting * linting * change realtime end bound to 30 secondes * add max duration validation * Tweaks to Time Conductor History menu - Enhanced styles for `.c-menu`; - Added hint messaging and separator; - Reversed displayed history array so that latest entry is always first; * refactor to use browser mouse events instead of d3brush * Styling Time Conductor axis area - Styles for `is-zooming` state and brush; - Styles for `is-alt-key-down` for panning; - Styles for hover modified; * resolve merge conflicts * Styling Time Conductor axis and inputs - Moved panning and zooming styles up into `conductor.scss`; - Stubbed in :class names in Conductor.vue; - New theme constants; * fix merge conflict * move zoom/pan styling up to conductor * WIP almost there * fix zoom * move altPressed up to parent * handle no drag on pan * rename inMode vars for clarity * Styling for Time Conductor zoom and pan - Minor fix to hover cursor for alt-pressed panning; * add configurable bounds limit to time conductor * add presets and records * fixes for history * remove lodash * add default configurables for examples * do not install local time system * cleanup * fix indentation remove logging * remove comments * section-hint without section-separator styling * provide reasonable defaults for conductor configuration * specify input to check validation on * improve validation * first check both inputs for valid formats * clear each valid input on new entry * tear down listeners * add user instructions * allow preset bounds to be declared as callback function * set this.left on resize code refactoring Co-authored-by: charlesh88 <charlesh88@gmail.com> Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
2020-06-30 12:10:35 -07:00
parent 16677c99c9
commit 4ecd264d93
12 changed files with 624 additions and 106 deletions
--- a/index.html
+++ b/index.html
@@ -34,8 +34,8 @@
    <body>
    </body>
    <script>
-        const FIVE_MINUTES = 5 * 60 * 1000;
-        const THIRTY_MINUTES = 30 * 60 * 1000;
+        const THIRTY_SECONDS = 30 * 1000;
+        const THIRTY_MINUTES = THIRTY_SECONDS * 60;

        [
            'example/eventGenerator'
@@ -63,7 +63,39 @@
                    bounds: {
                        start: Date.now() - THIRTY_MINUTES,
                        end: Date.now()
-                    }
+                    },
+                    // commonly used bounds can be stored in history
+                    // bounds (start and end) can accept either a milliseconds number
+                    // or a callback function returning a milliseconds number
+                    // a function is useful for invoking Date.now() at exact moment of preset selection
+                    presets: [
+                        {
+                            label: 'Last Day',
+                            bounds: {
+                                start: () => Date.now() - 1000 * 60 * 60 * 24,
+                                end: () => Date.now()
+                            }
+                        },
+                        {
+                            label: 'Last 2 hours',
+                            bounds: {
+                                start: () => Date.now() - 1000 * 60 * 60 * 2,
+                                end: () => Date.now()
+                            }
+                        },
+                        {
+                            label: 'Last hour',
+                            bounds: {
+                                start: () => Date.now() - 1000 * 60 * 60,
+                                end: () => Date.now()
+                            }
+                        }
+                    ],
+                    // maximum recent bounds to retain in conductor history
+                    records: 10,
+                    // maximum duration between start and end bounds
+                    // for utc-based time systems this is in milliseconds
+                    limit: 1000 * 60 * 60 * 24
                },
                {
                    name: "Realtime",
@@ -71,7 +103,7 @@
                    clock: 'local',
                    clockOffsets: {
                        start: - THIRTY_MINUTES,
-                        end: FIVE_MINUTES
+                        end: THIRTY_SECONDS
                    }
                }
            ]