Reorganize frontend folder structure, nomeclature #266

WardBrian · 2025-01-29T21:49:56Z

This closes #113. This just moves code around and renames some things, no behavioral changes

The organizing principles are defined in a new ARCHITECTURE.md document: link

src/app now has the following top-level folders:

pages -- just HomePage
areas -- sub-views of HomePage. The majority of the UI is here and its sub-folders
windows -- modal boxes that show up above HomePage, like the settings
components -- reusable components
core -- contexts and workers, non-UI code
util -- utility functions

For easier viewing, here's the folder layout in full:

Details

$ tree src/
src/
├── app
│   ├── App.tsx
│   ├── areas
│   │   ├── ControlArea
│   │   │   ├── DataGenerationArea
│   │   │   │   ├── code_templates
│   │   │   │   │   ├── data.py
│   │   │   │   │   └── data.R
│   │   │   │   ├── DataPyPanel.tsx
│   │   │   │   ├── DataRPanel.tsx
│   │   │   │   └── useDataGenState.ts
│   │   │   ├── DataGenerationArea.tsx
│   │   │   ├── SamplingArea
│   │   │   │   ├── ResultsArea
│   │   │   │   │   ├── AnalysisArea
│   │   │   │   │   │   ├── AnalysisPyPanel.tsx
│   │   │   │   │   │   ├── AnalysisRPanel.tsx
│   │   │   │   │   │   ├── code_templates
│   │   │   │   │   │   │   ├── analysis.py
│   │   │   │   │   │   │   └── analysis.R
│   │   │   │   │   │   └── useAnalysisState.ts
│   │   │   │   │   ├── AnalysisArea.tsx
│   │   │   │   │   ├── SamplerOutputArea
│   │   │   │   │   │   ├── ConsolePanel.tsx
│   │   │   │   │   │   ├── DrawsTablePanel.tsx
│   │   │   │   │   │   ├── HistogramsPanel.tsx
│   │   │   │   │   │   ├── Histogram.tsx
│   │   │   │   │   │   ├── SummaryPanel.tsx
│   │   │   │   │   │   ├── TracePlotsPanel.tsx
│   │   │   │   │   │   └── TracePlot.tsx
│   │   │   │   │   └── SamplerOutputArea.tsx
│   │   │   │   ├── ResultsArea.tsx
│   │   │   │   ├── RunArea
│   │   │   │   │   ├── RunOrCompilePanel.tsx
│   │   │   │   │   ├── RunWithProgressPanel.tsx
│   │   │   │   │   ├── SamplerProgress.tsx
│   │   │   │   │   └── SamplingOptsPanel.tsx
│   │   │   │   └── RunArea.tsx
│   │   │   └── SamplingArea.tsx
│   │   ├── ControlArea.tsx
│   │   ├── ModelDataArea
│   │   │   ├── DataEditorPanel.tsx
│   │   │   ├── ModelEditorPanel.tsx
│   │   │   └── StanCompileResultPanel.tsx
│   │   └── ModelDataArea.tsx
│   ├── components
│   │   ├── CloseableDialog.tsx
│   │   ├── Collapsable.tsx
│   │   ├── FileEditor
│   │   │   ├── monacoStanLanguage.ts
│   │   │   ├── PlottingScriptEditor.tsx
│   │   │   ├── ScriptEditor.tsx
│   │   │   ├── TextEditor.tsx
│   │   │   ├── ToolBar.tsx
│   │   │   └── useTemplatedFillerText.ts
│   │   ├── LazyPlotlyPlot.tsx
│   │   ├── LinearProgressWithLabel.tsx
│   │   ├── ResponsiveGrid.tsx
│   │   ├── StyledTables.tsx
│   │   └── TabWidget.tsx
│   ├── core
│   │   ├── Compilation
│   │   │   ├── CompileContextProvider.tsx
│   │   │   └── compileStanProgram.ts
│   │   ├── Project
│   │   │   ├── FileMapping.ts
│   │   │   ├── ProjectContextProvider.tsx
│   │   │   ├── ProjectDataModel.ts
│   │   │   ├── ProjectQueryLoading.ts
│   │   │   ├── ProjectReducer.ts
│   │   │   └── ProjectSerialization.ts
│   │   ├── Scripting
│   │   │   ├── InterpreterTypes.ts
│   │   │   ├── OutputDivUtils.ts
│   │   │   ├── pyodide
│   │   │   │   ├── pyodideWorker.ts
│   │   │   │   ├── pyodideWorkerTypes.ts
│   │   │   │   ├── sp_load_draws.py
│   │   │   │   ├── sp_patch_matplotlib.py
│   │   │   │   └── usePyodideWorker.ts
│   │   │   └── webR
│   │   │       ├── data_postamble.R
│   │   │       ├── sp_load_draws.R
│   │   │       ├── useWebR.ts
│   │   │       └── webR_preamble.R
│   │   ├── Settings
│   │   │   ├── UserSettingsProvider.tsx
│   │   │   └── UserSettings.ts
│   │   ├── Stanc
│   │   │   ├── Linting.ts
│   │   │   ├── stanc.js
│   │   │   ├── stancWorker.ts
│   │   │   ├── Types.ts
│   │   │   └── useStanc.ts
│   │   └── StanSampler
│   │       ├── StanModelWorker.ts
│   │       ├── StanSampler.ts
│   │       └── useStanSampler.ts
│   ├── pages
│   │   ├── CustomTheming.tsx
│   │   ├── HomePage.tsx
│   │   ├── Sidebar.tsx
│   │   └── TopBar.tsx
│   ├── util
│   │   ├── baseObjectCheck.ts
│   │   ├── gists
│   │   │   ├── loadFilesFromGist.ts
│   │   │   └── saveAsGitHubGist.ts
│   │   ├── isMonacoWorkerNoise.ts
│   │   ├── normalizeLineEndings.ts
│   │   ├── replaceSpaces.ts
│   │   ├── stan_stats
│   │   │   ├── fft.ts
│   │   │   ├── stan_stats.ts
│   │   │   └── summaryStats.ts
│   │   ├── triggerDownload.ts
│   │   ├── tryFetch.ts
│   │   ├── types
│   │   │   └── plotly-cartesian.d.ts
│   │   └── unreachable.ts
│   └── windows
│       ├── ExportProjectWindow
│       │   ├── ExportProjectPanel.tsx
│       │   ├── GistExportPanel.tsx
│       │   ├── GistUpdatePanel.tsx
│       │   ├── InputPersonalAccessToken.tsx
│       │   └── makeShareableLink.ts
│       ├── ExportProjectWindow.tsx
│       ├── LoadProjectWindow
│       │   ├── LoadProjectPanel.tsx
│       │   └── UploadFiles.tsx
│       ├── LoadProjectWindow.tsx
│       ├── SettingsWindow
│       │   ├── CompilationServerArea.tsx
│       │   └── PersonalSettingsArea.tsx
│       └── SettingsWindow.tsx
├── index.css
├── localStyles.css
└── main.tsx

