DynamoHome CLAUDE.md

DynamoHome

DynamoHome is the start page for Dynamo, an Autodesk visual programming tool. It is a React 18 SPA that runs inside a Chrome WebView (Edge WebView2) embedded in the Dynamo desktop application — not in a standalone browser. It is published to npm as @dynamods/dynamo-home.

Architecture

App.tsx                          # IntlProvider (localization) + SettingsProvider
└── LayoutContainer.tsx          # SplitPane: resizable sidebar + main content
    ├── Sidebar.tsx              # Left nav: page switching, custom dropdowns
    │   └── CustomDropDown.tsx
    └── MainContent.tsx          # Renders active page based on sidebar state
        ├── PageRecent.tsx       # Recent Dynamo files — grid or table view
        │   ├── GraphGridItem.tsx
        │   └── GraphTable.tsx   # react-table with custom cell renderers
        │       ├── CustomNameCellRenderer.tsx
        │       ├── CustomLocationCellRenderer.tsx
        │       └── CustomAuthorCellRenderer.tsx
        ├── PageSamples.tsx      # Sample graphs — grid or table view
        │   ├── SamplesGrid.tsx → SamplesGridItem.tsx
        │   └── SamplesTable.tsx → CustomSampleFirstCellRenderer.tsx
        └── PageLearning.tsx     # Learning resources — guides + video carousels
            ├── Carousel.tsx
            ├── GuideGridItem.tsx
            ├── ModalItem.tsx
            └── VideoCarouselItem.tsx

src/components/Common/           # Shared across modules
  CardItem.tsx  Arrow.tsx  Tooltip.tsx  Portal.tsx  CustomIcons.tsx

• No routing library — page switching is state in MainContent.tsx
• No Redux or external state — React Context (SettingsContext.tsx) + useState only
• public/index.html has two roots: #root (React) and #modal-root (Portal target)

Data flow

Dynamo (.NET host)
  │  calls window globals on the app:
  ├─ window.receiveGraphDataFromDotNet(json)              → PageRecent state
  ├─ window.receiveSamplesDataFromDotNet(json)            → PageSamples state
  ├─ window.receiveTrainingVideoDataFromDotNet(json)      → PageLearning state
  ├─ window.receiveInteractiveGuidesDataFromDotNet(json)  → PageLearning state
  ├─ window.setLocale(locale)                             → re-renders with new locale
  ├─ window.setHomePageSettings(settingsJson)             → SettingsContext hydration
  └─ window.setShowStartPageChanged(show)                 → loading overlay

  │  app calls back into Dynamo via:
  └─ window.chrome.webview.hostObjects.scriptObject.*     → all calls go through src/functions/utility.ts