Fix Celian feedbacks

Signed-off-by: Guillaume LADORME <Gladorme@users.noreply.github.com>

ui/dashboards/src/components/Dashboard/Dashboard.tsx

@@ -27,6 +27,7 @@ export type DashboardProps = BoxProps & {
   emptyDashboardProps?: EmptyDashboardProps;
   panelOptions?: PanelOptions;
 };
+const HEADER_HEIGHT = 165; // Approximate height of the header in dashboard view (including the navbar and variables toolbar)
 
 /**
  * Renders a Dashboard for the provided Dashboard spec.
@@ -35,7 +36,7 @@ export function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: Da
   const panelGroupIds = usePanelGroupIds();
   const boxRef = useRef<HTMLDivElement>(null);
   const isEmpty = !panelGroupIds.length;
-  const dashboardTopPosition = boxRef.current?.getBoundingClientRect().top ?? 165;
+  const dashboardTopPosition = boxRef.current?.getBoundingClientRect().top ?? HEADER_HEIGHT;
   const panelFullHeight = window.innerHeight - dashboardTopPosition - window.scrollY;
 
   return (

ui/dashboards/src/components/GridLayout/GridItemContent.tsx

@@ -13,9 +13,10 @@
 
 import { Box } from '@mui/material';
 import { useInView } from 'react-intersection-observer';
-import { DataQueriesProvider, useSuggestedStepMs } from '@perses-dev/plugin-system';
+import { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
 import { PanelGroupItemId, useEditMode, usePanel, usePanelActions, useViewPanel } from '../../context';
 import { Panel, PanelProps, PanelOptions } from '../Panel';
+import { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-group-slice';
 
 export interface GridItemContentProps {
   panelGroupItemId: PanelGroupItemId;
@@ -42,6 +43,7 @@ export function GridItemContent(props: GridItemContentProps) {
   });
 
   const readHandlers = {
+    isPanelViewed: isPanelGroupItemIdEqual(viewPanelGroupItemId, panelGroupItemId),
     onViewPanelClick: function () {
       if (viewPanelGroupItemId === undefined) {
         viewPanel(panelGroupItemId);

ui/dashboards/src/components/GridLayout/GridLayout.tsx

@@ -69,7 +69,7 @@ export function GridLayout(props: GridLayoutProps) {
     if (itemLayoutViewed) {
       return groupDefinition.itemLayouts.map((itemLayout) => {
         if (itemLayout.i === itemLayoutViewed) {
-          const rowTitleHeight = 40 + 8; // 8 is the margin height
+          const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height
           return {
             h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)), // Viewed panel should take the full height remaining
             i: itemLayoutViewed,

ui/dashboards/src/components/Panel/PanelHeader.tsx

@@ -17,7 +17,8 @@ import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import DragIcon from 'mdi-material-ui/DragVertical';
-import ArrowExpand from 'mdi-material-ui/ArrowExpand';
+import ArrowExpandIcon from 'mdi-material-ui/ArrowExpand';
+import ArrowCollapseIcon from 'mdi-material-ui/ArrowCollapse';
 import ContentCopyIcon from 'mdi-material-ui/ContentCopy';
 import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
 import { ReactNode } from 'react';
@@ -33,6 +34,7 @@ export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
   links?: Link[];
   extra?: ReactNode;
   readHandlers?: {
+    isPanelViewed?: boolean;
     onViewPanelClick: () => void;
   };
   editHandlers?: {
@@ -68,7 +70,11 @@ export function PanelHeader({
           size="small"
           onClick={readHandlers.onViewPanelClick}
         >
-          <ArrowExpand fontSize="inherit" />
+          {readHandlers.isPanelViewed ? (
+            <ArrowCollapseIcon fontSize="inherit" />
+          ) : (
+            <ArrowExpandIcon fontSize="inherit" />
+          )}
         </HeaderIconButton>
       </InfoTooltip>
     );

ui/dashboards/src/context/DashboardProvider/DashboardProviderWithQueryParams.tsx

@@ -0,0 +1,31 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { StringParam, useQueryParam } from 'use-query-params';
+import { DashboardProvider, DashboardProviderProps } from './DashboardProvider';
+
+export function DashboardProviderWithQueryParams({ children, initialState }: DashboardProviderProps) {
+  const [viewPanelRef, setViewPanelRef] = useQueryParam('viewPanelRef', StringParam);
+
+  return (
+    <DashboardProvider
+      initialState={{
+        viewPanelRef: viewPanelRef ?? undefined, // viewPanelRef can be null, forcing to undefined
+        setViewPanelRef: setViewPanelRef,
+        ...initialState,
+      }}
+    >
+      {children}
+    </DashboardProvider>
+  );
+}

ui/dashboards/src/context/DashboardProvider/panel-group-slice.ts

@@ -66,6 +66,13 @@ export interface PanelGroupItemId {
   panelGroupItemLayoutId: PanelGroupItemLayoutId;
 }
 
+/*
+ * Check if two PanelGroupItemId are equal
+ */
+export function isPanelGroupItemIdEqual(a?: PanelGroupItemId, b?: PanelGroupItemId) {
+  return a?.panelGroupId === b?.panelGroupId && a?.panelGroupItemLayoutId === b?.panelGroupItemLayoutId;
+}
+
 /**
  * Curried function for creating a PanelGroupSlice.
  */

