[PR] Show tooltip when dataset name overflows (#634)

app/scripts/components/common/element-interactive.js

@@ -71,39 +71,42 @@ export const Wrapper = styled.div`
  *   <button>click</button>
  * </ElementInteractive>
  */
-export const ElementInteractive = (props) => {
-  const { linkProps = {}, linkLabel = 'View', children, ...rest } = props;
-  const [isStateOver, setStateOver] = useState(false);
-  const [isStateActive, setStateActive] = useState(false);
-  const [isStateFocus, setStateFocus] = useState(false);
+export const ElementInteractive = React.forwardRef(
+  function ElementInteractiveFwd(props, ref) {
+    const { linkProps = {}, linkLabel = 'View', children, ...rest } = props;
+    const [isStateOver, setStateOver] = useState(false);
+    const [isStateActive, setStateActive] = useState(false);
+    const [isStateFocus, setStateFocus] = useState(false);
 
-  return (
-    <Wrapper
-      {...rest}
-      isStateOver={isStateOver}
-      isStateActive={isStateActive}
-      isStateFocus={isStateFocus}
-      onFocus={useCallback(() => setStateFocus(true), [])}
-      onBlur={useCallback(() => setStateFocus(false), [])}
-      onMouseEnter={useCallback(() => setStateOver(true), [])}
-      onMouseLeave={useCallback(() => {
-        setStateOver(false);
-        setStateActive(false);
-      }, [])}
-    >
-      {children}
-      <InteractiveLink
-        {...linkProps}
-        onMouseDown={useCallback(() => setStateActive(true), [])}
-        onMouseUp={useCallback(() => setStateActive(false), [])}
+    return (
+      <Wrapper
+        ref={ref}
+        {...rest}
+        isStateOver={isStateOver}
+        isStateActive={isStateActive}
+        isStateFocus={isStateFocus}
         onFocus={useCallback(() => setStateFocus(true), [])}
         onBlur={useCallback(() => setStateFocus(false), [])}
+        onMouseEnter={useCallback(() => setStateOver(true), [])}
+        onMouseLeave={useCallback(() => {
+          setStateOver(false);
+          setStateActive(false);
+        }, [])}
       >
-        {linkLabel}
-      </InteractiveLink>
-    </Wrapper>
-  );
-};
+        {children}
+        <InteractiveLink
+          {...linkProps}
+          onMouseDown={useCallback(() => setStateActive(true), [])}
+          onMouseUp={useCallback(() => setStateActive(false), [])}
+          onFocus={useCallback(() => setStateFocus(true), [])}
+          onBlur={useCallback(() => setStateFocus(false), [])}
+        >
+          {linkLabel}
+        </InteractiveLink>
+      </Wrapper>
+    );
+  }
+);
 
 ElementInteractive.propTypes = {
   children: T.node.isRequired,

app/scripts/components/datasets/s-explore/dataset-layer-single.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { glsp, themeVal, truncated } from '@devseed-ui/theme-provider';
+import { AccordionFold } from '@devseed-ui/accordion';
+import { CollecticonCircleInformation } from '@devseed-ui/collecticons';
+import { Heading } from '@devseed-ui/typography';
+import { Toolbar, ToolbarIconButton } from '@devseed-ui/toolbar';
+
+import {
+  ElementInteractive,
+  Wrapper as ElementInteractiveWrapper
+} from '$components/common/element-interactive';
+import {
+  WidgetItemBodyInner,
+  WidgetItemHeader,
+  WidgetItemHeadline,
+  WidgetItemHGroup
+} from '$styles/panel';
+import { Tip } from '$components/common/tip';
+
+interface LayerSelfProps {
+  isStateOver?: boolean;
+  isSelected?: boolean;
+}
+
+const LayerSelf = styled(ElementInteractiveWrapper)<LayerSelfProps>`
+  border-radius: 0;
+  background: ${themeVal('color.surface')};
+  transition: background 0.16s ease-in-out 0s;
+
+  > div {
+    background: none;
+  }
+
+  a,
+  button {
+    pointer-events: auto;
+  }
+
+  &::before {
+    content: '';
+    background: ${themeVal('color.primary')};
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: ${glsp(0.25)};
+    height: 0;
+    transform: translate(0, -50%);
+    transition: height 0.16s ease-in-out 0s;
+  }
+
+  ${({ isStateOver }) =>
+    isStateOver &&
+    css`
+      background: ${themeVal('color.primary-100')};
+    `}
+
+  ${({ isSelected }) =>
+    isSelected &&
+    css`
+      background: ${themeVal('color.primary-50')};
+
+      ${LayerTitle} {
+        color: ${themeVal('color.primary')};
+      }
+
+      &::before {
+        height: 100%;
+      }
+    `}
+`;
+
+const LayerTitle = styled(Heading).attrs({ as: 'h4', size: 'xsmall' })`
+  ${truncated()}
+
+  sub {
+    bottom: 0;
+  }
+`;
+
+interface LayerProps {
+  id: string;
+  name: string;
+  info: React.ReactNode;
+  active: boolean;
+  onToggleClick: () => void;
+}
+
+export function Layer(props: LayerProps) {
+  const { id, name, info, active, onToggleClick } = props;
+
+  const layerTitleRef = React.useRef<HTMLDivElement>(null);
+
+  const isOverflowing = layerTitleRef.current
+    ? layerTitleRef.current.scrollWidth > layerTitleRef.current.offsetWidth
+    : false;
+
+  return (
+    <Tip content={name} disabled={!isOverflowing}>
+      <ElementInteractive
+        as={LayerSelf}
+        forwardedAs='article'
+        isSelected={active}
+        linkLabel='Toggle layer'
+        linkProps={{
+          href: '#',
+          onClick: (e) => {
+            e.preventDefault();
+            onToggleClick();
+          }
+        }}
+        on
+      >
+        <AccordionFold
+          id={`layer-${id}`}
+          forwardedAs='div'
+          renderHeader={({ isExpanded, toggleExpanded }) => (
+            <WidgetItemHeader>
+              <WidgetItemHGroup>
+                <WidgetItemHeadline>
+                  <LayerTitle ref={layerTitleRef}>{name}</LayerTitle>
+                  {/* <Subtitle as='p'>Subtitle</Subtitle> */}
+                </WidgetItemHeadline>
+                <Toolbar size='small'>
+                  <ToolbarIconButton
+                    variation='base-text'
+                    // disabled={!info}
+                    active={isExpanded}
+                    onClick={toggleExpanded}
+                  >
+                    <CollecticonCircleInformation
+                      title='Information about layer'
+                      meaningful
+                    />
+                  </ToolbarIconButton>
+                </Toolbar>
+              </WidgetItemHGroup>
+            </WidgetItemHeader>
+          )}
+          renderBody={() => (
+            <WidgetItemBodyInner>
+              {info ?? <p>No info available for this layer.</p>}
+            </WidgetItemBodyInner>
+          )}
+        />
+      </ElementInteractive>
+    </Tip>
+  );
+}

mock/datasets/no2.data.mdx

@@ -111,7 +111,7 @@ layers:
         - "#050308"
   - id: no2-monthly-diff
     stacCol: no2-monthly-diff
-    name: No2 (Diff)
+    name: No2 (Diff) - let's make this title reaaaaaaly long
     type: raster
     description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales semper risus, suscipit varius diam facilisis non.'
     zoomExtent: