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.

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

feat(opentrons-ai-client, opentrons-ai-server): add folders for opentrons-ai #14788

Merged
merged 12 commits into from
Apr 10, 2024
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
add initial files
koji committed Apr 3, 2024
commit aa3d771484637d5f716731cddf5e57e04360709d
21 changes: 21 additions & 0 deletions opentrons-ai-client/babel.config.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
'use strict'

module.exports = {
env: {
// Must have babel-plugin-styled-components in each env,
// see here for further details: s https://styled-components.com/docs/tooling#babel-plugin
production: {
plugins: ['babel-plugin-styled-components', 'babel-plugin-unassert'],
},
development: {
plugins: ['babel-plugin-styled-components'],
},
test: {
plugins: [
// disable ssr, displayName to fix toHaveStyleRule
// https://github.com/styled-components/jest-styled-components/issues/294
['babel-plugin-styled-components', { ssr: false, displayName: false }],
],
},
},
}
13 changes: 13 additions & 0 deletions opentrons-ai-client/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Opentrons AI</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
38 changes: 38 additions & 0 deletions opentrons-ai-client/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"name": "opentrons-ai-client",
"type": "module",
"version": "0.0.0-dev",
"description": "Opentrons AI application UI",
"source": "src/index.tsx",
"types": "lib/index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/Opentrons/opentrons.git"
},
"author": {
"name": "Opentrons Labworks",
"email": "[email protected]"
},
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/Opentrons/opentrons/issues"
},
"homepage": "https://github.com/Opentrons/opentrons",
"dependencies": {
"@fontsource/dejavu-sans": "5.0.3",
"@fontsource/public-sans": "5.0.3",
"@opentrons/components": "link:../components",
"i18next": "^19.8.3",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good idea to add i18next right off the bat instead of what we did with PD haha

"react": "18.2.0",
"react-dom": "18.2.0",
"react-error-boundary": "^4.0.10",
"react-i18next": "13.5.0",
"styled-components": "5.3.6"
},
"engines": {
"node": ">=18.19.0"
},
"devDependencies": {
"@types/styled-components": "^5.1.26"
}
}
42 changes: 42 additions & 0 deletions opentrons-ai-client/src/App.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
#root {
max-width: 1280px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should consider using styled-components like we do in the app for consistency. we can create global styles like this: https://github.com/Opentrons/opentrons/blob/edge/app/src/atoms/GlobalStyle/index.ts

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all css files are deleted.

margin: 0 auto;
padding: 2rem;
text-align: center;
}

.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}

.card {
padding: 2em;
}

.read-the-docs {
color: #888;
}
29 changes: 29 additions & 0 deletions opentrons-ai-client/src/App.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { render, screen, fireEvent } from "@testing-library/react";
import { describe, it, expect } from "vitest";

import App from "./App";

describe("App", () => {
it("should render text and image", () => {
render(<App />);
const headerText = screen.getByText("Vite + React");
expect(headerText).toBeInTheDocument();
const button = screen.getByRole("button");
expect(button).toBeInTheDocument();
const secondText = screen.getByText(
"Click on the Vite and React logos to learn more",
);
expect(secondText).toBeInTheDocument();
});

it("when clicking the button, the app will count up", () => {
render(<App />);
const beforeCount = screen.getByText("count is 0");
expect(beforeCount).toBeInTheDocument();
const button = screen.getByRole("button");
expect(button).toBeInTheDocument();
fireEvent.click(button);
const afterCount = screen.getByText("count is 1");
expect(afterCount).toBeInTheDocument();
});
});
34 changes: 34 additions & 0 deletions opentrons-ai-client/src/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { useState } from "react";

import reactLogo from "./assets/react.svg";

import viteLogo from "/vite.svg";
import "./App.css";

function App() {
const [count, setCount] = useState(0);

return (
<>
<div>
<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank" rel="noreferrer">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
);
}

export default App;
1 change: 1 addition & 0 deletions opentrons-ai-client/src/assets/react.svg
koji marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";

import { Button } from "../index";

