[ALS-6175] Add 'what is the PIC-SURE API page'

src/lib/components/Navigation.svelte

@@ -62,13 +62,13 @@
 
   async function loginUser(resp: string) {
     await login(resp).catch((e) => {
-        console.log(e);
-        toastStore.trigger({
-          message:
-            'An error occured while validating your token. Please try again later. If this problem persists, please contact an administrator.',
-          background: 'variant-filled-error',
-        });
+      console.log(e);
+      toastStore.trigger({
+        message:
+          'An error occured while validating your token. Please try again later. If this problem persists, please contact an administrator.',
+        background: 'variant-filled-error',
       });
+    });
   }
 
   function handleLogin() {

src/lib/configuration.ts

@@ -5,7 +5,7 @@ export const branding = {
       {
         header: 'What is the PIC‑SURE API?',
         body: 'The PIC-SURE Application Programming Interface allows you to search, query, and export data using Python or R. \n\nClick this card to read more about the PIC-SURE API.',
-        link: 'https://pic-sure.org/about',
+        link: '/api/help',
       },
       {
         header: 'PIC‑SURE API Examples',

src/routes/api/+page.svelte

@@ -9,7 +9,11 @@
   </section>
   <section id="info-cards" class="w-full flex flex-wrap flex-row justify-between mt-6">
     {#each branding.apiPage.cards as card}
-      <a href={card.link} target="_blank" class="pic-sure-info-card basis-2/4">
+      <a
+        href={card.link}
+        target={card.link.startsWith('http') ? '_blank' : '_self'}
+        class="pic-sure-info-card basis-2/4"
+      >
         <div class="card card-hover">
           <header class="card-header flex flex-col items-center">
             <h4 class="my-1" data-testid={card.header}>{card.header}</h4>

src/routes/api/help/+page.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import Content from '$lib/components/Content.svelte';
+</script>
+
+<Content>
+  <div class="mb-8 text-center">
+    <a class="float-left mr-2 text-primary-500" href="/api">
+      <i class="btn btn-sm variant-ringed-primary fa-solid fa-angles-left mr-3 text-primary-500"
+      ></i>Back
+    </a>
+    <h1>PIC-SURE Application Programming Interface (API)</h1>
+  </div>
+
+  <div class="my-2">
+    <h2>What is the PICSURE API?</h2>
+    <p>
+      The <em
+        >Patient-Centered Information Commons: Standardized Unification of Research Elements</em
+      >
+      (PIC-SURE) <em> Application Programming Interface</em> (API) is a powerful tool designed to simplify
+      access to a diverse range of databases in the healthcare and research domains. These databases
+      often have varying architectures and data organizations, presenting challenges for researchers
+      looking to extract and interpret medical insights
+    </p>
+    <p>
+      Despite the inherent diversity among these databases, the PIC-SURE API facilitates a seamless
+      interaction with a wide range of data, providing researchers with a unified interface for
+      database access. This approach significantly simplifies the data access process, empowering
+      researchers to concentrate their efforts on research analysis and deriving valuable medical
+      insights.
+    </p>
+  </div>
+
+  <div class="img-placeholder border my-2">Placeholder image</div>
+
+  <div class="grid grid-cols-3 divide-x my-2">
+    <div class="col-span-2 px-4">
+      <h2>Key Features</h2>
+      <dl>
+        <dt>Search and Query:</dt>
+        <dd>
+          Easily search and query the data using intuitive commands and syntax, allowing you to
+          filter datasets based on specific criteria and keywords.
+        </dd>
+        <dt>Participant-Level Data:</dt>
+        <dd>
+          Access and export participant-level data, enabling you to conduct detailed analysis and
+          exploration of individual participant data.
+        </dd>
+        <dt>Python and R:</dt>
+        <dd>
+          The API is available in Python and R, enabling researchers to query databases using their
+          preferred coding language.
+        </dd>
+        <dt>Open Source:</dt>
+        <dd>
+          The PIC-SURE API is open source with an Apache 2.0 license, providing transparency,
+          flexibility, and community-driven development.
+        </dd>
+      </dl>
+    </div>
+    <div class="px-4">
+      <h2>More Information</h2>
+      <ul class="list-disc ml-4">
+        <li>
+          <a
+            target="_blank"
+            href="https://app.gitbook.com/o/HwwUMljKAspjFDq5CK7G/s/G6504U3TjKPfCoTEdgY8/"
+            >PIC-SURE User Guide</a
+          >
+        </li>
+        <li>
+          <a target="_blank" href="https://github.com/hms-dbmi/pic-sure"
+            >PIC-SURE API GitHub repository</a
+          >
+        </li>
+        <li>
+          <a target="_blank" href="https://github.com/hms-dbmi/pic-sure-python-client"
+            >Python client</a
+          >
+        </li>
+        <li>
+          <a target="_blank" href="https://github.com/hms-dbmi/pic-sure-python-adapter-hpds"
+            >Python adapter</a
+          >
+        </li>
+        <li>
+          <a target="_blank" href="https://github.com/hms-dbmi/pic-sure-r-adapter-hpds">R adapter</a
+          >
+        </li>
+        <li>
+          <a
+            target="_blank"
+            href="https://github.com/hms-dbmi/pic-sure-r-adapter-hpds/blob/main/hpds.pdf"
+            >R client</a
+          >
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="text-right my-6">
+    <a class="btn btn-lg variant-ringed-primary" href="/api/start">
+      Get started using the PIC-Sure API <i class="fa-solid fa-angles-right ml-1 text-primary-500"
+      ></i>
+    </a>
+  </div>
+</Content>
+
+<style>
+  h1 {
+    font-size: 2.25em;
+  }
+  h2 {
+    font-size: 1.75em;
+  }
+  p {
+    display: block;
+    margin: 1em;
+  }
+  h2 {
+    margin: 0 0 0.5em;
+  }
+  .img-placeholder {
+    width: 80%;
+    margin: 3em auto;
+    padding: 3em;
+  }
+
+  em {
+    font-weight: bold;
+  }
+  dt {
+    float: left;
+    clear: left;
+    font-weight: bold;
+    margin: 0 0.3em 0 1em;
+  }
+
+  dd {
+    padding: 0 1em 0.5em;
+  }
+
+  li {
+    margin: 0 0.5em 1em;
+  }
+</style>

src/routes/api/start/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Content from '$lib/components/Content.svelte';
+</script>
+
+<Content>
+  <div class="mb-8 text-center">
+    <a class="float-left mr-2 text-primary-500" href="/api/help">
+      <i class="btn btn-sm variant-ringed-primary fa-solid fa-angles-left mr-3 text-primary-500"
+      ></i>Back
+    </a>
+    <h1>Get Started</h1>
+  </div>
+</Content>