Merge pull request #1053 from buster-so/big-nate-bus-1857-add-report-id-to-the-get-metric-stuff

Update query request for get data

apps/web/src/api/buster_rest/metrics/getMetricQueryRequests.ts

@@ -143,11 +143,11 @@ export const useGetMetricData = <TData = BusterMetricDataExtended>(
   {
     id = '',
     versionNumber: versionNumberProp,
-    reportFileId,
+    cacheDataId,
   }: {
     id: string | undefined;
     versionNumber?: number | 'LATEST';
-    reportFileId?: string;
+    cacheDataId?: string;
   },
   params?: Omit<UseQueryOptions<BusterMetricData, RustApiError, TData>, 'queryKey' | 'queryFn'>
 ) => {
@@ -172,7 +172,7 @@ export const useGetMetricData = <TData = BusterMetricDataExtended>(
       id,
       version_number: chosenVersionNumber || undefined,
       password,
-      report_file_id: reportFileId,
+      report_file_id: cacheDataId,
     });
     const latestVersionNumber = getLatestMetricVersion(id);
     const isLatest =

apps/web/src/api/query_keys/metric.ts

@@ -26,9 +26,19 @@ export const metricsGetList = (
     initialDataUpdatedAt: 0,
   });
 
-export const metricsGetData = (id: string, version_number: number | 'LATEST') =>
+export const metricsGetData = (
+  id: string,
+  version_number: number | 'LATEST',
+  cacheDataId?: string
+) =>
   queryOptions<BusterMetricDataExtended>({
-    queryKey: ['metrics', 'data', id, version_number || 'LATEST'] as const,
+    queryKey: [
+      'metrics',
+      'data',
+      id,
+      version_number || 'LATEST',
+      cacheDataId || 'live-data',
+    ] as const,
     staleTime: 1000 * 60 * 30, // 30 minutes,
   });
 

apps/web/src/components/features/metrics/MetricChartCard/MetricChartCard.tsx