describe("Button", () => {
it("renders with the provided label", () => {
const label = "Click me!";
render(<Button label={label} />);
const buttonElement = screen.getByText(label);
expect(buttonElement).toBeInTheDocument();
});
});
7 changes: 7 additions & 0 deletions opentrons-ai-client/src/components/Button/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export interface ButtonProps {
label: string;
}

export const Button = ({ label }: ButtonProps) => {
return <button style={{ fontSize: "2rem" }}>{label}</button>;
};
68 changes: 68 additions & 0 deletions opentrons-ai-client/src/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;

color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}

body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}

h1 {
font-size: 3.2em;
line-height: 1.1;
}

button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
12 changes: 12 additions & 0 deletions opentrons-ai-client/src/main.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from "react";

import ReactDOM from "react-dom/client";

import App from "./App.tsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
1 change: 1 addition & 0 deletions opentrons-ai-client/src/vite-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="vite/client" />

Check failure on line 1 in opentrons-ai-client/src/vite-env.d.ts

GitHub Actions / js checks

Do not use a triple slash reference for vite/client, use `import` style instead

Check failure on line 1 in opentrons-ai-client/src/vite-env.d.ts

GitHub Actions / js checks

Do not use a triple slash reference for vite/client, use `import` style instead
12 changes: 12 additions & 0 deletions opentrons-ai-client/tsconfig-data.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"extends": "../tsconfig-base.json",
"references": [],
"compilerOptions": {
"composite": true,
"emitDeclarationOnly": false,
"rootDir": ".",
"outDir": "lib"
},
"include": ["src/**/*.json", "fixtures/**/*.json", "vite.config.ts"],
"exclude": ["**/*.ts", "**/*.tsx"]
}
16 changes: 16 additions & 0 deletions opentrons-ai-client/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"extends": "../tsconfig-base.json",
"references": [
{
"path": "./tsconfig-data.json"
},
{
"path": "../components"
}
],
"compilerOptions": {
"rootDir": "src",
"outDir": "lib"
},
"include": ["typings", "src"]
}
15 changes: 15 additions & 0 deletions opentrons-ai-client/typings/images.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
declare module '*.png' {
const image: string
// eslint-disable-next-line import/no-default-export
export default image
}
declare module '*.svg' {
const image: string
// eslint-disable-next-line import/no-default-export
export default image
}
declare module '*.webm' {
const image: string
// eslint-disable-next-line import/no-default-export
export default image
}
1 change: 1 addition & 0 deletions opentrons-ai-client/typings/styled-components.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
import 'styled-components/cssprop'
43 changes: 43 additions & 0 deletions opentrons-ai-client/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
// this makes imports relative rather than absolute
base: '',
build: {
// Relative to the root
outDir: 'dist',
},
plugins: [
react({
include: '**/*.tsx',
babel: {
// Use babel.config.js files
configFile: true,
},
}),
],
optimizeDeps: {
esbuildOptions: {
target: 'es2020',
},
},
css: {
postcss: {
plugins: [],
},
},
define: {
'process.env': process.env,
global: 'globalThis',
},
resolve: {
alias: {
'@opentrons/components/styles': path.resolve(
'../components/src/index.module.css'
),
'@opentrons/components': path.resolve('../components/src/index.ts'),
},
},
})
2 changes: 2 additions & 0 deletions opentrons-ai-server/Makefile
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# opentrons ai server makefile
# TBD
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this makefile needed?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i guess it is but looks to be causing a lint error right now

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really?
Did you run make lint?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I ran the command and I didn't see any errors.
Could you share the error you saw?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh my bad, i thought this red icon thing meant there was a lint error 😅

Screenshot 2024-04-09 at 17 35 23

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you for sharing.
fortunately, that isn't a lint error.


Unchanged files with check annotations Beta

import { Mount } from '../pipettes'

Check warning on line 1 in api-client/src/calibration/types.ts

GitHub Actions / js checks

All imports in the declaration are only used as types. Use `import type`

Check warning on line 1 in api-client/src/calibration/types.ts

GitHub Actions / js checks

