coderibbon / coderibbon

Navigate your code in an infinite timeline of code patches!

CodeRibbon

A reimplementation of Patchworks for the Atom Editor.

Patchworks was a 2014 research project into better navigation and organization of code in IDEs. It's core concept consisted of an infinite 'Ribbon' of Patches in which code was displayed.

As you open code to edit, your Ribbon grows to accommodate more active patches, leaving a timeline-like history of recently used files.

Currently Working Features

• 99.9% of other Atom plugins are still supported and work as usual
  • If you find one that doesn't, please leave an issue for it!
• Patch grid layout and dynamic growth of the Ribbon.
• Configurable, dynamic size for number of Patches per screen
• Ctrl-Alt-O to look at all the Patches in Overview mode
• Drag files from the project tree view onto Patches to open the file
• Swap Patches by dragging one item onto the other patch
• Keyboard shortcuts for navigating the ribbon
• Quick Fuzzy search files in the project for blank patches
• Drag and drop patches onto eachother to create new patches and columns

A research project from UTK

CodeRibbon is a research project from the University of Tennessee, Knoxville.

The research is supported by Austin Henley. (one of Patchwork's original authors)

For the contributors of CodeRibbon, see https://github.com/utk-se/CodeRibbon/graphs/contributors

coderibbon's Issues

Ribbon to reload leftDroppedSS when user wants to view further left

leftDroppedPatches contains a bunch of patches we've unloaded into history, how will we know when we need to reload them???

Toggle Overview Button Missing

Toggle Overview button is hidden for smaller monitors, such as laptops.

Stretch: Vertical Ribbons

Just spent the last few hours with this layout and only just now noticed my 2x3:

Really hard to scroll left/right with a mouse, but perhaps we can add options for vertical history and horiz/vert scroll switching.

Bug: Moving only item to end of screen patch destroys item

Only occurs when there is only one item in the whole workspace, so this is very low priority.

Reproduce: clean workspace, open one file, move that one file to right edge of screen.

See if flex layout will work with widths wider than the screen

The PaneAxis already use a flex layout, so could perhaps we leverage that instead of doing pixel calculations for the viewport?

Offscreen patch cache

Will need to be serializable along with the Atom workspace layout... requires an abstract ribbon to be serializable as well

JS/TS/Coffee decision

Decide which language to develop primarily in.

For dev speed sake, I am leaning towards raw JS since that will eliminate the need for the compile step, but Atom may have higher class support for Coffee as an install-time autoload.

I will vote against TypeScript since the 340 project had problems with people committing code that hadn't been transpiled.

Setup github pages webpage

Scroll events on .tab-bar should scroll ribbon

Stepped scroll events like a mouse - not the pixel-tracking trackpad ones.

Auto scroll to nearest 'viewable' patch

When user scrolls around, be able to load up the nearest set of patches automatically

Event Behavior: Dragging from file list to filled patch

Need to determine the desired behavior for a user dragging a new item onto a patch which is already filled.

Probably it should just replace the editor in the patch, but then need to also ensure hooks for unsaved file prompt.

Another behavior could be to relocate the old patch to a nearby patch if there's an empty one to the right or left of the target patch. (Would be user preference: "Relocate patch instead of Replacing")

Proper failover when Fuzzy Finder is not available

Currently we depend on the 3rdparty package too much and cannot operate without it. Need a good failover for when it doesn't work...

• Make our own fuzzy drop in replacement?
• Supply some other view for when we don't have a fuzzy finder pview

Overview: highlight pane on hover

RIght now it is purple borders with blue borders on an active pane. If a user hovers over a pane, maybe shadow it or somthing, or have all other non-active patches be slightly darker

Add commands to assist creating patches in development

Kinda tedious to go to settings to reset my number of patches. How about a menu option or something of the sort?

Set number of patches > (user enters number)

Set min pix width > (user enters number)

Overview visual

Needs investigation on how far we can stretch Atom's virtual DOM with hopefully just CSS.

New GIF for Landing Page

New GIF for the website landing page instead of the hacky one

Error clicking on an empty patch

I just installed the extension. It opened with 6 empty patches and whenever I click on one I get:

Uncaught TypeError: Cannot read property 'incrementCounter' of undefined
C:\Users\t-auhenl\AppData\Local\atom\app-1.38.2\resources\app.asar\node_modules\fuzzy-finder\lib\experiment-prompt.js:129

insert / remove patch column

In the end I wonder if it would have been easier to have ribbons of patch columns...

that probably would have made wayyyyy more sense

Navigation Pane Disappears on Reload

Window: Reload causes the Nav Pane to disappear for me in cr-patches

EDIT:

Also, code from patches disappear

Closing patch needs to refresh grid

Closing a patch causes that row to be offset.

Initial Startup Patch Number Not Filled

Kinda buggy when I start it up with the new patch number calc on cr_update. I was on my empty-patch branch if that is the problem and i am behind on functionality (although, I remember quota being merged before I made my branch)

NxM Axis Setup function

We need a way to initialize M number of Ribbons as atom horizontal axes

Horizontal spacing style application

Found this one by experimentation:

width = 100% * (number of total patches / number of visible patches)

Makes them scale nicely and we don't have to pixel-count.

Scrollbar is too small on 4k

Ribbon's scrollbar is too small on 4k!

Settings: Min Size / NxM patch grid calculation

Hook for Window Size Change

@tkeyes25 do you want this one? I just can't find the onDidChange() subscription for the Atom window being resized...

Adding New Patches discoloring

Seems like it is buggy when I toggle the command to add patches now with the new empty patch design. I add some, and the patches are back to the purple border. Let me know if you were aware of this and need videos @robobenklein

I did the following and got different results

atom -d  . --clear-window-state

This created however many patches I had serialized or saved (with the correct form of an empty patch), then when I add/ close patches, the patches turn purple.

atom -d .

This mainly just made all of my previous empty patches purple.

I am on the dev branch

Capturing Commands or Events in Atom

SO CONFUSED ON THIS. Basically, I want to execute a command for #29. Also, down the road, for example, we would want to capture events like CMD/CNTL-N for new patches, so might as well talk about it now @robobenklein

Disable split pane menu item

I imagine split should create new pane but it just creates space for one and not an editable patch

Blank tabs: Idle Tips

Like atom's blank panes on startup

Item destruction (non-move) should update for contentful_length

When patch becomes empty, rerun update because contentful length could change

(solves "too many blanks" issue)

Atom: keybind hooks for left/right stepped scroll

Need to investigate snapped scrolling methods that don't interfere with pixel-touch scroll events.

Core: Next Available Patch Space

Needing an algorithm for locating the optimal nearest patch to a currently-focused patch.

Needs to be

• Accessible by a specific patch
• Configurable by heuristic research
• Portable to N dimensions
• Aware of neighbors in directions not currently being processed (45-deg square search problem)

Scaffold Atom plugin structure

Requires decision on JS/TS/Coffee etc.

Replicate 30-second proof-of-concept

Make a wiki page covering how to replicate my 30-second demo that covers how to locate the Atom axis and set their CSS hacks.

Idea: Interleave / Zipper Patch Reflow

When the number of Ribbons changes (vertical resize, etc) we might remove or add Ribbons.

Patches that were in Ribbons that got downDropped (serialized into offline state objects) perhaps should be reflowed into the remaining visible Ribbons.

By interleave, I mean that the Patches from the removed Ribbon would be interleaved into the remaining patches. Ex. if 2 Ribbons merged into one it would be like a zipper merging, where every other patch was from the different Ribbon.

If we add a Ribbon, we'll want a setting saying whether or not to reflow the existing patches into the new Ribbon. This would be the unzip routine.

This would require doing N-Ribbon calculations for both zipping and unzipping.

Horizontal Scrolling

Horizontal scrolling seems to be buggy. Does not know whether to scroll over entire code ribbon or scroll within whatever patch the mouse is over

May need to address this before #22

Empty Scroll Bar on Start up in 'Dev'

Checked out dev branch and this happened...

Focus Strip/Patch

Save/restore layout for focus or find overlay method

Bug: fuzzy open needs to focus patch first

Metrics events tracking items

The following events I think should be part of a metrics reporter:

• Opens item in patch:
  • Which visual location on screen
  • Which location in whole ribbon
  • Which initiator of open (in-patch, drag, or out-of-patch)
• Total length of ribbon
• Fill percentage of ribbon
  • Extra: Bias between rows? (prefer top, etc?)
• Drags item between patches
  • Which event handler? (html5 vs atom swap)
  • If drag was to offscreen patch from start of drag
• Closes patch
• Uses overview mode
• Uses a single patch column

Styling for FuzzyFinder in patches

looks weird and need to style full path entries next to icons

Check requires cr-base hacks on windows

Pathing might be different,

if so: https://stackoverflow.com/questions/29855098/is-there-a-built-in-javascript-function-similar-to-os-path-join

Empty Patch Display

Thoughts on what an empty patch should like besides what we have right now?

Pane styling for view

See the less stylesheet

Atom: Hide tabs

Hide the tabs of a pane so that we can put our own stuff there.

Metrics reporting backend

Google Analytics for Apps vs Roll-our-own vs Atom Telemetry?

Analytics for Apps (GAfA) is already a solution that fits the use case but data export and access is trickier.

Rolling our own would take a lot of development and analysis time, but wouldn't have to deal with format conversions for getting complete export data.

Multi-instance backend

For multiple monitor/window/instance support, ribbons will need to communicate out-of-band with other instances of the plugin.

Command/Cntl-W breaks Atom

Key combination closes out a tab, which then breaks our application.

AZH and I talked about it the last meeting, and we thought all we had to do was capture the command event, and simply ignore it

Idea: Offscreen downDroppedRibbons accessible via focus-down-patch shortcut

When the view has to drop Ribbons down into serialized states, perhaps we could let the down-patch shortcut load the serialized ribbon in order to replace the current one.

Would probably involve adding an upDroppedRibbons state var