Merge pull request #43 from maastrichtlawtech/dev-cluster-toggle

Dev cluster toggle

Author: Cloud956

components/CaseLawExplorer/cluster_graph.tsx

@@ -1,4 +1,4 @@
-import {Button, Typography, Divider} from '@mui/material'
+import {Button, FormControlLabel, Switch, FormGroup} from '@mui/material'
 import React from 'react'
 import {ControllerContext, FullGraphContext} from './Contexts'
 import {Node, Edge, NetworkStats, Graph} from './types'
@@ -27,7 +27,6 @@ export function selectCluster(
     nodes: new_nodes,
     edges: new_edges
   }
-  ClusterCache.set(activeCluster, result)
   return result
 }
 
@@ -60,24 +59,22 @@ export function clusterGraph({networkStatistics, nodes, edges}: Graph): {nodes:
     nodes: Array.from(new_nodes).map(make_node),
     edges: Array.from(new_edges).map(make_edge)
   }
-  ClusterCache.set(null, result)
   return result
 }
 
 export function GraphClusterButton({itemId}: {itemId: any}) {
   const {fullGraph} = React.useContext(FullGraphContext)
   const {controller, activeCluster} = React.useContext(ControllerContext)
-  const showing_clusters = activeCluster === null
+  const showing_clusters = activeCluster === null || activeCluster === false
 
-  if (showing_clusters && !itemId) return null
+  if ((showing_clusters && !itemId) || activeCluster === false) return null
 
   return (
     <div>
       <Button
         onClick={() => {
           const zoomIn = showing_clusters && itemId
           const {nodes, edges} = zoomIn ? selectCluster(fullGraph, itemId) : clusterGraph(fullGraph)
-
           controller.update((draft: any) => {
             draft.nodes = nodes
             draft.edges = edges
@@ -91,3 +88,34 @@ export function GraphClusterButton({itemId}: {itemId: any}) {
     </div>
   )
 }
+
+export function ClusterToggleSwitch({itemId}: {itemId: any}) {
+  const {fullGraph} = React.useContext(FullGraphContext)
+  const {controller, activeCluster} = React.useContext(ControllerContext)
+  const showing_clusters = activeCluster === null || activeCluster === false
+
+  if (!showing_clusters) return null
+  return (
+    <div>
+      <FormGroup>
+        <FormControlLabel
+          control={
+            <Switch
+              defaultChecked
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                const showClusters = event.target.checked
+                const {nodes, edges} = showClusters ? clusterGraph(fullGraph) : fullGraph
+                controller.update((draft: any) => {
+                  draft.nodes = nodes
+                  draft.edges = edges
+                  draft.activeCluster = showClusters ? null : false
+                })
+              }}
+            />
+          }
+          label="Show clusters?"
+        />
+      </FormGroup>
+    </div>
+  )
+}

components/CaseLawExplorer/components/DataBar/Header.tsx

@@ -4,7 +4,7 @@ import {View} from 'colay-ui'
 import React from 'react'
 import {useUser} from '../../useUser'
 import {useGraphEditor} from 'perfect-graph/hooks/useGraphEditor'
-import {selectCluster, GraphClusterButton} from '../../cluster_graph'
+import {selectCluster, GraphClusterButton, ClusterToggleSwitch} from '../../cluster_graph'
 import {Graph} from '../../types'
 import {ControllerContext, FullGraphContext} from '../../Contexts'
 import {Collapsible, CollapsibleContainer, CollapsibleTitle} from 'perfect-graph/components/Collapsible'
@@ -73,12 +73,27 @@ export const DataBarHeader = props => {
 
   return (
     <View>
-      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          padding: 2
+        }}
+      >
         <Typography>{user?.attributes?.email}</Typography>
         <Button color="secondary" onClick={() => Auth.signOut()}>
           Signout
         </Button>
       </View>
+      <View
+        style={{
+          justifyContent: 'space-between',
+          padding: 2,
+          alignItems: 'center'
+        }}
+      >
+        <ClusterToggleSwitch itemId={selectedItemId} />
+      </View>
       <Divider />
       <View
         style={{

components/CaseLawExplorer/index.tsx

@@ -142,8 +142,16 @@ async function updateLayout(cluster, layout, graphEditor, nodes, edges, cy) {
       layoutName,
       boundingBox
     })
-    clusterInfo.locations = layoutResult
-    clusterInfo.lastLayout = JSON.stringify(layout)
+    // Create a copy of nodes with the data part removed, as it is
+    // unexpected by the layout calculator GraphQL query
+    const make_node = ({id: number}) => ({id: number, data: {}})
+    const result = {
+      nodes: Array.from(nodes).map(make_node),
+      edges: edges,
+      locations: layoutResult,
+      lastLayout: JSON.stringify(layout)
+    }
+    ClusterCache.set(cluster, result)
   }
 
   console.log('layout res', layoutResult)