add orphan toggle

2 files changed, 14 insertions, 5 deletions

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 262ac69..68ac321 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -38,16 +38,14 @@ function MyApp({ Component, pageProps }: AppProps) {
     trackTheme.addEventListener('message', (e) => {
       const themeData = JSON.parse(e.data)
       setEmacsTheme(themeData)
-      console.log(themeData)
-      console.log(themeData['fg-alt'])
     })
   }, [])
 
-  const borderColor = emacsTheme.violet + 'aa'
-  const theme =
+  const theme = useMemo(() => {
     //useMemo(() => {
     //console.log("theme change")
-    extendTheme({
+    const borderColor = emacsTheme.violet + 'aa'
+    return extendTheme({
       colors: {
         white: emacsTheme.bg,
         black: emacsTheme.fg,
@@ -97,6 +95,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         outline: '0 0 0 3px ' + borderColor,
       },
     })
+  }, [JSON.stringify(emacsTheme)])
   // }, [emacsTheme.base1])
 
   return (
diff --git a/pages/index.tsx b/pages/index.tsx
index 170935e..8462d31 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -444,6 +444,16 @@ export const Tweaks = function (props: TweakProps) {
                 divider={<StackDivider borderColor="gray.200" />}
                 align="stretch"
               >
+                <Box>
+                  <Text>Kill orphans</Text>
+                  <Switch
+                    colorScheme="purple"
+                    onChange={() => {
+                      setPhysics({ ...physics, orphans: !physics.orphans })
+                    }}
+                    isChecked={physics.orphans}
+                  ></Switch>
+                </Box>
                 <SliderWithInfo
                   label="Node size"
                   value={physics.nodeRel}