4.12 Saved Conditional Searches

The conditional search user interface optionally supports saved searches (list of saved conditional search configurations) when you provide:

• savedSearchProvider: Callbacks for persistence operations
• savedSearches: List that is displayed in the user interface.

If savedSearchProvider is not provided, savedSearches is disabled.

In the following example, saved-search support is enabled by providing both savedSearches and savedSearchProvider to the conditional search functionality in the user interface. The sample code uses localStorage as the data store. The upsert and remove implementations update and delete entries, respectively, persist the result, and then refresh savedSearches and the component so the user interface remains synchronized with the persisted state.

// This import is not necessary if you are using Oracle JET.
import '@ovis/graph/alta.css';
import Visualization from '@gvt/graphviz';

const SAVED_KEY = 'my-app-saved-searches';

function loadSavedSearches() {
  try {
    const parsed = JSON.parse(localStorage.getItem(SAVED_KEY) || '[]');
    return Array.isArray(parsed) ? parsed : [];
  } catch {
    return [];
  }
}

function persistSavedSearches(list) {
  localStorage.setItem(SAVED_KEY, JSON.stringify(list));
}

let savedSearches = loadSavedSearches();

let graphViz;

const savedSearchProvider = {
  // Optional: the UI does not call this directly; it can be used by your app to fetch initial state.
  list: async () => loadSavedSearches(),

  upsert: async (config) => {
    const list = loadSavedSearches();
    const idx = list.findIndex((s) => s.name === config.name);

    if (idx >= 0) {
      list[idx] = { ...list[idx], ...config };
    } else {
      list.push({ ...config });
    }

    persistSavedSearches(list);

    // Keep the UI list in sync
    savedSearches = list;
    graphViz?.$set?.({ savedSearches });
  },

  remove: async (idOrName) => {
    const list = loadSavedSearches().filter((s) => s.name !== idOrName);
    persistSavedSearches(list);

    // Keep the UI list in sync
    savedSearches = list;
    graphViz?.$set?.({ savedSearches });
  }
};

graphViz = new GraphVisualization({
  target: document.body,
  props: {
    // ...other props like data/settings...
    savedSearches,
    savedSearchProvider
  }
});