Implementing MainEditor.tsx

[alejandroscotti]

Description

First off, great work! I am working to implement the MainEditor.tsx into our own small internal web app so users can visualize our own Db data. Users don't know anything about cypher queries therefore, we will have a predetermined set of queries to execute and we don't need the Query Input component.

I am inspecting the codebase and moving over only what we need and I'm struggling to figure out the bus logic, meaning, that I can't find this JavaScript logic... I get lost in the abstraction architecture.

To be very specific, this is where I get lost, unable to figure out where the bus.self() logic is and how, eventually, a call is made to retrieve the data.

Any HELP or guidance is HIGHLY appreciated :-)

<CypherEditor
              sendCypherQuery={(text: string) =>
                new Promise((res, rej) =>
                  bus.self(
                    CYPHER_REQUEST,
                    {
                      query: text,
                      queryType: NEO4J_BROWSER_USER_ACTION_QUERY,
                      params: applyParamGraphTypes(params)
                    },
                    (response: { result: QueryResult; success?: boolean }) => {
                      if (response.success === true) {
                        res(response.result)
                      } else {
                        rej(response.result)
                      }
                    }
                  )
                )
              }
            />

[OskarDamkjaer]

I'd be happy to help! If I understand you correctly what you want is to modify Browser to have a predefined set of queries to execute and you don't care about the main editor. I think the easiest thing you could do is:

• create a guide with only one page with all the queries you want (you could use sidebar-guides/movie-graph.tsx for inspiration)
• modify the sidebar to be open with that guide by default (or even hardcode it to always show your "guide")
• clicking the small play button on the code blocks in guides will run the cypher query already, if you want to run the cypher some other way you could take inspiration from how the small button works
• remove the main editor altogether if you don't need it

To answer your specific question, the bus is an library that a maintainer before me wrote, basically it's a way to pass messages around the application. It's connected to redux, so sending a message will dispatch a redux action and these actions are listened to by redux observable. In practice this means that when you send bus.self(EVENT_NAME) there'll be a corresponding some$.ofType(EVENT_NAME) which will do some async logic and then it's send a message back, which you can handle in the callback to bus.self. So to find what sending an event on bus.self does, search the project for the event name, for your specific example of CYPHER_REQUEST the listener is in cypherDuck.ts.

By the way, if you're interested you can try out the new cypher editor we've been working on (demo here). It's still in the early stages & not very well documented, any feedback welcome!

[alejandroscotti]

Thanks so much! much appreciated 💯