feat: update API page to show users endpoint for graphql requests

* feat: update API page to show users endpoint for graphql requests * feat: update API page to show users endpoint for graphql requests * feat: update API page to show users endpoint for graphql requests
dgidb · Dec 8, 2023 · 617f7cd · 617f7cd
1 parent 35fb817
commit 617f7cd
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 35 deletions.
diff --git a/client/src/pages/Playground/Playground.scss → client/src/pages/API/API.scss b/client/src/pages/Playground/Playground.scss → client/src/pages/API/API.scss
@@ -1,3 +1,24 @@
+.api-page-header {
+  font-size: 36px;
+  margin-bottom: 15px;
+}
+
+.api-info-container {
+  padding: 20px;
+  p {
+    margin-bottom: 15px;
+    code {
+      color: #c7254e;
+    }
+  }
+}
+
+.playground-page-header {
+  padding-left: 20px;
+  font-size: 36px;
+  margin-bottom: 15px;
+}
+
 .playground-page-container {
   background-color: var(--background);
   display: flex;

diff --git a/client/src/pages/Playground/Playground.tsx → client/src/pages/API/API.tsx b/client/src/pages/Playground/Playground.tsx → client/src/pages/API/API.tsx
@@ -1,6 +1,6 @@
 // hooks/dependencies
 import { useState } from 'react';
-import './Playground.scss';
+import './API.scss';
 import { API_URL } from 'config';
 
 // graphiql
@@ -185,7 +185,7 @@ const query6 = `
 
 const fetcher = createGraphiQLFetcher({ url: API_URL ?? '' });
 
-export const Playground = () => {
+export const API = () => {
   const [isCopied, setIsCopied] = useState(false);
 
   const onCopyText = () => {
@@ -339,37 +339,55 @@ export const Playground = () => {
   ];
 
   return (
-    <div className="playground-page-container">
-      <div className="collapse-group">
-        {sectionsMap.map((section) => {
-          return (
-            <Accordion key={section.header}>
-              <AccordionSummary
-                style={{
-                  padding: '0 10px',
-                  backgroundColor: 'var(--background-light)',
-                }}
-                expandIcon={<ExpandMoreIcon />}
-              >
-                <h5>
-                  <b>{section.header}</b>
-                </h5>
-              </AccordionSummary>
-              <AccordionDetails
-                style={{
-                  maxHeight: '350px',
-                  overflow: 'scroll',
-                  padding: '5px',
-                }}
-              >
-                {section.sectionContent}
-              </AccordionDetails>
-            </Accordion>
-          );
-        })}
+    <div>
+      <div className="api-info-container">
+        <div className="api-page-header">API Documentation</div>
+        <p>
+          The DGIdb API can be used to query for drug-gene interactions in your
+          own applications.
+        </p>
+        <p>
+          To query the API, make GraphQL queries to:{' '}
+          <code>https://dgidb.org/api/graphql</code>
+        </p>
+        <p>
+          For examples and to experiment with API requests in your browser,
+          refer to the Playground below.
+        </p>
       </div>
-      <div className="main">
-        <GraphiQL fetcher={fetcher} />
+      <div className="playground-page-header">Playground</div>
+      <div className="playground-page-container">
+        <div className="collapse-group">
+          {sectionsMap.map((section) => {
+            return (
+              <Accordion key={section.header}>
+                <AccordionSummary
+                  style={{
+                    padding: '0 10px',
+                    backgroundColor: 'var(--background-light)',
+                  }}
+                  expandIcon={<ExpandMoreIcon />}
+                >
+                  <h5>
+                    <b>{section.header}</b>
+                  </h5>
+                </AccordionSummary>
+                <AccordionDetails
+                  style={{
+                    maxHeight: '350px',
+                    overflow: 'scroll',
+                    padding: '5px',
+                  }}
+                >
+                  {section.sectionContent}
+                </AccordionDetails>
+              </Accordion>
+            );
+          })}
+        </div>
+        <div className="main">
+          <GraphiQL fetcher={fetcher} />
+        </div>
       </div>
     </div>
   );

diff --git a/client/src/pages/API/index.ts b/client/src/pages/API/index.ts
@@ -0,0 +1 @@
+export * from './API';
diff --git a/client/src/pages/Playground/index.ts b/client/src/pages/Playground/index.ts
diff --git a/client/src/routes/public.tsx b/client/src/routes/public.tsx
@@ -11,7 +11,7 @@ import { DrugRecord } from 'components/Drug/DrugRecord';
 import { MainLayout } from 'components/Layout';
 import { About } from 'pages/About';
 import { Downloads } from 'pages/Downloads';
-import { Playground } from 'pages/Playground';
+import { API } from 'pages/API';
 import { InteractionRecord } from 'components/Interaction/InteractionRecord';
 
 const App = () => {
@@ -91,7 +91,7 @@ export const Routes = () => {
         { path: '/browse/sources', element: <BrowseSources /> },
         { path: '/about', element: <About /> },
         { path: '/downloads', element: <Downloads /> },
-        { path: '/api', element: <Playground /> },
+        { path: '/api', element: <API /> },
         { path: '/', element: <Home /> },
         { path: '*', element: <Navigate to="." /> },
       ],