add descriptions SH-216

VKCOM · Nov 7, 2024 · 16917cf · 16917cf
1 parent 0e46371
commit 16917cf
Show file tree

Hide file tree

Showing 10 changed files with 643 additions and 48 deletions.
diff --git a/statshouse-ui/package-lock.json b/statshouse-ui/package-lock.json
diff --git a/statshouse-ui/package.json b/statshouse-ui/package.json
@@ -41,6 +41,7 @@
     "react-router-dom": "^6.17.0",
     "react-scripts": "^5.0.1",
     "react-window": "^1.8.10",
+    "remark-gfm": "^4.0.0",
     "sass": "^1.69.5",
     "typescript": "^4.9.5",
     "uplot": "^1.6.27",

diff --git a/statshouse-ui/src/components2/Dashboard/DashboardName.tsx b/statshouse-ui/src/components2/Dashboard/DashboardName.tsx
@@ -10,6 +10,8 @@ import cn from 'classnames';
 import { Tooltip } from 'components/UI';
 import { DashboardNameTitle } from './DashboardNameTitle';
 import { useStatsHouseShallow } from 'store2';
+import css from '../style.module.css';
+import { MarkdownRender } from 'components2/Plot/PlotView/MarkdownRender';
 
 export function _DashboardName() {
   const { dashboardName, dashboardDescription } = useStatsHouseShallow(
@@ -28,13 +30,22 @@ export function _DashboardName() {
         hover
         horizontal="left"
       >
-        <div>
+        <div className="overflow-hidden text-truncate">
           {dashboardName}
           {!!dashboardDescription && ':'}
         </div>
         {!!dashboardDescription && (
-          <div className="text-secondary flex-grow-1 w-0 overflow-hidden text-truncate">
-            <>{dashboardDescription}</>
+          <div className="text-secondary flex-grow-1 w-0 overflow-hidden">
+            <MarkdownRender
+              className={css.markdown}
+              allowedElements={['p', 'a']}
+              components={{
+                p: ({ node, ...props }) => <span {...props} />,
+              }}
+              unwrapDisallowed
+            >
+              {dashboardDescription}
+            </MarkdownRender>
           </div>
         )}
       </Tooltip>

diff --git a/statshouse-ui/src/components2/Dashboard/DashboardNameTitle.tsx b/statshouse-ui/src/components2/Dashboard/DashboardNameTitle.tsx
@@ -5,6 +5,7 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import React from 'react';
+import { TooltipMarkdown } from 'components2/Plot/PlotView/TooltipMarkdown';
 
 export type DashboardNameTitleProps = {
   name: string;
@@ -18,16 +19,7 @@ export function DashboardNameTitle({ name, description }: DashboardNameTitleProp
         {name}
         {!!description && ':'}
       </div>
-      {!!description && (
-        <>
-          <div style={{ maxWidth: '80vw', whiteSpace: 'pre-wrap' }}>
-            <>{description}</>
-          </div>
-          <div className="opacity-0 overflow-hidden h-0" style={{ maxWidth: '80vw', whiteSpace: 'pre' }}>
-            <>{description}</>
-          </div>
-        </>
-      )}
+      {!!description && <TooltipMarkdown description={description} />}
     </div>
   );
 }
diff --git a/statshouse-ui/src/components2/Dashboard/DashboardSettings/DashboardInfo.tsx b/statshouse-ui/src/components2/Dashboard/DashboardSettings/DashboardInfo.tsx
@@ -4,9 +4,9 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useId, useMemo, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Button } from 'components/UI';
+import { Button, TextArea } from 'components/UI';
 import { useStatsHouseShallow } from 'store2';
 import { useGlobalLoader } from 'store2/plotQueryStore';
 
@@ -44,15 +44,12 @@ export function DashboardInfo({ className }: DashboardInfoProps) {
     },
     [setParams]
   );
-  const inputDescription = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value;
-      setParams((params) => {
-        params.dashboardDescription = value;
-      });
-    },
-    [setParams]
-  );
+
+  const inputDescription = (value: string) => {
+    setParams((params) => {
+      params.dashboardDescription = value;
+    });
+  };
 
   const onRemoveDashboard = useCallback(
     (event: React.MouseEvent) => {
@@ -95,13 +92,11 @@ export function DashboardInfo({ className }: DashboardInfoProps) {
               Description
             </label>
             <div className="col-sm-10">
-              <input
-                id="dashboard-input-description"
-                type="text"
-                className="form-control"
-                aria-label="Name"
-                defaultValue={dashboardDescription ?? ''}
+              <TextArea
+                className="form-control-sm"
+                value={dashboardDescription || ''}
                 onInput={inputDescription}
+                autoHeight
               />
             </div>
           </div>

diff --git a/statshouse-ui/src/components2/Plot/PlotView/MarkdownRender.tsx b/statshouse-ui/src/components2/Plot/PlotView/MarkdownRender.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import ReactMarkdown, { Components } from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+type IMarkdownRenderer = {
+  children?: string;
+  className?: string;
+  allowedElements?: string[];
+  components?: Components;
+  unwrapDisallowed?: boolean;
+};
+
+const remarkPlugins = [remarkGfm];
+
+const customLinkComponents: Components = {
+  a: ({ node, ...props }) => (
+    <a {...props} target="_blank" rel="noopener noreferrer">
+      {props.children}
+    </a>
+  ),
+};
+
+const _MarkdownRender = ({ children = '', components, ...props }: IMarkdownRenderer) => (
+  <ReactMarkdown remarkPlugins={remarkPlugins} components={{ ...customLinkComponents, ...components }} {...props}>
+    {children}
+  </ReactMarkdown>
+);
+
+export const MarkdownRender = React.memo(_MarkdownRender);
diff --git a/statshouse-ui/src/components2/Plot/PlotView/PlotHeader.tsx b/statshouse-ui/src/components2/Plot/PlotView/PlotHeader.tsx
@@ -11,6 +11,7 @@ import { useStatsHouseShallow } from 'store2';
 import { PlotNavigate } from '../PlotNavigate';
 import cn from 'classnames';
 import css from './style.module.css';
+import markdownStyles from '../../style.module.css';
 import { ReactComponent as SVGTrash } from 'bootstrap-icons/icons/trash.svg';
 import { ReactComponent as SVGBoxArrowUpRight } from 'bootstrap-icons/icons/box-arrow-up-right.svg';
 import { ReactComponent as SVGChevronUp } from 'bootstrap-icons/icons/chevron-up.svg';
@@ -25,6 +26,8 @@ import { PlotHeaderBadges } from './PlotHeaderBadges';
 import { getMetricMeta, getMetricName, getMetricWhat } from '../../../store2/helpers';
 import { PlotLink } from '../PlotLink';
 import { PlotHeaderBadgeResolution } from './PlotHeaderBadgeResolution';
+import { MarkdownRender } from './MarkdownRender';
+import { TooltipMarkdown } from './TooltipMarkdown';
 
 export type PlotHeaderProps = { plotKey: PlotKey; isDashboard?: boolean };
 
@@ -130,10 +133,10 @@ export function _PlotHeader({ plotKey, isDashboard }: PlotHeaderProps) {
     setEditTitle(false);
   });
 
-  const plotTooltip = useMemo(
-    () => <PlotHeaderTooltipContent name={<PlotName plotKey={plotKey} />} description={description || ''} />,
-    [description, plotKey]
-  );
+  const plotTooltip = useMemo(() => {
+    const desc = description || '';
+    return <PlotHeaderTooltipContent name={<PlotName plotKey={plotKey} />} description={desc} />;
+  }, [description, plotKey]);
 
   if (isDashboard) {
     return (
@@ -220,7 +223,7 @@ export function _PlotHeader({ plotKey, isDashboard }: PlotHeaderProps) {
             className="overflow-force-wrap text-secondary fw-normal font-normal flex-grow-0"
             style={{ whiteSpace: 'pre-wrap' }}
           >
-            <>{description}</>
+            <MarkdownRender className={markdownStyles.markdownMargin}>{description}</MarkdownRender>
           </small>
         )}
       </div>
@@ -312,9 +315,26 @@ export function _PlotHeader({ plotKey, isDashboard }: PlotHeaderProps) {
             autoHeight
           />
         ) : (
-          <Tooltip className="d-flex" title={description} hover>
-            <small className="text-secondary w-0 flex-grow-1 text-truncate no-tooltip-safari-fix">
-              <>{description}</>
+          <Tooltip
+            className="d-flex"
+            title={
+              <div className="small text-secondary overflow-auto">
+                <TooltipMarkdown description={description} />
+              </div>
+            }
+            hover
+          >
+            <small className="text-secondary w-0 flex-grow-1 no-tooltip-safari-fix">
+              <MarkdownRender
+                className={markdownStyles.markdown}
+                allowedElements={['p', 'a']}
+                components={{
+                  p: ({ node, ...props }) => <span {...props} />,
+                }}
+                unwrapDisallowed
+              >
+                {description}
+              </MarkdownRender>
             </small>
           </Tooltip>
         ))}

diff --git a/statshouse-ui/src/components2/Plot/PlotView/PlotHeaderTooltipContent.tsx b/statshouse-ui/src/components2/Plot/PlotView/PlotHeaderTooltipContent.tsx
@@ -6,6 +6,7 @@
 
 import React from 'react';
 import cn from 'classnames';
+import { TooltipMarkdown } from './TooltipMarkdown';
 
 export type PlotHeaderTooltipContentProps = {
   name: React.ReactNode;
@@ -18,16 +19,7 @@ export function PlotHeaderTooltipContent({ name, description }: PlotHeaderToolti
   return (
     <div className="small text-secondary overflow-auto">
       <div className={cn('font-monospace fw-bold', hasDescription && 'mb-3')}>{name}</div>
-      {hasDescription && (
-        <>
-          <div style={{ maxWidth: '80vw', whiteSpace: 'pre-wrap' }}>
-            <>{description}</>
-          </div>
-          <div className="opacity-0 overflow-hidden h-0" style={{ maxWidth: '80vw', whiteSpace: 'pre' }}>
-            <>{description}</>
-          </div>
-        </>
-      )}
+      {hasDescription && <TooltipMarkdown description={description} />}
     </div>
   );
 }
diff --git a/statshouse-ui/src/components2/Plot/PlotView/TooltipMarkdown.tsx b/statshouse-ui/src/components2/Plot/PlotView/TooltipMarkdown.tsx
@@ -0,0 +1,29 @@
+// Copyright 2024 V Kontakte LLC
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import React from 'react';
+import markdownStyles from '../../style.module.css';
+import { MarkdownRender } from './MarkdownRender';
+import cn from 'classnames';
+
+export type ITooltipMarkdownProps = {
+  description?: string;
+};
+
+const _TooltipMarkdown = ({ description }: ITooltipMarkdownProps) => (
+  <>
+    <div style={{ maxWidth: '80vw', maxHeight: '80vh' }}>
+      <MarkdownRender className={cn(markdownStyles.markdownMargin, markdownStyles.markdownSpace)}>
+        {description}
+      </MarkdownRender>
+    </div>
+    <div className="opacity-0 overflow-hidden h-0" style={{ maxWidth: '80vw', whiteSpace: 'pre' }}>
+      <MarkdownRender className={markdownStyles.markdownMargin}>{description}</MarkdownRender>
+    </div>
+  </>
+);
+
+export const TooltipMarkdown = React.memo(_TooltipMarkdown);
diff --git a/statshouse-ui/src/components2/style.module.css b/statshouse-ui/src/components2/style.module.css
@@ -0,0 +1,29 @@
+/* Copyright 2024 V Kontakte LLC
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+/* referring to tag <p> because <Markdown> returns content inside tag <p> */
+.markdown {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+
+.markdownMargin * {
+  margin: 0;
+}
+
+.markdownSpace p,
+.markdownSpace h1,
+.markdownSpace h2,
+.markdownSpace h3,
+.markdownSpace h4,
+.markdownSpace h5,
+.markdownSpace h6,
+.markdownSpace li {
+  white-space: break-spaces;
+}