Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updated home page #200

Merged
merged 9 commits into from
Sep 25, 2024
Merged

updated home page #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f422f40
Update dependabot.yml
ctrlaltaf Sep 20, 2024
49bb650
added check for npm client build
ctrlaltaf Sep 23, 2024
ff137a3
Merge branch 'Reed-CompBio:main' into dev
ctrlaltaf Sep 23, 2024
3646ffc
fixed indents
ctrlaltaf Sep 23, 2024
a0fe847
Merge branch 'dev' of https://github.com/ctrlaltaf/protein-weaver int…
ctrlaltaf Sep 23, 2024
584b93c
fixed folder name
ctrlaltaf Sep 23, 2024
2fef266
updated home page
ctrlaltaf Sep 23, 2024
95d79a7
Merge branch 'video' into dev
ctrlaltaf Sep 23, 2024
14f5c78
updated video
ctrlaltaf Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 3 additions & 19 deletions .github/dependabot.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,12 @@ updates:
- package-ecosystem: "npm"
directory: "/client"
schedule:
interval: "daily"
ignore:
- dependency-type: "all"
allow:
- dependency-type: "security"

interval: "weekly"
- package-ecosystem: "npm"
directory: "/server"
schedule:
interval: "daily"
ignore:
- dependency-type: "all"
allow:
- dependency-type: "security"

interval: "weekly"
- package-ecosystem: "pip"
directory: "/python_api"
schedule:
interval: "daily"
ignore:
- dependency-type: "all"
allow:
- dependency-type: "security"


interval: "weekly"
32 changes: 32 additions & 0 deletions .github/workflows/node.js.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
name: CI

on:
push:
branches:
- main
- dev
pull_request:
branches:
- main
- dev

jobs:
build:
runs-on: ubuntu-latest

steps:
- name: Checkout repository
uses: actions/checkout@v2

- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: "20.5.1"

- name: Install dependencies
run: npm install
working-directory: client

- name: Build the project
run: npm run build
working-directory: client
127 changes: 64 additions & 63 deletions client/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,76 +4,77 @@ import { PiHandTap } from "react-icons/pi";
import { GiFly } from "react-icons/gi";
import QueryImage from "./assets/query-img.png";
import { IconContext } from "react-icons";

import HomeVideo from "./components/HomeVideo";
import "./index.css";
import { Link } from "react-router-dom";
import MainLayout from "./layout/MainLayout";

function App() {

return (
<div>
<MainLayout>
<div className="main-layout-body">
<div className="home-body">
<h2 className="home-title">Welcome to ProteinWeaver</h2>
<h4>
A tool for protein network exploration in the context of The Gene Ontology (GO).
<br></br>
Free and open to all users with no login requirement.
<br></br>
Learn more about ProteinWeaver <Link className="home-link-about" to={"/about"}>here.</Link>
</h4>
<br></br>
<Link to={`/query`}>
<button className="home-button">
Start exploring networks!
</button>
</Link>
<div className="home-body-container">
<div>
<div className="home-feature-container">
<IconContext.Provider
value={{ className: "home-icon", size: 70 }}
>
<TbEyeCode />
</IconContext.Provider>
<h4 className="home-feature-text">
Visualize networks with Cytoscape.js
</h4>
</div>
<div className="home-feature-container">
<IconContext.Provider
value={{ className: "home-icon", size: 70 }}
>
<PiHandTap />
</IconContext.Provider>
<h4 className="home-feature-text">
Explore interactive graphs
</h4>
</div>
<div className="home-feature-container">
<IconContext.Provider
value={{ className: "home-icon", size: 70 }}
>
<GiFly />
</IconContext.Provider>
<h4 className="home-feature-text">
Hosts multiple non-human model organisms
</h4>
return (
<div>
<MainLayout>
<div className="main-layout-body">
<div className="home-body">
<h2 className="home-title">Welcome to ProteinWeaver</h2>
<h4>
A tool for protein network exploration in the
context of The Gene Ontology (GO).
<br></br>
Free and open to all users with no login
requirement.
<br></br>
Learn more about ProteinWeaver{" "}
<Link className="home-link-about" to={"/about"}>
here.
</Link>
</h4>
<br></br>
<Link to={`/query`}>
<div className="button-align">
{" "}
<button className="home-button">
Start exploring networks!
</button>
</div>
</Link>
<div className="home-body-container">
<div className="home-feature-container">
<IconContext.Provider
value={{ className: "home-icon", size: 70 }}
>
<TbEyeCode />
</IconContext.Provider>
<h4 className="home-feature-text">
Visualize networks with Cytoscape.js
</h4>
</div>
<div className="home-feature-container">
<IconContext.Provider
value={{ className: "home-icon", size: 70 }}
>
<PiHandTap />
</IconContext.Provider>
<h4 className="home-feature-text">
Explore interactive graphs
</h4>
</div>
<div className="home-feature-container">
<IconContext.Provider
value={{ className: "home-icon", size: 70 }}
>
<GiFly />
</IconContext.Provider>
<h4 className="home-feature-text">
Hosts multiple non-human model organisms
</h4>
</div>
</div>
<HomeVideo></HomeVideo>
</div>
</div>
</div>
<img
className="home-query-img"
src={QueryImage}
alt="Query-Image"
/>
</div>
</div>
</MainLayout>
</div>
</MainLayout>
</div>
);
);
}

export default App;
Binary file added client/src/assets/demo_video.mp4
View file
Open in desktop
Binary file not shown.
15 changes: 15 additions & 0 deletions client/src/components/HomeVideo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";
import videoFile from "../assets/demo_video.mp4"; // Adjust path as needed

const HomeVideo = () => {
return (
<div>
<video autoPlay muted loop width="100%" className="home-query-video">
<source src={videoFile} type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
);
};

export default HomeVideo;
Loading
Loading