cult-of-coders / grapher-live Goto Github PK

View Code? Open in Web Editor NEW

6.0 6.0 5.0 36 KB

Grapher Live - Verify your queries live

Home Page: https://atmospherejs.com/cultofcoders/grapher-live

License: MIT License

JavaScript 75.55% CSS 24.45%

grapher-live's People

Contributors

Stargazers

Watchers

Forkers

herteby justbill2020 erixtekila yasaricli shaunstoltz

grapher-live's Issues

Provide a way to test reactive queries as well

Port to Vue?

I was thinking I could port grapher-live to Vue maybe.
I don't know any React though, so translating the code wouldn't be very fun hehe.
Do you actually use grapher-live a lot in development? Or do you mostly have it as a demo?

Provide a way to create a firewall.

This way if you want grapher-live to work on a prod server, you may allow it to some developers or special type of users.

UI Improvements

Make the whole thing vh adaptive
- Header: 10vh
- query: 70vh, params: 20vh
- left part: 40%, right part: 60%, scroll-auto.
- custom design scrollbars

Go for flat design.

wont render, throws exception

Was trying to test out Grapher Live. Maybe there is something wrong with how I setup my queries or schema/grapher-links, but Live wont render a thing. I'm not using Collection2 and I'm using simpl-schema.

Exception in delivering result of invoking 'grapher.live_docs': Invariant Violation: Objects are not valid as a React child (found: object with keys {definitions}). If you meant to render a collection of children, use an array instead.
    in h4 (created by DocumentationCollectionSchemaItem)
    in div (created by Window)
    in div (created by Window)
    in Window (created by DocumentationCollectionSchemaItem)
    in div (created by DocumentationCollectionSchemaItem)
    in DocumentationCollectionSchemaItem
    in div (created by Window)
    in div (created by Window)
    in Window
    in div
    in Unknown
    in div
    in div
    in div (created by Window)
    in div (created by Window)
    in Window
    in div
    in Unknown (created by Documentation)
    in div (created by Documentation)
    in Documentation (created by _class)
    in _class (created by Live)
    in div (created by Live)
    in div (created by Live)
    in div (created by Live)
    in Live (created by ReactMeteorDataComponent)
    in ReactMeteorDataComponent (created by Route)
    in Route (created by RestrictedRoute)

Add tutorial

Add a btn top right, question mark, tooltip: "Start Tutorial"

Query

Show some examples, tell them to read the documentation. If they are on grapher-live.cultofcoders.com, they can try this one:

{
   users: {
        profile: 1,
        emails: 1,
        posts: {
             title: 1
        }
   }
}

Params

Show them how they can customize the query using parameters. Making the query intelligent and dynamic. Teach them a bit about $filters and $options link to Mongo.Collection

Results

Show them the insights, the size of the response and the total number of leaves.

Show them the Run button or the fact they can click "Ctrl+Enter / Cmd + Enter"

Show them the check for "check for exposure rules" - And logged in status.

Maybe best tutorials are video tutorials ? Create a quick screen cast, with my voice.

Docs Sidebar

Doc Generation Component:

Mongo.Collection.getAll()
// sort it alphabetically
// return an array of [mongoCollection]: collection

Documentation: {
     collections: {
           [name]: {
                schema: {
                     [fieldName]: config,
                }
                links: {
                     [linkName]: [linker]
                }
           }
     },
}

Passing it to dumb components

UI:

Slide in from the right
Provide legend with collections
Provide links to the related collection link.
Show special colors for inversed or direct link
Show badges Meta/NonMeta for links
Each collection we should show badge if "exposed"
Show firewall badge if it has one. Or something with warning if it doesn't have.
Nice explicit toggle for "Expose restrictions or not" , show login more proeminently.
Users.describe('This is where meteor users are stored');

addLinks({
       linkName: { describe: "XXX Kfak fkakf kafka" }
})

These describes will be tooltips around the app. They should be big if present.

Ability to download the documentation html ?

$filter is not working

In your grapher live site:
http://grapher-live.cultofcoders.com/grapher

I hacked in the following query:

{
    posts: {
        $filter({filters, params}) {
            filters.ownerId = params.ownerId
        },
        ownerId:1,
        title: 1
    }
}

as parameters:

