Filters

XLSX to JSON Converter

Select an XLSX file. Each sheet will be converted. The output JSON will be an object with sheet names as keys.

Generated JSON Preview (first 3 records of first sheet):

Simulation Mode

Simulating impact for: N/A ()

Interactive Diagram Tutorial

Introduction

Welcome to the Interactive Process Diagram! This tool helps you visualize, analyze, and understand complex process flows and their dependencies. Use this guide to learn about its features.

Loading Data

There are a few ways to get your process data into the diagram:

• From SharePoint (Recommended for initial load):
  1. Go to Menu > Load from SharePoint.
  2. This will download an XLSX file. Save it to your computer.
  3. In the panel, select the downloaded XLSX file and click 'Convert and Load to Diagram'.
• Load JSON File: If you have a pre-formatted JSON file, use Menu > Load JSON.
• Load / Convert XLSX File: If you have an XLSX file (not from SharePoint or needing re-conversion), use Menu > Load / Convert XLSX. You can then either download the converted JSON or load it directly.

The diagram expects specific column headers in your data (e.g., "ID", "Short name", "WD", "Due time", "Dependencies", "Process Type").

Understanding Process Nodes & Diagram Area

• Each box (node) represents a process. It displays the "Short name".
• "WD" (Working Day) and "Due time" determine its position on the X (time/day) and Y (time of day) axes.
• Nodes can be of type "Standard", "Blocking" (shown with a 'B' symbol), or "Informational" (shown with an 'I' symbol). This affects dependency interpretation and can be set in your data or via the edit modal.
• Sticky axes (top and left) help you understand the timeline even when scrolled.

Navigating the Diagram

• Zoom: Use your mouse wheel to zoom in and out.
• Pan: Click and drag the diagram background to move around.
• Mini-Map: Toggle the Mini-Map using the 'M' button in the top right. It shows an overview and your current viewport.
• Reset View: Click 'Reset View' to return to the default zoom and position.

Filtering and Searching

• Filters: Click the 'Filters' button to open the filter panel. You can filter processes based on various attributes like "Company Codes", "Frequency", "WD", "Due time", etc. Click 'Apply Filters'.
• Search: Use the "Search processes..." bar to find nodes by ID, Short name, or Description. Matching nodes will be highlighted, others dimmed.
• Axis Filtering: Click on a WD label (e.g., "WD 0") on the top sticky X-axis or a time label (e.g., "08:00") on the left sticky Y-axis to filter processes for that specific day or hour. Click again to clear.

Interacting with Nodes

• Selection: Click on a node to select it.
  • The selected node will be highlighted.
  • Its direct inputs and outputs will also be highlighted with distinct colors.
  • Other non-related nodes will be dimmed.
  • Arrow lines will show dependencies to/from the selected node.
• Process Details: When a node is selected, its detailed information appears in the "Process Details" panel at the bottom. From here, you can edit the process or initiate a simulation.
• Dependency Tree Panel: When a node is selected, the Menu > Show Dependencies option becomes active. Click it to open a side panel showing a hierarchical tree of its inputs and outputs.

Editing Dependencies

1. Go to Menu > Enable Dependency Editing.
2. Click on a process node to select it.
3. To add a dependency:
   • A green '+' handle will appear on the right side of the selected node.
   • Click and drag this '+' handle to another process node (the target).
   • When you release the mouse button over the target node, a context menu will appear. Select the type of dependency: "Standard", "Blocking", or "Informational".
4. To remove a dependency:
   • Red '-' handles will appear on the top-right of nodes that are direct outputs of the selected node.
   • Click the '-' handle on a dependent node to remove that specific link.
5. Disable editing via Menu > Disable Dependency Editing.

Dependencies are stored in the "Dependencies" field of a process, separated by semicolons (e.g., ID1;ID2_B;ID3_I). Suffixes _B and _I denote Blocking and Informational types, respectively.

Simulation Mode

This mode allows you to see the potential impact of changes without altering your actual data.

1. Select a process node.
2. In the "Process Details" panel, click the 'Simulate Impact' button.
3. The Simulation Panel will open. Choose a simulation type:
   • Remove Process: See what happens if the target process is removed.
   • Shift Process: Change the target process's WD and/or Due Time to see effects.
   • Add Process (Simulate): Define a new process (ID, WD, Time, Dependencies) to see how its addition would affect the flow around the initially selected process.
4. Click 'Run Simulation'. The diagram will update to show:
   • The target node (removed, shifted, or newly added).
   • Affected dependent nodes (e.g., those losing an input, potentially delayed outputs, or inputs with timing conflicts).
   • A summary of impacts will be listed in the panel.
5. Click 'Update Simulation' to try different parameters, or 'End Simulation' to return to normal view. You can also 'Export Simulation Report'.

Presentation Mode

Click the 'Presentation' button for a clean, full-screen view ideal for showcasing the diagram. Most UI controls are hidden. Click 'Presentation' again to exit.

View Configurations

• Save View: After setting up desired filters, colors (via the 'Colours 🎨' toggle), and process type views, go to Menu > Save View Config to save this setup with a name.
• Load View: Use the "Load View:" dropdown in the Menu to quickly apply a previously saved configuration.
• Delete View: Use the trash icon next to "Load View:" in the Menu to delete saved configurations.

Common Errors & Tips

• "JSON Parse Error" / "Error reading file": The JSON file you're trying to load is invalid. Check its syntax carefully (e.g., for missing commas, quotes, brackets). Online JSON validators can help.
• "XLSX Validation Failed": The XLSX file is missing critical columns like "ID", "WD", or "Due time", or the data in these columns is not in the expected format (e.g., "WD" should be a number, "Due time" should be HH:MM:SS). Check the specific error messages in the Converter panel.
• "Process not found": An action (like editing or simulation) was attempted on a process ID that doesn't exist in the currently loaded data or selected sheet view.
• Performance: Very large diagrams (many thousands of nodes or complex dependencies) might experience slower rendering or interactions. Filtering data to smaller subsets can help.
• Saving Data: Changes made (like adding/editing processes or dependencies) are currently stored in your browser's local storage. To permanently save changes to a file, use Menu > Export XLSX.