Scix 314 Fix bugs related to visualization page

src/components/ResultList/Item/Item.tsx

@@ -64,7 +64,7 @@ export const Item = (props: IItemProps): ReactElement => {
   const formattedPubDate = getFomattedNumericPubdate(pubdate);
   const isClient = useIsClient();
   const truncatedPub =
-    pub.length > APP_DEFAULTS.RESULT_ITEM_PUB_CUTOFF ? pub.slice(0, APP_DEFAULTS.RESULT_ITEM_PUB_CUTOFF) + '...' : pub;
+    pub?.length > APP_DEFAULTS.RESULT_ITEM_PUB_CUTOFF ? pub.slice(0, APP_DEFAULTS.RESULT_ITEM_PUB_CUTOFF) + '...' : pub;
 
   // memoize the isSelected callback on bibcode
   const isChecked = useStore(useCallback((state) => state.isDocSelected(bibcode), [bibcode]));

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) => {

src/components/Visualizations/VisualizationTabs.tsx

@@ -54,7 +54,7 @@ export const VisualizationsTabs = ({ selectedSection }: { selectedSection: VizSe
   const index = sections.findIndex((section) => section.id === selectedSection);
 
   const onPageChange = (index: number) => {
-    void router.push({ pathname: sections[index].path, query: router.query }, null, { shallow: true });
+    void router.push({ pathname: sections[index].path, query: router.query }, null);
   };
 
   return (