diff --git a/doc/Development.md b/doc/Development.md index 4fe39e19..8d3fd892 100644 --- a/doc/Development.md +++ b/doc/Development.md @@ -31,3 +31,85 @@ Automated integration tests using `cypress`. ``` The tests produce screenshots on failure. In the Github-CI, failing tests will produce screenshots and videos which will be attached as artifacts for inspection. + +### Application Design + +#### Atom structure + +The project uses various jotai atoms to describe the internal state. Below is an overview. Downwards-arrows mean the lower atom depends on the upper one, upwards arrows (red) mean the setter of the lower atom writes the upper one. Dotted lines are "setter-only". + +The colors symbolise outside influence: queries (blue), the page url (orange) or browser storage (green). Red atoms are "setter-only". + +Atoms which are considered "prinicipal input" are in a rhomboid. + +```mermaid +graph TD; + + %% getter + urlArgsAtom-->urlArgsStableAtom; + urlArgsStableAtom-->importUrlAtom; + importUrlAtom-->importedCodeQueryAtom; + importedCodeQueryAtom-->importedCodeAtom; + projectsQueryAtom-->projectsAtom + projectsAtom-->defaultProjectAtom; + projectsAtom-->currentProjectAtom; + defaultProjectAtom-->currentProjectAtom; + projectsAtom-->visibleProjectsAtom; + currentProjectAtom-->visibleProjectsAtom; + codeAtom[/codeAtom/] + urlArgsStableAtom-->codeAtom; + importedCodeAtom-->codeAtom; + locationAtom-->settingsUrlAtom; + settingsUrlAtom-->settingsUrlStableAtom; + settingsAtom[/settingsAtom/] + settingsUrlStableAtom-->settingsAtom; + settingsAtom-->mobileAtom; + + %% getter and setter + locationAtom<-->urlArgsAtom; + importUrlBaseAtom<-->importUrlAtom; + urlArgsAtom<-->currentProjectAtom; + settingsBaseAtom<-->settingsAtom; + settingsStoreAtom<-->settingsAtom; + + %% setter + importUrlAtom -.-> urlArgsAtom; + codeAtom -.-> urlArgsAtom; + settingsAtom -.-> locationAtom; + + setImportUrlAndProjectAtom[/setImportUrlAndProjectAtom/] + importUrlAtom <-.-> setImportUrlAndProjectAtom + currentProjectAtom <-.-> setImportUrlAndProjectAtom + + %% Styles + + linkStyle 16 stroke: red; + linkStyle 17 stroke: red; + linkStyle 18 stroke: red; + linkStyle 19 stroke: red; + linkStyle 20 stroke: red; + linkStyle 21 stroke: red; + linkStyle 22 stroke: red; + linkStyle 23 stroke: red; + linkStyle 24 stroke: red; + linkStyle 25 stroke: red; + + classDef query fill:#d0ebff,stroke:#1c7ed6,stroke-width:2px; + classDef storage fill:#d3f9d8,stroke:#2b8a3e,stroke-width:2px; + classDef location fill:#ffe8cc,stroke:#e8590c,stroke-width:2px; + classDef setter fill:#fff5f5,stroke:#e03131,stroke-width:2px; + + %% Location atoms + class locationAtom location; + + %% Query atoms + class importedCodeQueryAtom query; + class projectsQueryAtom query; + + %% Storage atoms + class settingsStoreAtom storage; + + %% Setter + class setImportUrlAndProjectAtom setter; + class applySettingsAtom setter; +```