{
    ownerId:"UNKNOWN"
}

To my surprise it shows all results from posts and not 0 results.

[Documentation] Provide Recipe to Lazily Load Grapher Live

Run check() in the method

Fails with package audit-arguments-check

Provide 2 dropdowns for quickly creating queries

One for Collections
One for Named Queries

On Click it should auto-complete the query input and parameter input with {undefineds}

Use the same design pattern from GraphiQL
Use codemirror as GraphiQL does
Provide shortcuts for full schema dumps

modules-runtime.js?hash=637cb12…:139 Uncaught Error: Cannot find module 'brace'
    at Function.require.resolve (http://localhost:3000/packages/modules-runtime.js?hash=637cb12b6fd3acf3ffbfcf0f2ee1cf3988a7f1fe:139:19)
    at Module.resolve (http://localhost:3000/packages/modules-runtime.js?hash=637cb12b6fd3acf3ffbfcf0f2ee1cf3988a7f1fe:91:25)
    at Module.Mp.import (http://localhost:3000/packages/modules.js?hash=2fe7bebb516aea7ec7d725a57c4d7bb3b9ddbe72:340:29)
    at meteorInstall.node_modules.meteor.cultofcoders:grapher-live.ui.Live.jsx (http://localhost:3000/packages/cultofcoders_grapher-live.js?hash=03f4667e3b89e3a4f82908caf3e5ee9e750598cf:59:644)
    at fileEvaluate (http://localhost:3000/packages/modules-runtime.js?hash=637cb12b6fd3acf3ffbfcf0f2ee1cf3988a7f1fe:191:9)
    at Module.require (http://localhost:3000/packages/modules-runtime.js?hash=637cb12b6fd3acf3ffbfcf0f2ee1cf3988a7f1fe:116:16)
    at Module.Mp.import (http://localhost:3000/packages/modules.js?hash=2fe7bebb516aea7ec7d725a57c4d7bb3b9ddbe72:349:16)
    at meteorInstall.node_modules.meteor.cultofcoders:grapher-live.main.client.js (http://localhost:3000/packages/cultofcoders_grapher-live.js?hash=03f4667e3b89e3a4f82908caf3e5ee9e750598cf:35:14)
    at fileEvaluate (http://localhost:3000/packages/modules-runtime.js?hash=637cb12b6fd3acf3ffbfcf0f2ee1cf3988a7f1fe:191:9)
    at require (http://localhost:3000/packages/modules-runtime.js?hash=637cb12b6fd3acf3ffbfcf0f2ee1cf3988a7f1fe:116:16)

I've installed brace with npm but it doesn't works.

Breaks in [email protected]

I was trying this package in the grapher-boilerplate app. That worked will, but after updating that app to [email protected], it broke with the follwing error.

Exception while invoking method 'grapher.live' TypeError: Cannot read property '_id' of null
    at comparator (packages/cultofcoders:grapher/lib/query/hypernova/assembleAggregateResults.js:61:33)
    at _.find.result (packages/cultofcoders:grapher/lib/query/hypernova/assembleAggregateResults.js:68:28)
    at packages/underscore.js:218:20
    at Array.some (<anonymous>)
    at _.some._.any (packages/underscore.js:267:59)
    at Function._.find._.detect (packages/underscore.js:217:5)
    at _.each.aggregateResult (packages/cultofcoders:grapher/lib/query/hypernova/assembleAggregateResults.js:65:34)
    at Function._.each._.forEach (packages/underscore.js:147:22)
    at packages/cultofcoders:grapher/lib/query/hypernova/assembleAggregateResults.js:64:11
    at storeHypernovaResults (packages/cultofcoders:grapher/lib/query/hypernova/storeHypernovaResults.js:59:9)
    at _.each.childCollectionNode (packages/cultofcoders:grapher/lib/query/hypernova/hypernova.js:9:9)
    at Array.forEach (<anonymous>)
    at Function._.each._.forEach (packages/underscore.js:139:11)
    at hypernova (packages/cultofcoders:grapher/lib/query/hypernova/hypernova.js:6:7)
    at hypernovaInit (packages/cultofcoders:grapher/lib/query/hypernova/hypernova.js:25:5)
    at Query.fetch (packages/cultofcoders:grapher/lib/query/query.server.js:18:16)