Refactor code as per comments

informatics-isi-edu · Nov 4, 2024 · 0991842 · 0991842
1 parent 272da29
commit 0991842
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 57 deletions.
diff --git a/src/components/record/record-main-section.tsx b/src/components/record/record-main-section.tsx
@@ -1,27 +1,27 @@
 import '@isrd-isi-edu/chaise/src/assets/scss/_record-main-section.scss';
 
 // components
-import DisplayCommentValue from '@isrd-isi-edu/chaise/src/components/display-comment-value';
 import DisplayValue from '@isrd-isi-edu/chaise/src/components/display-value';
-import RelatedTable from '@isrd-isi-edu/chaise/src/components/record/related-table';
+import DisplayCommentValue from '@isrd-isi-edu/chaise/src/components/display-comment-value';
+import ChaiseTooltip from '@isrd-isi-edu/chaise/src/components/tooltip';
 import RelatedTableActions from '@isrd-isi-edu/chaise/src/components/record/related-table-actions';
+import RelatedTable from '@isrd-isi-edu/chaise/src/components/record/related-table';
 import ChaiseSpinner from '@isrd-isi-edu/chaise/src/components/spinner';
-import ChaiseTooltip from '@isrd-isi-edu/chaise/src/components/tooltip';
 import Spinner from 'react-bootstrap/Spinner';
 
 // hooks
-import useError from '@isrd-isi-edu/chaise/src/hooks/error';
 import useRecord from '@isrd-isi-edu/chaise/src/hooks/record';
+import useError from '@isrd-isi-edu/chaise/src/hooks/error';
 
 // models
-import { CommentDisplayModes } from '@isrd-isi-edu/chaise/src/models/displayname';
 import { RecordColumnModel } from '@isrd-isi-edu/chaise/src/models/record';
+import { CommentDisplayModes } from '@isrd-isi-edu/chaise/src/models/displayname';
 
 // utils
-import { CLASS_NAMES } from '@isrd-isi-edu/chaise/src/utils/constants';
 import { MESSAGE_MAP } from '@isrd-isi-edu/chaise/src/utils/message-map';
 import { canShowInlineRelated } from '@isrd-isi-edu/chaise/src/utils/record-utils';
 import { makeSafeIdAttr } from '@isrd-isi-edu/chaise/src/utils/string-utils';
