Merge remote-tracking branch 'refs/remotes/origin/dev' into dev

web/src/globals.css

@@ -410,6 +410,15 @@ body {
     height: 80vh;
   }
 }
+@media (min-width: 768px) {
+  h40 {
+    height: 40vh;
+  }
+}
+
+.code-snippet-container {
+  min-height: 200px;
+}
 
 .wtHolder {
   overflow: hidden;
@@ -633,7 +642,6 @@ body {
   height: 31px !important;
 }
 
-
 .schemas-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;

web/src/pages/Home.tsx

@@ -1,5 +1,8 @@
 import { motion } from 'framer-motion';
-import React, { FC } from 'react';
+import React from 'react';
+import { Col, Nav, Row, Tab } from 'react-bootstrap';
+import Markdown from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
 
 import { LandingPaths } from '../components/layout/landing-paths';
 import { PageLayout } from '../components/layout/page-layout';
@@ -9,16 +12,17 @@ import { GenericTooltip } from '../components/tooltips/generic-tooltip';
 import { useSession } from '../contexts/session-context';
 import { useBiggestNamespace } from '../hooks/queries/useBiggestNamespace';
 import { useSampleTable } from '../hooks/queries/useSampleTable';
+import { CODE_SNIPPETS, PEPHUBCLIENT_SNIPPETS } from '../utils/const';
 import { numberWithCommas } from '../utils/etc';
 import { sampleListToArrays } from '../utils/sample-table';
 
-interface MotionButtonProps {
+type MotionButtonProps = {
   onClick?: () => void;
   className?: string;
   children: React.ReactNode;
-}
+};
 
-const MotionButton: FC<MotionButtonProps> = ({ children, className, onClick }) => (
+const MotionButton = ({ children, className, onClick }: MotionButtonProps) => (
   <motion.button
     onClick={onClick}
     className={className}
@@ -42,10 +46,13 @@ export function Home() {
     enabled: true,
   });
 
+  const [firstCopied, setFirstCopied] = React.useState(false);
+  const [secondCopied, setSecondCopied] = React.useState(false);
+
   return (
     <PageLayout>
-      <div className="h80 mt-2">
-        <div className="d-flex flex-column h-100 align-items-center justify-content-center">
+      <div className="mt-2">
+        <div className="d-flex flex-column h80 align-items-center justify-content-center">
           <div className="row align-items-center">
             <div className="col-lg-6 col-sm-12">
               <h1 className="fw-bolder">Manage your sample metadata.</h1>
@@ -123,6 +130,118 @@ export function Home() {
             </div>
           </div>
         </div>
+        <div className="my-5 w-100">
+          <Row className="w-100 align-items-center mb-5 h40">
+            <Col sm={6} md={6}>
+              <h2 className="fw-bold">Web server and API</h2>
+              <p className="text-balance pe-4">
+                The PEPhub web server and API are designed to provide a user-friendly interface for exploring and
+                working with biologically ortiented sample metadata. The web server allows users to search for metadata,
+                view detailed information about these metadata, and create new metadata.
+              </p>
+            </Col>
+            <Col sm={6} md={6} className="d-flex flex-column align-items-center justify-content-center h-100">
+              <div className="border border-2 border-dark p-2 rounded w-100 position-relative landing-code-snippet-container">
+                <Tab.Container id="code-snippets" defaultActiveKey={CODE_SNIPPETS[0].language}>
+                  <div className="d-flex flex-row align-items-center text-sm">
+                    <Nav variant="pills" className="flex-row">
+                      {CODE_SNIPPETS.map((snippet) => (
+                        <Nav.Item key={snippet.language}>
+                          <Nav.Link className="py-1 px-2 mx-1" eventKey={snippet.language}>
+                            {snippet.language}
+                          </Nav.Link>
+                        </Nav.Item>
+                      ))}
+                    </Nav>
+                  </div>
+                  <Tab.Content className="w-100 h-100 code-snippet-container">
+                    {CODE_SNIPPETS.map((snippet) => (
+                      <Tab.Pane key={snippet.language} eventKey={snippet.language}>
+                        {/* @ts-ignore not sure why rehypeHighlight is causing a type error */}
+                        <Markdown className="h-100 mt-3" rehypePlugins={[rehypeHighlight]}>
+                          {snippet.code}
+                        </Markdown>
+                        <div className="position-absolute top-0 end-0 me-2">
+                          <button
+                            onClick={() => {
+                              navigator.clipboard.writeText(snippet.raw);
+                              setFirstCopied(true);
+                              setTimeout(() => {
+                                setFirstCopied(false);
+                              }, 2000);
+                            }}
+                            className="btn btn-outline-dark btn-sm mt-2"
+                          >
+                            {firstCopied ? 'Copied!' : 'Copy'}
+                          </button>
+                        </div>
+                      </Tab.Pane>
+                    ))}
+                  </Tab.Content>
+                </Tab.Container>
+              </div>
+            </Col>
+          </Row>
+          <div className="p-5"></div>
+          <div className="p-5"></div>
+          <Row className="w-100 align-items-center">
+            <Col sm={6} md={6}>
+              <h2 className="fw-bold">PEPhub client </h2>
+              <p className="text-balance pe-4">
+                PEPhub provides a Python an R client for interacting with the PEPhub API. The client allows users to
+                download and work with project metadata programmatically, without the need to interact with the native
+                API. <code>peppy</code> is available on PyPI with other useful tools for genomic metadata manipulation.
+                Peppy:{' '}
+                <a href="https://pypi.org/project/peppy/" className="bi bi-box-fill">
+                  {' '}
+                  PyPI peppy
+                </a>
+                .
+              </p>
+            </Col>
+            <Col sm={6} md={6} className="d-flex flex-column align-items-center justify-content-center h-100">
+              <div className="border border-2 border-dark p-2 rounded w-100 position-relative landing-code-snippet-container">
+                <Tab.Container id="code-snippets" defaultActiveKey={CODE_SNIPPETS[0].language}>
+                  <div className="d-flex flex-row align-items-center text-sm">
+                    <Nav variant="pills" className="flex-row">
+                      {PEPHUBCLIENT_SNIPPETS.map((snippet) => (
+                        <Nav.Item key={snippet.language}>
+                          <Nav.Link className="py-1 px-2 mx-1" eventKey={snippet.language}>
+                            {snippet.language}
+                          </Nav.Link>
+                        </Nav.Item>
+                      ))}
+                    </Nav>
+                  </div>
+                  <Tab.Content className="w-100 h-100 code-snippet-container">
+                    {PEPHUBCLIENT_SNIPPETS.map((snippet) => (
+                      <Tab.Pane key={snippet.language} eventKey={snippet.language}>
+                        {/* @ts-ignore not sure why rehypeHighlight is causing a type error */}
+                        <Markdown className="h-100 mt-3" rehypePlugins={[rehypeHighlight]}>
+                          {snippet.code}
+                        </Markdown>
+                        <div className="position-absolute top-0 end-0 me-2">
+                          <button
+                            onClick={() => {
+                              navigator.clipboard.writeText(snippet.raw);
+                              setSecondCopied(true);
+                              setTimeout(() => {
+                                setSecondCopied(false);
+                              }, 2000);
+                            }}
+                            className="btn btn-outline-dark btn-sm mt-2"
+                          >
+                            {secondCopied ? 'Copied!' : 'Copy'}
+                          </button>
+                        </div>
+                      </Tab.Pane>
+                    ))}
+                  </Tab.Content>
+                </Tab.Container>
+              </div>
+            </Col>
+          </Row>
+        </div>
       </div>
     </PageLayout>
   );

web/src/utils/const.ts

@@ -0,0 +1,136 @@
+const API_BASE = import.meta.env.VITE_API_HOST || '';
+const EXAMPLE_URL = `${API_BASE}/projects/databio/example`;
+
+export const PEPHUB_PYTHON_CODE_MD = `
+\`\`\`python
+import requests
+
+res = requests.get(
+    '${EXAMPLE_URL}'
+)
+
+print(res.json())
+\`\`\`
+`;
+export const PEPHUB_PYTHON_CODE_RAW = `
+import requests
+
+res = requests.get(
+  '${EXAMPLE_URL}'
+)
+
+print(res.json())
+`;
+
+export const PEPHUB_R_CODE_MD = `
+\`\`\`r
+library(httr)
+
+res <- GET('${EXAMPLE_URL}')
+
+print(content(res, 'text'))
+\`\`\`
+`;
+
+export const PEPHUB_R_CODE_RAW = `
+library(httr)
+
+res <- GET('${EXAMPLE_URL}')
+
+print(content(res, 'text'))
+`;
+
+export const PEPHUB_CURL_CODE_MD = `
+\`\`\`bash
+curl ${EXAMPLE_URL} \\
+    -H 'Accept: application/json' \\
+
+\`\`\`
+`;
+
+export const PEPHUB_CURL_CODE_RAW = `
+curl http://localhost:8000/api/bed/example \\
+    -H 'Accept: application/json' \\
+`;
+
+export const PEPHUB_JAVASCRIPT_CODE_MD = `
+\`\`\`javascript
+fetch('${EXAMPLE_URL}')
+  .then((res) => res.json())
+  .then((data) => console.log(data));
+\`\`\`
+`;
+
+export const PEPHUB_JAVASCRIPT_CODE_RAW = `
+fetch('http://localhost:8000/api/bed/example')
+  .then((res) => res.json())
+  .then((data) => console.log(data));
+`;
+
+export const CODE_SNIPPETS = [
+  {
+    language: 'Python',
+    code: PEPHUB_PYTHON_CODE_MD,
+    raw: PEPHUB_PYTHON_CODE_RAW,
+  },
+  {
+    language: 'R',
+    code: PEPHUB_R_CODE_MD,
+    raw: PEPHUB_R_CODE_RAW,
+  },
+  {
+    language: 'Curl',
+    code: PEPHUB_CURL_CODE_MD,
+    raw: PEPHUB_CURL_CODE_RAW,
+  },
+  {
+    language: 'JavaScript',
+    code: PEPHUB_JAVASCRIPT_CODE_MD,
+    raw: PEPHUB_JAVASCRIPT_CODE_RAW,
+  },
+];
+
+export const CLIENT_PYTHON_CODE_MD = `
+\`\`\`python
+import peppy
+
+project = peppy.Project.from_pephub('databio/example')
+
+print(project)
+\`\`\`
+`;
+
+export const CLIENT_PYTHON_CODE_RAW = `
+import peppy
+
+project = peppy.Project.from_pephub('databio/example')
+
+print(project)
+`;
+
+export const CLIENT_R_CODE_MD = `
+\`\`\`r
+
+# PEPHub client is not yet available in R
+# R package is under development
+
+\`\`\`
+`;
+
+export const CLIENT_R_CODE_RAW = `
+# PEPHub client is not yet available in R
+# R package is under development
+`;
+
+export const PEPHUBCLIENT_SNIPPETS = [
+  {
+    language: 'Python',
+    code: CLIENT_PYTHON_CODE_MD,
+    raw: CLIENT_PYTHON_CODE_RAW,
+  },
+  {
+    language: 'R',
+    code: CLIENT_R_CODE_MD,
+    raw: CLIENT_R_CODE_RAW,
+  },
+];