Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

systems tree Test using react flow #1273

Draft
wants to merge 4 commits into
base: develop
Choose a base branch
from
Draft

systems tree Test using react flow #1273

wants to merge 4 commits into from
+1,196 −5

Conversation

joshuadkitenge
Copy link
Collaborator

Description

Testing instructions

  • Review code
  • Check Actions build
  • Review changes to test coverage
  • {more steps here}

Agile board tracking

closes #1272

@codecov Codecov
Copy link

codecov bot commented Jan 23, 2025 •
edited
Loading

❌ 2 Tests Failed:

Tests completed Failed Passed Skipped
717 2 715 1
View the top 2 failed tests by shortest run time 
src/systems/systemsLayout.component.test.tsx > Systems Layout > renders units breadcrumbs correctly
Stack Traces | 0.203s run time 
Error: Snapshot `Systems Layout > renders units breadcrumbs correctly 1` mismatched

- Expected
+ Received

@@ -79,7 +79,61 @@
              </li>
            </ol>
          </nav>
        </div>
      </div>
+     <div
+       aria-label="view mode toggle"
+       class="MuiToggleButtonGroup-root css-1qa1b2z-MuiToggleButtonGroup-root"
+       role="group"
+     >
+       <button
+         aria-label="normal view"
+         aria-pressed="true"
+         class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root Mui-selected MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButtonGroup-firstButton css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+         tabindex="0"
+         type="button"
+         value="normal"
+       >
+         <svg
+           aria-hidden="true"
+           class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-15ikgma-MuiSvgIcon-root"
+           data-testid="ViewModuleIcon"
+           focusable="false"
+           viewBox="0 0 24 24"
+         >
+           <path
+             d="M14.67 5v6.5H9.33V5zm1 6.5H21V5h-5.33zm-1 7.5v-6.5H9.33V19zm1-6.5V19H21v-6.5zm-7.34 0H3V19h5.33zm0-1V5H3v6.5z"
+           />
+         </svg>
+         Normal View
+         <span
+           class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+         />
+       </button>
+       <button
+         aria-label="tree view"
+         aria-pressed="false"
+         class="MuiButtonBase-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButton-root MuiToggleButton-sizeSmall MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal MuiToggleButtonGroup-lastButton css-1x4vipr-MuiButtonBase-root-MuiToggleButton-root"
+         tabindex="0"
+         type="button"
+         value="tree"
+       >
+         <svg
+           aria-hidden="true"
+           class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-15ikgma-MuiSvgIcon-root"
+           data-testid="AccountTreeIcon"
+           focusable="false"
+           viewBox="0 0 24 24"
+         >
+           <path
+             d="M22 11V3h-7v3H9V3H2v8h7V8h2v10h4v3h7v-8h-7v3h-2V8h2v3z"
+           />
+         </svg>
+         Tree View
+         <span
+           class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+         />
+       </button>
+     </div>
    </div>
  </DocumentFragment>

 ❯ src/systems/systemsLayout.component.test.tsx:58:31
src/systems/systemsLayout.component.test.tsx > Systems Layout > renders root systems correctly
Stack Traces | 0.314s run time 
Error: Snapshot `Systems Layout > renders root systems correctly 1` mismatched

- Expected
+ Received

@@ -39,11 +39,19 @@
            aria-label="breadcrumb"
            class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-1mc59t7-MuiTypography-root-MuiBreadcrumbs-root"
          >
            <ol
              class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
-           />
+           >
+             <li
+               class="MuiBreadcrumbs-li"
+             >
+               <div
+                 class="MuiBox-root css-8zy5qf"
+               />
+             </li>
+           </ol>
          </nav>
        </div>
      </div>
    </div>
  </DocumentFragment>

 ❯ src/systems/systemsLayout.component.test.tsx:48:31

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

@joshuadkitenge joshuadkitenge force-pushed the systems-tree-test-#1272 branch from f6bb761 to fe3429d Compare January 23, 2025 11:43
@joshuadkitenge
Copy link
Collaborator Author

image
image

@joshuadkitenge joshuadkitenge force-pushed the systems-tree-test-#1272 branch from d9896f2 to d43bbdc Compare January 24, 2025 21:55
@joshuadkitenge joshuadkitenge force-pushed the systems-tree-test-#1272 branch from d43bbdc to c612ffd Compare January 24, 2025 23:29
@joshuadkitenge
Copy link
Collaborator Author

image

@joshuadkitenge
Copy link
Collaborator Author

joshuadkitenge commented Jan 27, 2025 •
edited
Loading

Move systemTreeFunciton out off systems.tsx. This can be optimized if reactquery and caching is used for catalogue items

@joshuadkitenge
Copy link
Collaborator Author

Optimizations in getSystemTree function:

  1. Catalogue Item Caching (Map):

    • A catalogueItemCache (Map) is used to store already fetched catalogue items.
    • This avoids repeated calls to getCatalogueItem(id) for the same catalogue_item_id.
    • Benefit: Reduces the number of network/database requests, improving performance and reducing latency, especially when multiple systems reference the same catalogue item.

  2. Total Subsystems Count Tracking:

    • A shared totalSubsystems counter object is passed recursively.
    • If the total subsystems exceed maxSubsystems, an AxiosError is thrown to stop the recursion immediately.
    • Benefit: Prevents fetching unnecessary data when the limit is reached, saving both processing time and resources.

  3. Cutoff Point Handling (subsystemsCutOffPoint):

    • If totalSubsystems.count exceeds the cutoff point (subsystemsCutOffPoint), the recursion stops and returns only the current level systems without their subsystems.
    • Benefit: Further limits the depth and breadth of the recursive operation, keeping the response size manageable.

  4. Maximum Depth Limitation:

    • The recursion is controlled using the maxDepth parameter to prevent traversing unnecessarily deep levels.
    • Benefit: Allows the client to fetch only the required depth of data, reducing overhead.

Why These Optimizations Were Done:

  • The system tree fetching process involves recursion and potentially large datasets.
  • These optimizations ensure that the function remains efficient and scalable, especially in scenarios with many interconnected systems or catalogue items.
  • They also help avoid overloading the backend or exceeding resource limits, while maintaining a good user experience by delivering data promptly.

@joshuadkitenge joshuadkitenge force-pushed the systems-tree-test-#1272 branch from 183208d to 7160fd9 Compare January 28, 2025 14:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

systems tree testing using react flow #1273
1 participant
@joshuadkitenge