Merge pull request #155 from graphistry/dev/fix-filters

Dev/fix filters

CHANGELOG.md

@@ -5,6 +5,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## Dev
 
+## 5.0.2 - 2024-02-13
+
+### Added
+
+* **client-api**: Gracefully ignore null values passed to `togglePanel`, `addFilter`, `addExclusion`
+* **client-api**: Added `setTogglePanel`
+
+### Fix
+
+* **client-api-react**: Fix `filters`, `filter`, `exclusions`, `exclusion` to run again
+
 ## 5.0.1 - 2024-02-05
 
 ### Security

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.0.1",
+  "version": "5.0.2",
   "packages": [
     "projects/client-api",
     "projects/client-api-react",

projects/client-api-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphistry/client-api-react",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/graphistry/graphistry-js.git"
@@ -69,7 +69,7 @@
   "author": "Graphistry, Inc <https://graphistry.com>",
   "license": "ISC",
   "dependencies": {
-    "@graphistry/client-api": "^5.0.1",
+    "@graphistry/client-api": "^5.0.2",
     "crypto-browserify": "3.12.0",
     "prop-types": ">=15.6.0",
     "shallowequal": "1.1.0",

projects/client-api-react/src/bindings.js

@@ -42,9 +42,14 @@ const bindingsTable = {
     gravity:				[ PropTypes.oneOf(Array.from({ length: 100 }, (x, i) => i + 1)), 'defaultGravity',  undefined,  undefined],
     scalingRatio:			[ PropTypes.oneOf(Array.from({ length: 100 }, (x, i) => i + 1)), 'defaultScalingRatio', undefined,  undefined],
 
-    //togglePanel:            [ PropTypes.array,      undefined,                   undefined,      'togglePanel'],
+    setTogglePanel:            [ PropTypes.array,       undefined,                   undefined,      'togglePanel'],
 
-    ticks:                  [PropTypes.number,      undefined,                   undefined,        'tickClustering'],
+    ticks:                  [PropTypes.number,       undefined,                   undefined,      'tickClustering'],
+
+    filters:             [PropTypes.arrayOf(PropTypes.string), undefined,      undefined,      'addFilters'],
+    filter:              [PropTypes.string,       undefined,                   undefined,      'addFilter'],
+    exclusions:          [PropTypes.arrayOf(PropTypes.string), undefined,      undefined,      'addExclusions'],
+    exclusion:           [PropTypes.string,       undefined,                   undefined,      'addExclusion'],
 
     encodePointSize: [
         PropTypes.oneOfType([
@@ -118,10 +123,6 @@ const bindings =
 
 // TODO: infer this from chainList in client-api
 const calls = bindings.map(b => b.jsCommand).filter(Boolean).concat([
-    'addFilter',
-    'addFilters',
-    'addExclusion',
-    'addExclusions',
     'setSelectionExternal',
     'setHighlightExternal'
 ])

projects/client-api-react/src/stories/Graphistry.stories.jsx

@@ -350,7 +350,7 @@ export const LayoutLockedRadius = {
 };
 
 export const RadialAxisAndLayout = {
-  render: (args) => (
+  render: () => (
     <Graphistry
       {...defaultSettings}
       lockedR={true}
@@ -368,7 +368,7 @@ export const RadialAxisAndLayout = {
 };
 
 export const VerticalAxisAndLayout = {
-  render: (args) => (
+  render: () => (
     <Graphistry
       {...defaultSettings}
       lockedY={true}
@@ -405,27 +405,33 @@ export const VerticalAxisAndLayout = {
 export const Filters = {
   render: (args) => {
     //Load filters 1s after client connected (workaround timing bug)
-    const [filter, setFilter] = useState();
-    const [exclusion, setExclusion] = useState();
+    const [filters, setFilters] = useState();
+    const [exclusions, setExclusions] = useState();
     const [panel, setPanel] = useState();
-
+    const [messages, setMessages] = useState(['Start viz to begin...']);
+
     return (
-      <Graphistry
-        {...defaultSettings}
-        pruneOrphans={true}
-        {...args}
-        onClientAPIConnected={() => {
-          console.debug('Client connected, setting filters and exclusions after 3s');
-          setTimeout(() => {
-            setFilter(args.filters || ['point:community_infomap in (4, 5, 6)', 'point:degree > 1']);
-            setExclusion(args.exclusions || ['edge:id = 1']);
-            setPanel(['filters', false]);
-          }, 3000);
-        }}
-        togglePanel={panel}
-        exclusions={exclusion}
-        filters={filter}
+      <>
+      <button onClick={() => { 
+        setFilters(['point:community_infomap in (4, 5, 6)', 'point:degree > 1']);
+        setPanel(['filters', false]);
+        setMessages((arr) => arr.concat([`Added filters`]));
+       }}>add 2 filters</button>
+      <button onClick={() => { 
+        setExclusions(['edge:_title = 1']);
+        setPanel(['exclusions', false]);
+        setMessages((arr) => arr.concat([`Added exclusions`]));
+       }}>add 1 exclusion</button>
+        <Graphistry
+          {...defaultSettings}
+          pruneOrphans={true}
+          {...args}
+        setTogglePanel={panel}
+        exclusions={exclusions}
+        filters={filters}
       />
+        <pre>{messages.join('\n')}</pre>
+      </>
     );
   },
 };

projects/client-api-react/src/stories/GraphistryJS.stories.jsx

@@ -12,26 +12,19 @@ import {
   toggleToolbar,
   toggleHistograms,
   toggleTimebars,
-  toggleClustering,
   toggleInspector,
   encodeAxis,
   selectionUpdates,
   tickClustering,
 
-  //falcor
-  makeCaller,
-
   //rxjs
   delay,
   filter,
   map,
   of,
-  from,
   scan,
   switchMap,
   tap,
-  take,
-  timer,
   // Observable
 } from '@graphistry/client-api';
 import { interval, takeWhile } from 'rxjs';
@@ -294,7 +287,10 @@ export const setFilters = {
       return () => (sub.unsubscribe ? sub.unsubscribe() : null);
     }, [iframe]);
 
-    return <iframe {...defaultIframeProps} ref={iframe} src={lesMisNoPlayNoSplash} {...args} />;
+    return <>
+      <iframe {...defaultIframeProps} ref={iframe} src={lesMisNoPlayNoSplash} {...args} />
+      <pre>{messages.join('\n')}</pre>
+      </>
   },
 };
 
@@ -322,7 +318,10 @@ export const togglePanelFilters = {
       return () => (sub.unsubscribe ? sub.unsubscribe() : null);
     }, [iframe]);
 
-    return <iframe {...defaultIframeProps} ref={iframe} src={lesMisNoPlayNoSplash} {...args} />;
+    return <>
+      <iframe {...defaultIframeProps} ref={iframe} src={lesMisNoPlayNoSplash} {...args} />
+      <pre>{messages.join('\n')}</pre>
+      </>;
   },
 };
 
@@ -353,7 +352,10 @@ export const HideChrome = {
       return () => (sub.unsubscribe ? sub.unsubscribe() : null);
     }, [iframe]);
 
-    return <iframe {...defaultIframeProps} ref={iframe} src={lesMisNoPlayNoSplash} {...args} />;
+    return <>
+      <iframe {...defaultIframeProps} ref={iframe} src={lesMisNoPlayNoSplash} {...args} />
+      <pre>{messages.join('\n')}</pre>
+      </>;
   },
 };
 
@@ -389,7 +391,10 @@ export const radialLayoutAndAxis = {
       return () => (sub.unsubscribe ? sub.unsubscribe() : null);
     }, [iframe]);
 
-    return <iframe {...defaultIframeProps} ref={iframe} src={lesMisNoPlayNoSplash} {...args} />;
+    return <>
+      <iframe {...defaultIframeProps} ref={iframe} src={lesMisNoPlayNoSplash} {...args} />
+      <pre>{messages.join('\n')}</pre>
+      </>;
   },
 };
 
@@ -444,7 +449,10 @@ export const verticalLayoutAndAxis = {
       return () => (sub.unsubscribe ? sub.unsubscribe() : null);
     }, [iframe]);
 
