reference genome modal update

databio · Jan 22, 2025 · 8b79d92 · 8b79d92
1 parent 126cf37
commit 8b79d92
Showing 1 changed file with 40 additions and 22 deletions.
diff --git a/ui/src/components/bed-splash-components/refgenome-modal.tsx b/ui/src/components/bed-splash-components/refgenome-modal.tsx
@@ -12,6 +12,8 @@ type Props = {
 export const RefGenomeModal = (props: Props) => {
   const { show, onHide, genomeStats } = props;
 
+  console.log(genomeStats.compared_genome);
+
   return (
     <Modal
       animation={false}
@@ -23,28 +25,44 @@ export const RefGenomeModal = (props: Props) => {
     >
       <Modal.Header closeButton>Reference Genome Compatibility</Modal.Header>
       <Modal.Body>
-        <div className="d-flex flex-column align-items-center">
-          <div className="d-flex flex-column">
-            <table>
-              <thead>
-                <tr>
-                  <th>Genome</th>
-                  <th>Compatibility Ranking (1 is best)</th>
-                </tr>
-              </thead>
-              <tbody>
-              {genomeStats?.compared_genome
-              ?.sort((a, b) => a.tier_ranking - b.tier_ranking)
-              .map(item => (
-                <tr key={item.compared_genome}>
-                  <td>{item.compared_genome}</td>
-                  <td className='text-center'>{item.tier_ranking}</td>
-                </tr>
-              ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
+        <p className='text-sm'>
+          Ranking and score breakdown; the closer the compatibility rank is to 1, the more compatible the genome is with the given reference genome.
+        </p>
+
+        {genomeStats?.compared_genome?.sort((a, b) => a.tier_ranking - b.tier_ranking)
+          .map(genome => (
+            <div className='card mb-3 shadow-sm' key={genome.compared_genome}>
+              <div className='card-body'>
+                <h5 className='d-inline'>{genome.compared_genome}</h5>
+                <span className='d-inline float-end fw-medium'>Compatibility Rank: {genome.tier_ranking}</span>
+
+                <p className='mt-2 mb-0 text-sm'>xs</p>
+                <div className="rounded" style={{backgroundColor: 'lightgrey'}}>
+                  <div 
+                    className="mb-1 rounded"
+                    style={{ backgroundColor: 'darkslateblue', height: '10px', width: `${(genome.xs || 0) * 100}%` }}
+                  />
+                </div>
+
+                <p className='mb-0 text-sm'>oobr</p>
+                <div className="rounded" style={{backgroundColor: 'lightgrey'}}>
+                  <div 
+                    className="mb-1 rounded"
+                    style={{ backgroundColor: 'sandybrown', height: '10px', width: `${(genome.oobr || 0) * 100}%` }}
+                  />
+                </div>
+
+                <p className='mb-0 text-sm'>sequence fit</p>
+                <div className="rounded" style={{backgroundColor: 'lightgrey'}}>
+                  <div 
+                    className="bg-success mb-1 rounded"
+                    style={{ backgroundColor: 'darkseagreen', height: '10px', width: `${(genome.sequence_fit || 0) * 100}%` }}
+                  />
+                </div>
+
+              </div>
+            </div>
+        ))}   
       </Modal.Body>
     </Modal>
   );