diff --git a/CHANGELOG.md b/CHANGELOG.md
index 00f5795..fd8963b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
## Dev
+### Added
+
+- **client-api**: `toggleClustering(isOn)` to start/stop clustering
+
### Infra
- Update Storybook from 6 to 7
@@ -13,6 +17,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
- Update dependencies
+### Fix
+
+- **client-api**: `tickClustering(milliseconds)` now works, requires Graphistry server upgrade
+
## 4.6.1
### Added
diff --git a/projects/client-api-react/src/stories/GraphistryJS.stories.jsx b/projects/client-api-react/src/stories/GraphistryJS.stories.jsx
index f8264e4..b2bfcd7 100644
--- a/projects/client-api-react/src/stories/GraphistryJS.stories.jsx
+++ b/projects/client-api-react/src/stories/GraphistryJS.stories.jsx
@@ -12,7 +12,7 @@ import {
toggleToolbar,
toggleHistograms,
toggleTimebars,
- togglePlay,
+ toggleClustering,
toggleInspector,
encodeAxis,
selectionUpdates,
@@ -443,14 +443,50 @@ export const verticalLayoutAndAxis = {
},
};
+
+
+export const tick = {
+ render: (args) => {
+ const iframe = useRef(null);
+ const [messages, setMessages] = useState(['loading...']);
+ const [g, setG] = useState(null);
+ const [tickCount, setTickCount] = useState(0);
+
+ const milliseconds = 2000;
+
+ useEffect(() => {
+ //////// Instantiate GraphistryJS for an iframe
+ graphistryJS(iframe.current)
+ .pipe(tap((g) => setG(g)))
+ .subscribe(
+ (g) => setMessages((arr) => arr.concat([`graphistryJS instantiated`, String(g)])),
+ (err) => {
+ console.error('Error:', err);
+ setMessages((arr) => arr.concat([`Error: ${err}`]))
+ },
+ () => setMessages((arr) => arr.concat(['Completed'])));
}, [iframe]);
- return (
-
- );
-}
\ No newline at end of file
+ useEffect(() => {
+ if (!g || !tickCount) {
+ console.debug('tick not ready', {g, tickCount})
+ return;
+ }
+
+ of(g)
+ .pipe(
+ tickClustering(milliseconds)
+ //toggleClustering(tickCount % 2 == 1), //or as a toggle
+
+ ).subscribe(
+ () => setMessages((arr) => arr.concat([`ticked`])),
+ (err) => setMessages((arr) => arr.concat([`Error: ${err}`])),
+ () => setMessages((arr) => arr.concat(['Completed'])))
+ }, [tickCount]);
+
+ return <>
+
+
+ >;
+ },
+};
\ No newline at end of file
diff --git a/projects/client-api/src/index.js b/projects/client-api/src/index.js
index 3607643..db262e6 100644
--- a/projects/client-api/src/index.js
+++ b/projects/client-api/src/index.js
@@ -743,6 +743,15 @@ export function togglePanel(panel, turnOn) {
}
chainList.togglePanel = togglePanel;
+export function toggleClustering(selected) {
+ const values = [
+ $value(`scene.simulating`, selected),
+ $value(`scene.controls[0].selected`, selected)
+ ];
+ return makeSetter('view', ...values);
+}
+chainList.toggleClustering = toggleClustering;
+
/**
* @function encodeDefaultIcons
* @description Change default (user-unset) icons based on an attribute. Pass undefined for attribute, mapping to clear.
@@ -995,8 +1004,8 @@ chainList.toggleHistograms = toggleHistograms;
/**
* @function Graphistry.tickClustering
- * @description Run a number of steps of Graphistry's clustering algorithm
- * @param {number} ticks - The number of ticks to run
+ * @description Run a number of milliseconds of Graphistry's clustering algorithm
+ * @param {number} ticks - The number of milliseconds to run
* @return {@link GraphistryState} A {@link GraphistryState} {@link Observable} that emits the result of the operation
* @example
* GraphistryJS(document.getElementById('viz'))
@@ -1007,31 +1016,16 @@ chainList.toggleHistograms = toggleHistograms;
* .pipe(tickClustering(10))
* .subscribe();
*/
-export function tickClustering(/*ticks = 1*/) {
-
- throw new Error('Not implemented');
- /*
-
- console.debug('tickClustering', {ticks});
-
+export function tickClustering(ticks = 1000) {
if (typeof ticks !== 'number') {
return map(g => g);
}
- return switchMap(g => {
- return (
- timer(0, 40)
- .pipe(
- tap((v) => console.debug('tick', v, g)),
- take(Math.abs(ticks) || 1),
- tap((v) => console.debug('tick b', v, g)),
- map(() => g),
- makeCaller('view', 'tick', [{}]),
- isEmpty(),
- tap((v) => console.debug('tick result', v, g)),
- takeLast(1)
- ));
- });
- */
+ return switchMap(g =>
+ of(g).pipe(
+ toggleClustering(true),
+ delay(ticks),
+ toggleClustering(false),
+ takeLast(1)));
}
chainList.tickClustering = tickClustering;
@@ -1308,7 +1302,7 @@ const G_API_SETTINGS = {
* | `linLog` | `boolean` |
* | `lockedX` | `boolean` |
* | `lockedY` | `boolean` |
- * | `lockedR` | `boolean` |
+ * | `lockedR` | `boolean` |
* @function updateSetting
* @param {string} name - the name of the setting to change
* @param {string} val - the value to set the setting to.