dashboard cloning should put chart right after

[Vadman97]

No description provided.

[linear]

HIG-4671 dashboard cloning should put chart right after

[greptile-apps]

To implement dashboard cloning with the chart placed right after, follow these steps:

1. Update Dashboard.tsx:

   • Modify the handleDragEnd function to handle the new chart position after cloning.

   const handleDragEnd = (event: any) => {
       const { active, over } = event;
       if (active.id !== over.id) {
           setGraphs((graphs) => {
               if (graphs === undefined) {
                   return undefined;
               }
               const oldIndex = graphs.findIndex((g) => g.id === active.id);
               const newIndex = graphs.findIndex((g) => g.id === over.id);
               return arrayMove(graphs, oldIndex, newIndex + 1); // Adjust the newIndex to place right after
           });
       }
   };

2. Update CreateDashboardModal.tsx:

   • Ensure the new dashboard is created with the correct layout.

   const onCreateNewDashboard = () => {
       if (!newDashboard) return;
       updateDashboard({
           name: newDashboard,
           metrics: [],
           layout: JSON.stringify(DEFAULT_METRICS_LAYOUT),
       }).then((r) => {
           const newId = r.data?.upsertDashboard || '';
           navigate(`/${project_id}/dashboards/${newId}`);
       });
   };

3. Update GraphingEditor.tsx:

   • Adjust the onSave function to ensure the new graph is placed right after the cloned one.

   const onSave = () => {
       let display: string | undefined;
       let nullHandling: string | undefined;
       switch (viewType) {
           case 'Line chart':
               display = lineDisplay;
               nullHandling = lineNullHandling;
               break;
           case 'Bar chart':
               display = barDisplay;
               break;
           case 'Table':
               nullHandling = tableNullHandling;
               break;
       }
       const graphInput: GraphInput = {
           visualizationId: dashboard_id!,
           bucketByKey: bucketByEnabled ? bucketByKey : null,
           bucketCount: bucketByEnabled ? bucketCount : null,
           display,
           functionType,
           groupByKey: groupByEnabled ? groupByKey : null,
           limit: groupByEnabled ? limit : null,
           limitFunctionType: groupByEnabled ? limitFunctionType : null,
           limitMetric: groupByEnabled ? limitMetric : null,
           metric,
           nullHandling,
           productType,
           query: debouncedQuery,
           title: metricViewTitle,
           type: viewType,
       };
       if (isEdit) {
           graphInput.id = graph_id;
       }
       upsertGraph({
           variables: {
               graph: graphInput,
           },
           optimisticResponse: {
               upsertGraph: {
                   ...graphInput,
                   id: graphInput.id ?? `temp-${tempId}`,
                   __typename: 'Graph',
               },
           },
           update(cache, result) {
               if (isEdit) {
                   return;
               }
               const vizId = cache.identify({
                   id: dashboard_id,
                   __typename: 'Visualization',
               });
               const graphId = cache.identify({
                   id: result.data?.upsertGraph.id,
                   __typename: 'Graph',
               });
               cache.modify({
                   id: vizId,
                   fields: {
                       graphs(existing: any[] = []) {
                           return existing.concat([{ __ref: graphId }]);
                       },
                   },
               });
           },
       })
           .then(() => {
               message.success(`Metric view ${isEdit ? 'updated' : 'created'}`);
           })
           .catch(() => {
               message.error('Failed to create metric view');
           });
       navigate({
           pathname: `../${dashboard_id}`,
           search: location.search,
       });
   };

References

/frontend/src/pages/Graphing/Dashboard.tsx
/frontend/src/pages/Dashboards/components/CreateDashboardModal/CreateDashboardModal.tsx
/frontend/src/pages/Graphing/GraphingEditor.tsx
/frontend/src/pages/Dashboards/pages/Dashboard/DashboardPage.tsx
/frontend/src/pages/Dashboards/DashboardsRouter.tsx

Ask Greptile