A view of the cards as a web

[jkomoros]

The selected card would show up at 50% of the normal size, centered.

Cards would then show up as thumbnails, with their size going down in scale with the log of number of links away from the current card.

When you click on a different card, they animate to the new size.

Calculate a linkDistance(fromCard, toCard) map reselector. the fromCard-toCard key in the map should be by sorting the card ids lexicographically.

Have a scale selector which allows zooming way out and seeing more cards

Draw lines between connected cards.

The url should be /web/card-id. Ideally you could toggle to/from it, and when you untoggled you'd ideally go back to the card in the context of the collection you were in when you went into web mode.

[jkomoros]

Ensure there's a reasonable mobile view in the web card viewer.

Process every card to know how many links away it is from every other card.

Have a web subState. In that substate have an x/y position and scale factor for each card, a selectedCardID, and an overall zoom factor.

Render the connected links in SVG using d3. The cards should be arrayed around a circle around the selected card, evenly around the parts of the circle that are visible in the viewport. Transitions of x/y and scale should all animate smoothly. When you click a card, it moves it to be in the center and transitions its size to be full size. All of the cards animate to their new positions. It's also possible to unselect all cards, which makes the centered card show up at the same size as the other cards.

Cards that are farther from the current key card show up as some scale factor smaller.

The x/y origin should be the center of the viewport

[jkomoros]

A default view could be visualizing cards where they are separated by their similarity score, which should naturally show clusters of cards. (Note that cards that are excluded from a similar cards, e.g that are referenced directly by a card, should be shown).

This view could just be a very straightforward force-layout graph of nodes, where each time you hover over a node it shows the card preview.

[jkomoros]

URL should be /web/references/COLLECTION, where the second term is the type of link connectedness to show, e.g. references or similar, and the COLLECTION is fine to be literally the same machinery as the normal c card selection machinery, just where sorting doesn't do anything. It selects the set of cards in the set to map out, as well as the card to highlight.

[jkomoros]

https://github.com/couchand/d3-redux

[jkomoros]

Add view/web to collection description processing machinery (omitted if it's the default view/card). Card-view knows how to show the web-stage if necessary.

[jkomoros]

Add a view/web to CollectionDescription, similar to sort. It can be anywhere in the collection description, and it's omitted if it's view/list. If it's view/web, then the card drawer isn't rendered and instead it's a web of cards that's rendered next to the card-view.

view/web/references or view/web/similarity to select between what types of edges to render.

card-drawer renders either the list or the web.

Collection.webInfo() returns an object that can be passed to a web element, including the cards, labels, and links.

The selected card is the selected card in the collection.

The web-renderer does animations, and those are all implied, not represented in state.

[jkomoros]

• [x] Collection description also learns about viewMode
• [x] Add a non-default view mode
• [x] Collection can generate webInfo()
• [x] Separate out card-thumbnail-list from within card-drawer
• [x] Create a stub card-web-renderer and if the URL is in viewMode, render a web.
• [x] The d3-force-graph import breaks polymer build
• [x] Basic d3 rendering of the web
• [x] Size the svg properly
• [x] Highlight the highlighted card
• [x] Hover styling over selected card nodes
• [ ] More space for svg
• [ ] Have every card connected to every other with a link based on similarity, but only render links between ones with a literal refererence
• [ ] collectionDescriptionWithKeyCard et al don't copy over viewMode etc when creating a new item
• [x] Allow thumnail-tapped and thumbnail-hovered
• [ ] Animated d3 rendering
• [ ] Just directly bind lit-element rendering to the svg, and have d3 change the underlyign data model and call requestUpdate?
• [ ] Better layout of web (maybe have more force directed stuff?)
• [ ] Include similarity of cards in information for force directed graph
• [ ] Allow only showing some types of references as links (e.g. concept, a specific type, everything BUT a type, etc. Basically the same logic as in the children filter)
• [ ] Does view/web/ actually need more view options? (remove if we don't actually use it for antyhing)
• [ ] Add an affordance within the card drawer to switch to view mode.
• [ ] Document view/ in WIKI

[jkomoros]

https://github.com/petitatelier/d3-web-components/tree/master/packages/3d-force-graph

[jkomoros]

Just render the bits manually via https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8

[jkomoros]

Slash just run the simulation once (caching it) and then render it out directly without using d3 to render it, as here: https://bl.ocks.org/anonymous/8a4e4e2fed281ea5e2a5c804a9a03783/85ced3ea82a4bed20a2010530562b655d8f6e464

[jkomoros]

Dimitri's approach to stamping is here: https://github.com/dglazkov/cartographical-visualizer/blob/main/customer-vendor-loop.js