+import { CLASS_NAMES } from '@isrd-isi-edu/chaise/src/utils/constants';
 
 /**
  * Returns Main Section of the record page.
@@ -128,7 +128,7 @@ const RecordMainSection = (): JSX.Element => {
                   <RelatedTable
                     relatedModel={cm.relatedModel}
                     displaynameForID={cm.column.displayname.value}
-                    intersectScroll={true}
+                    showSingleScrollbar={true}
                   />
                 </div>
               </span>

diff --git a/src/components/record/record.tsx b/src/components/record/record.tsx
@@ -1,27 +1,27 @@
 import '@isrd-isi-edu/chaise/src/assets/scss/_record.scss';
 
 // components
+import Accordion from 'react-bootstrap/Accordion';
 import Alerts from '@isrd-isi-edu/chaise/src/components/alerts';
+import ChaiseSpinner from '@isrd-isi-edu/chaise/src/components/spinner';
+import ChaiseTooltip from '@isrd-isi-edu/chaise/src/components/tooltip';
+import DeleteConfirmationModal, { DeleteConfirmationModalTypes } from '@isrd-isi-edu/chaise/src/components/modals/delete-confirmation-modal';
 import DisplayValue from '@isrd-isi-edu/chaise/src/components/display-value';
 import Export from '@isrd-isi-edu/chaise/src/components/export';
 import Footer from '@isrd-isi-edu/chaise/src/components/footer';
-import DeleteConfirmationModal, { DeleteConfirmationModalTypes } from '@isrd-isi-edu/chaise/src/components/modals/delete-confirmation-modal';
 import RecordMainSection from '@isrd-isi-edu/chaise/src/components/record/record-main-section';
 import RelatedTable from '@isrd-isi-edu/chaise/src/components/record/related-table';
 import RelatedTableHeader from '@isrd-isi-edu/chaise/src/components/record/related-table-header';
 import ShareCiteButton from '@isrd-isi-edu/chaise/src/components/share-cite-button';
-import ChaiseSpinner from '@isrd-isi-edu/chaise/src/components/spinner';
+import Spinner from 'react-bootstrap/Spinner';
 import SplitView from '@isrd-isi-edu/chaise/src/components/split-view';
 import Title from '@isrd-isi-edu/chaise/src/components/title';
-import ChaiseTooltip from '@isrd-isi-edu/chaise/src/components/tooltip';
-import Accordion from 'react-bootstrap/Accordion';
-import Spinner from 'react-bootstrap/Spinner';
 
 // hooks
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import useAuthn from '@isrd-isi-edu/chaise/src/hooks/authn';
 import useError from '@isrd-isi-edu/chaise/src/hooks/error';
 import useRecord from '@isrd-isi-edu/chaise/src/hooks/record';
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 // models
 import { LogActions, LogReloadCauses } from '@isrd-isi-edu/chaise/src/models/log';
@@ -682,9 +682,9 @@ const RecordInner = ({
                   </Accordion.Button>
                   <Accordion.Body>
                     <RelatedTable
-                      intersectScroll={true}
                       relatedModel={rm}
                       displaynameForID={rm.initialReference.displayname.value}
+                      showSingleScrollbar={true}
                     />
                   </Accordion.Body>
                 </Accordion.Item>

diff --git a/src/components/record/related-table.tsx b/src/components/record/related-table.tsx
@@ -17,13 +17,12 @@ import { RecordRelatedModel } from '@isrd-isi-edu/chaise/src/models/record';
 // providers
 import RecordsetProvider from '@isrd-isi-edu/chaise/src/providers/recordset';
 
-// services
-
 // utils
 import { CLASS_NAMES } from '@isrd-isi-edu/chaise/src/utils/constants';
 import { displayCustomModeRelated } from '@isrd-isi-edu/chaise/src/utils/record-utils';
 import { makeSafeIdAttr } from '@isrd-isi-edu/chaise/src/utils/string-utils';
 
+
 type RelatedTableProps = {
   /**
    * the related model that we want to represent
@@ -33,8 +32,10 @@ type RelatedTableProps = {
    * the displayname for the reference to be used in the id attached to the container
    */
   displaynameForID: string
