Improved web-console's time-chart brush and added auto-granularity (a…

…pache#14990)

* Improved time-chart brush and added auto-granularity

* prettier

* added highlight bubble to explore visualizations

* Added licenses and fixes from PR review

* added missing files...

licenses.yaml

@@ -5375,6 +5375,15 @@ license_file_path: licenses/bin/change-case.MIT
 
 ---
 
+name: "chronoshift"
+license_category: binary
+module: web-console
+license_name: Apache License version 2.0
+copyright: Vadim Ogievetsky
+version: 0.10.0
+
+---
+
 name: "classnames"
 license_category: binary
 module: web-console
@@ -5903,6 +5912,15 @@ license_file_path: licenses/bin/iconv-lite.MIT
 
 ---
 
+name: "immutable-class"
+license_category: binary
+module: web-console
+license_name: Apache License version 2.0
+copyright: Vadim Ogievetsky
+version: 0.11.2
+
+---
+
 name: "import-fresh"
 license_category: binary
 module: web-console
@@ -6103,6 +6121,26 @@ license_file_path: licenses/bin/memoize-one.MIT
 
 ---
 
+name: "moment-timezone"
+license_category: binary
+module: web-console
+license_name: MIT License
+copyright: Tim Wood
+version: 0.5.43
+license_file_path: licenses/bin/moment-timezone.MIT
+
+---
+
+name: "moment"
+license_category: binary
+module: web-console
+license_name: MIT License
+copyright: Iskren Ivov Chernev
+version: 2.29.4
+license_file_path: licenses/bin/moment.MIT
+
+---
+
 name: "no-case"
 license_category: binary
 module: web-console

licenses/bin/moment-timezone.MIT

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

licenses/bin/moment.MIT

@@ -0,0 +1,22 @@
+Copyright (c) JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

web-console/package.json

@@ -73,6 +73,7 @@
     "@druid-toolkit/visuals-react": "^0.3.3",
     "ace-builds": "~1.4.14",
     "axios": "^0.26.1",
+    "chronoshift": "^0.10.0",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "core-js": "^3.10.1",

web-console/src/hooks/index.ts

@@ -24,3 +24,4 @@ export * from './use-last-defined';
 export * from './use-local-storage-state';
 export * from './use-permanent-callback';
 export * from './use-query-manager';
+export * from './use-resize-observer';

web-console/src/hooks/use-resize-observer.ts

@@ -0,0 +1,80 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+
+const emptyDOMRect = { height: 0, width: 0, x: 0, y: 0, bottom: 0, left: 0, right: 0, top: 0 };
+
+function createEmptyDOMRect(): DOMRect {
+  // DOMRect is not defined in JSDOM
+  return typeof DOMRect !== 'undefined'
+    ? new DOMRect()
+    : { ...emptyDOMRect, toJSON: () => emptyDOMRect };
+}
+
+export function useResizeObserver(element: HTMLElement | null | undefined) {
+  const [rect, setRect] = useState(() => createEmptyDOMRect());
+
+  const maybeUpdate = useCallback(
+    (e: Element) => {
+      const newRect: DOMRect = e.getBoundingClientRect();
+      if (
+        !rect ||
+        rect.bottom !== newRect.bottom ||
+        rect.top !== newRect.top ||
+        rect.left !== newRect.left ||
+        rect.right !== newRect.right ||
+        rect.width !== newRect.width ||
+        rect.height !== newRect.height
+      ) {
+        setRect(newRect);
+      }
+    },
+    [rect],
+  );
+
+  const onScroll = useCallback(() => {
+    if (element) {
+      maybeUpdate(element);
+    }
+  }, [element, maybeUpdate]);
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+      if (!Array.isArray(entries) || !entries.length) {
+        return;
+      }
+
+      maybeUpdate(entries[0].target);
+    });
+
+    if (element) {
+      resizeObserver.observe(element);
+      window.addEventListener('scroll', onScroll, true);
+
+      return () => {
+        resizeObserver.unobserve(element);
+        window.removeEventListener('scroll', onScroll, true);
+      };
+    }
+
+    return;
+  }, [element, maybeUpdate, onScroll]);
+
+  return rect;
+}

web-console/src/views/explore-view/droppable-container/droppable-container.scss

@@ -20,6 +20,7 @@
 
 .droppable-container {
   position: relative;
+  overflow: hidden;
 
   &.drop-hover {
     &::after {