-
Notifications
You must be signed in to change notification settings - Fork 6
User Interface
The user interface is what the user sees on the web page.
Helios uses React with component css for managing its UI. See react.dev for more information with working in React.
The source code for the UI can be found in 2 places src/UI contains all the UI components and corresponding logic. And src/Helios.tsx contains the React createRoot call which initializes the React app.
React is used to manage a component's state and re-render the component as the state changes. For this application, most of the application state lives in Helios.tsx. It holds the instances to the application's Scene, layers, user favorites, etc and passes these instances, as needed, down to the sub components.
If you are adding any new application level variables, it's very likely they should be added to Helios.tsx and then passed down to sub components.
Use the React Developer Tools to inspect the React structure on Helios. This will help you find the appropriate component that you intend to make changes to. Once you know the name of the component from the developer tools, you can search the source code for that component and make changes as needed.