Need a better Visual Presentation of a fulfillment Plan

[Jbutler-helpful]

our current text based presentation is hard to decipher

[RobertLRead]

We now think this is best done in the context of a Jupyter Notebook. If we could find Python code that could render the tree-like structure of the fulfillment plan in the notebook, we could make nice interactive visualizations.

I recommend we just do some proof-of-concept work attached to this issue; this would be a good issue for coming to understand the project.

[Jbutler-helpful]

It should be noted that this would be 1 potential presentation/interaction layer

[devhawk]

I'm not a notebook or even front-end/UI expert. I removed my assignment. We can discuss assigning someone else at our next meeting

[Jbutler-helpful]

First step is to research what packages are available in Jupyter notebook

A starting point to take a look at: D3 package: https://d3js.org/ Medium article about using d3 with Jupyter https://medium.com/@stallonejacob/d3-in-juypter-notebook-685d6dca75c8

Focus on finding tools that can develop graphs that align with Deverys work and then gather information about the imput formatting that would be need so that Harry can construct the output of the fulfillment plans to align

[Jbutler-helpful]

Working area https://miro.com/app/board/uXjVOmTPC4I=/ Next step Riya is doing another round of research

[Jbutler-helpful]

[tim-airmatrix]

Started a side-project to solve this issue here: https://github.com/timr11/project-data-visualizations

Currently prototyping, utilizing cytoscape.js to render the supply chain graph and to implement some interactivity like expanding & contracting children nodes on click. Then using notebookjs to run the JS code in the ipynb, which is able to pass in the graph data generated by python and render it with cytoscape.

[timr11]

Got visuals pretty close to what's in Miro, based on the chair example in the src/atoms.py code in this project.

Next steps:

• Try to add OKH icons above each maker/supplier, populated with the OKH name
• Reverse edge direction
• Add data panel that shows more OKW info on-click, including the tools it has

[Jbutler-helpful]

This looks much better, one note I think the arrows should be be in the opposite direction. They should be expressing the flow of BOM components from more fundamental to more complex.

[timr11]

@devhawk Expected JSON format:

[
    {
        "class": "atom",
        "id": "QH103",
        "root": false,
        "label": "fabric"
    },
    {
        "class": "maker",
        "label": "Devhawk Engineering",
        "designs": [
            {
                "name": "Funky Chair Design",
                "product": "Q15026",
                "bom": ["QH100", "QH101", "QH102", "QH108"]
            },
            {
                "name": "Seat Design 1",
                "product": "QH101",
                "bom": ["QH103"]
            },
            {
                "name": "Leg Design",
                "product": "QH100",
                "bom": ["QH104"]
            }
        ]
    },
    {
        "class": "supplier",
        "label": "raw supplies",
        "supplies": ["QH103", "QH104", "QH106", "QH107", "QH108"]
    },
]

For atoms, "root" is true when it's the atom that's the final output, false otherwise.

[devhawk]

I added a getObj method to each SupplyTree to return a simple data object that can easily be serialized to JSON. I ran that code against the original chair demo hard coded into atoms.py and this was the result. Does this work for you @timr11

{
    "product": {
        "id": "Q15026",
        "desc": "chair"
    },
    "type": "made",
    "party": "Devhawk Engineering",
    "design": "Funky Chair Design",
    "bom": [
        {
            "product": {
                "id": "QH100",
                "desc": "chair leg"
            },
            "type": "supplied",
            "party": "Robert's Chair Parts"
        },
        {
            "product": {
                "id": "QH108",
                "desc": "nails"
            },
            "type": "supplied",
            "party": "raw supplies"
        },
        {
            "product": {
                "id": "QH102",
                "desc": "chair back"
            },
            "type": "supplied",
            "party": "Robert's Chair Parts"
        },
        {
            "product": {
                "id": "QH100",
                "desc": "chair leg"
            },
            "type": "made",
            "party": "Devhawk Engineering",
            "design": "Leg Design",
            "bom": [
                {
                    "product": {
                        "id": "QH104",
                        "desc": "wood"
                    },
                    "type": "supplied",
                    "party": "raw supplies"
                }
            ]
        },
        {
            "product": {
                "id": "QH101",
                "desc": "chair seat"
            },
            "type": "made",
            "party": "James Maker Space",
            "design": "Seat Design 2",
            "bom": [
                {
                    "product": {
                        "id": "QH107",
                        "desc": "frame"
                    },
                    "type": "supplied",
                    "party": "raw supplies"
                },
                {
                    "product": {
                        "id": "QH106",
                        "desc": "upholstery"
                    },
                    "type": "supplied",
                    "party": "raw supplies"
                },
                {
                    "product": {
                        "id": "QH105",
                        "desc": "stuffing"
                    },
                    "type": "missing"
                }
            ]
        },
        {
            "product": {
                "id": "QH101",
                "desc": "chair seat"
            },
            "type": "made",
            "party": "Devhawk Engineering",
            "design": "Seat Design 1",
            "bom": [
                {
                    "product": {
                        "id": "QH103",
                        "desc": "fabric"
                    },
                    "type": "supplied",
                    "party": "raw supplies"
                }
            ]
        }
    ]
}

[tim-airmatrix]

@devhawk the above JSON format works :)

@Jbutler-helpful The new visuals are working E2E now, here's the latest version using data generated from Harry's code:

It's using Devery's new styles, also the edge distances are now less weird.

[Jbutler-helpful]

in the cookie flash make the graphs didn't show grocery stores as separated OKW effectively

https://docs.google.com/document/d/1_dkatQQ-4OMq5inzIatd4zoBoidUroSV3ulrQNjrycQ/edit#heading=h.vp0hi8qlo19k

[Jbutler-helpful]

@timr11 do you see this issue as done. We know there are subsequent things we need to work on see #54 but it seems to me the core components of this issue is done.