web: integrate Kanta lab to home page

FINNGEN · Nov 18, 2024 · fce9ca6 · fce9ca6
1 parent a1f1bd6
commit fce9ca6
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 40 deletions.
diff --git a/web/lib/risteys/lab_test_stats.ex b/web/lib/risteys/lab_test_stats.ex
@@ -81,6 +81,17 @@ defmodule Risteys.LabTestStats do
     end
   end
 
+  def get_random_omop_id() do
+    query =
+      from omop in OMOP.Concept,
+        inner_join: npeople in NPeople,
+        on: omop.id == npeople.omop_concept_dbid,
+        select: omop.concept_id
+
+    Repo.all(query)
+    |> Enum.random()
+  end
+
   def get_overall_stats() do
     %{
       npeople: get_overall_stats_npeople(),

diff --git a/web/lib/risteys_web/controllers/home_html/index.html.heex b/web/lib/risteys_web/controllers/home_html/index.html.heex
@@ -1,30 +1,76 @@
-<div class="fluid-container">
-	<section>
-		<h3>Explore the health registries of Finland</h3>
-		<p>
- 			<%= ahref_extern("https://www.finregistry.fi/", "FinRegistry") %> (FR) is a collaboration project of <%= ahref_extern("https://thl.fi/finregistry", "THL") %> and <%= ahref_extern("https://www.dsgelab.org/", "DSGE group") %> at <%= ahref_extern("https://www.fimm.fi", "FIMM") %>, University of Helsinki.
-		</p>
-		<p>
-			<%= ahref_extern("https://www.finngen.fi/en", "FinnGen") %> (FG) is a large-scale academic/industrial research collaboration.
-		</p>
-	</section>
+<div class="fluid-container home-page">
+  <section>
+    <h3>Explore the health registries of Finland</h3>
+    <p>
+      <%= ahref_extern("https://www.finngen.fi/en", "FinnGen") %> (FG) is a large-scale academic/industrial research collaboration.
+    </p>
+    <p>
+      <%= ahref_extern("https://www.finregistry.fi/", "FinRegistry") %> (FR) is a collaboration project of <%= ahref_extern(
+        "https://thl.fi/finregistry",
+        "THL"
+      ) %> and <%= ahref_extern("https://www.dsgelab.org/", "DSGE group") %> at <%= ahref_extern(
+        "https://www.fimm.fi",
+        "FIMM"
+      ) %>, University of Helsinki.
+    </p>
+  </section>
 
-	<section class="card my-16 p-2">
-		<h3 class="title_bold_blue_uppercase p-2">Search all endpoints in Risteys</h3>
-		<div class="p-2">
-			<%= live_render(@conn, RisteysWeb.Live.SearchBox) %>
-		</div>
-		<div class="mt-2 p-2">
-			<p> or check out example endpoints:</p>
-			<ul>
-				<li><%= link("Atopic dermatitis", to: ~p"/endpoints/L12_ATOPIC") %></li>
-				<li><%= link("MS-disease / Multiple Sclerosis", to: ~p"/endpoints/G6_MS") %></li>
-				<li><%= link("Rheumatoid arthritis", to: ~p"/endpoints/M13_RHEUMA") %></li>
-				<li><%= link("Type 2 diabetes, definitions combined", to: ~p"/endpoints/T2D") %></li>
-				<li><%= link("Malignant neoplasm (controls excluding all cancers)", to: ~p"/endpoints/C3_CANCER_EXALLC") %></li>
-				<li><%= link("Ulcerative colitis (strict definition, require KELA, min 2 HDR)", to: ~p"/endpoints/K11_UC_STRICT2") %></li>
-			</ul>
-		</div>
-		<p class="mt-2 p-2">or try your luck with a <a href={~p"/random_endpoint"}>🎲 random endpoint</a>!</p>
-	</section>
+  <section class="card my-16 p-2 main-search-box">
+    <h2>Search all of Risteys</h2>
+    <div class="p-2">
+      <%= live_render(@conn, RisteysWeb.Live.SearchBox) %>
+    </div>
+  </section>
+
+  <div class="facet-grid">
+    <div>
+      <section class="lab-tests">
+        <h3>Lab tests</h3>
+        <ul>
+          <li>
+            <a href={~p"/lab-tests/3020460"}>
+              C reactive protein [Mass/volume] in Serum or Plasma
+            </a>
+          </li>
+          <li>
+            <a href={~p"/lab-tests/3006923"}>
+              Alanine aminotransferase [Enzymatic activity/volume] in Serum or Plasma
+            </a>
+          </li>
+          <li>
+            <a href={~p"/lab-tests/3026361"}>Erythrocytes [#/volume] in Blood</a>
+          </li>
+          <li><a href={~p"/random/lab-test"}>🎲 random lab test</a></li>
+        </ul>
+
+        <p>
+          More at <a href={~p"/lab-tests/"}>→&nbsp;Index of all lab tests</a>
+        </p>
+      </section>
+    </div>
+
+    <div>
+      <section class="endpoints">
+        <h3>Endpoints</h3>
+        <ul>
+          <li><%= link("Atopic dermatitis", to: ~p"/endpoints/L12_ATOPIC") %></li>
+          <li><%= link("MS-disease / Multiple Sclerosis", to: ~p"/endpoints/G6_MS") %></li>
+          <li><%= link("Rheumatoid arthritis", to: ~p"/endpoints/M13_RHEUMA") %></li>
+          <li><%= link("Type 2 diabetes, definitions combined", to: ~p"/endpoints/T2D") %></li>
+          <li>
+            <%= link("Malignant neoplasm (controls excluding all cancers)",
+              to: ~p"/endpoints/C3_CANCER_EXALLC"
+            ) %>
+          </li>
+          <li>
+            <%= link("Ulcerative colitis (strict definition, require KELA, min 2 HDR)",
+              to: ~p"/endpoints/K11_UC_STRICT2"
+            ) %>
+          </li>
+          <li><a href={~p"/random/endpoint"}>🎲 random endpoint</a></li>
+        </ul>
+        <p>and more&hellip;</p>
+      </section>
+    </div>
+  </div>
 </div>
diff --git a/web/lib/risteys_web/controllers/lab_test_controller.ex b/web/lib/risteys_web/controllers/lab_test_controller.ex
@@ -49,4 +49,10 @@ defmodule RisteysWeb.LabTestController do
     |> assign(:lab_test, pretty_stats)
     |> render()
   end
+
+  def redir_random(conn, _params) do
+    lab_test_omop_id = Risteys.LabTestStats.get_random_omop_id()
+
+    redirect(conn, to: ~p"/lab-tests/#{lab_test_omop_id}")
+  end
 end
diff --git a/web/lib/risteys_web/live/search_box.html.heex b/web/lib/risteys_web/live/search_box.html.heex
@@ -16,7 +16,7 @@
       aria-autocomplete="list"
       aria-controls="search-results"
       aria-activedescendant={@selected_id || ""}
-      placeholder="click or type 's' to search"
+      placeholder="e.g. p-tsh, CRP, I21.90, I9_MI"
       id="search-input"
       autocomplete="off"
     />

diff --git a/web/lib/risteys_web/router.ex b/web/lib/risteys_web/router.ex
@@ -24,11 +24,13 @@ defmodule RisteysWeb.Router do
     get "/documentation", DocumentationController, :index
 
     get "/endpoints/:name", FGEndpointController, :show
-    get "/random_endpoint", FGEndpointController, :redir_random
 
     get "/lab-tests/", LabTestController, :index
     get "/lab-tests/:omop_id", LabTestController, :show
 
+    get "/random/endpoint", FGEndpointController, :redir_random
+    get "/random/lab-test", LabTestController, :redir_random
+
     # Redirect legacy URLs to keep shared and published links working
     get "/phenocode/:name", FGEndpointController, :redirect_legacy_url
     get "/endpoint/:name", FGEndpointController, :redirect_legacy_url

diff --git a/web/priv/static/css/app.css b/web/priv/static/css/app.css
@@ -235,11 +235,14 @@ TODO:
             }
         }
 
