Skip to content
Zhaoyi Shi edited this page Jul 20, 2025 · 3 revisions

The file files.ts consists of functions related to exporting a graphState as a file. All functions are applied only in GraphCard.tsx

Functions

saveFile

Takes as inputs data, any type of data we want to export, name, name we want to assign to the resulting file, and creates and exports a corresponding JSON file.

Used until now only to export .txt file for a given typescript graph, GraphTS.

readFile

translateTolatex

Takes as inputs data, a typescript graph, algorithmName, the name of algorithm running on the graph, and returns a string, representing the "translated" tikz-code of that graph and all its relevant properties.

saveTex

Analog to saveFile, but intented for the export of the corresponding latex-code file and such takes as input specifically a typescript graph in data and additionaly the name of the algorithm currently running on the graph, which are forwarded to an instance of the graphTolatex function.

graphTolatex

Takes as inputs data, a typescript graph, algorithmName, the name of the algorithm running on the graph, and returns string containing necessary latex headers for the tikz-code together with the return of 'translateTolatex' with the same inputs.

saveHistory

Analog to 'saveTex', but intented for the export of the entire history of graph states gone through. Additionally takes as inputs the pointers of the 3 property functions of the IAlgorithmStore instance: getVisState(no need for the concrete graph in data),prevStep, and nextStep, which all are forwarded to an instance of the historyTolatex function.

historyTolatex

Takes as inputs algorithmName, name of the algorithm running on the graph, and functions: getVisState,prevState,nextState. Firstly, the function loops through the history with prevState until we find the first graph state and counting the number of steps we take. Since we can only compare pointers there is no direct way to check if we find the first graph state, so we use a heuristic, constant variable maxNumberOfLinesInAlgo. If we go through more than maxNumberOfLinesInAlgo amount of steps with no change in the graph than we know we surely are at the first state. If new algorithms are added this constant can be adapted appropriately.

In the end we go forwards from the found first graph state the same amount of total steps and print only non redundant states (where properties of the graph change).

get-TSgraph-stats

This utility computes summary statistics for a graph represented in TypeScript. Given a GraphTS object and a flag indicating whether it is directed, it calculates various structural metrics, including:

  • Number of nodes and edges
  • Average degree, in-degree, out-degree
  • Maximum degrees (total/in/out)
  • Number of isolated and leaf nodes
  • Graph density

These statistics are useful for visualizing graph metadata or analyzing structural properties before or after running an algorithm.

safe-navigate

This file defines useSafeNavigate, a hook that wraps React Router's useNavigate. It ensures walkthroughs are unmounted before navigation and restored afterward, preventing visual glitches caused by DOM element not fading as React.animatedroutes.

Internally, it uses pauseWalkthroughs from the Zustand walkthrough store to control visibility around navigation:

const navigate = useSafeNavigate();
navigate("/somewhere");

One can expand this function to unmount any animated router-incompatible components.

Use this as a drop-in replacement for useNavigate in any component involved in walkthrough flows or route transitions.

Clone this wiki locally