Fix an auto tab switch during render

src/components/Visualizations/Containers/AuthorNetworkPageContainer.tsx

@@ -49,6 +49,7 @@ interface IAuthorNetworkPageState {
 type AuthorNetworkPageAction =
   | { type: 'CHANGE_PAPER_LIMIT'; payload: number }
   | { type: 'SET_SELECTED'; payload: { node: IADSApiAuthorNetworkNode; dict: IBibcodeDict } }
+  | { type: 'DESELECT' }
   | { type: 'ADD_FILTER'; payload: IAuthorNetworkNodeDetails }
   | { type: 'REMOVE_FILTER'; payload: IAuthorNetworkNodeDetails }
   | { type: 'REMOVE_FILTER_TAG'; payload: ITagItem }
@@ -60,6 +61,8 @@ const reducer: Reducer<IAuthorNetworkPageState, AuthorNetworkPageAction> = (stat
       return { ...state, selected: null, filters: [], rowsToFetch: action.payload };
     case 'SET_SELECTED':
       return { ...state, selected: getAuthorNetworkNodeDetails(action.payload.node, action.payload.dict) };
+    case 'DESELECT':
+      return { ...state, selected: null };
     case 'ADD_FILTER':
       return { ...state, filters: uniq([...state.filters, action.payload]) };
     case 'REMOVE_FILTER':

src/components/Visualizations/Panes/NetworkDetails/AuthorNetworkDetailsPane.tsx

@@ -1,8 +1,10 @@
 import { IDocsEntity } from '@api';
 import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+import { IAuthor } from '@components/FeedbackForms';
 import { Item } from '@components/ResultList/Item';
 import { ILineGraph } from '@components/Visualizations/types';
-import { ReactElement, useEffect, useState } from 'react';
+import { equals } from 'ramda';
+import { memo, ReactElement, useEffect, useRef, useState } from 'react';
 import { NodeDetailPane } from './NodeDetailsPane';
 import { SummaryPane } from './SummaryPane';
 
@@ -34,9 +36,15 @@ export const AuthorNetworkDetailsPane = ({
 }: AuthorNetworkDetailsProps): ReactElement => {
   const [tabIndex, setTabIndex] = useState(0);
 
+  // prevent tab switching during re-render
+  const prevNode = useRef<IAuthorNetworkNodeDetails>(null);
+
   // when selected node changes, change tab to node details
   useEffect(() => {
-    setTabIndex(node ? 1 : 0);
+    if (!equals(node, prevNode.current)) {
+      setTabIndex(node ? 1 : 0);
+      prevNode.current = node;
+    }
   }, [node]);
 
   const handleTabIndexChange = (index: number) => {