-        /* Set result background on hover or keyboard-seleted result */
-        [role="rowgroup"]:nth-child(2) [role="row"]:hover,
-        .is_selected {
+        /* Set result background on hover  */
+        [role="rowgroup"]:nth-child(2) [role="row"]:hover {
             background: #dae1e7;
         }
+        /* Set an outline for currently keyboard-seleted result */
+        .is_selected {
+            outline: 2px dashed black;
+        }
 
         .icon {
             display: flex;
@@ -793,6 +796,53 @@ TODO:
     }
 }
 
+/*
+ * COMPONENT: Home page
+ */
+
+.home-page {
+    .main-search-box h2 {
+        color: #1c3d5a;
+        font-size: 1.125rem;
+        padding: 0.25rem 0.5rem;
+    }
+
+    .facet-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
+        gap: 2em;
+
+        section {
+            background-color: white;
+            border-top: 5px solid;
+            border-radius: 3px;
+            box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.04); /* Subtle shadow for every block of the main content */
+            padding: 0 1em 0.5em 1em;
+
+            h3 {
+                text-align: center;
+                margin: 0.5em 1em;
+            }
+
+            ul {
+                padding-left: 1em;
+            }
+
+            p {
+                margin: 1em 0 0.5em 0;
+            }
+        }
+
+        .lab-tests {
+            border-color: #42a9e3;
+        }
+
+        .endpoints {
+            border-color: #989898;
+        }
+    }
+}
+
 /*
  * COMPONENT: Single lab test page
  */

diff --git a/web/priv/static/css/legacy.css b/web/priv/static/css/legacy.css
@@ -7020,13 +7020,6 @@ main article.box h3 {
   box-shadow: 0px 0px 30px rgba(0, 0, 0, .04); /* Subtle shadow for every block of the main content */
 }
 
-.title_bold_blue_uppercase {
-  text-transform: uppercase;
-  color: #1c3d5a;
-  font-weight: bold;
-  font-size: 1.125rem;
-}
-
 .demo-endpoints {
   display: grid;
   grid-template-columns: 1fr;