[Explorer] Set up initial UI page, improve development flow (#115)

geoffxy · Nov 29, 2024 · ed36802 · ed36802
1 parent 4be77ff
commit ed36802
Show file tree

Hide file tree

Showing 16 changed files with 142 additions and 34 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -5,10 +5,12 @@ on:
     branches: [ master ]
     paths-ignore:
     - 'website/**'
+    - 'explorer/**'
   pull_request:
     branches: [ master ]
     paths-ignore:
     - 'website/**'
+    - 'explorer/**'
   workflow_dispatch: {}
 
 jobs:

diff --git a/.github/workflows/explorer.yml b/.github/workflows/explorer.yml
@@ -0,0 +1,46 @@
+name: Check Explorer UI Code
+
+on:
+  push:
+    branches: [ master ]
+    paths:
+    - 'explorer/**'
+  pull_request:
+    branches: [ master ]
+    paths:
+    - 'explorer/**'
+  workflow_dispatch: {}
+
+jobs:
+  build:
+    name: Check Explorer UI Code
+    timeout-minutes: 30
+
+    runs-on: ubuntu-22.04
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Set Up Node 20
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+    - name: Install Dependencies
+      working-directory: explorer
+      run: npm install
+
+    - name: Check Formatting (prettier)
+      working-directory: explorer
+      run: npm run fcheck
+      if: success() || failure()
+
+    - name: Lint (eslint)
+      working-directory: explorer
+      run: npm run lint
+      if: success() || failure()
+
+    - name: Run Build (vite)
+      working-directory: explorer
+      run: npm run build
+      if: success() || failure()
diff --git a/explorer/.eslintignore b/explorer/.eslintignore
diff --git a/explorer/README.md b/explorer/README.md
@@ -9,4 +9,3 @@ explorer, run `cond explorer`. The instructions below are for development.
 - Run `npm run watch` inside this directory
 - Run `cond explorer` to launch the explorer backend and web server (required
   for access to Conductor APIs)
-
diff --git a/explorer/dist/__init__.py b/explorer/dist/__init__.py
diff --git a/explorer/eslint.config.js b/explorer/eslint.config.js
@@ -1,38 +1,38 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import react from 'eslint-plugin-react'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
+import js from "@eslint/js";
+import globals from "globals";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
 
 export default [
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
-    files: ['**/*.{js,jsx}'],
+    files: ["**/*.{js,jsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
-        ecmaVersion: 'latest',
+        ecmaVersion: "latest",
         ecmaFeatures: { jsx: true },
-        sourceType: 'module',
+        sourceType: "module",
       },
     },
-    settings: { react: { version: '18.3' } },
+    settings: { react: { version: "18.3" } },
     plugins: {
       react,
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...js.configs.recommended.rules,
       ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
+      ...react.configs["jsx-runtime"].rules,
       ...reactHooks.configs.recommended.rules,
-      'react/jsx-no-target-blank': 'off',
-      'react-refresh/only-export-components': [
-        'warn',
+      "react/jsx-no-target-blank": "off",
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
   },
-]
+];
diff --git a/explorer/index.html b/explorer/index.html
@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Conductor Explorer</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/explorer/package.json b/explorer/package.json
@@ -8,7 +8,7 @@
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "watch": "vite build --watch",
+    "watch": "vite build --mode development --watch",
     "format": "prettier --write .",
     "check": "prettier --check . ; eslint .",
     "fcheck": "prettier --check ."

diff --git a/explorer/src/App.jsx b/explorer/src/App.jsx
@@ -1,5 +1,11 @@
+import Header from "./Header";
+
 function App() {
-  return <div />;
+  return (
+    <div id="conductor-explorer">
+      <Header />
+    </div>
+  );
 }
 
 export default App;
diff --git a/explorer/src/Header.css b/explorer/src/Header.css
@@ -0,0 +1,20 @@
+.header {
+  padding: 12px;
+  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
+}
+
+.header-logo {
+  display: flex;
+  align-items: center;
+}
+
+.header-logo img {
+  width: 40px;
+  height: 40px;
+}
+
+.header-logo span {
+  font-size: 1.5em;
+  font-weight: 600;
+  margin-left: 15px;
+}
diff --git a/explorer/src/Header.jsx b/explorer/src/Header.jsx
@@ -0,0 +1,16 @@
+import logo from "./assets/ConductorLogo_Light.png";
+import "./Header.css";
+
+const Header = () => {
+  console.log("Test");
+  return (
+    <div className="header">
+      <div className="header-logo">
+        <img src={logo} alt="Conductor Explorer" />
+        <span>Conductor Explorer</span>
+      </div>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/explorer/src/assets/ConductorLogo_Light.png b/explorer/src/assets/ConductorLogo_Light.png
diff --git a/explorer/src/main.css b/explorer/src/main.css
@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  font-family: "Source Sans 3", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+}
diff --git a/explorer/src/main.jsx b/explorer/src/main.jsx
@@ -1,9 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.jsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.jsx";
+import "./main.css";
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);
diff --git a/explorer/vite.config.js b/explorer/vite.config.js
@@ -1,7 +1,10 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
 
 // https://vite.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [react()],
-})
+  build: {
+    minify: mode === "production",
+  },
+}));
diff --git a/src/conductor/explorer/routes.py b/src/conductor/explorer/routes.py
@@ -4,7 +4,7 @@
 from fastapi import FastAPI
 from fastapi.staticfiles import StaticFiles
 
-import conductor.explorer.static as explorer_app
+import conductor.explorer as explorer_module
 
 app = FastAPI()
 
@@ -20,6 +20,10 @@ def hello_world() -> Simple:
 
 # Serve the static pages.
 # Note that this should go last as a "catch all" route.
-static_files = pkg_resources.files(explorer_app)
-with pkg_resources.as_file(static_files) as static_dir:
-    app.mount("/", StaticFiles(directory=static_dir, html=True), name="static")
+explorer_module_pkg = pkg_resources.files(explorer_module)
+with pkg_resources.as_file(explorer_module_pkg) as explorer_module_path:
+    app.mount(
+        "/",
+        StaticFiles(directory=explorer_module_path / "static", html=True),
+        name="static",
+    )
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,4 +9,3 @@ explorer, run `cond explorer`. The instructions below are for development.
		- Run `npm run watch` inside this directory
		- Run `cond explorer` to launch the explorer backend and web server (required
		for access to Conductor APIs)