osteele/banyan

Visualize Dropbox file and folder sizes

Banyan

Visualize Dropbox file and directory sizes.

Live version: https://banyan.osteele.com/

Develop

Install

1. Install yarn.

2. Install npm and elm packages:

   $ yarn install

Create a Dropbox API Key

1. Sign into Dropbox.

2. Create a new app. Select “Dropbox API”, and give it “Full Dropbox” access.

   ![](./docs/dropbox-create-app.png)
   

3. Add http://localhost:4000/ to the list of Redirect URIs.

4. Set the DROPBOX_APP_KEY environment variable to the app's API key (highlighted below). If you use direnv, you can copy .envrc.template to .envrc and edit the key into that file.

Run

$ yarn start

Test

$ yarn test        # run the tests once
$ yarn test:watch  # test in watch mode

Lint

$ yarn lint

Acknowledgements

Build with Elm, elm-dropbox, Highcharts, Semantic UI, and Poi.

The Banyan tree image used in this app's Dropbox OAuth page was donated to the Wikimedia Foundation by Pearson Scott Foresman. It is in the public domain.

Highcharts is used under the Creative Commons (CC) Attribution-NonCommercial licence for personal use and demonstrations.

License

MIT

banyan's Issues

Cancel listFolder requests, or ignore results, after signing out

Once the user has signed out:

1. The app should ignore any listFolder responses, from requests that may have already gone out.
2. The app shouldn't make any more listFolder API requests from within the listFiles loop.

The first is a security issue.

Fix flash-of-start-instruction-text on initial sign-in

Use “Sign in” to sign into Dropbox. SSO redirects back to the app. For a moment, the initial instructions are shown, before the view notices that you'v signed in. Stop that.

Switch to native Elm Dropbox.listFolder

listFolder is implemented in JavaScript and invoked via an Elm port. Port this to JavaScript, or adopt avh4/elm-dropbox#2.

Display more accurate progress information

The progress bar currently displays r/(r+1), once r responses have been received. This is at least monotonically increasing.

Ideally, it would display r/n, where n is the total number of responses. But we can't know n in advance.

Alternatively, d/(currentTime-firstRequestTime) could be a better estimate, where d = maxTime(currentRequest), firstRequestTime = maxTime(firstRequest), and maxTime(request) = max(data.clientModified, data.serverModified for data in currentRequest.items).

Cache the state between page loads

Cache the Dropbox file entries so that re-visiting the page is fast.

index.js contains code for this, that used to work and has been disabled pending investigation of #2 as a possibly better solution.

Better UI

Oliver has no graphic design skillz. The UI reflects this.

Some ideas:

• Remove the invert from the menubar. (Or make it go all the way across, a la github.)
• Progress bar should be lower contrast once it's complete.
• Make the GB / MB units lower contrast.
• The breadcrumbs are shown twice. Remove the second instance. Make the first one smaller.
• Make the level / sort buttons smaller. This will help on mobile too.
• Remove the “Sign In” / “Sign Out” icons?
• Or, add a Sync icon. But then we might want to spin it while it's syncing.
• Pick a color scheme.
• Use (low-contrast) folder and file icons? This could be helpful with different icons for different file types.
• Use background color or lines to separate the panels
• Add a footer with more information? (The Github link could go here.)

Export CSV of files and sizes

Add an application icon

The Dropbox application page is configured with an image, that's displayed during OAuth. Add that to the app's navigation menu, and as a favicon.

Allow user to switch between personal and team accounts without signing out

Or at least maintain the cache, so switching isn't so slow — but the only secure way I can think of to maintain the cache is to allow the user to by signed into both accounts at once.

Switch from Treemap to Sunburst diagram

A sunburst diagram would be more appropriate than a treemap.

Here's some nice ones in D3:

• https://bl.ocks.org/kerryrodden/766f8f6d31f645c39f488a0befa1e3c8
• https://bl.ocks.org/mbostock/4348373

Related to #2.

Switch to native Elm visualizer

The app currently uses Highcharts. Find or create an Elm implementation.

Related to #15.

Add a “remember me” option

The app currently stores the access token in localStorage, so the user is still signed in the next time they visit the page, until they explicitly sign out. Make this an option.

Show more than one level in the treemap

The file tree shows up to three levels, but the treemap is pinned to one. This is because add a second level sometimes causes the treemap to crash. Fixing this may depend on #2.

Display the name of the signed-in user

Follow Dropbox changes

Invoke the Dropbox listFolder API with include_deleted: true. Use listFolder/continue with a cursor in order to update the model: when the user pushes a “sync” button; when the page is reloaded; and/or, by polling.

The listFolder API is much slower when include_deleted: true is specified. (It requires a much larger number of requests, that seem to be throttled.) If we do this, we probably want to initiate both a recursive and a non-recursive sequence of listFolder requests, so that we can show the full results from the include_deleted: false sequence early, and switch to the include_deleted: true results once they're complete.