diamonddao / chainverse-frontend

Frontend for the Chainverse application

Chainverse Frontend

chainverse-frontend's Issues

Block -> Tag relationship fix

Current:
(:Block)-[IS_TAGGED]->(:Tag)

To keep it consistent with rest of ontology should change to:
(:Block)-[:HAS_TAG]->(:Tag)

Code review and refactoring of front end code

@musubipapi raised the issue that there is a lot of refactoring he'd like to do after pushing out the beta release of Chainverse.

Adding this issue to capture/discuss that work. @musubipapi any specific areas you have in mind?

Autocomplete dropdown doesn't appear in search results view

Search autocomplete dropdown doesn’t show up in search results view. (But can search the string by hitting enter)

Fix WalletConnect

I've seen several Fullstory sessions where users tried to auth in from Desktop with Walletconnect and were not able to. Then, they left the session.

Entity description query for once user selects Entity

For https://github.com/DiamondDAO/chainverse-frontend/issues/47, need to embed the following query to get back Entity descriptions for the front-end.

Flow:

1. User selects an Entity
2. Query below is run
3. Output from the query is shown in appropriate part of the UI

MATCH (d:Entity {name:$name})
OPTIONAL MATCH (d)-[:HAS_PROPOSAL]->(:Proposal)<-[:VOTED]-(sm:Wallet)
WITH d, COUNT(DISTINCT sm) as snapshot_members
OPTIONAL MATCH (d)<-[:IS_MEMBER]-(dm:Member)
WITH d, snapshot_members, COUNT(DISTINCT dm) as DAOHaus_members
RETURN snapshot_members, DAOHaus_members, d.forum as forum, d.discord as discord, d.documentation as documentation, d.twitter as twitter, d.opensea as OpenSea, d.blog as blog

See below for example execution with $name = 'Ricardian LLC DAO'. Query is fairly performant and runs pretty quickly

CI/CD Workflow

Build an automated workflow so that there is testing/building/deployment on merges to branches

Can only add one entity to a workspace at a time

Build out Wallet Component

Create the Wallet Component as designed in Figma: https://www.figma.com/file/LVLV743O2jcUZmcSvHdxQW/Diamond-MVP?node-id=109%3A1158
This includes:

• Overview Tab
• Governance Tab
• Participation Tab
• Network Tab
• Tokens Tab

Do work necessary to deploy Twitter bot to dev-chainverse

During the onboarding flow a user is asked to submit their Twitter handle. Currently that creates Wallet -[:CREATED]-> Response relationship between nodes.

match p=(w:Wallet)-[r:CREATED]->(n:Response)
where n.text = "c_lemp"
return p

We need to enhance this flow in two ways:

1. Define a relation ontology for Wallet -[:?] -> Account:Twitter @Azharo
2. Create a lookup to the Twitter API that:
   • Requests twitterId from the Twitter API
   • Merges with any Account:Twitter nodes in the database already on that twitterId
   • Writes the ontology defined in Step 1.

Build out Authorization/Authentication/Connect With Wallet

DAO app should be authenticated by wallet.

We should gate the backend routes/API's so that only authorized/authenticated users can fetch data.

Create workflow and process for isolated staging, dev, and prod environments

Currently Chainverse has a dev environment where all baseline data (according to our defined ontology) has been ingested, and also is the backend for http://staging.chainverse.diamonds. We also have a limited sandbox environment for experimenting and developing code.

During the beta phase our users are interacting with http://staging.chainverse.diamonds and writing data directly to our chainverse-dev database. The problem is that during development data can be altered, deleted, and new temp data can also be added. We need a workflow that separates our environments into

Sandbox - no user data or connection to the deployed application
Dev - only connected to the chainverse-dev version of the deployed chainverse application
Prod - actual production database that the live version of the application interacts with

Populate Data for different DAOs

FE Data is hardcoded to Diamond DAO. We should be able to surface data dynamically based on a user's DAO.

Show source/s in block flyout

When viewing a block, a user should be able to view all sources associated with the block, to verify claims made in the block and gain additional context.

Review and simplify `Workspace` properties and data stored in properties

MATCH (n:Workspace) where n.uuid = "02e14ca7-8754-4b3a-af71-64a5ed1dbd20" RETURN n LIMIT 25

Lots of data is replicated in the properties of a Workspace node

