MVI system architecture case study


Posted: 07 Jul 2025. Last modified on 07-Jul-25.

This article will take about 5 minutes to read.



digraph CombinedMVISystemStrict {
    rankdir=LR; // Layout from left to right for main flow

    // --- Global Node Styles ---
    // Processors: Clear Blue Boxes (Action-oriented nodes)
    node [shape=box, style=filled, fillcolor="#AEC6CF", color="#2F4F4F", fontcolor=black, penwidth=2];
    // States: Clear Green Ellipses (Data-oriented nodes)
    node [shape=ellipse, style=filled, fillcolor="#C1E1C1", color="#006400", fontcolor=black, penwidth=2];
    // Views: Rectangles with a distinct light purple fill
    node [shape=rect, style=filled, fillcolor="#D8BFD8", color="#800080", fontcolor=black, penwidth=2];
    // Events: Pink CDS (Control/Input nodes)
    node [shape=cds, style=filled, fillcolor="#FFD1DC", color="#8B0000", fontcolor=black, penwidth=2];
    // Feature Gate Specific Nodes (Specialized styling for key logic)
    node [shape=diamond, style=filled, fillcolor="#FFD700", color="#B8860B", fontcolor=black, penwidth=2]; // Feature Gate Processor
    node [shape=doubleoctagon, style=filled, fillcolor="#ADD8E6", color="#4682B4", fontcolor=black, penwidth=2]; // Feature Config State


    // --- Cluster: Sign In Screen ---
    subgraph cluster_signInScreen {
        label="Sign In Screen";
        style=filled;
        fillcolor=lightgray;
        color=dimgray;
        penwidth=2;

    node [shape=cds, style=filled, fillcolor="#FFD1DC", color="#8B0000", fontcolor=black, penwidth=2];

        // Events
        "SignInAttemptEvent" [label="Sign In Attempt\n(User, Pass)"];
        "UsernameChangedEvent" [label="Username Changed"];
        "PasswordChangedEvent" [label="Password Changed"];
        "SignUpClickedEvent" [label="Sign Up Clicked"];
        "ForgotPasswordClickedEvent" [label="Forgot Password Clicked"];


    node [shape=box, style=filled, fillcolor="#AEC6CF", color="#2F4F4F", fontcolor=black, penwidth=2];

        // Processors
        "SignInProcessor" [label="Sign In Processor"];
        "InputValidationProcessor" [label="Input Validation Processor"];
        "NavigationProcessor" [label="Navigation Processor"];
        "NetworkProcessor" [label="Network Processor"];

    node [shape=ellipse, style=filled, fillcolor="#C1E1C1", color="#006400", fontcolor=black, penwidth=2];

        // States
        "SignInState" [label="Sign In State\n(isLoading, error, isAuthenticated)"];
        "AccountState" [label="Account State\n(tier: Free/Premium/Admin)"];
        "NetworkState" [label="Network State\n(isConnected: bool)"];

    node [shape=diamond, style=filled, fillcolor="#FFD700", color="#B8860B", fontcolor=black, penwidth=2]; // Feature Gate Processor

        // Feature Gating Logic Components
        "FeatureGateProcessor" [label="Feature Gate Processor"];
            node [shape=doubleoctagon, style=filled, fillcolor="#ADD8E6", color="#4682B4", fontcolor=black, penwidth=2]; // Feature Config State

        "FeatureConfigState" [label="Feature Config State\n(isSignUpEnabled, isPremiumRoutesEnabled, isSharingEnabled)"];

    node [shape=rect, style=filled, fillcolor="#D8BFD8", color="#800080", fontcolor=black, penwidth=2];

        // View
        "SignInView" [label="Sign In View"];
    }

    // --- Cluster: Map Screen ---
    subgraph cluster_mapScreen {
        label="Map Screen & Features";
        style=filled;
        fillcolor=honeydew;
        color=darkgreen;
        penwidth=2;

    node [shape=cds, style=filled, fillcolor="#FFD1DC", color="#8B0000", fontcolor=black, penwidth=2];

        // Core Map Events
        "MapLoadedEvent" [label="Map Loaded"];
        "LocationSelectedEvent" [label="Location Selected\n(Lat, Lng)"];
        "RouteRequestedEvent" [label="Route Requested\n(Destination)"];
        "SearchQueryEvent" [label="Search Query\n(Text)"];
        "TrafficToggleEvent" [label="Traffic Toggle"];
        "POIsToggleEvent" [label="POIs Toggle"];
        "SatelliteViewToggleEvent" [label="Satellite View Toggle"];

        // Complex Feature: Real-time Location Sharing Events
        "StartSharingEvent" [label="Start Sharing"];
        "StopSharingEvent" [label="Stop Sharing"];
        "ShareLinkCopiedEvent" [label="Share Link Copied"];
        "SharingSessionExpiredEvent" [label="Sharing Session Expired"];
        "RecipientJoinedEvent" [label="Recipient Joined"];

    node [shape=box, style=filled, fillcolor="#AEC6CF", color="#2F4F4F", fontcolor=black, penwidth=2];

        // Core Map Processors
        "MapLoaderProcessor" [label="Map Loader Processor"];
        "LocationSelectionProcessor" [label="Location Selection Processor"];
        "RouteCalculationProcessor" [label="Route Calculation Processor"];
        "SearchProcessor" [label="Search Processor"];
        "FeatureToggleProcessor" [label="Feature Toggle Processor"];

        // Complex Feature: Real-time Location Sharing Processors
        "SharingSessionProcessor" [label="Sharing Session Processor"];
        "LocationBroadcastProcessor" [label="Location Broadcast Processor"];

    node [shape=ellipse, style=filled, fillcolor="#C1E1C1", color="#006400", fontcolor=black, penwidth=2];

        // Core Map States
        "MapLoadingState" [label="Map Loading State\n(isLoading, error)"];
        "MapReadyState" [label="Map Ready State\n(center, zoom, visibleArea)"];
        "RouteDisplayState" [label="Route Display State\n(routeData, ETA)"];
        "SearchResultsState" [label="Search Results State\n(resultsList, selectedResult)"];
        "MapFeaturesState" [label="Map Features State\n(showTraffic, showPOIs, isSatellite)"];

        // Complex Feature: Real-time Location Sharing States
        "SharingOffState" [label="Sharing Off State"];
        "SharingStartingState" [label="Sharing Starting State\n(awaiting ID)"];
        "SharingActiveState" [label="Sharing Active State\n(sessionId, viewers, link)"];
        "SharingStoppingState" [label="Sharing Stopping State\n(ending session)"];
        "SharingErrorState" [label="Sharing Error State\n(errorMessage)"];

    node [shape=rect, style=filled, fillcolor="#D8BFD8", color="#800080", fontcolor=black, penwidth=2];

        // View
        "MapView" [label="Map View"];
    }

    // --- Other Screen Clusters ---
    subgraph cluster_signUpPageScreen {
        label="Sign Up Page";
        style=filled; fillcolor=lavenderblush; color=darkmagenta; penwidth=2;
        "SignUpPageState" [label="Sign Up Page State"];
        "SignUpView" [label="Sign Up View"];
    }

    subgraph cluster_forgotPasswordPageScreen {
        label="Forgot Password Page";
        style=filled; fillcolor=lightcyan; color=darkblue; penwidth=2;
        "ForgotPasswordPageState" [label="Forgot Password Page State"];
        "ForgotPasswordView" [label="Forgot Password View"];
    }

    subgraph cluster_homePageScreen { // Placeholder for a landing page after sign-in before map
        label="Home Page (Bridge)";
        style=filled; fillcolor=gold; color=darkorange; penwidth=2;
        "HomePageState" [label="Home Page State\n(User Data)"];
        "HomeView" [label="Home View"];
        "NavigateToMapEvent" [label="Navigate To Map"];
    }


    // --- Flow (Edges) ---

    // --- Sign-In Screen Internal Flow ---
    "UsernameChangedEvent" -> "InputValidationProcessor" [label=""];
    "PasswordChangedEvent" -> "InputValidationProcessor" [label=""];
    "InputValidationProcessor" -> "SignInState" [label="updates validation"];

    "SignInAttemptEvent" -> "SignInProcessor" [label=""];
    "SignInProcessor" -> "SignInState" [label="updates isAuthenticated, error"];
    "SignInProcessor" -> "AccountState" [label="updates tier on success"];

    "NetworkStatusChangeEvent" [label="Network Status Change"]; // External event
    "NetworkStatusChangeEvent" -> "NetworkProcessor" [label=""];
    "NetworkProcessor" -> "NetworkState" [label="updates connectivity"];

    // --- Feature Gating Logic Flow (Originates from Sign-In Cluster) ---
    "SignInState" -> "FeatureGateProcessor" [label="isAuthenticated"];
    "AccountState" -> "FeatureGateProcessor" [label="tier"];
    "NetworkState" -> "FeatureGateProcessor" [label="isConnected"];
    "FeatureGateProcessor" -> "FeatureConfigState" [label="calculates enabled features"];

    // --- Navigation Flow (from Sign-In to Other Screens) ---
    // Navigation Processor influenced by FeatureConfigState
    "FeatureConfigState" -> "NavigationProcessor" [label="informs which nav enabled"];
    "SignUpClickedEvent" -> "NavigationProcessor" [label=""];
    "NavigationProcessor" -> "SignUpPageState" [label="navigates to"];
    "ForgotPasswordClickedEvent" -> "NavigationProcessor" [label=""];
    "NavigationProcessor" -> "ForgotPasswordPageState" [label="navigates to"];

    // Successful Sign-In to Home Page
    "SignInProcessor" -> "HomePageState" [label="on successful sign in"];
    "HomePageState" -> "NavigateToMapEvent" [label="user/auto navigation"];

    // --- Home Page to Map Screen Transition ---
    "NavigateToMapEvent" -> "MapLoaderProcessor" [label="initiates map load"];

    // --- Map Screen Internal Flow ---
    "MapLoadedEvent" -> "MapLoaderProcessor" [label=""];
    "MapLoaderProcessor" -> "MapLoadingState" [label="updates"];
    "MapLoadingState" -> "MapReadyState" [label="on success"];

    "LocationSelectedEvent" -> "LocationSelectionProcessor" [label=""];
    "LocationSelectionProcessor" -> "MapReadyState" [label="updates center"];

    "SearchQueryEvent" -> "SearchProcessor" [label=""];
    "SearchProcessor" -> "SearchResultsState" [label="updates results"];
    "SearchProcessor" -> "MapReadyState" [label="updates markers"];

    "TrafficToggleEvent" -> "FeatureToggleProcessor" [label=""];
    "POIsToggleEvent" -> "FeatureToggleProcessor" [label=""];
    "SatelliteViewToggleEvent" -> "FeatureToggleProcessor" [label=""];
    "FeatureToggleProcessor" -> "MapFeaturesState" [label="updates flags"];
    "FeatureToggleProcessor" -> "MapReadyState" [label="updates map layers"];

    // Complex Feature: Real-time Location Sharing Flow
    "StartSharingEvent" -> "SharingSessionProcessor" [label="request session"];
    "SharingSessionProcessor" -> "SharingStartingState" [label="set to starting"];
    "SharingSessionProcessor" -> "SharingActiveState" [label="on session established"];
    "SharingSessionProcessor" -> "SharingErrorState" [label="on session error"];

    "SharingActiveState" -> "LocationBroadcastProcessor" [label="start broadcasting"];
    "LocationBroadcastProcessor" -> "SharingActiveState" [label="periodically updates"];

    "StopSharingEvent" -> "SharingSessionProcessor" [label="request stop"];
    "SharingSessionProcessor" -> "SharingStoppingState" [label="set to stopping"];
    "SharingSessionProcessor" -> "SharingOffState" [label="on stopped"];

    "SharingSessionExpiredEvent" -> "SharingSessionProcessor" [label="system triggered"];
    "SharingSessionProcessor" -> "SharingOffState" [label="forced off"];

    "RecipientJoinedEvent" -> "SharingSessionProcessor" [label="update viewer count"];
    "SharingSessionProcessor" -> "SharingActiveState" [label="updates viewers"];

    "ShareLinkCopiedEvent" -> "MapView" [label="confirm copy", arrowhead=none, style=dotted];

    // --- Feature Gating Impact on Map Features ---
    "FeatureConfigState" -> "RouteCalculationProcessor" [label="gates access to premium routes"];
    "FeatureConfigState" -> "SharingSessionProcessor" [label="gates access to sharing"];
    "FeatureConfigState" -> "MapView" [label="enables/disables map UI buttons"];

    // --- State to View Rendering ---
    "SignInState" -> "SignInView" [label="renders form"];
    "FeatureConfigState" -> "SignInView" [label="configures UI elements"];

    "HomePageState" -> "HomeView" [label="renders page"];

    "MapLoadingState" -> "MapView" [label="renders progress"];
    "MapReadyState" -> "MapView" [label="renders map, markers"];
    "RouteDisplayState" -> "MapView" [label="renders route overlay"];
    "SearchResultsState" -> "MapView" [label="renders search list"];
    "MapFeaturesState" -> "MapView" [label="updates map type/layers"];
    "SharingOffState" -> "MapView" [label="renders 'Share' button"];
    "SharingStartingState" -> "MapView" [label="renders 'Starting...'"];
    "SharingActiveState" -> "MapView" [label="renders 'Sharing Active', viewers, link"];
    "SharingStoppingState" -> "MapView" [label="renders 'Stopping...'"];
    "SharingErrorState" -> "MapView" [label="renders error message"];

    "SignUpPageState" -> "SignUpView" [label="renders page"];
    "ForgotPasswordPageState" -> "ForgotPasswordView" [label="renders page"];

    // --- View to Event Generation ---
    "SignInView" -> "UsernameChangedEvent" [label="user input"];
    "SignInView" -> "PasswordChangedEvent" [label="user input"];
    "SignInView" -> "SignInAttemptEvent" [label="button click"];
    "SignInView" -> "SignUpClickedEvent" [label="button click"];
    "SignInView" -> "ForgotPasswordClickedEvent" [label="button click"];

    "HomeView" -> "NavigateToMapEvent" [label="user click"];

    "MapView" -> "MapLoadedEvent" [label="view ready"];
    "MapView" -> "LocationSelectedEvent" [label="user tap"];
    "MapView" -> "RouteRequestedEvent" [label="user input"];
    "MapView" -> "SearchQueryEvent" [label="user input"];
    "MapView" -> "TrafficToggleEvent" [label="button click"];
    "MapView" -> "POIsToggleEvent" [label="button click"];
    "MapView" -> "SatelliteViewToggleEvent" [label="button click"];
    "MapView" -> "StartSharingEvent" [label="button click"];
    "MapView" -> "StopSharingEvent" [label="button click"];
    "MapView" -> "ShareLinkCopiedEvent" [label="copy button"];
}