Enhancement - Save Filter States

packages/motif/src/containers/SidePanel/Header/Header.tsx

@@ -9,6 +9,7 @@ import {
   StyleOptions,
   GraphList,
   GraphData,
+  FilterOptions,
 } from '../../../redux/graph';
 import * as Icon from '../../../components/Icons';
 import Editable from '../../../components/Editable';
@@ -28,6 +29,10 @@ const Header = () => {
   const styleOptions: StyleOptions = useSelector((state) =>
     GraphSelectors.getStyleOptions(state),
   );
+
+  const filterOptions: FilterOptions = useSelector((state) =>
+    GraphSelectors.getFilterOptions(state),
+  );
   const dispatch = useDispatch();
 
   const onChangeName = useCallback(
@@ -78,6 +83,7 @@ const Header = () => {
                 graphList={graphList}
                 styleOptions={styleOptions}
                 graphFlatten={graphFlatten}
+                filterOptions={filterOptions}
               />
             </>
           )}
@@ -91,6 +97,7 @@ const Header = () => {
       styleOptions,
       graphList,
       graphFlatten,
+      filterOptions,
     ],
   );
 };

packages/motif/src/containers/SidePanel/Header/SaveButton/Menu.tsx

@@ -12,18 +12,17 @@ const SaveChoicesMenu: FC<SaveChoicesMenuProps> = ({
   graphList,
   styleOptions,
   graphFlatten,
+  filterOptions,
   onExportExternal,
 }) => {
   const [, theme] = useStyletron();
 
-  const exportJSON = (
-    graphList: GraphT.GraphList,
-    styleOptions: GraphT.StyleOptions,
-  ) => {
+  const exportJSON = () => {
     const positionGraphList = setGraphListPosition(graphList, graphFlatten);
     const exportData: GraphT.TLoadFormat = {
       data: positionGraphList,
       style: styleOptions,
+      filter: filterOptions,
     };
 
     const contentType = 'application/json;charset=utf-8;';
@@ -36,11 +35,12 @@ const SaveChoicesMenu: FC<SaveChoicesMenuProps> = ({
     document.body.removeChild(file);
   };
 
-  const saveToCloud = (graphList, styleOptions) => {
+  const saveToCloud = () => {
     const positionGraphList = setGraphListPosition(graphList, graphFlatten);
     const exportData: GraphT.TLoadFormat = {
       data: positionGraphList,
       style: styleOptions,
+      filter: filterOptions,
     };
 
     onExportExternal(exportData);
@@ -50,19 +50,19 @@ const SaveChoicesMenu: FC<SaveChoicesMenuProps> = ({
     const items = [
       {
         label: <Label.JsonAttachment theme={theme} />,
-        onClick: () => exportJSON(graphList, styleOptions),
+        onClick: () => exportJSON(),
       },
     ];
 
     if (onExportExternal) {
       items.push({
         label: <Label.CloudUpload theme={theme} />,
-        onClick: () => saveToCloud(graphList, styleOptions),
+        onClick: () => saveToCloud(),
       });
     }
 
     return items;
-  }, [graphList, styleOptions, exportJSON, theme, graphFlatten]);
+  }, [graphList, styleOptions, exportJSON, theme, graphFlatten, filterOptions]);
 
   return (
     <StatefulMenu

packages/motif/src/containers/SidePanel/Header/SaveButton/SaveButton.tsx

@@ -11,6 +11,7 @@ const SaveButton = ({
   graphList,
   styleOptions,
   graphFlatten,
+  filterOptions,
 }: SaveButtonProps) => {
   return (
     <StatefulPopover
@@ -25,6 +26,7 @@ const SaveButton = ({
               graphList={graphList}
               graphFlatten={graphFlatten}
               styleOptions={styleOptions}
+              filterOptions={filterOptions}
               onExportExternal={onExportExternal}
             />
           )}

packages/motif/src/containers/SidePanel/Header/SaveButton/types.ts

@@ -7,6 +7,7 @@ export type SaveButtonProps = {
   graphList: GraphT.GraphList;
   graphFlatten: GraphT.GraphData;
   styleOptions: GraphT.StyleOptions;
+  filterOptions: GraphT.FilterOptions;
   onExportExternal?: ExplorerContextProps['onExportExternal'];
 };
 export type LabelProps = { theme: Theme };

packages/motif/src/redux/graph/slice.ts

@@ -232,6 +232,9 @@ const graph = createSlice({
     updateStyleOption(state, action: PayloadAction<T.StyleOptions>) {
       Object.assign(state.styleOptions, action.payload);
     },
+    updateFilterOption(state, action: PayloadAction<T.FilterOptions>) {
+      Object.assign(state.filterOptions, action.payload);
+    },
     changeLayout(state, action: PayloadAction<T.LayoutParams>): void {
       const { id, ...options } = action.payload.layout;
       const defaultOptions = LAYOUT.OPTIONS.find((x) => x.type === id);
@@ -522,6 +525,7 @@ export const {
   updateLastGroupEdgeIds,
   overwriteEdgeSelection,
   updateNodePosition,
+  updateFilterOption,
 } = graph.actions;
 
 export default graph.reducer;

packages/motif/src/redux/graph/tests/constants/positive/edgeListCsv.ts

@@ -0,0 +1,7 @@
+export const firstEdgeListCsv =
+  'id,relation,source,target\ntxn1,works,jason,cylynx\ntxn3,abc,cylynx,timothy\ntxn4,says hi to,swan,cylynx';
+
+export const secondEdgeListCsv = 'id,source,target\n123,x,y\n456,y,z\n789,z,x';
+
+export const quotesHeaderCsv =
+  '"id","relation","source","target"\ntxn1,works,jason,cylynx\ntxn3,abc,cylynx,timothy\ntxn4,says hi to,swan,cylynx';