-    return <iframe {...defaultIframeProps} ref={iframe} src={lesMisNoPlayNoSplash} {...args} />;
+    return <>
+      <iframe {...defaultIframeProps} ref={iframe} src={lesMisNoPlayNoSplash} {...args} />
+      <pre>{messages.join('\n')}</pre>
+      </>;
   },
 };
 
@@ -492,6 +500,7 @@ export const tick = {
     return <>
       <button onClick={() => { setTickCount(tickCount + 1); }}>Run {milliseconds/1000}s of ticks</button>    
       <iframe {...defaultIframeProps} ref={iframe} src={lesMisNoPlayNoSplash} {...args} />
+      <pre>{messages.join('\n')}</pre>
     </>;
   },
 };

projects/client-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphistry/client-api",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Client-side API for interacting with a Graphistry embedded visualization.",
   "jsnext:main": "dist/index.js",
   "config": {
@@ -85,7 +85,7 @@
     "@graphistry/falcor-json-graph": "^2.9.10",
     "@graphistry/falcor-model-rxjs": "2.11.0",
     "@graphistry/falcor-socket-datasource": "2.11.3",
-    "@graphistry/js-upload-api": "^5.0.1",
+    "@graphistry/js-upload-api": "^5.0.2",
     "shallowequal": "1.1.0"
   },
   "peerDependencies": {

projects/client-api/src/index.js

@@ -708,6 +708,9 @@ chainList.resetPointSize = resetPointSize;
  *     .subscribe();
  */
 export function togglePanel(panel, turnOn) {
+    if (!panel) {
+        return map(g => g);
+    }
     if (Array.isArray(panel)) {
         turnOn = panel.length > 1 ? panel[1] : undefined;
         panel = panel[0];
@@ -1110,7 +1113,7 @@ chainList.toggleToolbar = toggleToolbar;
  *     .subscribe();
  */
 export function addFilter(expr) {
-    return makeCaller('view', 'filters.add', [expr]);
+    return expr ? makeCaller('view', 'filters.add', [expr]) : map(g => g)
 }
 chainList.addFilter = addFilter;
 
@@ -1154,7 +1157,7 @@ chainList.addFilters = addFilters;
  *     .subscribe();
  */
 export function addExclusion(expr) {
-    return makeCaller('view', 'exclusions.add', [expr]);
+    return expr ? makeCaller('view', 'exclusions.add', [expr]) : map(g => g)
 }
 chainList.addExclusion = addExclusion;
 

projects/cra-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphistry/cra-template",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "private": true,
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

projects/cra-test-18/package.json

@@ -1,9 +1,9 @@
 {
   "name": "test18",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "private": true,
   "dependencies": {
-    "@graphistry/client-api-react": "^5.0.1",
+    "@graphistry/client-api-react": "^5.0.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",

projects/cra-test/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@graphistry/client-react-app-cra-test",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.4.2",
-    "@graphistry/client-api-react": "^5.0.1",
+    "@graphistry/client-api-react": "^5.0.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.2.0",

projects/js-upload-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphistry/js-upload-api",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/graphistry/graphistry-js.git"

projects/node-api-test-cjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphistry/node-api-test-cjs",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "",
   "main": "src/index.js",
   "type": "commonjs",
@@ -16,7 +16,7 @@
   "author": "Graphistry, Inc.",
   "license": "Apache-2.0",
   "dependencies": {
-    "@graphistry/node-api": "^5.0.1",
+    "@graphistry/node-api": "^5.0.2",
     "apache-arrow": "^11.0.0"
   }
 }