damonsk / onlinewardleymaps Goto Github PK

Would it be possible to extend the grammar to support submaps?

Clicking a submap component would navigate to the specified address of a lower level map.

submap Name [Y, X] VarName

var Name Value

The convention used in Atlas is a component with a solid fill:

Example script:

submap Order Pipeline [0.8, 0.6] OrderPipelineMap

var OrderPipelineMap "https://onlinewardleymaps.com/#clone:zYTNMRLQKvdbVFVNGi"

As more elements of a map are added, the usage guide is getting too long - a better way to display is probably needed.

A good workflow in the app would be to create components in the text editor using component foo, have them initially position themselve around [0.9, 0.1] and then position them using drag and drop.

Expected Behavior

When I change the evolution value on a component, I expect to see the node move and the relationships redrawn around them

Current Behavior

If I adjust an evolved X coord I see that the relationship lines are redrawn at the target position, but the component node stays exactly where it was previously.

Possible Solution

This is likely connected to no state change being detected on the element itself. (A prop on the containing element will need to be updated for react to re-render the relevent markup)

Steps to Reproduce

• Open the tool.
• Click "Example Map"
• Change evolution value of 'Kettle'

Migrate the project away from jQuery to React

As per https://miro.medium.com/max/5496/1*4exsrh6Ju8wFr6DEHkUTQw.jpeg

Parent #51

There is currently no coverage in the app.

It might be an idea to add snapshot tests to the exisiting components.
I'm not a big fan of snapshot testing, but it will at least give a dev a smell if an update changes something unexpectedly.

It's typical to give more horizontal space to the product stage to allow more variation in maturity of those component.

When we create maps, we rarely create one, but usually a series of related maps that build on each other. Being software bods by background, we'd like to manage these in git, using branching or rebasing. Eventually we would look to build map generation into gitlab pipelines as well.

The web tool is quite nice for authoring, and the human-readable markup is great to easily create them and modify without even a mouse.

But, I'd like to be able to manage these maps in a git repo, for example, to track changes over time. And perhaps would want to generate SVG or images from the markup. Perhaps even use this in an IDE/editor preview plugin (think PlantUML).

Is there already a CLI version of the tool that could work in this environment?

Possibly only an irritation because I've coded a bunch of Clojure, but... The comma in [y, x] is redundant. Allow [y x].

I often map future scenarios in which the introduction of a new component creates a future value chain. It would be great to be able to mark components as "future" and have any edges connecting them be marked as line of future.

As I am not be able to create wardleymaps publicly I would like to host onlinewardley maps on our K8s cluster.

Since all the maps should start with user needs, it may be a good idea to add a new variable "anchor" which would be somewhat different from the standard "component" and clearly show where everything starts.

Rather than typing component, it would be nice just to be able to do "c" etc.

title = t
component =c
evolve = e
inertia = i

Have you thought of using a grammar to describe the syntax? Would make coping with its evolution a lot cleaner.

I'm guessing you'd like to constrain it to be a regular language so that the syntax highlighting keeps working? Or is that a secondary consideration?

As title - to prevent accidentally losing work, like I've just done.. :(

I'd like to add the inertia sign right after the label, rather than on the border of the next level. Does that make sense?

As per tweet - https://twitter.com/HansDeLeenheer/status/1219256783375650816

As seen in this map: https://twitter.com/joepindar/status/1213152950371147777

Another instance of jQuery being used that could do with being replaced with React equiv way of doing.

Line 40 in App.js - https://github.com/damonsk/onlinewardleymaps/blob/master/src/components/App.js#L40

Simon Wardley suggests the following symbols on the map in his book:
https://miro.medium.com/max/5496/1*4exsrh6Ju8wFr6DEHkUTQw.jpeg

Please add them, so the newly built maps are more complete.

Being able to adjust label position is v useful - should be possible in the syntax not just in drag and drop.

as per https://miro.medium.com/max/5496/1*4exsrh6Ju8wFr6DEHkUTQw.jpeg

'A limitation to one component to another'

Parent Issue - #51

when using
style handwritten
or
style wardley
and downloading maps, the style is lost.

As per https://miro.medium.com/max/5496/1*4exsrh6Ju8wFr6DEHkUTQw.jpeg

'An area of interest, something worth noting, e.g components designated to a team.'

Parent #51

Would it be possible to extend the grammar to render pipelines?

Perhaps the semantics could be similar to evolve

evolve Name (X Axis)

A pipeline could be defined as

pipeline Name [X Axis, X Axis]

After exporting a PNG of the following map. I used a graphics editor to overlay the pipelines. It would be so useful to script these instead:

title Evolution of Work
style wardley