{
  "identity": 130914,
  "labels": [
    "Workspace"
  ],
  "properties": {
"createdAt": "2022-04-08T17:56:25.065000000Z",
"rfObject": "{"nodes":[{"id":"DiamondDAO","data":{"node":{"__typename":"Entity","name":"DiamondDAO","address":null,"avatar":"https://i.imgur.com/lZcAYTy.png","about":"Diamond DAO ◈ is an ecosystem of protocols designed to collect the most valuable assets in DeFi.","proposalsAggregate":{"__typename":"EntityProposalProposalsAggregationSelection","count":0}},"title":"DiamondDAO","about":"Diamond DAO ◈ is an ecosystem of protocols designed to collect the most valuable assets in DeFi.","avatar":"https://i.imgur.com/lZcAYTy.png","dim":false},"type":"entity","position":{"x":-291,"y":164},"positionAbsolute":{"x":-291,"y":164},"z":0,"handleBounds":{"source":[{"id":"b","position":"right","x":198,"y":36,"width":6,"height":6}],"target":[{"id":"a","position":"left","x":-4,"y":36,"width":6,"height":6}]},"width":200,"height":78,"selected":false,"dragging":false},{"id":"94c749ae-d3ff-4554-acb4-c0d68c6a8b52","data":{"node":{"__typename":"Note","text":"Diamond dao hosts genesis cohorts for testers of the program #testers\n","createdAt":"2022-04-08T17:55:43.881Z","uuid":"94c749ae-d3ff-4554-acb4-c0d68c6a8b52","wallet":{"__typename":"Wallet","address":"0x9aa11A6f9dD069003D7C406F2A853290F934b03B"},"tags":[{"__typename":"Tag","tag":"testers"}],"entities":[]},"dim":false,"label":"Diamond dao hosts genesis cohorts for testers of the program #testers\n"},"type":"block","position":{"x":193,"y":84},"positionAbsolute":{"x":193,"y":84},"z":0,"handleBounds":{"source":[{"id":"b","position":"right","x":197.99187835920858,"y":30.498498171155315,"width":6,"height":6}],"target":[{"id":"a","position":"left","x":-4.002331555968783,"y":30.498498171155315,"width":6,"height":6}]},"width":200,"height":67,"selected":false,"dragging":false},{"id":"f162aff5-7592-4cb4-a4e1-6bcadb580115","data":{"node":{"__typename":"Note","text":"@DiamondDAO prioritizes the creation of new knowledge that makes inferences, hypothesis, and narratives.\n","createdAt":"2022-04-08T17:50:26.225Z","uuid":"f162aff5-7592-4cb4-a4e1-6bcadb580115","wallet":{"__typename":"Wallet","address":"0x9aa11A6f9dD069003D7C406F2A853290F934b03B"},"tags":[],"entities":[{"__typename":"Entity","name":"DiamondDAO"}]},"dim":false,"label":"@DiamondDAO prioritizes the creation of new knowledge that makes inferences, hypothesis, and narratives.\n"},"type":"block","position":{"x":-2.999999999999993,"y":374},"positionAbsolute":{"x":-2.999999999999993,"y":374},"z":0,"handleBounds":{"source":[{"id":"b","position":"right","x":198,"y":37,"width":6,"height":6}],"target":[{"id":"a","position":"left","x":-4,"y":37,"width":6,"height":6}]},"width":200,"height":80,"selected":false,"dragging":false},{"id":"8b5a99b5-afe8-4936-9630-788ef8d50ce6","data":{"node":{"__typename":"Note","text":"Diamond DAO is considering exploring trading patterns in the Music NFT  as a proof of concept for a #DAO2DAO #partnership with @JournoDAO  focused on #data-storytelling.\n","createdAt":"2022-04-08T08:34:44.075Z","uuid":"8b5a99b5-afe8-4936-9630-788ef8d50ce6","wallet":{"__typename":"Wallet","address":"0xC75446A6AdaEF73269dBdEcE73536977B2b639e0"},"tags":[{"__typename":"Tag","tag":"DAO2DAO"},{"__typename":"Tag","tag":"partnership"},{"__typename":"Tag","tag":"data-storytelling"}],"entities":[{"__typename":"Entity","name":"JournoDAO"}]},"dim":false,"label":"Diamond DAO is considering exploring trading patterns in the Music NFT  as a proof of concept for a #DAO2DAO #partnership with @JournoDAO  focused on #data-storytelling.\n"},"type":"block","position":{"x":336,"y":230},"positionAbsolute":{"x":336,"y":230},"z":1000,"handleBounds":{"source":[{"id":"b","position":"right","x":198,"y":65.5,"width":6,"height":6}],"target":[{"id":"a","position":"left","x":-4,"y":65.5,"width":6,"height":6}]},"width":200,"height":137,"selected":true,"dragging":false}],"edges":[{"source":"DiamondDAO","sourceHandle":"b","target":"f162aff5-7592-4cb4-a4e1-6bcadb580115","targetHandle":"a","label":"Linked To","labelBgPadding":[2,2],"type":"smoothstep","labelStyle":{"fill":"#9C9C9C","fontFamily":"Rubik","fontWeight":500},"labelBgStyle":{"fill":"#E8F4FF","fontWeight":500},"markerEnd":{"type":"arrowclosed"},"id":"reactflow__edge-DiamondDAOb-f162aff5-7592-4cb4-a4e1-6bcadb580115a"},{"source":"f162aff5-7592-4cb4-a4e1-6bcadb580115","sourceHandle":"b","target":"8b5a99b5-afe8-4936-9630-788ef8d50ce6","targetHandle":"a","label":"Linked To","labelBgPadding":[2,2],"type":"smoothstep","labelStyle":{"fill":"#9C9C9C","fontFamily":"Rubik","fontWeight":500},"labelBgStyle":{"fill":"#E8F4FF","fontWeight":500},"markerEnd":{"type":"arrowclosed"},"id":"reactflow__edge-f162aff5-7592-4cb4-a4e1-6bcadb580115b-8b5a99b5-afe8-4936-9630-788ef8d50ce6a"}],"viewport":{"x":664.1258581235697,"y":127.31292906178487,"zoom":1.074370709382151}}",
"name": "Diamond Dao thesis
",
"uuid": "02e14ca7-8754-4b3a-af71-64a5ed1dbd20",
"updatedAt": "2022-04-08T17:56:25.065000000Z"
  }
}

