[Research] Comprehensive research on how saved objects are stored and fetched in VisBuilder

[SheyGao]

Research Subject

Understanding Object Saving and Fetching Mechanisms in VisBuilder

Objective

The primary objective of this research is to trace and comprehend the mechanisms through which objects are saved and fetched within VisBuilder. By thoroughly understanding these processes, we aim to facilitate the design and implementation of a robust migration function. This function will convert saved objects in traditional visualizations to saved objects in VisBuilder. Understanding the intricacies of how objects are stored and retrieved is essential to ensure that the migration process is seamless, accurate, and efficient, thereby maintaining data integrity and enhancing overall system performance.

Tracing

1. How Saved Objects are Saved in VisBuilder 1.1 Clicking on save button triggers the saveModal: get_top_nav_config.tsx

1.2 getOnSave called onSave: get_top_nav_config.tsx

1.3 onSave called save: get_top_nav_config.tsx

1.2 save: build_saved_objects.ts It is an asynchronous function that attempts to save the object using the saveSavedObject function. If the save operation is successful, it resolves the promise with the result; if an error occurs, it rejects the promise with the error.

1.3 saveSavedObject: save_saved_object.ts The object is serialized by calling savedObject._serialize(), which prepares its attributes and references for saving. If the extractReferences option is enabled, it processes the attributes and references to extract any additional references, ensuring that all dependencies are captured.

1.4 : _serialize: build_saved_object.ts

1.5 serializeSavedObject: serialize_saved_object.ts It begins by expanding the shorthand mapping from the configuration and initializing empty objects for attributes and references. The function iterates over the mapping, checking if each field name is a string and then either serializing its value using a provided _serialize function or directly assigning it to attributes. If the object has searchSourceFields, this snippet extracts these fields and their references. The fields are serialized into searchSourceJSON and stored in kibanaSavedObjectMeta. The extracted references are appended to the existing references, ensuring all search source dependencies are captured and stored.

1.6 : extractSearchSourceReferences: extract_references.ts This function processes the state to extract references related to search source fields and filters. It creates a list of references and modifies the state to replace actual references with reference names. For example, index and filter references are identified and replaced with reference names while their details are stored in the references array. The modified search source fields and the list of references are then returned.

2. How Saved Objects are Fetched in VisBuilder

2.1 When we start to fetch the VisBuilder saved object:

2.2 renderApp: index.tsx

2.3 VisBuilderApp: app.tsx

2.4 TopNav: top_nav.tsx

2.5 useSavedVisBuilderVis: use_saved_vis_builder_vis.ts

• The function begins by dispatching an action to set the editor state to 'loading'. This is done to indicate that the application is currently in the process of loading the saved visualization data.
• The function calls getSavedVisBuilderVis, passing in the savedVisBuilderLoader and the visualizationIdFromUrl. This function is an asynchronous call that retrieves the saved visualization object based on the provided ID.
• Once the saved visualization is fetched, the function checks if it contains an ID, indicating a valid saved object. If a valid saved object is found, it extracts the title and state from the saved object using getStateFromSavedObject.
• The application's breadcrumbs and document title are updated to reflect the title of the loaded visualization.
• The initial filters and query from the saved object are synchronized with the application's filter manager and query string manager.
• The state of the UI, style, and visualization is dispatched to their respective slices in the application's store.
• If the saved object is not found or contains invalid JSON properties, appropriate error handling and user notifications are triggered. This includes redirecting the user or displaying toast notifications.
• After successfully fetching and dispatching the state, the function sets the editor state to 'clean', indicating that the application is ready and the visualization is fully loaded.

3. VisBuilder Fields and Corresponding Slice/Action to Dispatch