From 197504caa7defe9491817d508241d35dd22a7d4c Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Thu, 12 Dec 2024 12:54:22 +0100
Subject: [PATCH] ui: metric type selector for head

---
 .../components/MetricTypeSelector.tsx         | 52 +++++++++++++++++++
 .../components/WidgetChart/WidgetChart.tsx    |  3 +-
 .../MetricTypeDropdown/MetricTypeDropdown.tsx | 16 +-----
 .../WidgetView/WidgetViewHeader.tsx           | 15 ++++--
 .../shared/Filters/FilterList/FilterList.tsx  |  2 +-
 frontend/app/constants/card.ts                | 34 ++++++------
 6 files changed, 86 insertions(+), 36 deletions(-)
 create mode 100644 frontend/app/components/Dashboard/components/MetricTypeSelector.tsx

diff --git a/frontend/app/components/Dashboard/components/MetricTypeSelector.tsx b/frontend/app/components/Dashboard/components/MetricTypeSelector.tsx
new file mode 100644
index 000000000..5cd8b556a
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/MetricTypeSelector.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Segmented } from 'antd';
+import { LineChart, AlignStartVertical } from 'lucide-react';
+import { Icon } from 'UI'; //dashboards/user-journey , dashboards/heatmap-2, signpost-split
+import {
+  TIMESERIES,
+  FUNNEL,
+  USER_PATH,
+  HEATMAP,
+  RETENTION,
+} from 'App/constants/card';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+
+const types = [
+  {
+    icon: <LineChart width={16} />,
+    value: TIMESERIES,
+  },
+  {
+    icon: <AlignStartVertical width={16} />,
+    value: FUNNEL,
+  },
+  {
+    icon: <Icon name={'dashboards/user-journey'} color={'inherit'} size={16} />,
+    value: USER_PATH,
+  },
+  {
+    icon: <Icon name={'dashboards/heatmap-2'} color={'inherit'} size={16} />,
+    value: HEATMAP,
+  },
+  {
+    icon: <Icon name={'signpost-split'} color={'inherit'} size={16} />,
+    value: RETENTION,
+  },
+];
+
+function MetricTypeSelector() {
+  const { metricStore } = useStore();
+  const metric = metricStore.instance;
+
+  const onChange = (type: string) => {
+    metricStore.changeType(type);
+  };
+
+  const selected = types.find((i) => i.value === metric.metricType) || types[0];
+  return (
+    <Segmented onChange={onChange} options={types} value={selected.value} />
+  );
+}
+
+export default observer(MetricTypeSelector);
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index a5b962bec..931de3089 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -501,6 +501,7 @@ function WidgetChart(props: Props) {
       }
     }
 
+    console.log('Unknown metric type', metricType, viewType);
     return <div>Unknown metric type</div>;
   };
 