ui/dashboards/src/context/DashboardProvider/view-panel-slice.ts

@@ -17,7 +17,7 @@ import { Middleware } from './common';
 import { PanelGroupSlice } from './panel-group-slice';
 
 /**
- * Slice that handles duplicating Panels.
+ * Slice that handles viewing Panels in max size ("full screen").
  */
 export interface ViewPanelSlice {
   viewPanel: ViewPanelState;
@@ -26,12 +26,13 @@ export interface ViewPanelSlice {
 }
 
 export interface ViewPanelState {
+  // Do not use directly, use `getViewPanel()` instead for getting the current viewed PanelGroupItemId!
   panelGroupItemId?: PanelGroupItemId;
   panelRef?: string;
 }
 
 /**
- * Curried function for viewing panel full screen.
+ * Curried function for viewing panel in max size ("full screen").
  */
 export function createViewPanelSlice(
   viewPanelRef?: string,
@@ -84,7 +85,6 @@ function findPanelGroupItemIdOfPanelRef(
   panelRef?: string
 ): PanelGroupItemId | undefined {
   for (const panelGroup of Object.values(panelGroups)) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const itemPanel = Object.entries(panelGroup.itemPanelKeys ?? []).find(([_, value]) => value === panelRef);
     if (itemPanel) {
       const [key] = itemPanel;

ui/dashboards/src/views/ViewDashboard/ViewDashboard.tsx

@@ -21,14 +21,13 @@ import {
   usePluginBuiltinVariableDefinitions,
 } from '@perses-dev/plugin-system';
 import { useMemo } from 'react';
-import { StringParam, useQueryParam } from 'use-query-params';
 import {
-  DashboardProvider,
   DatasourceStoreProviderProps,
   DatasourceStoreProvider,
   TemplateVariableProviderProps,
   TemplateVariableProviderWithQueryParams,
 } from '../../context';
+import { DashboardProviderWithQueryParams } from '../../context/DashboardProvider/DashboardProviderWithQueryParams';
 import { DashboardApp, DashboardAppProps } from './DashboardApp';
 
 export interface ViewDashboardProps extends Omit<BoxProps, 'children'>, DashboardAppProps {
@@ -63,7 +62,6 @@ export function ViewDashboard(props: ViewDashboardProps) {
   const initialTimeRange = useInitialTimeRange(dashboardDuration);
   const initialRefreshInterval = useInitialRefreshInterval(dashboardRefreshInterval);
   const { data } = usePluginBuiltinVariableDefinitions();
-  const [viewPanelRef, setViewPanelRef] = useQueryParam('viewPanelRef', StringParam);
 
   const builtinVariables = useMemo(() => {
     const result = [
@@ -102,12 +100,10 @@ export function ViewDashboard(props: ViewDashboardProps) {
 
   return (
     <DatasourceStoreProvider dashboardResource={dashboardResource} datasourceApi={datasourceApi}>
-      <DashboardProvider
+      <DashboardProviderWithQueryParams
         initialState={{
           dashboardResource,
           isEditMode: !!isEditing,
-          viewPanelRef: viewPanelRef ?? undefined, // viewPanelRef can be null, forcing to undefined
-          setViewPanelRef: setViewPanelRef,
         }}
       >
         <TimeRangeProviderWithQueryParams
@@ -147,7 +143,7 @@ export function ViewDashboard(props: ViewDashboardProps) {
             </Box>
           </TemplateVariableProviderWithQueryParams>
         </TimeRangeProviderWithQueryParams>
-      </DashboardProvider>
+      </DashboardProviderWithQueryParams>
     </DatasourceStoreProvider>
   );
 }