Code Monkey home page Code Monkey logo

attestation-visualizer's Introduction

Attestation Visualizer for RetroPGF

Overview

Visualise the Optimism Citizens’ House like never before! This project uses the ThreeGraph module to create a 3D graph that helps you understand the relationships and pathways within the RetroPGF ecosystem. Explore, zoom, and highlight to your heart's content.

Future Features

  • 🌈 Highlight Paths: Effortlessly track the path of any selected citizens to unveil their connections.
  • 🎭 ENS & Optimism NFT Support: If your address boasts an ENS or an Optimism NFT, we’ll showcase it.
  • 📜 List & Grid View: A streamlined list and grid view for quick access to all badgeholders.
  • 📚 Intuitive Interface: Delve into more details with descriptive titles and an array of options. And more features on their way!
  • 🔍 Advanced Filtering: Customise your exploration with filters to find exactly what you're looking for.

And more features on their way!

Getting Started

Prerequisites

  • Node.js installed
  • Yarn package manager

Installation

  1. Clone the repository
    git clone https://github.com/xannyxs/attestation-visualizer.git
  2. Navigate into the directory
    cd attestation-visualizer
  3. Install dependencies
    yarn install

Running the Development Server

Start the development server by running:

yarn dev

Now open http://localhost:3000 in your browser to see the magic happen!

Contributing

If you'd like to contribute, please fork the repository and make changes as you'd like. Pull requests are warmly welcomed.

Credits

  • JSeiferth: Check out his GitHub here.

Source

attestation-visualizer's People

Contributors

xannyxs avatar dependabot[bot] avatar

Stargazers

Billy191 avatar Raho avatar Sandusky avatar Jonas Seiferth avatar  avatar

Watchers

 avatar

Forkers

l7cubed

attestation-visualizer's Issues

Make it more accesisable for low-end computers

Is your feature request related to a problem? Please describe.
Users with low-end computers are experiencing slow load times and occasional crashes, which hampers their ability to effectively utilise the platform.

Describe the solution you'd like
Optimise the application to reduce the load time and ensure smooth operation on low-end computers. This might include actions like code splitting, lazy loading, and reducing the overall bundle size.

Describe alternatives you've considered
An alternative solution could be to offer a lite version of the application with reduced features and graphics for better performance on low-end computers.

Additional context
Enhancing accessibility for all users, regardless of their hardware capabilities, is crucial for widening our user base and improving overall user satisfaction.

Enhance Customisation Features

Is your feature request related to a problem? Please describe.
It's a bit disheartening when I want to personalise my user interface but find the customisation options limited. A more personalised user experience could enhance user engagement and satisfaction.

Describe the solution you'd like
I envision a more robust customisation suite that allows users to tweak the UI to their liking. This could include:

  • Theme options (dark mode, light mode, custom colour schemes)
  • Layout modifications (ability to rearrange, add, or remove UI elements)

Describe alternatives you've considered
A simpler alternative might be to offer a few preset themes and layouts, though this wouldn’t provide the same level of personalisation.

Additional context
Having a way to make the platform feel more "ours" could really make a difference in overall user satisfaction and retention. Any mockups or examples of desired customisation features could be attached here.

Filter per Round Feature

Is your feature request related to a problem? Please describe.
It's quite tedious to scroll through endless data when I'm only interested in viewing information pertinent to a specific round.

Describe the solution you'd like
Adding a "Filter per Round" feature would allow users to easily view and analyse data relevant to a particular round. This could be implemented as a dropdown menu or a search bar that allows users to select or type in the round number, respectively.

Describe alternatives you've considered
Alternatively, a paginated view where each page corresponds to a round could be an option. However, a filter would provide quicker access to the desired round data.

Additional context
A more streamlined navigation could significantly enhance user experience, especially for those who are looking for round-specific insights.

Incorporate Force-directed Tree in DAG Mode

Is your feature request related to a problem? Please describe.
Your description here. For instance: Navigating hierarchical data in our current setup can be cumbersome and does not provide a clear visual representation of dependencies.

Describe the solution you'd like
I would like to integrate a Force-directed tree visualization in DAG mode to our platform. This will provide a more intuitive and visually appealing way to view and interact with hierarchical data. The React Force Graph library has an excellent example of how this can be achieved.

Describe alternatives you've considered
Your description here. For instance: Alternatively, other visualization libraries or custom-built solutions could be explored to achieve a similar outcome. However, the React Force Graph library seems to provide a ready-made solution that fits our needs.

Additional context
The example provided showcases a Force-directed tree in DAG mode which is along the lines of what I envision for our platform. Implementing such a feature could significantly enhance our data visualization and user interaction.

A dashboard homepage

Is your feature request related to a problem? Please describe.
Yes, the problem lies in the current dashboard homepage, which presents a limited scope of information. It only displays a graph with some basic details about each node, which doesn't fully meet our users' needs for comprehensive data analysis and interactive exploration.

Describe the solution you'd like
I envisage a more robust and interactive dashboard homepage that not only presents data in graphical form but also includes the following enhancements:

  1. Dynamic Data Visualisations: Incorporate a variety of visualisations (e.g., heatmaps, bar charts, and line graphs) that users can select based on the type of data displayed. This variety will help in better understanding complex datasets.

  2. Customisable Widgets: Allow users to customise and add widgets that can show different metrics or KPIs important to their analysis. Users should be able to choose from a library of widgets or create their own.

  3. Interactive Elements: Enhance graphs and other visual elements with interactive features, such as tooltips, clickable nodes that reveal more detailed data, and the ability to zoom in and out for a closer look at specific data points.

  4. Integrated Data Feeds: Implement the ability to integrate live data feeds, enabling real-time data analysis and decision-making.

  5. User-defined Alerts: Offer functionality for users to set up custom alerts based on specific triggers within the data (e.g., a sudden drop in performance metrics), which can be sent via email or displayed as notifications within the dashboard.

  6. Data Comparison Tools: Introduce tools that allow users to compare datasets side-by-side or over different time periods to identify trends or anomalies.

Describe alternatives you've considered
As an alternative, integrating third-party data visualisation tools could be considered if building custom visualisations is resource-intensive. However, this might limit the customisability and could introduce dependencies on external services.

Another alternative could be to enhance the current graph with additional layers of information and interactivity without overhauling the entire dashboard. This approach would be less resource-intensive but might not fully address the need for a more comprehensive and interactive dashboard.

Additional context
To further illustrate these ideas, we could look into dashboards from similar applications in our industry for inspiration. User feedback sessions could also provide valuable insights into the specific types of data visualisation and interactivity features that our users find most beneficial.

A search bar to search through all badgeholders

Is your feature request related to a problem? Please describe.
I'm always frustrated when I can't easily find a particular badgeholder among a long list.

Describe the solution you'd like
Implementing a search bar at the top of the badgeholders page would be a great solution. This search bar should allow for real-time filtering of badgeholder names as the user types.

Describe alternatives you've considered
An alternative could be to have a dropdown filter by alphabetical order or by organisation.

Additional context
Your description here. For instance: This feature would greatly enhance the user experience on the badgeholders page.

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.