Skip to content

Frontend cleanup and component structure creation #64

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

Open
jmanhart wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Frontend cleanup and component structure creation #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c3fb975
Adding in a components directory and moving tags over.
jmanhart Apr 18, 2025
4c50f21
Adding in a global button and replacing the hard coded buttons
jmanhart Apr 18, 2025
bdd9b89
Adding in a applying the search bar
jmanhart Apr 18, 2025
6dbc585
Adding in the input component and applying it around the app
jmanhart Apr 18, 2025
542722a
Adding in the codeviewer component
jmanhart Apr 18, 2025
f49788d
Cleaning up and adding in some style updates
jmanhart Apr 18, 2025
2bed0eb
Adding in some styles
jmanhart Apr 18, 2025
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
78 changes: 6 additions & 72 deletions script_runner/frontend/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,65 +138,18 @@ a.group-text {
height: 100%;
padding: 10px;
display: flex;
justify-content: center;
}

.home-search {
width: 60%;
min-width: 500px;
max-width: 1200px;
flex-direction: column;
align-items: center;
padding-top: 40px;
}

.home-search-text {
.home-search-prompt {
width: 100%;
font-family: var(--font-heavy);
font-size: 16px;
text-align: center;
font-weight: 900;
margin: 20px 0;
}

.home-search-input input {
width: 100%;
border: 1px solid var(--border);
border-radius: 3px;
padding: 10px 20px;
font-size: 14px;
}

.home-search-input input:not(:focus) {
background-color: var(--bg-light);
}

.home-search-results ul {
margin: 0;
padding: 0;
list-style-type: none;
}

.home-search-results li {
border: 1px solid var(--border);
border-top: 0;
}

.home-no-result {
font-size: 14px;
line-height: 20px;
padding: 10px;
}

.home-search-results li a {
display: block;
width: 100%;
padding: 10px;
}

li.home-search-result:hover {
background-color: var(--border);
}

.function-group {
color: var(--text-hover);
margin-bottom: 15px;
}

.functions {
Expand Down Expand Up @@ -263,31 +216,12 @@ li.home-search-result:hover {
height: 100%;
}

.function-left,
.function-right {
.function-left {
flex: 1;
height: calc(100vh - 70px);
overflow-y: scroll;
}

.function-left {
display: flex;
flex-direction: column;
}

.function-right {
background-color: var(--bg-light);
}

.function-right-button {
padding: 10px;
}

.function-right-description {
padding: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.function-result {
margin: 10px;
flex-grow: 1;
Expand Down
101 changes: 15 additions & 86 deletions script_runner/frontend/src/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,95 +1,24 @@
import React, {useState, useRef} from 'react';
import {ConfigFunction, ConfigGroup, Route} from './types.tsx'
import React from "react";
import { ConfigGroup, Route } from "./types";
import SearchBar from "./components/SearchBar/SearchBar";

type Props = {
route: Route,
navigate: (to: Route) => void,
groups: ConfigGroup[],
}
route: Route;
navigate: (to: Route) => void;
groups: ConfigGroup[];
};

function Home(props: Props) {
const [searchResults, setSearchResults] = useState<{function: ConfigFunction, group: string}[] | null>(null);
const [showResults, setShowResults] = useState(false);
const dropdownRef = useRef<HTMLDivElement | null>(null);


function search(query: string) {
if (query === "") {
setSearchResults(null);
setShowResults(false);
return;
}

const results = [];

const substrings = query.split(" ");

for (const group of props.groups) {
for (const f of group.functions) {
let found = true;
for (const substr of substrings) {
if (!f.name.includes(substr) && !group.group.includes(substr)) {
found = false;
break;
}
}
// All substrings found
if (found) {
results.push({function: f, group: group.group});
}

}
}

setSearchResults(results.slice(0, 10));
setShowResults(true);
}

function handleBlur(e: React.FocusEvent<HTMLInputElement>) {
if (dropdownRef.current && !dropdownRef.current.contains(e.relatedTarget)) {
setShowResults(false);
}
}

function handleFocus() {
setShowResults(true);
}

return (
<div className="home">
<div className="home-search">
<div className="home-search-text">What do you want to do today?</div>
<div className="home-search-input">
<input
type="text"
placeholder="Search"
onChange={e => search(e.target.value)}
onFocus={handleFocus}
onBlur={handleBlur}
/>
</div>
<div className="home-search-results" ref={dropdownRef} tabIndex={0}>
{searchResults !== null && showResults && (
<ul>
{searchResults.map((f, index) => (
<li key={index} className="home-search-result">
<a onClick={() => props.navigate({...props.route, group: f.group, function: f.function.name})}>
<span className="function-group">{f.group} / </span>
<span>{f.function.name}</span>
</a>
</li>
))}
{
searchResults !== null && searchResults.length === 0 && <li className="home-no-result"><em>no results</em></li>
}
</ul>
)}
</div>


</div>
<div className="home-search-prompt">What do you want to do today?</div>
<SearchBar
groups={props.groups}
navigate={props.navigate}
route={props.route}
/>
</div>
)
);
}

export default Home
export default Home;
2 changes: 1 addition & 1 deletion script_runner/frontend/src/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useState } from "react";
import "./App.css";
import { ConfigGroup, Route } from "./types.tsx";
import { FolderPlusIcon, FolderMinusIcon } from "@heroicons/react/24/outline";
import Tag from "./Tag";
import Tag from "./components/Tag/Tag";

interface Props {
route: Route;
Expand Down
98 changes: 23 additions & 75 deletions script_runner/frontend/src/Script.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { useState, useEffect } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import ScriptResult from "./ScriptResult.tsx";
import { RunResult, ConfigFunction } from "./types.tsx";
import Tag from "./Tag";
import Tag from "./components/Tag/Tag";
import Button from "./components/Button/Button";
import Input from "./components/Input/Input";
import CodeViewer from "./components/CodeViewer/CodeViewer";

interface Props {
regions: string[];
Expand All @@ -22,18 +24,15 @@ function Script(props: Props) {
parameters.map((a) => a.default)
);
const [result, setResult] = useState<RunResult | null>(null);
// we keep another piece of state because the result value might itself be null
const [hasResult, setHasResult] = useState<boolean>(false);
const [error, setError] = useState<string | null>(null);
const [isRunning, setIsRunning] = useState<boolean>(false);
const [codeCollapsed, setCodeCollapsed] = useState<boolean>(false);

// If the selected function changes, reset all state
useEffect(() => {
setParams(parameters.map((a) => a.default));
setResult(null);
setHasResult(false);
setCodeCollapsed(false);
setError(null);
}, [parameters, props.group, props.function, props.execute]);

Expand Down Expand Up @@ -82,51 +81,26 @@ function Script(props: Props) {
<span>{functionName}</span>
</div>
<div className="function-execute">
<form action={executeFunction}>
<form
onSubmit={(e) => {
e.preventDefault();
executeFunction();
}}
>
{parameters.length > 0 && (
<div>
<div>
To execute this function, provide the following parameters:
</div>
{parameters.map((arg, idx) => {
return (
<div className="input-group">
<div>
<label htmlFor={arg.name}>{arg.name}</label>
</div>
<div>
{arg.enumValues && (
<select
id={arg.name}
required
disabled={inputDisabled}
value={params[idx] || ""}
onChange={(e) =>
handleInputChange(idx, e.target.value)
}
>
<option value="">Select...</option>
{arg.enumValues.map((v) => (
<option value={v}>{v}</option>
))}
</select>
)}
{!arg.enumValues && (
<input
type="text"
id={arg.name}
value={params[idx] || ""}
onChange={(e) =>
handleInputChange(idx, e.target.value)
}
required
disabled={inputDisabled}
/>
)}
</div>
</div>
);
})}
{parameters.map((arg, idx) => (
<Input
key={arg.name}
parameter={arg}
value={params[idx]}
isDisabled={inputDisabled}
onChange={(value) => handleInputChange(idx, value)}
/>
))}
</div>
)}
<div className="function-hint">
Expand All @@ -136,7 +110,9 @@ function Script(props: Props) {
<em>Select a region to run this function</em>
)}
</div>
<button disabled={disabled}>execute function</button>
<Button type="submit" disabled={disabled}>
execute function
</Button>
</form>
</div>
{error && (
Expand All @@ -154,35 +130,7 @@ function Script(props: Props) {
/>
)}
</div>
{}
{codeCollapsed ? (
<div className="function-right-button">
<button onClick={() => setCodeCollapsed(false)} aria-label="open">
open
</button>
</div>
) : (
<div className="function-right">
<div className="function-right-description">
✨ This is the <strong>{functionName}</strong> function definition
✨
</div>
<SyntaxHighlighter
language="python"
customStyle={{ fontSize: 12, width: 500 }}
>
{source}
</SyntaxHighlighter>
<div className="function-right-button">
<button
onClick={() => setCodeCollapsed(true)}
aria-label="collapse"
>
Collapse
</button>
</div>
</div>
)}
<CodeViewer functionName={functionName} source={source} type={type} />
</div>
);
}
Expand Down
Loading
Loading