Particularly the rfObject property. We should review why this is needed, and simplify if possible.

Enable initial set of node traversals

PRD

• In progress

Clarification needed

• Which traversals do we want to prioritize?
• How will those traversals be accessed? I.e. we have discussed accessing a graph view by clicking on a search result, clicking the network icon next to a search result in Explore view, or performing some sort of interaction with a node in a Sandbox/Workspace?
• What back-end work is needed to perform each traversal?

Reference

• Traversal brainstorm document: https://www.figma.com/file/jIw9hHIlT5jL7W6Z0M8rgl/Traversal-Brainstorm?node-id=0%3A1

Add key context to entity profiles

PRD

• In progress

Wishlist items

Need to discuss which items are addressable using existing data & given time constraints with Angela, Omar, and Andy and add to PRD.

Descriptive context

• Twitter
• Website
• Discord
• DAOhaus profile (if applicable)
• Snapshot profile (if applicable)
• Link to forum (if available)
• Etherscan for token contract (if applicable)

Analytic context

• Number of members (DAOhaus DAO)
• Number of token holders (Snapshot DAO)

Onboarding survey responses need relations to the question being asked

Currently when the user responds to the initial survey a Wallet -[:CREATES]-> Response relation is generated.

match p=(w:Wallet)-[r:CREATED]->(n:Response)
where w.address = "0x97b9958faceC9ACB7ADb2Bb72a70172CB5a0Ea7C"
return p

However, what's missing is context about what the Response is actually in response to.

At one point an ontology like User -{:SELECTED]-> Response -[:RESPONDS_TO]-> Prompt:Survey was discussed. @Azharo thoughts on this? Also, we don't currently have a User node implemented and separate from the Wallet node used to connect.

I think the part of the code to review is here

chainverse-frontend/src/services/Apollo/Mutations.ts

Lines 24 to 38 in 2501409

	export const CREATE_RESPONSES = gql`
	mutation CreateResponses($input: [ResponseCreateInput!]!) {
	createResponses(input: $input) {
	responses {
	text
	wallet {
	address
	}
	prompt {
	uuid
	}
	}
	}
	}
	`;

and/or here

chainverse-frontend/src/pages/onboard/index.page.tsx

