Add possibility to listen on displayOptions changes

Author: matystl

README.md

@@ -37,6 +37,7 @@ module system it is exported as `GraphQLVoyager` global variable.
   + `displayOptions.sortByAlphabet` [`boolean`, default `false`] - sort fields on graph by alphabet
   + `displayOptions.showLeafFields` [`boolean`, default `true`] - show all scalars and enums
   + `displayOptions.hideRoot` [`boolean`, default `false`] - hide the root type
++ `onDisplayOptionsChange` [function: `(displayOptions) => void`] _(optional)_ - called when user change displayOptions with UI. Can be used to save settings into localstorage or query params
 + `hideDocs` [`boolean`, default `false`] - hide the docs sidebar
 + `hideSettings` [`boolean`, default `false`] - hide settings panel
 + `workerURI` [`string`] _(optional)_ - absolute or relative path to Voyager web worker. By default it will try to load it from `voyager.worker.js`.

demo/index.tsx

@@ -19,10 +19,25 @@ export default class Demo extends React.Component {
     introspection: defaultPreset,
   };
 
+  // not part of state because we parse it in constructor and just use in render
+  displayOptions = {};
+
   constructor(props) {
     super(props);
 
-    const { url, withCredentials } = getQueryParams();
+    const { url, withCredentials, ...restQueryParams } = getQueryParams();
+    // parse rest of query params we expect them to be in JSON format
+    // we might pick also some options that are not valid displayOptions but they will be ignored
+    // by Voyager component
+    for (const [key, value] of Object.entries(restQueryParams)) {
+      try {
+        this.displayOptions[key] = JSON.parse(value);
+      } catch (_) {
+        console.log(
+          `Not expected value for key "${key}" or value >${value}< is not in json format so just ignoring it`,
+        );
+      }
+    }
     if (url) {
       this.state.introspection = introspectionQuery =>
         fetch(url, {
@@ -45,7 +60,11 @@ export default class Demo extends React.Component {
 
     return (
       <MuiThemeProvider theme={theme}>
-        <GraphQLVoyager introspection={introspection}>
+        <GraphQLVoyager
+          introspection={introspection}
+          displayOptions={this.displayOptions}
+          onDisplayOptionsChange={setQueryParamsWithoutRefresh}
+        >
           <GraphQLVoyager.PanelHeader>
             <div className="voyager-panel">
               <Logo />
@@ -71,6 +90,19 @@ export default class Demo extends React.Component {
   }
 }
 
+function setQueryParamsWithoutRefresh(displayOptions) {
+  if ('URLSearchParams' in window) {
+    const searchParams = new URLSearchParams(window.location.search);
+    for (const [key, value] of Object.entries(displayOptions)) {
+      searchParams.set(key, JSON.stringify(value));
+    }
+    var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
+    history.pushState(null, '', newRelativePathQuery);
+  } else {
+    console.log('Missing URLSearchParams so just printing new displayOptions', displayOptions);
+  }
+}
+
 function getQueryParams(): { [key: string]: string } {
   const query = window.location.search.substring(1);
   const params = {};

src/components/Voyager.tsx

@@ -44,6 +44,7 @@ function normalizeDisplayOptions(options) {
 export interface VoyagerProps {
   introspection: IntrospectionProvider | Object;
   displayOptions?: VoyagerDisplayOptions;
+  onDisplayOptionsChange?: (displayOptions: VoyagerDisplayOptions) => void;
   hideDocs?: boolean;
   hideSettings?: boolean;
   workerURI?: string;
@@ -64,6 +65,7 @@ export default class Voyager extends React.Component<VoyagerProps> {
       hideRoot: PropTypes.bool,
       showLeafFields: PropTypes.bool,
     }),
+    onDisplayOptionsChange: PropTypes.func,
     hideDocs: PropTypes.bool,
     hideSettings: PropTypes.bool,
     workerURI: PropTypes.string,
@@ -232,6 +234,9 @@ export default class Voyager extends React.Component<VoyagerProps> {
 
   handleDisplayOptionsChange = delta => {
     const displayOptions = { ...this.state.displayOptions, ...delta };
+    if (this.props.onDisplayOptionsChange) {
+      this.props.onDisplayOptionsChange(displayOptions);
+    }
     this.updateIntrospection(this.state.introspectionData, displayOptions);
   };