anchor Business [0.95, 0.28]

component Human Capital [0.84, 0.23] label [-95, -10]
component Capital [0.85, 0.33] label [4, -9]
component Automation [0.29, 0.50] label [2, -10]
component Systematization [0.45, 0.24] label [-94, -16]
component Craft [0.67, 0.21] label [-41, -9]
component AI [0.07, 0.55] label [2, -10]

Business->Human Capital
Business->Capital
Human Capital->Craft
Craft->Systematization
Capital->Automation
Systematization->AI
Automation->AI

It would be great to be able to leave the y co-ordinate unspecified and have the system place the y values automatically. I think it would be possible to do all the manual placement using either an "anchor" flag (this could be a specialisation of 'component'?) or in relative terms to other components (to indicate "above", "below" and "same level"). Potential syntax for this map http://onlinewardleymaps.com/#KrcjD8Z9VHpFhOxJaC

anchor A [.5]
component B [.3]
component C [.6]
component D [ .4]
component E [ .2]

A -> B
A -> C
B -> D
C -> D
D -> E

B = C
E ^ D

It would be really marvellous if multiple users could simultaneously interact with a map.

May be a mistake on my part, but why does the path say "unsaved"?

http://onlinewardleymaps.com/(unsaved)#dKoTIcn4EidQsqoAwH

You allow changing the evolution axis labels.
Please allow changing the value chain axis labels.

Thanks!

Ability to add Attitude to a map - Pioneers, Settlers, Town Planners.

https://miro.medium.com/max/5496/1*4exsrh6Ju8wFr6DEHkUTQw.jpeg

• How would this look?
• What would the syntax be

pioneers [topRight, topLeft, bottomLeft, bottomRight]
each part would be maturity, visiblity
pioneers [ [0.1, 0.2], [0.1, 0.4], ... , ... ]

A similar thing manifests in CSS if further inspiration is needed.

Parent #51

I've had a couple of situations where I've picked up a component and something has happened meaning that it won't drop, and remains stuck to the pointer. The only way I've managed to get out of this state is to save and reload the map.

Would be better to have some general exception handling that returns the component to its pre-drag position if any exception occurs during drag or drop.

Repro:

1. Define a component with component foo []
2. Try to drag it
3. Change the definition to component foo [.8,]

https://twitter.com/RadekMaziarka/status/1213430676617416705

I have some problems with the flow with a label. The app draws flow but it doesn't draw text. Am I the only one who have this problem?

A small thing, but inertia bars should probably sit on the boundaries between stages of evolution.

Would be really handy to be able to add comments to source and to block comment sections out.

I'd prefer // for line quotes and /* ... */ for block comments.

Would be fine to stick to line comments for now to keep things simple.

App.js method loadFromRemoteStorage. This method currently used jQuery ajax to retrieve data for a given map. Replace with react equivalent way of retrieving data asynchronously.

as per https://miro.medium.com/max/5496/1*4exsrh6Ju8wFr6DEHkUTQw.jpeg

'An attempt to alter map'

Parent Issue - #51

e.g. https://miro.medium.com/max/2112/1*x5eXd5ylQpQRDHkJ9anrJQ.jpeg

In our mapping we usually annotate components and inertia points, but Simon also annotates floating areas.
It needs to be possible to use the same annotation target from multiple anchors, for example to illustrate co-evolution of practice.

Ideally there would be an area to display the annotation expansions too.

Since flows can change when components evolve the annotations to flows should be sensitive to 'current' and 'future' conditions.

Example:
Team Z+'Facilitating'<Platform Team // Annotation shall only be visible to current flow Team Z+'X-as-a-Service'>Platform Team // Annotation shall only be visible to future flow Team Z+'X-as-a-Service'<>Platform Team // Annotation shall be visible to both flows

Would be great if we could make a docs/maps folder and start populating it with some maps of the app anchored to different users.

App.js method saveToRemoteStorage

his method currently used jQuery ajax to post data for a given map. Replace with react equivalent way of retrieving data asynchronously.

Drawing both lines of present and lines of the future makes the maps really cluttered. Could we ditch the lines of present when components evolve?

As the title suggests.

Similar to #40, the drag/drop has been missed in moving into React component.

Can't work out what's going on, but pressing "Example map" yielded this:

As per title - when the map changes, it would be good if it's autosaved.

as per https://miro.medium.com/max/5496/1*4exsrh6Ju8wFr6DEHkUTQw.jpeg

'How the map is changing - competitive force'

Parent Issue - #51

Partly exists when a component is evolved.

As per https://miro.medium.com/max/5496/1*4exsrh6Ju8wFr6DEHkUTQw.jpeg

Parent #51