Toolpanel Fix

src/Components/Catalog/VariablesTable/CommentToolPanel.js

@@ -68,6 +68,7 @@ const CommentList = ({ shouldDisplay }) => {
 
   let handleModel = (e) => {
     let { detail: currentRows } = e;
+
     if (currentRows) {
       setRows([...currentRows]);
       setIsLoaded(true);
@@ -82,8 +83,7 @@ const CommentList = ({ shouldDisplay }) => {
     window.addEventListener('variablesTableModel', handleModel, false);
     if (rows.length < 1 && !isLoaded) {
       // ask for a new dispatch of the table model
-      // console.log('comment tool panel asking for updated model')
-      dispatchCustomWindowEvent('clearFocusEvent', null);
+      dispatchCustomWindowEvent('askForModel', null);
     }
     return () => {
       window.removeEventListener('variablesTableModel', handleModel, false);
@@ -116,14 +116,13 @@ const SidebarCommentToolPanel = () => {
 
   let handleFocus = (e) => {
     let { detail } = e;
+
     if (detail) {
-      if (
-        !focusedVariableData ||
-        detail.longName !== focusedVariableData.longName
-      ) {
-        setFocusedVariableData(detail);
-        setIsFocusView(true);
-      }
+      // Always set isFocusView to true when receiving a focus event
+      setIsFocusView(true);
+
+      // Update the focused variable data
+      setFocusedVariableData(detail);
     }
   };
 
@@ -140,17 +139,32 @@ const SidebarCommentToolPanel = () => {
     setIsFocusView(false);
   };
 
+  // Add an effect to check if this tool panel is active
+  useEffect(() => {
+    // This effect runs when the component mounts or when focusedVariableData changes
+    if (focusedVariableData) {
+      setIsFocusView(true);
+    }
+  }, [focusedVariableData]);
+
   // listen for event containing current panel content
   useEffect(() => {
     window.addEventListener('setFocusEvent', handleFocus, false);
     window.addEventListener('copyToClipboard', handleCopy, false);
     window.addEventListener('clearFocusEvent', handleClearFocus, false);
+
+    // Don't dispatch clearFocusEvent when the component mounts
+    // Only ask for updated model if we don't already have data
+    if (!focusedVariableData) {
+      dispatchCustomWindowEvent('askForModel', null);
+    }
+
     return () => {
       window.removeEventListener('setFocusEvent', handleFocus);
       window.removeEventListener('copyToClipboard', handleCopy);
       window.removeEventListener('clearFocusEvent', handleClearFocus);
     };
-  }, []);
+  }, [focusedVariableData, isFocusView]);
 
   /* let copyToClipboard = () => {
    *   dispatchCustomWindowEvent("copyToClipboard", focusedVariableData);
@@ -173,15 +187,23 @@ const SidebarCommentToolPanel = () => {
       <div onClick={handleExit} style={classes.toolBarClose}>
         <Close />
       </div>
-      <div style={classes.title}>Comment Tool Panel</div>
+      <div style={classes.title}>Comments</div>
 
       {isFocusView && focusedVariableData && (
         <div>
           <div style={classes.variableFocusLabelContainer}>
             <div style={classes.variableLabel}>{/* removed */}</div>
             <div onClick={handleClose} style={classes.closeBox}>
-              <span>Deselect Variable</span>
-              <Close />
+              <span
+                style={{
+                  cursor: 'pointer',
+                  fontSize: '12px',
+                  textDecoration: 'underline',
+                  color: 'rgb(105, 255, 242)',
+                }}
+              >
+                Show All Comments
+              </span>
             </div>
           </div>
           <VariableRowRender

src/Components/Catalog/VariablesTable/DatasetPageAGGrid.js

@@ -35,6 +35,7 @@ const DatasetPageAGGrid = (props) => {
   const gridRef = useRef();
 
   let [currentFocus, setCurrentFocus] = useState(null);
+  const [openedFromClick, setOpenedFromClick] = useState(false);
 
   const openToolPanel = (panelId) => {
     gridRef && gridRef.current && gridRef.current.api.openToolPanel(panelId);
@@ -71,26 +72,39 @@ const DatasetPageAGGrid = (props) => {
 
       dispatchVariableFocusEvent(payload);
       setCurrentFocus(longName);
+      setOpenedFromClick(true);
     }
   };
 
   // gridRef needs to be in scope for this click handler, in order to access thi grid api
   const onCellClick = (e) => {
     // send data to tool panels
     let payload = makeVariableFocusPayload(e);
-    if (currentFocus !== payload.longName) {
-      dispatchVariableFocusEvent(payload);
-    }
 
     // open requested tool panel
     let colId = getColIdFromCellClickEvent(e);
-    if (colId === 'Unstructured_Variable_Metadata') {
-      // dispatch both event to load variable data into both tool panels
-      openToolPanel('metadata');
-    } else if (colId === 'Comment') {
-      openToolPanel('comments');
+
+    if (colId === 'Unstructured_Variable_Metadata' || colId === 'Comment') {
+      // Always dispatch focus event first
+      dispatchVariableFocusEvent(payload);
+      setCurrentFocus(payload.longName);
+      setOpenedFromClick(true);
+
+      // Then open the appropriate panel
+      if (colId === 'Unstructured_Variable_Metadata') {
+        setTimeout(() => openToolPanel('metadata'), 50);
+      } else if (colId === 'Comment') {
+        setTimeout(() => openToolPanel('comments'), 50);
+      }
     } else if (colId === 'unknown') {
       console.error('could not extract colId from cell click event', e);
+    } else {
+      // For other columns, just update the focus if needed
+      if (currentFocus !== payload.longName) {
+        dispatchVariableFocusEvent(payload);
+        setCurrentFocus(payload.longName);
+        setOpenedFromClick(true);
+      }
     }
   };
 
@@ -182,11 +196,17 @@ const DatasetPageAGGrid = (props) => {
     window.addEventListener('setFocusEvent', handleFocus, false);
     window.addEventListener('askForFocus', giveVariableFocus, false);
     window.addEventListener('exitToolBar', closeSideBar, false);
+    window.addEventListener('askForModel', dispatchCurrentTableModel, false);
     return () => {
       window.removeEventListener('clearFocusEvent', handleClearFocus);
       window.removeEventListener('setFocusEvent', handleFocus, false);
       window.removeEventListener('askForFocus', giveVariableFocus, false);
-      window.addEventListener('exitToolBar', closeSideBar, false);
+      window.removeEventListener('exitToolBar', closeSideBar, false);
+      window.removeEventListener(
+        'askForModel',
+        dispatchCurrentTableModel,
+        false,
+      );
     };
   }, []);
   return (
@@ -213,6 +233,41 @@ const DatasetPageAGGrid = (props) => {
           onCellClicked={onCellClick}
           // onColumnResized={(args) => console.log(args)}
           onModelUpdated={dispatchCurrentTableModel}
+          onToolPanelVisibleChanged={(event) => {
+            if (event.visible === false) {
+              dispatchClearFocusEvent();
+              setCurrentFocus(null); // <-- ensure local state is cleared too
+              return;
+            }
+
+            if (
+              (event.source === 'toolPanelUi' ||
+                event.source === 'comments' ||
+                event.source === 'metadata') &&
+              currentFocus &&
+              openedFromClick
+            ) {
+              const model = gridRef.current.api.getModel();
+              if (model) {
+                const rows = model.rowsToDisplay;
+
+                const match = rows.find(
+                  (r) => r && r.data && r.data.Long_Name === currentFocus,
+                );
+
+                if (match) {
+                  const payload = {
+                    longName: currentFocus,
+                    comment: match.data.Comment,
+                    unstructuredMetadata:
+                      match.data.Unstructured_Variable_Metadata,
+                  };
+                  dispatchVariableFocusEvent(payload);
+                }
+              }
+              setOpenedFromClick(false);
+            }
+          }}
           colResizeDefault={'shift'}
           enableCellTextSelection={true} // this does not seem to work
           // enableFilter={true}
@@ -262,9 +317,9 @@ const DatasetPageAGGrid = (props) => {
                 // The unique ID for this panel. Used in the API and elsewhere to refer to the panel.
                 id: 'metadata',
                 // The key used for localisation for displaying the label. The label is displayed in the tab button.
-                labelKey: 'Additional Variable Metadata',
+                labelKey: 'Additional Metadata',
                 // The default label if `labelKey` is missing or does not map to valid text through localisation.
-                labelDefault: 'Additional Variable Metadata',
+                labelDefault: 'Additional Metadata',
                 // The min width of the tool panel. Default: `100`
                 minWidth: 225,
                 // The max width of the tool panel. Default: `undefined`