Website Structure

[kavidey]

React - JS/TS Web Framework

Next.js - React Framework (handles server, TS compilation, routing, SSR, etc.)

Redux - State Management Library

MUI - UI Components

pnpm - drop in replacement for npm that is faster and reduces conflicts

loglevel - simple logging library

[kavidey]

Project Structure

This repo contains two separate but related code bases. It is one ROS packaged that contains two nodes, a front end react webpage used for controlling the robot, and a python ROS service that is used for grasp generation. Any files that are missing from this list are autogenerated or not important

├── CMakeLists.txt - python ROS node CMake file
├── grasp_generation
│  ├── aurmr_web_interface - source code for python node
│  └── process_data.py - data processing playground script
├── launch - launch files for both nodes
├── msg - ROS message used for both nodes
├── package.json - web node package file
├── pnpm-lock.yaml - PNPM package lock file
├── package.xml - python node package file
├── requirements.txt - python libraries necessary for the python node
├── scripts - utility bash scripts
├── setup.py - ROS python node setup.py
├── setupTests.ts - unused UI test script
├── src - source code for web node
│  ├── app
│  │  └── store.ts - Redux store config file
│  ├── features - Redux stores
│  │  ├── grasp - stores generated grasp data
│  │  ├── ros - stores ROS connection
│  │  └── se2 - stores selected SE2 position
│  ├── pages
│  │  └── index.tsx - root page of web node
│  └── styles - general CSS styles
├── srv - ROS services used for both nodes
└── tsconfig.json - typescript config

Each features/[store name] contains the store, as well as any types and components that are associated with that store.

I tried to keep everything as possible. For example, after an SE2 position is selected by the user, they can click "generate grasp" which queries the python node for a grasp. Inside of features/se2, there is a collection of SE2 input components. Each component is can set the se2 store based on user input, but they have know knowledge of ROS, or the grasp store. All of the individual components are connected in the index.tsx file.