Merge pull request #32 from Yukino2002/main

Fix Layers Script and UI
deepchem · Nov 27, 2023 · 1922692 · 1922692
2 parents 42c6ca2 + 3df32ac
commit 1922692
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 143 deletions.
diff --git a/.github/workflows/deploy_gh_pages.yml → ...workflows/build_check_deploy_gh_pages.yml b/.github/workflows/deploy_gh_pages.yml → ...workflows/build_check_deploy_gh_pages.yml
@@ -1,8 +1,10 @@
-name: Deploy to gh-pages
+name: Check Lint and Build, Deploy to gh-pages
 
 on:
   push:
     branches: [ main ]
+  pull_request:
+    branches: [main]
   repository_dispatch:
     types: [ rebuild-website ]
   workflow_dispatch:
@@ -11,7 +13,7 @@ permissions:
   contents: write
 
 jobs:
-  build_and_deploy:
+  build_check_and_deploy_gh_pages:
     runs-on: ubuntu-latest
 
     steps:
@@ -36,6 +38,12 @@ jobs:
           cd utils/models
           python3 get_models.py
 
+      - name: fetch and convert layer data
+        run: |
+          cd new-website
+          cd utils/layers
+          python3 get_layers.py
+
       - name: fetch and convert tutorial data
         run: |
           sudo apt-get install jq
@@ -52,7 +60,9 @@ jobs:
           npm run lint
           npm run export
 
+      # Run the deploy action only if the push is to the main branch
       - name: Deploy 🚀
+        if: ${{ github.ref == 'refs/heads/main' }}
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           folder: new-website/deepchem/out

diff --git a/new-website/deepchem/components/Layers/LayerCard.js b/new-website/deepchem/components/Layers/LayerCard.js
@@ -11,49 +11,48 @@ import deepchemKeras from "../../public/icons/deepchem-keras.png";
  * @return {string} - The parsed and formatted string
  */
 function parseName(name) {
-    name = name.replaceAll(/([A-Z]+)/g, " $1");
-    name = name.replace(/([^ ])(Layer)/, "$1 Layer");
-    return name;
-  }
+  name = name.replaceAll(/([A-Z]+)/g, " $1");
+  name = name.replace(/([^ ])(Layer)/, "$1 Layer");
+  return name;
+}
 
 const LayerCard = ({ layer }) => {
-    let models = layer.models.length
-        ? layer.models.join(", ")
-        : "N/A";
-    models = models + " " + "\xa0".repeat(300);
+  let models = layer.models.length ? layer.models.join(", ") : "N/A";
+  models = models + " " + "\xa0".repeat(300);
 
-    return (
-        <>
-          <Link href={layer.url} target="_blank">
-            <div className="flex flex-col gap-4 py-4 px-5 bg-white shadow-[0_4px_4px_rgba(0,0,0,0.25)] rounded-[10px] layer-card hover:scale-[1.03] transition-all">
-                <div className="flex flex-row justify-between w-full gap-8 items-start">
-                    <div className="text-xl font-medium text-dc-orange">
-                        {parseName(layer.name)}
-                    </div>
-                    <div className="flex flex-row items-center gap-1.5 bg-dc-light-blue/5 px-2 py-1 rounded-md">
-                        {layer.category === "torch" && (
-                            <Image src={deepchemPytorch} alt="PyTorch" width={16} />
-                        )}
-                        {layer.category === "keras" && (
-                            <Image src={deepchemKeras} alt="Keras" width={16} />
-                        )}
-                    </div>
-                    <div className="font-medium text-sm text-dc-gray">
-                        {layer.category}
-                    </div>
-                </div>
-                {
-                    <div className="text-base font-medium text-dc-light-blue w-full mt-4 md:mt-auto">
-                    <p className="text-dc-gray/60">Acceptable Models</p>
-                    <p className="text-xs text-dc-gray font-medium break-all">
-                        {models}
-                    </p>
-                    </div>
-                }
+  return (
+    <>
+      <Link href={layer.url} target="_blank">
+        <div className="flex flex-col gap-4 py-4 px-5 bg-white shadow-[0_4px_4px_rgba(0,0,0,0.25)] rounded-[10px] layer-card hover:scale-[1.03] transition-all">
+          <div className="flex flex-row justify-between w-full gap-8 items-start">
+            <div className="text-xl font-medium text-dc-orange">
+              {parseName(layer.name)}
             </div>
-          </Link>
-        </>
-    );
+          </div>
+
+          <div className="flex flex-row justify-center items-center gap-2.5 w-fit">
+            {layer.category === "torch" && (
+              <Image src={deepchemPytorch} alt="PyTorch" width={16} />
+            )}
+            {layer.category === "keras" && (
+              <Image src={deepchemKeras} alt="Keras" width={16} />
+            )}
+            <div className="font-medium text-sm text-dc-gray">
+              {layer.category}
+            </div>
+          </div>
+          {
+            <div className="text-base font-medium text-dc-light-blue w-full mt-4 md:mt-auto">
+              <p className="text-dc-gray/60">Acceptable Models</p>
+              <p className="text-xs text-dc-gray font-medium break-all">
+                {models}
+              </p>
+            </div>
+          }
+        </div>
+      </Link>
+    </>
+  );
 };
 
-export default LayerCard;
+export default LayerCard;
diff --git a/new-website/deepchem/package-lock.json b/new-website/deepchem/package-lock.json
diff --git a/new-website/deepchem/pages/index.js b/new-website/deepchem/pages/index.js
@@ -17,6 +17,8 @@ import { AnimationsContext } from "../contexts/animations-context";
 import exploreTutorialsIcon from "../public/images/explore-tutorials.png";
 import exploreProjectsIcon from "../public/images/explore-projects.png";
 import exploreModelsIcon from "./../public/images/explore-models.png";
+import exploreLayersIcon from "./../public/images/explore-layers.png";
+
 import Terminal from "../components/Home/Terminal";
 import deepchemLogo from "../public/images/deepchem-logo.png";
 
@@ -230,7 +232,7 @@ const Home = () => {
             link={"/tutorials"}
           />
           <ExploreCardItem
-            image={"/images/explore-datasets.png"}
+            image={exploreLayersIcon}
             title="LAYERS"
             link={"/layers"}
           />