diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
index d7fb7c7..272a7f1 100644
--- a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
+++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
@@ -1,6 +1,8 @@
import React from 'react';
import {
Button,
+ Flex,
+ FlexItem,
MenuToggle,
MenuToggleElement,
Select,
@@ -225,65 +227,79 @@ const OptionsContextBar: React.FC = observer(() => {
};
return (
- <>
- Nodes:
+
-
- val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(null)
- }
- />
-
- Edges:
-
-
- val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(null)
- }
- />
-
- Groups:
-
-
- val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(null)
- }
- />
-
- Nesting Depth:
-
-
- val ? updateValue(parseInt(val), 0, 5, setNestedLevel) : setNestedLevel(null)
- }
- />
-
-
-
+
+
+
+ Nodes:
+
+ val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(null)
+ }
+ />
+
+
+
+
+ Edges:
+
+ val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(null)
+ }
+ />
+
+
+
+
+ Groups:
+
+ val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(null)
+ }
+ />
+
+
+
+
+ Nesting Depth:
+
+ val ? updateValue(parseInt(val), 0, 5, setNestedLevel) : setNestedLevel(null)
+ }
+ />
+
+
+
+
+
+
- {renderNodeOptionsDropdown()}
- {renderEdgeOptionsDropdown()}
+
+ {renderNodeOptionsDropdown()}
+ {renderEdgeOptionsDropdown()}
+
- >
+
);
});
diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx
index 72884ab..90d7b6d 100644
--- a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx
+++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx
@@ -4,6 +4,8 @@ import {
Dropdown,
DropdownItem,
DropdownList,
+ Flex,
+ FlexItem,
MenuToggle,
MenuToggleElement,
TextInput,
@@ -26,9 +28,11 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
};
const layoutDropdown = (
- <>
- Layout:
-
+
+
+
+
+
) => (
setLayoutDropdownOpen(!layoutDropdownOpen)}>
@@ -65,8 +69,8 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
-
- >
+
+
);
const saveModel = () => {
@@ -130,60 +134,66 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
};
return (
- <>
- {layoutDropdown}
-
-
-
-
-
-
- Restore Layout Info
-
-
-
-
- Add Node
-
-
- Medium Scale:
-
- {
- const newValue = parseFloat(val);
- if (!Number.isNaN(newValue) && newValue > options.lowScale && newValue >= 0.01 && newValue <= 1.0) {
- options.setMedScale(parseFloat(val));
- }
- }}
- />
- Low Scale:
+
- {
- const newValue = parseFloat(val);
- if (!Number.isNaN(newValue) && newValue < options.medScale && newValue >= 0.01 && newValue <= 1.0) {
- options.setLowScale(parseFloat(val));
- }
- }}
- />
+
+ Add Node
+
+
+
+
+
+ Medium Scale:
+ {
+ const newValue = parseFloat(val);
+ if (!Number.isNaN(newValue) && newValue > options.lowScale && newValue >= 0.01 && newValue <= 1.0) {
+ options.setMedScale(parseFloat(val));
+ }
+ }}
+ />
+
+
+ Low Scale:
+ {
+ const newValue = parseFloat(val);
+ if (!Number.isNaN(newValue) && newValue < options.medScale && newValue >= 0.01 && newValue <= 1.0) {
+ options.setLowScale(parseFloat(val));
+ }
+ }}
+ />
+
+
- >
+
);
});