-
-  intersectScroll?: boolean,
+  /**
+   * Determines if both horizontal scrollbars should always be visible, or if only one should appear at a time.
+   */
+  showSingleScrollbar?: boolean,
 };
 
 /**
@@ -45,21 +46,21 @@ type RelatedTableProps = {
 const RelatedTable = ({
   relatedModel,
   displaynameForID,
-  intersectScroll
+  showSingleScrollbar
 }: RelatedTableProps): JSX.Element => {
   return (
     <RecordsetProvider
       initialReference={relatedModel.initialReference}
       {...relatedModel.recordsetProps}
     >
-      <RelatedTableInner relatedModel={relatedModel} displaynameForID={displaynameForID} intersectScroll={intersectScroll}/>
+      <RelatedTableInner relatedModel={relatedModel} displaynameForID={displaynameForID} showSingleScrollbar={showSingleScrollbar}/>
     </RecordsetProvider>
   )
 }
 const RelatedTableInner = ({
   relatedModel,
   displaynameForID,
-  intersectScroll
+  showSingleScrollbar
 }: RelatedTableProps) => {
   const {
     page, isInitialized, hasTimeoutError, isLoading,
@@ -114,7 +115,7 @@ const RelatedTableInner = ({
           <RecordsetTable
             config={relatedModel.recordsetProps.config}
             initialSortObject={usedRef.location.sortObject}
-            intersectScroll={intersectScroll}
+            showSingleScrollbar={showSingleScrollbar}
           />
         </div>
       </div>

diff --git a/src/components/recordedit/recordedit.tsx b/src/components/recordedit/recordedit.tsx
@@ -1,28 +1,28 @@
 import '@isrd-isi-edu/chaise/src/assets/scss/_recordedit.scss';
 
 // components
+import { Accordion, Modal } from 'react-bootstrap';
 import Alerts from '@isrd-isi-edu/chaise/src/components/alerts';
-import Footer from '@isrd-isi-edu/chaise/src/components/footer';
+import ChaiseSpinner from '@isrd-isi-edu/chaise/src/components/spinner';
+import ChaiseTooltip from '@isrd-isi-edu/chaise/src/components/tooltip';
 import DeleteConfirmationModal, { DeleteConfirmationModalTypes } from '@isrd-isi-edu/chaise/src/components/modals/delete-confirmation-modal';
-import RecordsetModal from '@isrd-isi-edu/chaise/src/components/modals/recordset-modal';
-import UploadProgressModal from '@isrd-isi-edu/chaise/src/components/modals/upload-progress-modal';
 import FormContainer from '@isrd-isi-edu/chaise/src/components/recordedit/form-container';
+import Footer from '@isrd-isi-edu/chaise/src/components/footer';
 import KeyColumn from '@isrd-isi-edu/chaise/src/components/recordedit/key-column';
+import RecordsetModal from '@isrd-isi-edu/chaise/src/components/modals/recordset-modal';
 import ResultsetTable from '@isrd-isi-edu/chaise/src/components/recordedit/resultset-table';
 import ResultsetTableHeader from '@isrd-isi-edu/chaise/src/components/recordedit/resultset-table-header';
-import ChaiseSpinner from '@isrd-isi-edu/chaise/src/components/spinner';
 import Title from '@isrd-isi-edu/chaise/src/components/title';
-import ChaiseTooltip from '@isrd-isi-edu/chaise/src/components/tooltip';
-import { Accordion, Modal } from 'react-bootstrap';
+import UploadProgressModal from '@isrd-isi-edu/chaise/src/components/modals/upload-progress-modal';
 
 // hooks
-import ViewerAnnotationFormContainer from '@isrd-isi-edu/chaise/src/components/recordedit/viewer-annotation-form-container';
+import { useEffect, useRef, useState } from 'react';
 import useAlert from '@isrd-isi-edu/chaise/src/hooks/alerts';
 import useAuthn from '@isrd-isi-edu/chaise/src/hooks/authn';
 import useError from '@isrd-isi-edu/chaise/src/hooks/error';
 import useRecordedit from '@isrd-isi-edu/chaise/src/hooks/recordedit';
-import { useEffect, useRef, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
+import ViewerAnnotationFormContainer from '@isrd-isi-edu/chaise/src/components/recordedit/viewer-annotation-form-container';
 
 // models
 import { LogActions, LogStackPaths, LogStackTypes } from '@isrd-isi-edu/chaise/src/models/log';
@@ -40,8 +40,8 @@ import AlertsProvider, { ChaiseAlertType } from '@isrd-isi-edu/chaise/src/provid
 import RecordeditProvider from '@isrd-isi-edu/chaise/src/providers/recordedit';
 
 // services
-import { ConfigService } from '@isrd-isi-edu/chaise/src/services/config';
 import { LogService } from '@isrd-isi-edu/chaise/src/services/log';
+import { ConfigService } from '@isrd-isi-edu/chaise/src/services/config';
 
 // utils
 import { RECORDEDIT_MAX_ROWS, RECORDSET_DEFAULT_PAGE_SIZE } from '@isrd-isi-edu/chaise/src/utils/constants';
@@ -806,7 +806,7 @@ const RecordeditInner = ({
                   }
                   {/* Intersecting behaviour of scroll should be visible if there are multiple tables 
                   on one page which here seems to be the case when there are successful as well as failed records */}