33 directories, 107 files

jsoules

A few recommended changes, a few relevant comments, and some less relevant ones...

Overall looks good. I've pulled and run locally and everything still seemed to be present & loaded fine, as far as I could tell.

jsoules · 2025-01-30T16:34:16Z

gui/ARCHITECTURE.md

+- **Areas** (`gui/src/app/areas`) are subdivisions of a page _with a_ unique
+  _purpose_. An area can contain other areas which serve distinct sub-purposes,
+  or one or more Panels.


Suggested change

- **Areas** (`gui/src/app/areas`) are subdivisions of a page _with a_ unique

_purpose_. An area can contain other areas which serve distinct sub-purposes,

or one or more Panels.

- **Areas** (`gui/src/app/areas`) are subdivisions of a page with a _unique

purpose_. An Area can contain other Areas which serve distinct sub-purposes,

or one or more Panels.

jsoules · 2025-01-30T16:35:16Z

gui/ARCHITECTURE.md

+- **Windows** (`gui/src/app/windows`) are Areas that use `CloseableDialogue`
+  to pop in and out rather than occupying real estate of the Page.
+
+- **Panels** are subdivisions of an area. Sibling panels should all be pushing


Suggested change

- **Panels** are subdivisions of an area. Sibling panels should all be pushing

- **Panels** are subdivisions of an area. Sibling Panels should all be pushing

jsoules · 2025-01-30T16:35:52Z

gui/ARCHITECTURE.md

+  to pop in and out rather than occupying real estate of the Page.
+
+- **Panels** are subdivisions of an area. Sibling panels should all be pushing
+  "in the same direction".


I'm not sure I understand "pushing in the same direction." Do you mean serving the same broader purpose? I originally understood it to mean something about the orientation of the sliders.

jsoules · 2025-01-30T16:53:16Z

gui/ARCHITECTURE.md

+  For example, the `SamplerOutputArea` area contains tabs for different views of the output.
+  Each of these tabs is one Panel -- while the draws as a table and the draws as
+  histograms are quite different from each other, they serve the same greater purpose


Suggested change

For example, the `SamplerOutputArea` area contains tabs for different views of the output.

Each of these tabs is one Panel -- while the draws as a table and the draws as

histograms are quite different from each other, they serve the same greater purpose

For example, the `SamplerOutputArea` Area contains tabs for different views of the output.

