Skip to content

Commit d4c488a

Browse files
Updated demo markdowns
1 parent b477c92 commit d4c488a

15 files changed

+81
-23
lines changed

server/src/static/crossbranchalignment.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,8 @@ In the Organizational Chart layout, the number of rows occupied by the immediate
55
### General
66
* Diagram reset
77
* PDF file generation
8-
* Diagram options drawer
8+
* Diagram options drawer
9+
10+
### Sources
11+
* [UI Components](https://github.com/BasicPrimitives/react-demo/tree/master/client/src/containers/CrossBranchAlignment)
12+
* [Redux Store](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/redux/modules/demos/crossbranchalignment.js)

server/src/static/crossteamgroup.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## Demoed features
2-
This diagram displays the same data set as the Large Hierarchy Demo. But it looks way more compact due to the absence of horizontal scrolling and dense array of labels shown for every node of the diagram.
3-
The application shows cross-functional team members using selection checkmarks and large custom user templates. If selected nodes are outside the visible viewport area, the component shows them in the form of markers on the diagram's frame. When you start this demo application, you should see them at the bottom of the diagram bounding rectangle. You can click them, and the diagram would scroll them into the viewport.
2+
This diagram displays the same data set as the Large Hierarchy Demo. But it looks way more compact due to the absence of horizontal scrolling and dense array of labels shown for every diagram node.
3+
The application shows cross-functional team members using selection checkmarks and large custom user templates. If selected nodes are outside the visible viewport area, the component shows them as markers on the diagram's frame. You should see them at the bottom of the diagram bounding rectangle when you start this demo application. You can click them, and the diagram would scroll them into the viewport.
44

55
### Cross-Functional Team Visualization
66
* Group titles
@@ -21,3 +21,7 @@ The application shows cross-functional team members using selection checkmarks a
2121
* Diagram reset
2222
* PDF file generation
2323
* Diagram options drawer
24+
25+
### Sources
26+
* [UI Components](https://github.com/BasicPrimitives/react-demo/tree/master/client/src/containers/CrossTeamGroup)
27+
* [Redux Store](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/redux/modules/demos/crossteamgroup.js)

server/src/static/dependencies.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## Demoed features
22
### Large layered graph visualization
3-
This is example of large volume of dependencies having no context to sort and group them.
3+
This is an example of the large volume of dependencies having no context to sort and group. It is time to update it.
44

55
### Features
66
* Hiding grand parent connections
@@ -12,3 +12,6 @@ This is example of large volume of dependencies having no context to sort and gr
1212
* PDF file generation
1313
* Diagram options drawer
1414

15+
### Sources
16+
* [UI Components](https://github.com/BasicPrimitives/react-demo/tree/master/client/src/containers/Dependencies)
17+
* [Redux Store](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/redux/modules/demos/dependencies.js)

server/src/static/dynamicloading.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
## Demoed features
22
### Browsing combined with dynamic nodes loading
3-
* This demo dynamically loads chart nodes as the user navigates around the diagram. The top 3 levels stay loaded permanently. All other rows are loaded as the user browses down into them, and control discards them as it navigates out to any other branch of the hierarchy.
4-
* Selecting and pinning nodes. If the user check marks a loaded node, it stays loaded and not discarded when the user swaps to another branch.
3+
* This demo dynamically loads chart nodes as the user navigates around the diagram. The top 3 levels stay loaded permanently. All other rows are loaded as the user browses down into them, and control discards them as it navigates to any other branch of the hierarchy.
4+
* Selecting and pinning nodes. If the user check marks a loaded node, it will stay loaded when it goes to another branch.
55

66
### General
77
* Diagram reset
88
* PDF file generation
9-
* Diagram options drawer
9+
* Diagram options drawer
10+
11+
### Sources
12+
* [UI Components](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/containers/DynamicLoading/DynamicLoading.js)
13+
* [Redux Store](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/redux/modules/demos/dynamicloading.js)

server/src/static/familychartitemsordering.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## Demoed features
22
### User-guided family chart nodes ordering
3-
Family Tree Component orders and aligns nodes automatically. It searches for the best order of family nodes. The automatic layout is convenient for initial rendering, but lack of ordering rules keeps the layout engine reordering nodes every time we add new nodes into the diagram. So end-users have to adapt to global layout changes every time they make changes to diagram nodes. When a user defines a position for every node, the opposite situation drives us back to diagram editors' age and manual node placement. Manual node positioning is inconvenient, so we combine the best of the two approaches: auto layout and user-guided nodes order. Our layout engine respects end-user ordering rules as long as they are applicable and ignores them when they are not relevant.
3+
Family Tree Component orders and aligns nodes automatically. It searches for the best order of family nodes. The automatic layout is convenient for initial rendering, but the lack of ordering rules keeps the layout engine reordering nodes every time we add new nodes into the diagram. So end-users have to adapt to global layout changes every time they make changes to diagram nodes. When a user defines a position for every node, the opposite situation drives us back to diagram editors' age and manual node placement. Manual node positioning is inconvenient, so we combine the best from the two approaches: auto layout and user-guided nodes order. Our layout engine respects end-user ordering rules as long as applicable and ignores them when they are not relevant.
44

55
This demo family diagram has annotations showing relations guiding the layout engine. See horizontal red dotted lines. The arrow direction defines who gets its order position first and who is next.
66

@@ -18,3 +18,7 @@ This demo family diagram has annotations showing relations guiding the layout en
1818
### Annotations
1919
* Offbeat Connector Annotation - use nodes context buttons to show connector annotation between any two nodes of the diagram
2020
* Background Annotation - select nodes to enable background annotation. Background annotation auto merges for neighboring nodes.
21+
22+
### Sources
23+
* [UI Components](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/containers/FamilyChartItemsOrdering/FamilyChartItemsOrdering.js)
24+
* [Redux Store](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/redux/modules/demos/familychartitemsordering.js)

server/src/static/familychartwithannotations.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
## Demoed Features
2-
Family chart visualizes dependency trees and graphs in form of multiple inheritance diagram.
2+
The family chart visualizes dependency trees and graphs in the form of a layered multiple-inheritance diagram.
33

44
### Family Chart Auto Layout
55
* Automatic connection lines grouping into bundles
@@ -11,4 +11,8 @@ Family chart visualizes dependency trees and graphs in form of multiple inherita
1111
### General
1212
* Diagram reset
1313
* PDF file generation
14-
* Diagram options drawer
14+
* Diagram options drawer
15+
16+
### Sources
17+
* [UI Components](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/containers/FamilyChartWithAnnotations/FamilyChartWithAnnotations.js)
18+
* [Redux Store](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/redux/modules/demos/familychartwithannotations.js)

server/src/static/financialownership.md

+3
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,6 @@
1010
* PDF file generation
1111
* Diagram options drawer
1212

13+
### Sources
14+
* [Ui Components](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/containers/FinancialOwnership/FinancialOwnership.js)
15+
* [Redux Store](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/redux/modules/demos/financialownership.js)

server/src/static/highlightannotations.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@
33
* Straight connector annotations
44
* Stacking connector annotations
55

6-
The diagram displays permanent straight connector annotations for the current cursor node and dynamic for the currently highlighted node.
6+
The diagram displays permanent straight connector annotations for the current cursor node and dynamic for the highlighted node.
77

8-
The component performs the minimum required volume of rendering and layout operations. The chart shows highlight and draws on-screen connector annotations when the user moves the mouse pointer over nodes. The diagram layout does not depend on annotations. It does not reserve any space for them, so the component draws connector annotations on top of diagram nodes without general layout and nodes rendering. The user gets instant visual feedback for a node under the mouse cursor. Instant annotations are convenient when we have many of them defined across nodes of the diagram, and we don't want to show all of them all the time.
8+
The component performs the minimum required volume of rendering and layout operations. The chart shows the highlight and draws on-screen connector annotations when the user moves the mouse pointer over nodes. The diagram layout does not depend on annotations. It does not reserve any space, so the component draws connector annotations on top of diagram nodes without general layout and nodes rendering. The user gets instant visual feedback for a node under the mouse cursor. Instant annotations are convenient when we have many of them defined across nodes of the diagram, and we don't want to show all of them all the time.
99

1010
### General
1111
* Diagram reset
1212
* PDF file generation
13-
* Diagram options drawer
13+
* Diagram options drawer
14+
15+
### Demo Sources
16+
* [UI Components](https://github.com/BasicPrimitives/react-demo/tree/master/client/src/containers/HighlightAnnotations)
17+
* [Redux store](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/redux/modules/demos/highlightannotations.js)

server/src/static/largehierarchy.md

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
## Demoed features
22
### Browsing diagram nodes and auto-layout
3-
* Fitting large diagram into available screen space. Component folds nodes into markers to make the brwosing of large hierarchies possible.
3+
* Fitting large diagram into available screen space. Component folds nodes into markers to make the browsing of large hierarchies possible.
44
* Showing context menu and details for a node in the user focus. Component shows cursor node immediate children and parents details, so the user can click them and browse nodes one by one further around the diagram.
55
* Selecting and pinning nodes. As a user browses diagram nodes, it may pin the ones it is interested in, so their details stay visible.
6+
67
### General
78
* Diagram reset
89
* PDF file generation
9-
* Diagram options drawer
10+
* Diagram options drawer
11+
12+
### Sources
13+
* [UI Components](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/containers/LargeHierarchy/LargeHierarchy.js)
14+
* [Redux Store](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/redux/modules/demos/largeorganizationalchart.js)

server/src/static/mutualfinancialownership.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,14 @@ Configuration may contain looped references between items, so control finds layo
44

55
### Layout Features
66
* Dependency Loops
7-
* Hiding direct grand parent relations
7+
* Hiding direct grandparent relations
88
* Alignment by levels
99

1010
### General
1111
* Diagram reset
1212
* PDF file generation
1313
* Diagram options drawer
1414

15+
### Sources
16+
* [UI Components](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/containers/MutualFinancialOwnership/MutualFinancialOwnership.js)
17+
* [redux Store](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/redux/modules/demos/mutualfinancialownership.js)

server/src/static/orgeditor.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,8 @@ Drag & Drop is a popular feature. We developed the stand-alone ReactJS library t
3636
This demo application implements nodes Drag & Drop inside of the single diagram control. It implements nodes Drag & Drop between two controls; enable the dual diagram view mode to see two controls side by side. It implements drag and Drop of nodes from the search results drawer into control panels as well.
3737
In general, we are against UI functionality based on Drag & Drop in analytical accounting class business applications. Drag & Drop creates a lot of usability issues in applications having transactionality of operations. Applications having document-based UI, Drag & Drop is not a problem. Users can always rollback document changes. When we develop transactional processes, the usage of Drag & Drop may accidentally create unwanted operations. So in transactional applications, Drag & Drop requires confirmation dialogs or transactions queue with a subsequent confirmation dialog to be implemented, which is not convenient and meant to be when we develop Drag & Drop UI.
3838
### Matrix children layout
39-
Usually, organizational charts grow horizontally more than vertically. So keeping nodes in square formation saves horizontal space. It is essential to fit the matrix into the width of the screen. It is OK to scroll nodes vertically or horizontally. The necessity to scroll both ways creates usability issues, so the control has the option `maximumColumnsInMatrix` to limit the maximum number of columns in the matrix formation, so it cannot grow beyond some fixed columns number. For example, when a node has four children, they are matrixed into 2 * 2 matrix, nine children are matrixed into 3 * 3 matrix, 16 into 4 * 4, etc. Still, if we limit the number of columns to 4, 20 children would be matrixed into a 4 * 5 matrix.
39+
Usually, organizational charts grow horizontally more than vertically. So keeping nodes in square formation saves horizontal space. It is essential to fit the matrix into the width of the screen. It is OK to scroll nodes vertically or horizontally. The necessity to scroll both ways creates usability issues, so the control has the option `maximumColumnsInMatrix` to limit the maximum number of columns in the matrix formation, so it cannot grow beyond some fixed columns number. For example, when a node has four children, they are matrixed into 2 * 2 matrix, nine children are matrixed into 3 * 3 matrix, 16 into 4 * 4, etc. Still, if we limit the number of columns to 4, 20 children would be matrixed into a 4 * 5 matrix.
40+
41+
### Sources
42+
* [UI Components](https://github.com/BasicPrimitives/react-demo/tree/master/client/src/containers/OrgEditor)
43+
* [Redux Store](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/redux/modules/demos/orgeditor.js)

server/src/static/partners.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* General partner
44
* Limited Partner
55

6-
Organizational chart provides simplified support for multiple parents, multiple managers or multiple co-heads in hierarchy. Child item defined as General partner added to the same level as its parent item and logically shares children. General & Limited item types cannot have their own children, but may have Advisers & Assistants. Limited partner has no connection to parent but it shares children in hierarchy.
6+
The organizational chart control provides simplified support for multiple parents, managers, or co-heads in the hierarchy. If a child node item type is a general partner, the component places it at the same level as its logical parent item and visually shares children. General & limited item types cannot have their children but may have advisers & assistants. The limited partner has no connection to the parent node, but it shares children.
77

88
### Various Annotations
99
* Connector Annotation
@@ -14,3 +14,7 @@ Organizational chart provides simplified support for multiple parents, multiple
1414
* Diagram reset
1515
* PDF file generation
1616
* Diagram options drawer
17+
18+
### Sources
19+
* [UI Components](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/containers/Partners/Partners.js)
20+
* [Redux Store](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/redux/modules/demos/partners.js)

server/src/static/patents.md

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## Demoed features
2-
### Multiple inheritance diagram having grand parent relations
3-
Patents data has massive number of references to grandparents, basically every patent has links to every grandparent patent in database, their visualization is meaningless and creates visual clutter, so in order to resolve this problem `famDiagram` control provides option to hide direct grand parents connectors. So this demo, instead of visualizing direct connections to grandparents, shows referenced grandparents with custom template and highlights connection with highlight path annotation, so if some grandparent is outside of the current view, end user has indication that there are grandparents directly connected to the current cursor item.
2+
### Multiple-inheritance diagram having grandparent relations
3+
Patents data has many references to grandparents; basically, every patent has links to every grandparent patent in the database. Their visualization is hard to trace and creates visual clutter, so to resolve this problem, `famDiagram` control provides an option to hide them. So this demo, instead of visualizing direct connections to grandparents, shows referenced grandparents with a custom template. Plus, the demo application highlights connection with highlight path annotation, which provides a visual indication that the item has a relationship with nodes outside viewport boundaries.
44

55
### Features
66
* Hiding grand parent connections
@@ -11,3 +11,6 @@ Patents data has massive number of references to grandparents, basically every p
1111
* PDF file generation
1212
* Diagram options drawer
1313

14+
### Sources
15+
* [UI Components](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/containers/Patents/Patents.js)
16+
* [Redux Store](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/redux/modules/demos/patents.js)

server/src/static/techtree.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,8 @@ This alignment priority can then be used to create a full sequence, branch or ch
1212
### General
1313
* Diagram reset
1414
* PDF file generation
15-
* Diagram options drawer
15+
* Diagram options drawer
16+
17+
### Sources
18+
* [UI Components](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/containers/TechTree/TechTree.js)
19+
* [Redux Store](https://github.com/BasicPrimitives/react-demo/blob/master/client/src/redux/modules/demos/techtree.js)

0 commit comments

Comments
 (0)