@@ -24,6 +24,7 @@ export type MetricChartCardProps = {
   animate?: boolean;
   renderChartContent?: boolean; // we do this to avoid expensive rendering if off screen
   disableTooltip?: boolean;
+  cacheDataId?: string;
 };
 
 const stableMetricSelect = ({
@@ -60,6 +61,7 @@ export const MetricChartCard = React.memo(
         animate = true,
         renderChartContent = true,
         disableTooltip,
+        cacheDataId,
       },
       ref
     ) => {
@@ -71,7 +73,7 @@ export const MetricChartCard = React.memo(
         data: metricData,
         isFetched: isFetchedMetricData,
         error: metricDataError,
-      } = useGetMetricData({ id: metricId, versionNumber });
+      } = useGetMetricData({ id: metricId, versionNumber, cacheDataId });
 
       //data config
       const loadingData = !isFetchedMetricData;

apps/web/src/components/features/metrics/ReportMetricItem/ReportMetricThreeDotMenu.tsx

@@ -21,11 +21,13 @@ import {
 export const ReportMetricThreeDotMenu = ({
   metricId,
   metricVersionNumber,
+  reportId,
 }: {
   metricId: string;
   metricVersionNumber: number | undefined;
+  reportId: string;
 }) => {
-  const items = useReportMetricThreeDotMenu({ metricId, metricVersionNumber });
+  const items = useReportMetricThreeDotMenu({ metricId, metricVersionNumber, reportId });
 
   return <MetricHeaderSecondaryWrapperDropdown dropdownItems={items} />;
 };
@@ -33,9 +35,11 @@ export const ReportMetricThreeDotMenu = ({
 const useReportMetricThreeDotMenu = ({
   metricId,
   metricVersionNumber,
+  reportId,
 }: {
   metricId: string;
   metricVersionNumber: number | undefined;
+  reportId: string;
 }): IDropdownItems => {
   const editor = useEditorRef();
   const element = useElement();
@@ -52,7 +56,11 @@ const useReportMetricThreeDotMenu = ({
     metricId,
     metricVersionNumber,
   });
-  const downloadCSV = useDownloadMetricDataCSV({ metricId, metricVersionNumber });
+  const downloadCSV = useDownloadMetricDataCSV({
+    metricId,
+    metricVersionNumber,
+    cacheDataId: reportId,
+  });
   const downloadPNG = useDownloadPNGSelectMenu({ metricId, metricVersionNumber });
   const renameMetric = useRenameMetricOnPage({
     metricId,

apps/web/src/components/features/metrics/threeDotMenuHooks.tsx

@@ -159,16 +159,21 @@ export const useRenameMetricOnPage = ({
 export const useDownloadMetricDataCSV = ({
   metricId,
   metricVersionNumber,
+  cacheDataId,
 }: {
   metricId: string;
   metricVersionNumber: number | undefined;
+  cacheDataId?: string;
 }) => {
   const [isDownloading, setIsDownloading] = useState(false);
   const { data: metricData } = useGetMetricData(
-    { id: metricId, versionNumber: metricVersionNumber },
+    { id: metricId, versionNumber: metricVersionNumber, cacheDataId },
     { enabled: false }
   );
-  const { data: name } = useGetMetric({ id: metricId }, { select: (x) => x.name });
+  const { data: name } = useGetMetric(
+    { id: metricId },
+    { select: useCallback((x: BusterMetric) => x.name, []) }
+  );
 
   return useMemo(
     () => ({

apps/web/src/components/ui/report/elements/MetricElement/MetricContent.tsx

@@ -1,27 +1,31 @@
 import React, { useRef } from 'react';
 import { MetricChartCard } from '@/components/features/metrics/MetricChartCard';
 import { ReportMetricThreeDotMenu } from '@/components/features/metrics/ReportMetricItem';
+import { useGetReportParams } from '@/context/Reports/useGetReportParams';
 import { useInViewport } from '@/hooks/useInViewport';
 
 export const MetricContent = React.memo(
   ({
     metricId,
     metricVersionNumber,
+
     isExportMode = false,
     readOnly = false,
     className,
   }: {
     metricId: string;
     metricVersionNumber: number | undefined;
+
     readOnly?: boolean;
     isExportMode?: boolean;
     className?: string;
   }) => {
+    const { reportId = '' } = useGetReportParams();
     const ref = useRef<HTMLDivElement>(null);
     const hasBeenInViewport = useRef(false);
 
     const [inViewport] = useInViewport(ref, {
-      threshold: 0.25,
+      threshold: 0.275,
     });
     if (inViewport && !hasBeenInViewport.current) {
       hasBeenInViewport.current = true;
@@ -38,11 +42,13 @@ export const MetricContent = React.memo(
         renderChartContent={renderChart}
         animate={!isExportMode}
         className={className}
+        cacheDataId={reportId}
         headerSecondaryContent={
           !readOnly && (
             <ReportMetricThreeDotMenu
               metricId={metricId}
               metricVersionNumber={metricVersionNumber}
+              reportId={reportId}
             />
           )
         }

apps/web/src/components/ui/report/elements/MetricElement/MetricElementStatic.tsx

@@ -1,39 +0,0 @@
-import {
-  SlateElement,
-  type SlateElementProps,
-  type TCaptionProps,
-  type TResizableProps,
-} from 'platejs';
-import type { TMetricElement } from '../../plugins/metric-kit';
-import { MetricContent } from './MetricContent';
-import { MetricEmbedPlaceholder } from './MetricPlaceholder';
-
-export const MetricElementStatic = (
-  props: SlateElementProps<TMetricElement & TCaptionProps & TResizableProps>
-) => {
-  const metricId = props.element.metricId;
-  const metricVersionNumber = props.element.metricVersionNumber;
-  const readOnly = true;
-  const { align = 'center', caption, url, width } = props.element;
-
-  const content = metricId ? (
-    <MetricContent
-      metricId={metricId}
-      metricVersionNumber={metricVersionNumber}
-      readOnly={readOnly}
-    />
-  ) : (
-    <MetricEmbedPlaceholder />
-  );
-
-  return (
-    <SlateElement {...props} className="mt-2.5 mb-4.5">
-      <figure className="relative m-0 inline-block" style={{ width }}>
-        <div className="relative max-w-full min-w-[92px]" style={{ textAlign: align }}>
-          {content}
-        </div>
-        <div className="h-0">{props.children}</div>
-      </figure>
-    </SlateElement>
-  );
-};

apps/web/src/components/ui/report/elements/SlashNode.tsx

@@ -37,11 +37,11 @@ export function SlashInputElement(props: PlateElementProps<TSlashInputElement>)
       <InlineCombobox
         element={element}
         trigger="/"
-        className="bg-item-select relative rounded pl-2 pr-1.5 mr-1 overflow-hidden w-fit flex items-center"
+        className="bg-item-select relative rounded pl-2 pr-1.5 mr-1 overflow-hidden w-fit flex items-center text-gray-dark"
       >
         <InlineComboboxInput
           placeholder={placeholder}
-          className="bg-item-select text-gray-light ml-1 rounded-r"
+          className="bg-item-select text-gray-light ml-0.5 rounded-r"
         />
 
         <InlineComboboxContent>