StatsHouse UI: add show dash name and description, update tooltip

VKCOM · Mar 26, 2024 · f38d261 · f38d261
1 parent 598da89
commit f38d261
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 8 deletions.
diff --git a/statshouse-ui/src/components/Dashboard/Dashboard.tsx b/statshouse-ui/src/components/Dashboard/Dashboard.tsx
@@ -26,6 +26,7 @@ import { PlotLink } from '../Plot/PlotLink';
 import { ErrorMessages } from '../ErrorMessages';
 import { DashboardVariablesControl } from './DashboardVariablesControl';
 import { Button, Tooltip } from '../UI';
+import { DashboardName } from './DashboardName';
 
 export type DashboardProps = {
   yAxisSize?: number;
@@ -53,6 +54,7 @@ export const Dashboard: React.FC<DashboardProps> = ({ embed = false, yAxisSize =
 
   return (
     <div>
+      {!!params.dashboard?.name && !embed && !tvMode && <DashboardName />}
       {params.plots.length > 0 && !embed && !tvMode && <DashboardHeader />}
       <ErrorMessages />
       {dashboardLayoutEdit && (

diff --git a/statshouse-ui/src/components/Dashboard/DashboardGroupTooltipTitle.tsx b/statshouse-ui/src/components/Dashboard/DashboardGroupTooltipTitle.tsx
@@ -9,11 +9,16 @@ export function DashboardGroupTooltipTitle({ name, description }: DashboardGroup
   }
   return (
     <div className="small text-secondary overflow-auto">
-      <div className="text-body fw-bold">
+      <div className="font-monospace text-body fw-bold">
         {name}
         {!!description && ':'}
       </div>
-      {!!description && <pre className="p-0 m-0">{description}</pre>}
+      {!!description && <div style={{ maxWidth: '80vw', whiteSpace: 'pre-wrap' }}>{description}</div>}
+      {!!description && (
+        <div className="opacity-0 overflow-hidden h-0" style={{ maxWidth: '80vw', whiteSpace: 'pre' }}>
+          {description}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/statshouse-ui/src/components/Dashboard/DashboardHeader.tsx b/statshouse-ui/src/components/Dashboard/DashboardHeader.tsx
@@ -65,7 +65,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = () => {
   }, [params]);
 
   return (
-    <div className="d-flex flex-row flex-wrap mb-3 container-xl">
+    <div className="d-flex flex-row flex-wrap my-3 container-xl">
       <div className="me-3 mb-2">
         <PlotNavigate
           className="btn-group-sm"

diff --git a/statshouse-ui/src/components/Dashboard/DashboardName.tsx b/statshouse-ui/src/components/Dashboard/DashboardName.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { selectorParams, useStore } from '../../store';
+import { useWindowSize } from '../../hooks';
+import cn from 'classnames';
+import { Tooltip } from '../UI';
+import { DashboardNameTitle } from './DashboardNameTitle';
+
+export type DashboardNameProps = {};
+
+export function DashboardName() {
+  const params = useStore(selectorParams);
+  const scrollY = useWindowSize((s) => s.scrollY > 16);
+
+  if (!params.dashboard?.name) {
+    return null;
+  }
+  return (
+    <div className={cn('sticky-top mt-2 bg-body', scrollY && 'shadow-sm small')}>
+      <Tooltip
+        className="container-xl d-flex flex-row gap-2"
+        title={<DashboardNameTitle name={params.dashboard.name} description={params.dashboard.description} />}
+        hover
+        horizontal="left"
+      >
+        <div>
+          {params.dashboard.name}
+          {!!params.dashboard.description && ':'}
+        </div>
+        {!!params.dashboard.description && (
+          <div className="text-secondary flex-grow-1 w-0 overflow-hidden text-truncate">
+            {params.dashboard.description}
+          </div>
+        )}
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/statshouse-ui/src/components/Dashboard/DashboardNameTitle.tsx b/statshouse-ui/src/components/Dashboard/DashboardNameTitle.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export type DashboardNameTitleProps = {
+  name: string;
+  description?: string;
+};
+
+export function DashboardNameTitle({ name, description }: DashboardNameTitleProps) {
+  return (
+    <div className="small text-secondary overflow-auto">
+      <div className="text-body fw-bold">
+        {name}
+        {!!description && ':'}
+      </div>
+      {!!description && <div style={{ maxWidth: '80vw', whiteSpace: 'pre-wrap' }}>{description}</div>}
+      {!!description && (
+        <div className="opacity-0 overflow-hidden h-0" style={{ maxWidth: '80vw', whiteSpace: 'pre' }}>
+          {description}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/statshouse-ui/src/components/Plot/PlotHeaderTooltipContent.tsx b/statshouse-ui/src/components/Plot/PlotHeaderTooltipContent.tsx
@@ -6,7 +6,12 @@ export function PlotHeaderTooltipContent({ name, description }: PlotHeaderToolti
   return (
     <div className="small text-secondary overflow-auto">
       <div className={cn('font-monospace fw-bold', description && 'mb-3')}>{name}</div>
-      {!!description && <pre className="p-0 m-0">{description}</pre>}
+      {!!description && <div style={{ maxWidth: '80vw', whiteSpace: 'pre-wrap' }}>{description}</div>}
+      {!!description && (
+        <div className="opacity-0 overflow-hidden h-0" style={{ maxWidth: '80vw', whiteSpace: 'pre' }}>
+          {description}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/statshouse-ui/src/components/Plot/PlotLayout.tsx b/statshouse-ui/src/components/Plot/PlotLayout.tsx
@@ -52,7 +52,7 @@ export const PlotLayout: React.FC<PlotLayoutProps> = ({
     return <div className="my-2">{children}</div>;
   }
   return (
-    <div className="row flex-wrap">
+    <div className="row flex-wrap my-3">
       <div className={cn(css.plotColumn, 'position-relative mb-3', big ? 'col-lg-5 col-xl-4' : 'col-lg-7 col-xl-8')}>
         <div className="position-relative flex-grow-1 d-flex flex-column">{children}</div>
       </div>

diff --git a/statshouse-ui/src/components/UI/TooltipTitleContent.tsx b/statshouse-ui/src/components/UI/TooltipTitleContent.tsx
@@ -8,7 +8,14 @@ export const TooltipTitleContent = React.memo(function TooltipTitleContent({ chi
     return null;
   }
   if (typeof children === 'string') {
-    return <pre className="m-0 small text-secondary">{children}</pre>;
+    return (
+      <div className="small text-secondary overflow-auto">
+        <div style={{ maxWidth: '80vw', whiteSpace: 'pre-wrap' }}>{children}</div>
+        <div className="opacity-0 overflow-hidden h-0" style={{ maxWidth: '80vw', whiteSpace: 'pre' }}>
+          {children}
+        </div>
+      </div>
+    );
   }
   return <>{children}</>;
 });
diff --git a/statshouse-ui/src/store/tvMode/tvModeStore.ts b/statshouse-ui/src/store/tvMode/tvModeStore.ts
@@ -8,7 +8,7 @@ export type TVModeStore = {
   enable: boolean;
   interval: number;
 };
-export const defaultInterval = 30000;
+export const defaultInterval = 0;
 const localStorageParamName = 'tv_interval';
 const firstSelectorElement = '.dashLayout';
 let timer: NodeJS.Timeout;

diff --git a/statshouse-ui/src/view/ViewPage.tsx b/statshouse-ui/src/view/ViewPage.tsx
@@ -67,7 +67,7 @@ export const ViewPage: React.FC<ViewPageProps> = ({ embed, yAxisSize = 54 }) =>
   }
   return (
     <div ref={setRefPage} className="d-flex flex-column flex-md-row dashLayout">
-      <div className={embed ? 'flex-grow-1' : 'flex-grow-1 pt-3 pb-3'}>
+      <div className="flex-grow-1">
         {tvMode && (
           <div className="position-fixed z-1000 top-0 end-0 pt-1 pe-1 ">
             <div className="input-group input-group-sm">