Code Monkey home page Code Monkey logo

ipfs-dag-builder-vis's Introduction

ipfs-dag-builder-vis

See how the DAGs get built

screenshot

Getting started

Requires node>=16 and npm>=6

Fetch the dependencies

npm install

Run the site in dev mode

npm start

Build the site as static html for deployment

npm run build

Deploy

Fleek is configured to build and publish the site to IPFS when a change is merged to the main branch.

ipfs-dag-builder-vis's People

Contributors

alanshaw avatar jacobheun avatar lidel avatar olizilla avatar sgtpooki avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ipfs-dag-builder-vis's Issues

Move to Fleek

This project is building on Fleek now, but to host it there we need to update the DNS.

Fleek expects to see a CNAME record for dag.ipfs.io to 634c28dae701e8ca2e20.b-cdn.net.

The hold up is this requires us to delete the existing dag.ipfs.io zone from dnsimple and then update the ipfs.io zone to include the CNAME. Dnsimple does not support creating that CNAME from the dag.ipfs.io zone.

The site is already building to http://634c28dae701e8ca2e20.b-cdn.net/

Grow graph as DAGNodes are loaded?

Loading big graphs is really slow because the UI waits for the whole thing to be loaded before rendering - could it add nodes to the graph as they come in instead?

Graph does not update children size

I was playing around with dag.ipfs.io and I noticed the number of children on the graph is not getting updated. Initially the graph is set to 11 children. However, it is always shown with 174 children.

I was able to reproduce it in Chrome and Firefox, and also locally by cloning the repo.

Here are some screenshots:
image
image

Also tried locally on commit 430f648 and it worked all fine. It seems the last commit broke things.

image
image

The file used is QmcXVBPfq7jNjRd13BmRkJoobHw4KU4RnD5GSySnk36UWU but behaves the same with different files.

Zoom in and out

I'm trying to analyse some real-world DAGs and the nodes end up being teeny-tiny - I can pan around but some way of zooming in and out would be great:

image

The line halfway down is a DAG..

Intro text

I think intro text would help make this even better as a standalone learning experience, in 2 areas:

1. What does this thing do?

It could take a few forms. In order of my personal preference:

  • small section that's visible by default, and doesn't impede usage of visualizer, but can be dismissed via click or scroll
  • in the header, always visible
  • triggered by a help or about link
  • splash screen upon first load

Here's a first pass of the text, interested in comments!

"DAGs (directed acyclic graphics) are the core data structure of IPFS. They enable efficient data verification and management. Upload a file, then click menu options to explore the different ways that file can be split up into chunks."

2. What do these things mean?

The menu options might also benefit from some description. Example below:
dag-visualizer 001

Feature request: Add button for CLI command options

A neat feature would be to add a button that will return the command used for the options selected. This would serve multiple purposes:

  • It would be nice to see a live example of what some of the available commands on the CLI are.
  • It would help tie in Explore.ipld.io, dag.ipfs.tech & cid.ipfs.tech
  • This will help create tutorials and help users understand the basics of what happens when a file gets added to IPFS.

I want to take the CID from dag.ipfs.tech to explore.ipld.io and look at the data there. If I knew the exact command then I could add it to ipfs on my own machine and see it later on the explore site. This would make it easier to explain the different block/dag altering options there are, how the data format looks, and how the CIDs also change.

cc @lidel @SgtPooki @aschmahmann

Visual bug: links are not following their blocks when moving root node on flat dags

Steps to produce:

  1. Upload a file (https://user-images.githubusercontent.com/305332/60381585-735fc800-9a57-11e9-906f-29db82f57e55.jpg)
  2. Change chunk size to 32 bytes
  3. Change to flag dag format
  4. Move the root away from it's default location and observe the links being stuck in place without following the root node representation.

What I saw:
visualbug_dag_inspector

This is using MacOS 10.14.5 (18F132) using Chrome Version 72.0.3626.121 (Official Build) (64-bit).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.