Add possibility to listen on displayOptions changes

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,24 +19,36 @@ 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, {
- method: 'post',
- headers: {
- 'Accept': 'application/json',
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({ query: introspectionQuery }),
- ...(
- withCredentials === 'true'
- ? { credentials: 'include', mode: 'cors' }
- : {}
- ),
- }).then(response => response.json());
+ this.state.introspection = introspectionQuery =>
+ fetch(url, {
+ method: 'post',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ query: introspectionQuery }),
+ ...(withCredentials === 'true' ? { credentials: 'include', mode: 'cors' } : {}),
+ }).then(response => response.json());
  }
  }
 
@@ -48,13 +60,17 @@ 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 />
  <Button
  color="primary"
- style={{color: 'white'}}
+ style={{ color: 'white' }}
  variant="contained"
  className="choosebutton"
  onClick={openChangeSchema}
@@ -67,13 +83,26 @@ export default class Demo extends React.Component {
  <IntrospectionModal
  open={changeSchemaModalOpen}
  onClose={closeChangeSchema}
- onChange={(introspection) => this.setState({ introspection })}
+ onChange={introspection => this.setState({ introspection })}
  />
  </MuiThemeProvider>
  );
  }
 }
 
+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);
  };