Redux-devtools: Printing state tree

[raaone7]

I couldn't find any option to print the state tree , my state tree has gone too big, would like to review and optimise it.

Sample of my state tree.

[raaone7]

Go to chart > Export button on the redux dev tool doesn't work to print to pdf. It save the JSON to local.

I am trying to print the state tree as is,.

[raaone7]

Source code :-

import React from 'react';

import { createDevTools } from 'redux-devtools';

import LogMonitor from 'redux-devtools-log-monitor';
import ChartMonitor from 'redux-devtools-chart-monitor';
import SliderMonitor from 'redux-slider-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';

const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey='ctrl-h'
               changePositionKey='ctrl-q'
               changeMonitorKey='ctrl-m'>
    <LogMonitor theme="tomorrow"/>
    <ChartMonitor />
    <SliderMonitor />
  </DockMonitor>    
);

export default DevTools;

[zalmoxisus]

As far as you mentioned the Export button, I guess you're using the extension. If so, just open a new window monitor (click one of the first buttons on the bottom) and then press Command (Control) + P, so you can print to PDF or whatever.

[zalmoxisus]

There's also a suggestion to export the graph view in a nicer format in case someone is willing to contribute on implementing that.

[raaone7]

Yes, thats correct , using the extension. I would love to contribute, but i am an amateur in redux

[zalmoxisus]

I've implemented a print button:

The pr is here, will publish it soon, not sure it will land in the next version of the extension though.

Regarding https://github.com/zalmoxisus/redux-devtools-extension/issues/157, if you want to give it a try, there's no need to dig into Redux. Just get the state via store.getState and add a transformer to gnuplot or whatever else, then we can add it also in the extension. Let me know if you need moe details on this.

[zalmoxisus]

Implemented in [email protected]. See the release notes.

It didn't work as expected when invoked from devpanel (hangs the browser under some circumstances). So, to have this feature, open the extension in a window (one of first buttons from the bottom).

Let me know whether it works for you.

[raaone7]

Many thanks for the print button. It works fine for a small state tree. But doesn't work for mine. Mine is a enterprise application, and the print is failing to show the full chart at step 1.

Please find attached the JSON and PDF for review.

StateChart_Login_Step1.json.txt

StateChart_Login_Step1.pdf

Kindly reopen the issue for tracking.

[zalmoxisus]

Don't know why the svg is stripped. Will dig into it.

If you want to help to experiment with printing styling, just do npm i && npm start for remotedev-app . The styling is here.

[raaone7]

Sure. Did the below.

1. removed my node modules
2. removed the redux devtools extension and
3. did npm install
4. then npm start
5. Installed latest redux devtool in chrome
   _6. strange the print button not appearing in chrome devtools now ( after detaching from the browser). (its v
   2.8.0.1) I saw print button in 2.8.0 yesterday_

attached my npm shrinkwrap

On Sat, Oct 15, 2016 at 5:48 AM, Mihail Diordiev [email protected]
wrote:

Don't know why the svg is stripped. Will dig into it.

If you want to help to experiment with printing styling, just do npm i &&
npm start for remotedev-app https://github.com/zalmoxisus/remotedev-app.
The styling is here
https://github.com/zalmoxisus/remotedev-app/blob/master/src/views/index.jade#L28-L48
.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/gaearon/redux-devtools/issues/318#issuecomment-253888652,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AKObe5L5sZ2G7y6R9Nwfxjuh5noeB-mRks5qz86JgaJpZM4KSPtl
.

[zalmoxisus]

Hey @raaone7,

I've already fixed that issue in https://github.com/zalmoxisus/remotedev-app/commit/5905d1753e5a5756f484094e034133585fb279c3, will publish a new release of the extension by tomorrow. Yes, I removed the button as it didn't work as expected.

Regarding remotedev-app repo, it's a web version and the core lib of the extension. To use it as a standalone web app, you have to use remote-redux-devtools instead the extension for your store enhancer.

[zalmoxisus]

Published in [email protected]. Feel free to reopen the issue if something else goes wrong.

[raaone7]

Thanks Again, It has progressed well.

Couple of issues found , Kindley reopen the issue :-

1. Export button is broken, cant export JSON now
2. The pdf of A3 landscape (very decent size) is not fitting correctly. I thought it will resize and fit the screen. (this is a little complex chart,but not the most complex one, i will try it once the fix is stable)

state-chart-little-complex.pdf
Not able share the JSON, since the export is broken.

[zalmoxisus]

Thanks for the details.

Yes, it's not resized and fitting now, which is on purpose to be able to align and change the size as you want. Though, you're right we could check if it is outside of the visible area and refit it in this case. Or just subtract that part from the new size to avoid empty pages. Which better to address in a separate issue on the extension or remotedev-app repo. In case you want to submit a PR it should be what we did here, but I guess without changing scale and only when translate makes it to be outside.

Regarding the exporting, could you please open a separate issue about this on the extension repository so you can track it? The exported data is limited to maximum url length. So, the only solution would be to exclude intermediate states (in case we still want a downloadable link).

[zalmoxisus]

@raaone7, I have just published 2.8.2, where those issues should be fixed. Let me know whether it helps.

[raaone7]

Fantastic work @zalmoxisus Print is working as expected and so does the export. This will help the broader community for sure.

Do i need to submit any more issues of tracking ? Apologies , i have been lazy in reporting and busy in developing ;)

Attaching the state chart and state tree (yes its complex, around 1.65mb) , time to optimize now
state-chart-complex.zip
state-chart-complex.pdf

On a side note, kindly drop an email with your address. I would like to send you some cookies for your help as a token of thanks.

[zalmoxisus]

No probs :) If you have any other suggestions or troubles there, feel free to open issues on the extension's repo. BTW, your email is private, you can ping me at zalmoxisus at gmail dot com.

[raaone7]

Not sure, if its possible to get a Radial Tidy Tree using D3. That will be very helpful, if we have both views.

http://bl.ocks.org/mbostock/4063550

[zalmoxisus]

Yes, it would be amazing indeed. We'll look into it, thanks for pointing out.