Each of these tabs is one Panel -- while the Panel that displays the draws as a table is

quite different from the Panel that displays the draws as histograms,

they serve the same greater purpose

jsoules · 2025-01-30T16:54:02Z

gui/ARCHITECTURE.md

+  For example, the `SamplerOutputArea` area contains tabs for different views of the output.
+  Each of these tabs is one Panel -- while the draws as a table and the draws as
+  histograms are quite different from each other, they serve the same greater purpose
+  of allowing the user to explore the result of the Stan run, which is their parent Areas


Suggested change

of allowing the user to explore the result of the Stan run, which is their parent Areas

of allowing the user to explore the result of the Stan run, which is their parent Area's

jsoules · 2025-01-30T17:34:44Z

gui/src/app/areas/ModelDataArea/ModelEditorPanel.tsx

@@ -53,7 +59,7 @@ const StanFileEditor: FunctionComponent<Props> = ({
    });

    // invalid syntax
-    if (!validSyntax && !!editedFileContent) {
+    if (!validSyntax && !!data.ephemera.stanFileContent) {


Not exactly germane to this PR, but my fingers are itching to move the button stuff to its own file, or at least find a way to make it less repetitive.

jsoules · 2025-01-30T17:36:11Z

gui/src/app/components/FileEditor/TextEditor.tsx

-import { ToolBar, ToolbarItem } from "@SpComponents/ToolBar";
-import { UserSettingsContext } from "@SpSettings/UserSettings";
-import { CodeMarker } from "@SpStanc/Linting";
+import { UserSettingsContext } from "@SpCore/Settings/UserSettings";


Didn't you say in the architecture doc that components shouldn't interact with contexts? (It is probably the right thing to do here, just noting it)

jsoules · 2025-01-30T17:41:06Z

gui/src/app/core/Settings/UserSettings.ts

@@ -1,5 +1,5 @@
 import { createContext } from "react";
-import { SettingsTab } from "./SettingsWindow";
+import { SettingsTab } from "@SpWindows/SettingsWindow";


Suggested change

import { SettingsTab } from "@SpWindows/SettingsWindow";

import { type SettingsTab } from "@SpWindows/SettingsWindow";

jsoules · 2025-01-30T17:41:37Z

gui/src/app/core/Settings/UserSettingsProvider.tsx

@@ -11,7 +11,7 @@ import {

 import { useDialogControls } from "@SpComponents/CloseableDialog";

-import { SettingsTab } from "./SettingsWindow";
+import { SettingsTab } from "@SpWindows/SettingsWindow";


Suggested change

import { SettingsTab } from "@SpWindows/SettingsWindow";

import { type SettingsTab } from "@SpWindows/SettingsWindow";

jsoules · 2025-01-30T17:58:18Z

gui/src/app/pages/TopBar.tsx

@@ -59,7 +69,22 @@ const TopBar: FunctionComponent<TopBarProps> = ({ title, onSetCollapsed }) => {
              <Brightness7 fontSize="inherit" />
            )}
          </IconButton>
-          <CompilationServerConnectionControl />
+          <IconButton


Inlining this component (from CompilationServerConnectionControl) is not unreasonable, it isn't super big, but it's somewhat less semantic.

WardBrian added 3 commits January 29, 2025 21:45

Reorganize frontend folder structure, nomeclature

e37b263

A few missed renames

6e504c0

More consistent importing

915bd33

jsoules approved these changes Jan 30, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reorganize frontend folder structure, nomeclature #266

Reorganize frontend folder structure, nomeclature #266

WardBrian commented Jan 29, 2025

jsoules left a comment

jsoules Jan 30, 2025 •

edited

Loading

jsoules Jan 30, 2025

jsoules Jan 30, 2025

jsoules Jan 30, 2025

jsoules Jan 30, 2025

jsoules Jan 30, 2025

jsoules Jan 30, 2025

jsoules Jan 30, 2025

jsoules Jan 30, 2025

jsoules Jan 30, 2025

	- Panels are subdivisions of an area. Sibling panels should all be pushing
	- Panels are subdivisions of an area. Sibling Panels should all be pushing

	of allowing the user to explore the result of the Stan run, which is their parent Areas
	of allowing the user to explore the result of the Stan run, which is their parent Area's

	import { SettingsTab } from "@SpWindows/SettingsWindow";
	import { type SettingsTab } from "@SpWindows/SettingsWindow";

Reorganize frontend folder structure, nomeclature #266

Are you sure you want to change the base?

Reorganize frontend folder structure, nomeclature #266

Conversation

WardBrian commented Jan 29, 2025

jsoules left a comment

Choose a reason for hiding this comment

jsoules Jan 30, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jsoules Jan 30, 2025 •

edited

Loading