All imports in the declaration are only used as types. Use `import type`
export interface PipOffsetDeletionParams {
calType: 'pipetteOffset'
import { ModuleType } from '@opentrons/shared-data'

Check warning on line 1 in api-client/src/modules/api-types.ts

GitHub Actions / js checks

All imports in the declaration are only used as types. Use `import type`

Check warning on line 1 in api-client/src/modules/api-types.ts

GitHub Actions / js checks

All imports in the declaration are only used as types. Use `import type`
import type { Coordinates, ModuleModel } from '@opentrons/shared-data'
HeaterShakerModuleModel,
} from '@opentrons/shared-data'
import {

Check warning on line 8 in api-client/src/modules/types.ts

GitHub Actions / js checks

All imports in the declaration are only used as types. Use `import type`

Check warning on line 8 in api-client/src/modules/types.ts

GitHub Actions / js checks

All imports in the declaration are only used as types. Use `import type`
TEMPERATURE_MODULE_TYPE,
MAGNETIC_MODULE_TYPE,
THERMOCYCLER_MODULE_TYPE,
HEATERSHAKER_MODULE_TYPE,
} from '@opentrons/shared-data'
import * as ApiTypes from './api-types'

Check warning on line 15 in api-client/src/modules/types.ts

GitHub Actions / js checks

All imports in the declaration are only used as types. Use `import type`

Check warning on line 15 in api-client/src/modules/types.ts

GitHub Actions / js checks

All imports in the declaration are only used as types. Use `import type`
export * from './api-types'
// common types
units?: string
type?: string
}
interface PipetteQuirksField {

Check warning on line 62 in api-client/src/pipettes/types.ts

GitHub Actions / js checks

A record is preferred over an index signature

Check warning on line 62 in api-client/src/pipettes/types.ts

GitHub Actions / js checks

A record is preferred over an index signature
[quirkId: string]: boolean
}
interface QuirksField {
quirks?: PipetteQuirksField
}
export type PipetteSettingsFieldsMap = QuirksField & {

Check warning on line 69 in api-client/src/pipettes/types.ts

GitHub Actions / js checks

A record is preferred over an index signature

Check warning on line 69 in api-client/src/pipettes/types.ts

GitHub Actions / js checks

A record is preferred over an index signature
[fieldId: string]: PipetteSettingsField
}
export interface IndividualPipetteSettings {
fields: PipetteSettingsFieldsMap
}
type PipetteSettingsById = Partial<{ [id: string]: IndividualPipetteSettings }>

Check warning on line 77 in api-client/src/pipettes/types.ts

GitHub Actions / js checks

A record is preferred over an index signature

Check warning on line 77 in api-client/src/pipettes/types.ts

GitHub Actions / js checks

A record is preferred over an index signature
export type PipetteSettings = PipetteSettingsById
export interface PipetteSettingsUpdateFieldsMap {

Check warning on line 81 in api-client/src/pipettes/types.ts

GitHub Actions / js checks

A record is preferred over an index signature

Check warning on line 81 in api-client/src/pipettes/types.ts

GitHub Actions / js checks

A record is preferred over an index signature
[fieldId: string]: PipetteSettingsUpdateField
}
} | null
export interface UpdatePipetteSettingsData {
fields: { [fieldId: string]: PipetteSettingsUpdateField }

Check warning on line 90 in api-client/src/pipettes/types.ts

GitHub Actions / js checks

A record is preferred over an index signature

Check warning on line 90 in api-client/src/pipettes/types.ts

GitHub Actions / js checks

A record is preferred over an index signature
}
} from '../utils'
import { simpleAnalysisFileFixture } from '../__fixtures__'
import { RunTimeCommand } from '@opentrons/shared-data'

Check warning on line 17 in api-client/src/protocols/__tests__/utils.test.ts

GitHub Actions / js checks

All imports in the declaration are only used as types. Use `import type`

Check warning on line 17 in api-client/src/protocols/__tests__/utils.test.ts

GitHub Actions / js checks

All imports in the declaration are only used as types. Use `import type`
const mockRunTimeCommands: RunTimeCommand[] = simpleAnalysisFileFixture.commands as any
const mockLoadLiquidRunTimeCommands = [