-                  <ResultsetTable page={resultsetProps.success.page} intersectScroll={!!resultsetProps.failed}/>
+                  <ResultsetTable page={resultsetProps.success.page} showSingleScrollbar={!!resultsetProps.failed}/>
                 </Accordion.Body>
               </Accordion.Item>
               {resultsetProps.failed &&
@@ -817,7 +817,7 @@ const RecordeditInner = ({
                       exploreLink={resultsetProps.failed.exploreLink}
                     />
                   </Accordion.Button>
-                  <Accordion.Body><ResultsetTable page={resultsetProps.failed.page} intersectScroll={!!resultsetProps.failed}/></Accordion.Body>
+                  <Accordion.Body><ResultsetTable page={resultsetProps.failed.page} showSingleScrollbar={!!resultsetProps.failed}/></Accordion.Body>
                 </Accordion.Item>
               }
             </Accordion>

diff --git a/src/components/recordedit/resultset-table.tsx b/src/components/recordedit/resultset-table.tsx
@@ -2,8 +2,9 @@
 import RecordsetTable from '@isrd-isi-edu/chaise/src/components/recordset/recordset-table';
 
 // models
+import { RecordsetConfig } from '@isrd-isi-edu/chaise/src/models/recordset'
+import { RecordsetDisplayMode, RecordsetSelectMode } from '@isrd-isi-edu/chaise/src/models/recordset';
 import { LogStackPaths } from '@isrd-isi-edu/chaise/src/models/log';
-import { RecordsetConfig, RecordsetDisplayMode, RecordsetSelectMode } from '@isrd-isi-edu/chaise/src/models/recordset';
 
 // providers
 import RecordsetProvider from '@isrd-isi-edu/chaise/src/providers/recordset';
@@ -13,12 +14,15 @@ import { LogService } from '@isrd-isi-edu/chaise/src/services/log';
 
 type ResultsetTableProps = {
   page: any,
-  intersectScroll: boolean,
+  /**
+  * Determines if both horizontal scrollbars should always be visible, or if only one should appear at a time.
+  */
+  showSingleScrollbar: boolean,
 }
 
 const ResultsetTable = ({
   page,
-  intersectScroll,
+  showSingleScrollbar,
 }: ResultsetTableProps) : JSX.Element => {
 
   const logStack = [LogService.getStackNode(LogStackPaths.SET, page.reference.table, page.reference.filterInfo)];
@@ -48,23 +52,23 @@ const ResultsetTable = ({
       }}
       initialPage={page}
     >
-      <ResultsetTableInner config={config} reference={page.reference} intersectScroll={intersectScroll}/>
+      <ResultsetTableInner config={config} reference={page.reference} showSingleScrollbar={showSingleScrollbar}/>
     </RecordsetProvider>
   )
 }
 
 const ResultsetTableInner = ({
   reference,
   config,
-  intersectScroll,
+  showSingleScrollbar,
 }: {
   config: RecordsetConfig
   reference: any
-  intersectScroll: boolean,
+  showSingleScrollbar: boolean,
 }) : JSX.Element => {
   return (
     <div>
-      <RecordsetTable config={config} initialSortObject={reference.location.sortObject} intersectScroll={intersectScroll}/>
+      <RecordsetTable config={config} initialSortObject={reference.location.sortObject} showSingleScrollbar={showSingleScrollbar}/>
     </div>
   )
 }

diff --git a/src/components/recordset/recordset-table.tsx b/src/components/recordset/recordset-table.tsx
@@ -2,11 +2,11 @@ import '@isrd-isi-edu/chaise/src/assets/scss/_recordset-table.scss';
 import React from 'react';
 
 // components
+import ChaiseTooltip from '@isrd-isi-edu/chaise/src/components/tooltip';
 import DisplayCommentValue from '@isrd-isi-edu/chaise/src/components/display-comment-value';
 import DisplayValue from '@isrd-isi-edu/chaise/src/components/display-value';
-import TableRow from '@isrd-isi-edu/chaise/src/components/recordset/table-row';
-import ChaiseTooltip from '@isrd-isi-edu/chaise/src/components/tooltip';
 import Spinner from 'react-bootstrap/Spinner';
+import TableRow from '@isrd-isi-edu/chaise/src/components/recordset/table-row';
 
 // hooks
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
@@ -29,14 +29,17 @@ import { addTopHorizontalScroll, fireCustomEvent } from '@isrd-isi-edu/chaise/sr
 type RecordsetTableProps = {
   config: RecordsetConfig,
   initialSortObject: any,
-  intersectScroll?: boolean,
+  /**
+   * Determines if both horizontal scrollbars should always be visible, or if only one should appear at a time.
+   */
+  showSingleScrollbar?: boolean,
   sortCallback?: (sortColumn: SortColumn) => any
 }
 
 const RecordsetTable = ({
   config,
   initialSortObject,
-  intersectScroll=false
+  showSingleScrollbar = false
 }: RecordsetTableProps): JSX.Element => {
 
   const {
@@ -55,6 +58,8 @@ const RecordsetTable = ({
   } = useRecordset();
 
   const tableContainer = useRef<HTMLDivElement>(null);
+  const stickyScrollbarRef = useRef<HTMLDivElement>(null);
+  const tableEndRef = useRef<HTMLDivElement>(null);
 
 
   const [currSortColumn, setCurrSortColumn] = useState<SortColumn | null>(
@@ -93,7 +98,7 @@ const RecordsetTable = ({
         isDisabled: false,
         disabledType: undefined
       };
-    // page.tuples.forEach((tuple: any, index: number) => {
+      // page.tuples.forEach((tuple: any, index: number) => {
       if (hasSelectedRows) {
         const row = selectedRows.find((obj: SelectedRow) => {
           // ermrestjs always returns a string for uniqueId, but internally we don't
@@ -118,24 +123,28 @@ const RecordsetTable = ({
       }
 
       tempRowDetails[i] = rowConfig;
-    // });
+      // });
     }
 
     rowDetails = tempRowDetails;
   }
-  const [isBottomVisible, setIsBottomVisible] = useState(false);
-  const stickyScrollbarRef = useRef(null);
-  const tableEndRef = useRef(null);
 
   useEffect(() => {
-    //Only implement intersection observer for top scrollbar when intersectScroll is true otherwise top scrollbar will be sticky all the time
-    if(intersectScroll){
+    //Only implement intersection observer for top scrollbar when showSingleScrollbar is true otherwise top scrollbar will be shown as sticky
+    if (!showSingleScrollbar) return;
 
     // Create a new IntersectionObserver instance to track the visibility of the bottom scrollbar(end of table)
     const observer = new IntersectionObserver(
       ([entry]) => {
         //Updating isBottomVisible when bottom scrollbar is visible in the viewport
-        setIsBottomVisible(entry.isIntersecting);
+        if (stickyScrollbarRef.current) {
+          if (entry.isIntersecting) {
+            stickyScrollbarRef.current.classList.add('no-scroll-bar');
+          }
+          else {
+            stickyScrollbarRef.current.classList.remove('no-scroll-bar');
+          }
+        }
       },
       {
         root: null, // Use viewport as the root
@@ -150,9 +159,9 @@ const RecordsetTable = ({
     return () => {
       if (tableEndRef.current) {
         observer.unobserve(tableEndRef.current);
+        observer.disconnect();
       }
-    };
-  }
+    }
   }, []);
 
 
@@ -510,7 +519,7 @@ const RecordsetTable = ({
   return (
     <div className='recordset-table-container' ref={tableContainer}>
       <div ref={stickyScrollbarRef}
-        className={`chaise-table-top-scroll-wrapper ${isBottomVisible ? 'no-scroll-bar' : ''}`}>
+        className={`chaise-table-top-scroll-wrapper`}>
         <div className='chaise-table-top-scroll'></div>
       </div>
       <div className={outerTableClassname()}>
@@ -526,7 +535,9 @@ const RecordsetTable = ({
           </tbody>
         </table>
       </div>
+      {/*  This div will be used as the target (end of table) for the intersection observer to hide the top scrollbar when the bottom one is visible */}
       <div ref={tableEndRef} style={{ height: '1px' }}></div>
+
       {!hasTimeoutError && numHiddenRecords > 0 &&
         <div className='chaise-table-footer'>
           <button onClick={() => setShowAllRows(!showAllRows)} className='show-all-rows-btn chaise-btn chaise-btn-primary'>