Lines 34 to 54 in 2501409

	const [addResponses] = useMutation(CREATE_RESPONSES);
	const submitForm = async (values: any, actions: any) => {
	const answers = {
	...values,
	};
	try {
	await addResponses({
	variables: {
	input: Object.keys(answers).reduce((inputArray, formKey) => {
	return [
	...inputArray,
	...answers[formKey].map((response) => ({
	text: response,
	prompt: {
	connect: { where: { node: { uuid: formKey } } },
	},
	wallet: {
	connectOrCreate: {
	where: { node: { address: data?.address } },
	onCreate: { node: { address: data?.address } },
	},

Search functionality needs to be improved

Video with some context
https://www.loom.com/share/f399e4a9ff554127a2fb3017bb43b985

Display source/s for saved block

Adding new blocks to workspace jumbles position of existing blocks

From @angelaliu22 -- Adding a block into Sandbox reshuffled all of the blocks in the UI. We should not reset - just drop the block somewhere. What’s easiest? top right?

Reduce onboarding flow steps

Remove all questions except:

Wallet address
Method of contact

Errors when trying to build on our EC2 server

There's a good chance I'm missing a step or doing something wrong..

However, when I run the command npm run build on our EC2 server, I get the follow errors:

The main error (not just warning) is pointing to the DateFilter.tsx file: https://github.com/DiamondDAO/chainverse-frontend/blob/main/components/Navbar/DateFilter.tsx

Any idea what the issue could be?

Save source doesn't work with some URLs

Example, https://snapshot.org/#/proteincommunity.eth/proposal/0x6d35b0c8c3b182e9a0d2ea4fdac695c45ae0b033104940e048f758aec0adb1a8.

What are the current validation rules?

Cannot delete or save block to workspace

http://staging.chainverse.diamonds/workspace/93a16ae2-cf19-42cc-a29a-25f02dbee0ab

Update secret on `develop` branch to point to Chainverse Dev database

The config currently points to the URL of the Chainverse sandbox database, but we want to point to the dev database instead.

Secret for the chainverse-dev Neo4j database: (dev/chainverse/neo4j-db)

chainverse-frontend/.aws/frontend_task_definition_develop.json

Line 16 in 0d53cc0

"secrets": [

No search results for blocks

No matter what I search I don't get search results for blocks, i.e. http://staging.chainverse.diamonds/explorer/search?term=diamond%20dao&type=blocks.

In addition to being a usability issue, it also makes it difficult for me to troubleshoot/q&a. For instance, I ran a migration to add blocks for Dan Wu but I cannot see if they show up in the UI because I am not getting any search results back.

Users cannot remove block from Workspace (or Sandbox) without deleting block.

Collect feedback in app

Can we embed a feedback text button in the bottom right, that opens a text box to receive feedback, and use the Notion API to add to a Notion table? See details inside - from @angelaliu22

Build out filtering of data for different days

The API only provides data of DAOs for the last 14 days. As designed in the specification, we need to have the ability to filter based on different time frames (i.e. 14 days, 1mo, 3mo All)

Delete block button in block slide out

Add “Delete block” button in Block slide out when Workspace view (along with Edit block, if applicable). See Figma attached. Have confirmation modal just like “Delete Workspace”. Text of modal should say:

Figma artboard: https://www.figma.com/file/sHfBJO5DPwU3ifPpzQY2eL/Chainverse-MVP?node-id=537%3A37075

Modal copy:
Are you sure you want to delete the workspace? Deleting this workspace will not remove the nodes from the Chainverse graph.

If entity does not have a logo/symbol, use the icon as backup

Manually created blocks are not associated with user

We accidentally deleted some blocks Dan Wu created. I re-created them on the back-end, for instance, the block with the node id 130875.

It appears to follow our schema, but the block doesn't show up in Dan Wu's My Blocks page. I double-checked the wallet address, etc. Everything checks out. Any thoughts on why this doesn't display?

Text duplication

When creating a new block from Workspace, and tagging an entity with @ or #, all the text preceding the trigger gets duplicated upon selecting an entity

Reduce friction for executing a search

This item was also in the Q/A backlog but re-raising because I've seen multiple people struggle with completing a search because they expect to be able to click on a result and can't.

One (Eric Mack) told me that he assumed search didn't work because he couldn't do this. "Oh wow, I have never seen this results table."

A few options for resolving:

• Allowing people to click on a result and immediately display the result in the "results view"
• Removing the search preview

Toast message when adding to workspace says added to sandbox, not workspace name

Edit blocks only works from `My Blocks` view.

Ability to resize blocks.

Search terms exactly matching phrases in blocks do not return results

For instance, this search does not return any of the blocks that mention edtech.

http://staging.chainverse.diamonds/explorer/search?term=edtech%20&type=blocks

@musubipapi mentioned that we may be able to return more matches by tinkering with search sensitivty. Do we have any more options with our current search framework, or will improved results need to wait for Elasticsearch?

Document Chainverse codebase

Documentation of the codebase should be improved such that a new contributor can join and add to the codebase with minimum effort lent to figuring out the various components and locations of the front-end code.

Unit tests for front-end Chainverse application

Currently we have no unit tests written for Chainverse. This is a good habit and practice to get into. Creating this issue to track and discuss a baseline set of unit tests to implement that will ensure better code quality / less bugs.

Update for data API layer

chainverse-frontend/next.config.js

Line 4 in ccd00bb

}

API is currently deployed on our server:

Need to add additional configs for API.

Here's a Stack Overflow response with details on what's needed: https://stackoverflow.com/a/65467719

For our solution:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://0.0.0.0:5000/:path*' // Proxy to Backend
      }
    ]
  }
}

Restore deleted `Note` data from dev environment

We received feedback from a user that all of their Note blocks from last week were deleted.

Running this query today

match (n:Note:Block) return n.createdAt order by n.createdAt

shows that the most recent block in the chainverse-dev environment is on 4/8/2022

╒════════════════════════════════╕
│"n.createdAt"                   │
╞════════════════════════════════╡
│"2022-04-08T04:07:25.705000000Z"│
├────────────────────────────────┤
│"2022-04-08T04:34:27.461000000Z"│
├────────────────────────────────┤
│"2022-04-08T08:31:24.585000000Z"│
...

I created Note blocks last week before Friday as well. Now they're not there. We need to figure out how this deletion occurred, and restore the user data from a Neo4j backup.

Link persistence

from @angelaliu22 Saving a Sandbox into a new Workspace lost 1 of the links I had created

`Wallet` node `address` property needs to match lowercase before writing

Some of our data sources return the lowercase version of a wallet or contract address instead of the mixed case. For example

0xc75446a6adaef73269dbdece73536977b2b639e0 vs. 0xC75446A6AdaEF73269dBdEcE73536977B2b639e0

It seems like the current onboarding flow is using an exact match to either create or merge a node instead of the lowercase version.

The result of this leads to data integrity issues where duplicate nodes are generated that should actually be the same node. On 4/1 we ran a one-off script to merge all mixed-case Wallet.address nodes with the lowercase, and to use lowercase for everything.

This is from the current onboarding flow

match (w:Wallet) where w.address = "0xC75446A6AdaEF73269dBdEcE73536977B2b639e0" return w

This is data already in dev after the merge on 4/1
match (w:Wallet) where w.address = "0xc75446a6adaef73269dbdece73536977b2b639e0" return w

It seems like right here might be the part in the code that needs to be addressed. maybe elsewhere too?

chainverse-frontend/src/pages/onboard/index.page.tsx

Line 52 in 2501409

where: { node: { address: data?.address } },

Something like..

where: { node: { toLower(address): toLower(data?.address) } }

might should resolve (though this is pseudocode, the exact syntax needs to be reviewed)

Select entity with arrow keys vs. mouse

Ability to select a matched tag or entity in block creation view with the “down arrow” + “enter” versus having to click on the matched entity/tag with mouse.

Hide/comment out all buttons that don't have working functionality yet

1. View graph in the slideout
2. View graph in search results' rows
3. Explorer - past searches
4. Explorer - recommenations
5. Workspace - My narratives
6. Search autocomplete dropdown - autocompleted results section (entities, tags, blocks)

We should re-enable 1, 2, 6 when Graph view is complete

Populate all components in the built dashboards with realtime data from API

There are components currently in the dashboard (Overview, Participation, Governance) with unpopulated data.

Work with backend in getting the correct data values to populate dashboards.

Review ontology for `Entity` unique ids needed for front-end features

@musubipapi raised an issue around unique id's encoded in various Entity nodes, according to our ontology. It seems like we need to review and perhaps modify how nodes are identified uniquely to enable some features of the Chainverse front-end.

Add multiple sources to block

Update copy for remove workspace modal

Current:
Are you sure you want to delete the workspace?

Update to:
Are you sure you want to delete the workspace? Deleting this workspace will not remove the nodes from the Chainverse graph.