Feat/maintain selected row results app (#1348)

* feat(no-access): add no access message (#1301) * feat(maintainSelectedRowResultsApp): Added styles and logic to support maintaining bck color of selected row * feat(maintainSelectedRowResultsApp): ran stylelint * feat(maintainSelectedRowResultsApp): Updated storybook so it works * feat(maintainSelectedRowResultsApp): Removed unneeded file and reverted unintentionally changed file * feat(maintainSelectedRowResultsApp): Reverted unintentionally changed file to version in target branch * feat(maintainSelectedRowResultsApp): Removed unneeded console logs * feat(maintainSelectedRowResultsApp): Added functionality so row is selected on click --------- Co-authored-by: Thanh Dang Nguyen <thanhnd@uchicago.edu>
uc-cdis · Jun 28, 2023 · fec3e98 · fec3e98
1 parent 859108a
commit fec3e98
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 14 deletions.
diff --git a/src/Analysis/GWASResults/Views/Home/Home.stories.jsx b/src/Analysis/GWASResults/Views/Home/Home.stories.jsx
@@ -10,7 +10,6 @@ import InitialHomeTableState from './HomeTableState/InitialHomeTableState';
 const setCurrentView = (input) => {
   alert(`setCurrentView called with ${input}`);
 };
-const setSelectedRowData = () => alert('setSelectedRowData called');
 
 export default {
   title: 'Tests2/GWASResults/Views/Home',
@@ -24,11 +23,13 @@ const mockedQueryClient = new QueryClient({
 });
 
 const MockTemplate = () => {
+  const [selectedRowData, setSelectedRowData] = useState({});
   const [homeTableState, setHomeTableState] = useState(InitialHomeTableState);
   return (
     <QueryClientProvider client={mockedQueryClient}>
       <SharedContext.Provider
         value={{
+          selectedRowData,
           setSelectedRowData,
           setCurrentView,
           homeTableState,

diff --git a/src/Analysis/GWASResults/Views/Home/HomeTable/HomeTable.css b/src/Analysis/GWASResults/Views/Home/HomeTable/HomeTable.css
@@ -10,6 +10,16 @@
   min-width: 160px;
 }
 
+.home-table .selected-row {
+  background-color: #FCEFE4;
+}
+
+.home-table .selected-row:hover,
+.home-table .ant-table-tbody > tr.selected-row.ant-table-row:hover > td,
+.home-table .ant-table-tbody > tr.selected-row > td.ant-table-cell-row-hover {
+  background-color: RGBA(252, 239, 228,0.8);
+}
+
 .home-table th.ant-table-cell {
   background: #e9eef2;
   font-weight: bold;

diff --git a/src/Analysis/GWASResults/Views/Home/HomeTable/HomeTable.jsx b/src/Analysis/GWASResults/Views/Home/HomeTable/HomeTable.jsx
@@ -21,6 +21,7 @@ const { RangePicker } = DatePicker;
 const HomeTable = ({ data }) => {
   const {
     setCurrentView,
+    selectedRowData,
     setSelectedRowData,
     homeTableState,
     setHomeTableState,
@@ -307,6 +308,10 @@ const HomeTable = ({ data }) => {
           dataSource={isIterable(filteredData) && [...filteredData]}
           columns={columns}
           rowKey={(record) => record.uid}
+          rowClassName={(record) => record.uid === selectedRowData?.uid && 'selected-row'}
+          onRow={(record) => ({
+            onClick: () => { setSelectedRowData(record); },
+          })}
           onChange={handleTableChange}
           pagination={{
             current: homeTableState.currentPage,

diff --git a/src/Analysis/GWASResults/Views/Input/AttritionTable/AttritionTable.css b/src/Analysis/GWASResults/Views/Input/AttritionTable/AttritionTable.css
@@ -36,14 +36,14 @@
 }
 
 .attrition-table
-  .ant-collapse-header[aria-expanded='true']
-  .ant-collapse-expand-icon:before {
+.ant-collapse-header[aria-expanded='true']
+.ant-collapse-expand-icon:before {
   margin-top: -1px;
 }
 
 .attrition-table
-  .ant-collapse-header[aria-expanded='false']
-  .ant-collapse-expand-icon:before {
+.ant-collapse-header[aria-expanded='false']
+.ant-collapse-expand-icon:before {
   transform: rotate(180deg);
   transform-origin: 7px 9px;
   margin: 1px 2px;

diff --git a/src/Analysis/GWASResults/Views/Results/Results.css b/src/Analysis/GWASResults/Views/Results/Results.css
@@ -6,6 +6,14 @@
   text-align: center;
 }
 
+.top-loci .table-header button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 10px;
+  right: 0;
+}
+
 section.results-top button:not(.return-home-button) {
   float: right;
   margin-right: 8px;
@@ -40,13 +48,5 @@ section.data-viz {
   background-color: #cfdbe6;
   min-height: 64px;
   position: relative;
-  border-radius: 4px 4px 0px 0px;
-}
-
-.top-loci .table-header button {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-right: 10px;
-  right: 0;
+  border-radius: 4px 4px 0 0;
 }