[ALS-7317] Add configuration for analysis page instructions (#359)

hms-dbmi · Jan 31, 2025 · 4b839d2 · 4b839d2
1 parent 126a7ed
commit 4b839d2
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 48 deletions.
diff --git a/src/lib/assets/configuration.json b/src/lib/assets/configuration.json
@@ -52,15 +52,6 @@
       }
     ]
   },
-  "apiPage": {
-    "cards": [
-      {
-        "header": "Setting Up the PIC-SURE API",
-        "body": "Step-by-step instructions to get started using the PIC-SURE API",
-        "link": "/analyze/example"
-      }
-    ]
-  },
   "explorePage": {
     "additionalColumns": [
       {
@@ -120,6 +111,19 @@
     ],
     "stats": ["Variables", "Participants", "Data Sources"]
   },
+  "analysisPage": {
+    "cards": [
+      {
+        "header": "Setting Up the PIC-SURE API",
+        "body": "Step-by-step instructions to get started using the PIC-SURE API",
+        "link": "/analyze/example"
+      }
+    ],
+    "instructions": {
+      "connection": "To connect to the PIC-SURE Application Programming Interface (API), you will need your personal access token. Copy your token and save as a text file called \"token.txt\" in the working directory of your chosen analysis workspace.",
+      "execution": "To start your analysis, copy and execute the following code in your preferred analysis environment to connect to the PIC-SURE API. Note that you will need your personal access token to complete the connection."
+    }
+  },
   "login": {
     "description": "Where searching for, filtering on, and analyzing data is made simple.",
     "showSiteName": false,

diff --git a/src/lib/configuration.ts b/src/lib/configuration.ts
@@ -4,7 +4,6 @@ import type { ExpectedResultType } from './models/query/Query';
 import * as configJson from './assets/configuration.json' assert { type: 'json' };
 import { ExportType } from './models/Variant';
 import type {
-  ApiPageConfig,
   ExplorePageConfig,
   FooterConfig,
   HelpConfig,
@@ -13,6 +12,7 @@ import type {
   LoginConfig,
   SiteMapConfig,
   PrivacyConfig,
+  AnalysisConfig,
 } from './types';
 
 export interface Branding {
@@ -29,6 +29,7 @@ export interface Branding {
   login: LoginConfig;
   help: HelpConfig;
   privacyPolicy: PrivacyConfig;
+  analysisConfig: AnalysisConfig;
 }
 
 export const branding: Branding = {
@@ -39,26 +40,26 @@ export const branding: Branding = {
   },
   sitemap: [] as SiteMapConfig[],
   footer: {} as FooterConfig,
-  apiPage: {} as ApiPageConfig,
   explorePage: {
     tourSearchTerm: import.meta.env?.EXPLORE_TOUR_SEARCH_TERM || 'age',
   } as ExplorePageConfig,
   landing: {} as LandingConfig,
   login: {} as LoginConfig,
   help: {} as HelpConfig,
   privacyPolicy: {} as PrivacyConfig,
+  analysisConfig: {} as AnalysisConfig,
 };
 
 export const initializeBranding = () => {
   branding.applicationName = configJson.applicationName;
-  branding.apiPage = configJson.apiPage;
   branding.explorePage = { ...branding.explorePage, ...configJson.explorePage };
   branding.landing = configJson.landing;
   branding.login = configJson.login;
   branding.help = configJson.help;
   branding.footer = configJson.footer;
   branding.sitemap = configJson.sitemap as SiteMapConfig[];
   branding.privacyPolicy = configJson.privacyPolicy;
+  branding.analysisConfig = configJson.analysisPage;
 };
 
 export const routes: Route[] = [

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -29,14 +29,6 @@ export interface FooterConfig {
   }>;
 }
 
-export interface ApiPageConfig {
-  cards: Array<{
-    header: string;
-    body: string;
-    link: string;
-  }>;
-}
-
 export interface ExplorePageConfig {
   additionalColumns: Column[];
   tourSearchTerm: string;
@@ -87,3 +79,15 @@ export interface PrivacyConfig {
   content: string;
   url: string;
 }
+
+export interface AnalysisConfig {
+  cards: Array<{
+    header: string;
+    body: string;
+    link: string;
+  }>;
+  instructions: {
+    connection: string;
+    execution: string;
+  };
+}
diff --git a/src/routes/(picsure)/(authorized)/analyze/+page.svelte b/src/routes/(picsure)/(authorized)/analyze/+page.svelte
@@ -18,33 +18,11 @@
       The PIC-SURE Application Programming Interface (API) can be used in an analysis environment of
       your choice. This API is available in both Python and R coding languages.
     </p>
-    <p>
-      To connect to the PIC-SURE Application Programming Interface (API), you will need your
-      personal access token. Copy your token and save as a text file called “token.txt” in the
-      working directory of your chosen analysis workspace, such as <a
-        href="https://platform.sb.biodatacatalyst.nhlbi.nih.gov/home"
-        target="_blank"
-        title="BioData Catalyst Powered by Seven
-      Bridges"
-        class="anchor font-bold">BioData Catalyst Powered by Seven Bridges</a
-      >
-      or
-      <a
-        href="https://terra.biodatacatalyst.nhlbi.nih.gov/#workspaces"
-        target="_blank"
-        title="BioData Catalyst Powered by Terra"
-        class="anchor font-bold">BioData Catalyst Powered by Terra</a
-      >.
-    </p>
-    <div class="flex justify-center">
-      <UserToken />
-    </div>
-    <p>
-      To start your analysis, copy and execute the following code in an analysis environment, such
-      as BioData Catalyst Powered by Seven Bridges or BioData Catalyst Powered by Terra, to connect
-      to the PIC-SURE API. Note that you will need your personal access token to complete the
-      connection.
-    </p>
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+    <p>{@html branding.analysisConfig.instructions.connection}</p>
+    <div class="flex justify-center"><UserToken /></div>
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+    <p>{@html branding.analysisConfig.instructions.execution}</p>
     <TabGroup class="card p-4">
       <Tab bind:group={tabSet} name="python" value={0}>Python</Tab>
       <Tab bind:group={tabSet} name="r" value={1}>R</Tab>
@@ -64,7 +42,7 @@
     </TabGroup>
   </section>
   <section id="info-cards" class="w-full flex flex-wrap flex-row justify-center mt-6">
-    {#each branding.apiPage.cards as card}
+    {#each branding.analysisConfig.cards as card}
       <a
         href={card.link}
         target={card.link.startsWith('http') ? '_blank' : '_self'}