@@ -509,7 +510,7 @@ function WidgetChart(props: Props) {
       <Loader loading={loading} style={{ height: `240px` }}>
         <div
           style={{
-            minHeight: 240,
+            minHeight: props.isPreview ? undefined : 240,
             paddingTop:
               props.isPreview && metric.metricType === TIMESERIES
                 ? '1.5rem'
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx b/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx
index 7155ae111..e755dfc96 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx
@@ -14,8 +14,8 @@ interface Props {
 }
 function MetricTypeDropdown(props: Props) {
   const { metricStore, userStore } = useStore();
-  const isEnterprise = userStore.isEnterprise;
   const metric: any = metricStore.instance;
+  const isEnterprise = userStore.isEnterprise;
 
   const options = React.useMemo(() => {
     return DROPDOWN_OPTIONS.map((option: any) => {
@@ -26,18 +26,6 @@ function MetricTypeDropdown(props: Props) {
     });
   }, []);
 
-  React.useEffect(() => {
-    const queryCardType = props.query.get('type');
-    if (queryCardType && options.length > 0 && metric.metricType) {
-      const type: Option = options.find((i) => i.value === queryCardType) as Option;
-      if (type.disabled) {
-        return;
-      }
-      setTimeout(() => onChange(type.value), 0);
-    }
-    // setTimeout(() => onChange(USER_PATH), 0);
-  }, []);
-
   const onChange = (type: string) => {
     metricStore.changeType(type);
   };
@@ -51,7 +39,7 @@ function MetricTypeDropdown(props: Props) {
       value={
         DROPDOWN_OPTIONS.find((i: any) => i.value === metric.metricType) || DROPDOWN_OPTIONS[0]
       }
-      onChange={props.onSelect}
+      onChange={({ value }) => onChange(value.value)}
       components={{
         SingleValue: ({ children, ...props }: any) => {
           const {
diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
index 7bab4e8c7..2ec4edeca 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
@@ -2,10 +2,13 @@ import React from 'react';
 import cn from 'classnames';
 import WidgetName from 'Components/Dashboard/components/WidgetName';
 import { useStore } from 'App/mstore';
-import { useObserver } from 'mobx-react-lite';
+import { observer } from 'mobx-react-lite';
 import AddToDashboardButton from 'Components/Dashboard/components/AddToDashboardButton';
 import { Button, Space } from 'antd';
 import CardViewMenu from 'Components/Dashboard/components/WidgetView/CardViewMenu';
+import { Link } from 'lucide-react'
+import copy from 'copy-to-clipboard';
+import MetricTypeSelector from "../MetricTypeSelector";
 
 interface Props {
   onClick?: () => void;
@@ -14,8 +17,12 @@ interface Props {
 
 function WidgetViewHeader({ onClick, onSave }: Props) {
   const { metricStore } = useStore();
-  const widget = useObserver(() => metricStore.instance);
+  const widget = metricStore.instance;
 
+  const copyUrl = () => {
+    const url = window.location.href;
+    copy(url)
+  }
   return (
     <div
       className={cn(
@@ -32,6 +39,8 @@ function WidgetViewHeader({ onClick, onSave }: Props) {
       </h1>
       <Space>
         <AddToDashboardButton metricId={widget.metricId} />
+        <MetricTypeSelector />
+        <Button onClick={copyUrl} icon={<Link size={16} strokeWidth={1} />}></Button>
         <Button
           type="primary"
           onClick={onSave}
@@ -46,4 +55,4 @@ function WidgetViewHeader({ onClick, onSave }: Props) {
   );
 }
 
-export default WidgetViewHeader;
+export default observer(WidgetViewHeader);
diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
index 6d2c3c3b3..16f634a6e 100644
--- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -177,7 +177,7 @@ export const EventsList = observer((props: Props) => {
   const eventsNum = filters.filter((i: any) => i.isEvent).length;
   return (
     <div
-      className={'border-b border-b-gray-lighter py-2 px-4 rounded-xl bg-white border border-gray-lighter overflow-hidden'}
+      className={'border-b border-b-gray-lighter py-2 px-4 rounded-xl bg-white border border-gray-lighter'}
       style={{
         borderBottomLeftRadius: props.mergeDown ? 0 : undefined,
         borderBottomRightRadius: props.mergeDown ? 0 : undefined,
diff --git a/frontend/app/constants/card.ts b/frontend/app/constants/card.ts
index 08bba396e..f8878470a 100644
--- a/frontend/app/constants/card.ts
+++ b/frontend/app/constants/card.ts
@@ -19,7 +19,7 @@ export const FUNNEL = 'funnel';
 export const ERRORS = 'errors';
 export const USER_PATH = 'pathAnalysis';
 export const RETENTION = 'retention';
-export const INSIGHTS = 'insights';
+export const INSIGHTS = 'insights'; // SaaS and EE
 export const PERFORMANCE = 'performance';
 
 export interface Option {
@@ -51,22 +51,22 @@ export const TYPES: CardType[] = [
     slug: HEATMAP,
     subTypes: [{ title: 'Visited URL', slug: FilterKey.CLICKMAP_URL, description: '' }],
   },
-  {
-    title: 'Table',
-    icon: 'list-alt',
-    description: 'Create custom tables of users, sessions, errors, issues and more.',
-    slug: TABLE,
-    subTypes: [
-      { title: 'Users', slug: FilterKey.USERID, description: '' },
-      { title: 'Sessions', slug: FilterKey.SESSIONS, description: '' },
-      { title: 'JS Errors', slug: FilterKey.ERRORS, description: '' },
-      { title: 'Issues', slug: FilterKey.ISSUE, description: '' },
-      { title: 'Browser', slug: FilterKey.USER_BROWSER, description: '' },
-      { title: 'Devices', slug: FilterKey.USER_DEVICE, description: '' },
-      { title: 'Countries', slug: FilterKey.USER_COUNTRY, description: '' },
-      { title: 'URLs', slug: FilterKey.LOCATION, description: '' },
-    ],
-  },
+  // {
+  //   title: 'Table',
+  //   icon: 'list-alt',
+  //   description: 'Create custom tables of users, sessions, errors, issues and more.',
+  //   slug: TABLE,
+  //   subTypes: [
+  //     { title: 'Users', slug: FilterKey.USERID, description: '' },
+  //     { title: 'Sessions', slug: FilterKey.SESSIONS, description: '' },
+  //     { title: 'JS Errors', slug: FilterKey.ERRORS, description: '' },
+  //     { title: 'Issues', slug: FilterKey.ISSUE, description: '' },
+  //     { title: 'Browser', slug: FilterKey.USER_BROWSER, description: '' },
+  //     { title: 'Devices', slug: FilterKey.USER_DEVICE, description: '' },
+  //     { title: 'Countries', slug: FilterKey.USER_COUNTRY, description: '' },
+  //     { title: 'URLs', slug: FilterKey.LOCATION, description: '' },
+  //   ],
+  // },
   {
     title: 'Funnel',
     icon: 'funnel',