1export const ACCOUNT_PORTAL_PATHS = [
2      'home/*',
3      'my-care/*',
4      'chats/*',
5      'profile/*',
6      'programs/*',
7      'completion/*',
8    ]
9

If the current path is any of those, I want to know. I managed to get the current path with:

1export const ACCOUNT_PORTAL_PATHS = [
2      'home/*',
3      'my-care/*',
4      'chats/*',
5      'profile/*',
6      'programs/*',
7      'completion/*',
8    ]
9const { search: searchParams, pathname } = useLocation();
10

and that yields, in this example:

1export const ACCOUNT_PORTAL_PATHS = [
2      'home/*',
3      'my-care/*',
4      'chats/*',
5      'profile/*',
6      'programs/*',
7      'completion/*',
8    ]
9const { search: searchParams, pathname } = useLocation();
10pathname: &quot;/my-care/1234&quot;
11

What's the best way to match?

Thanks in advance!

ANSWER

Answered 2022-Apr-07 at 19:55

If you just want to know if you are on a matching path, you can use the matchPath function and test that some account path prefix is a match to the current pathname.

Example:

1export const ACCOUNT_PORTAL_PATHS = [
2      'home/*',
3      'my-care/*',
4      'chats/*',
5      'profile/*',
6      'programs/*',
7      'completion/*',
8    ]
9const { search: searchParams, pathname } = useLocation();
10pathname: &quot;/my-care/1234&quot;
11import { matchPath } from &quot;react-router-dom&quot;;
12
13...
14
15const { pathname } = useLocation();
16const isMatch = ACCOUNT_PORTAL_PATHS.some((path) =&gt;
17  matchPath(path, pathname)
18);
19

Source https://stackoverflow.com/questions/71787836

QUESTION

Redis NodeJs server error,client is closed

Asked 2022-Feb-11 at 05:16

I am developing an application where chats has to cached and monitored, currently it is an local application where i have installed redis and redis-cli. The problem i'm facing is (node:5368) UnhandledPromiseRejectionWarning: Error: The client is closed Attaching code snippet below

1//redis setup
2const redis = require('redis');
3const client = redis.createClient()//kept blank so that default options are available
4  
5
6//runs when client connects
7io.on(&quot;connect&quot;, function (socket) {
8
9  //this is client side socket
10  //console.log(&quot;a new user connected...&quot;);
11
12  socket.on(&quot;join&quot;, function ({ name, room }, callback) {
13    //console.log(name, room);
14    const { msg, user } = addUser({ id: socket.id, name, room });
15   // console.log(user);
16    if (msg) return callback(msg); //accessible in frontend
17
18    //emit to all users
19    socket.emit(&quot;message&quot;, {
20      user: &quot;Admin&quot;,
21      text: `Welcome to the room ${user.name}`,
22    });
23    //emit to all users except current one
24  
25    socket.broadcast
26      .to(user.room)
27      .emit(&quot;message&quot;, { user: &quot;Admin&quot;, text: `${user.name} has joined` });
28
29    socket.join(user.room); //pass the room that user wants to join
30
31    //get all users in the room
32    io.to(user.room).emit(&quot;roomData&quot;, {
33      room: user.room,
34      users: getUsersInRoom(user.room),
35    });
36
37    callback();
38  }); //end of join
39
40  //user generated messages
41  socket.on(&quot;sendMessage&quot;,  async(message, callback)=&gt;{
42    const user = getUser(socket.id);
43
44    //this is where we can store the messages in redis
45    await client.set(&quot;messages&quot;,message);
46
47    io.to(user.room).emit(&quot;message&quot;, { user: user.name, text: message });
48    console.log(client.get('messages'));
49    callback();
50  }); //end of sendMessage
51
52  //when user disconnects
53  socket.on(&quot;disconnect&quot;, function () {
54    const user = removeUser(socket.id);
55    if (user) {
56     
57      console.log(client)
58
59      io.to(user.room).emit(&quot;message&quot;, {
60        user: &quot;Admin&quot;,
61        text: `${user.name} has left `,
62      });
63    }
64  }); //end of disconnect
65
66

I am getting above error when user sends a message to the room or when socket.on("sendMessage") is called.

Where am I going wrong?

Thank you in advance.

ANSWER

Answered 2021-Dec-01 at 20:16

You should await client.connect() before using the client

Source https://stackoverflow.com/questions/70185436

QUESTION

JetpackCompose Navigation Nested Graphs cause "ViewModelStore should be set before setGraph call" exception

Asked 2022-Jan-21 at 07:35

I am trying to apply Jetpack Compose navigation into my application.

My Screens: Login/Register screens and Bottom navbar screens(call, chat, settings).

I already found out that the best way to do this is using nested graphs.

But I keep getting ViewModelStore should be set before setGraph call exception. However, I don't think this is the right exception.

My navigation is already in the latest version. Probably my nested graph logic is not right.

Requirement: I want to be able to navigate from the Login or Register screen to any BottomBar Screen & reverse

1@Composable
2fun SetupNavGraph(
3    navController: NavHostController,
4    userViewModel: UserViewModel
5) {
6    NavHost(
7        navController = navController,
8        startDestination = BOTTOM_BAR_GRAPH_ROUTE,
9        route = ROOT_GRAPH_ROUTE
10    ) {
11        loginNavGraph(navController = navController, userViewModel)
12        bottomBarNavGraph(navController = navController, userViewModel)
13    }
14}
15

NavGraph.kt

1@Composable
2fun SetupNavGraph(
3    navController: NavHostController,
4    userViewModel: UserViewModel
5) {
6    NavHost(
7        navController = navController,
8        startDestination = BOTTOM_BAR_GRAPH_ROUTE,
9        route = ROOT_GRAPH_ROUTE
10    ) {
11        loginNavGraph(navController = navController, userViewModel)
12        bottomBarNavGraph(navController = navController, userViewModel)
13    }
14}
15fun NavGraphBuilder.loginNavGraph(
16    navController: NavHostController,
17    userViewModel: UserViewModel
18) {
19    navigation(
20        startDestination = Screen.LoginScreen.route,
21        route = LOGIN_GRAPH_ROUTE
22    ) {
23        composable(
24            route = Screen.LoginScreen.route,
25            content = {
26                LoginScreen(
27                    navController = navController,
28                    loginViewModel = userViewModel
29                )
30            })
31        composable(
32            route = Screen.RegisterScreen.route,
33            content = {
34                RegisterScreen(
35                    navController = navController,
36                    loginViewModel = userViewModel
37                )
38            })
39    }
40}
41

LoginNavGraph.kt

1@Composable
2fun SetupNavGraph(
3    navController: NavHostController,
4    userViewModel: UserViewModel
5) {
6    NavHost(
7        navController = navController,
8        startDestination = BOTTOM_BAR_GRAPH_ROUTE,
9        route = ROOT_GRAPH_ROUTE
10    ) {
11        loginNavGraph(navController = navController, userViewModel)
12        bottomBarNavGraph(navController = navController, userViewModel)
13    }
14}
15fun NavGraphBuilder.loginNavGraph(
16    navController: NavHostController,
17    userViewModel: UserViewModel
18) {
19    navigation(
20        startDestination = Screen.LoginScreen.route,
21        route = LOGIN_GRAPH_ROUTE
22    ) {
23        composable(
24            route = Screen.LoginScreen.route,
25            content = {
26                LoginScreen(
27                    navController = navController,
28                    loginViewModel = userViewModel
29                )
30            })
31        composable(
32            route = Screen.RegisterScreen.route,
33            content = {
34                RegisterScreen(
35                    navController = navController,
36                    loginViewModel = userViewModel
37                )
38            })
39    }
40}
41fun NavGraphBuilder.bottomBarNavGraph(
42    navController: NavHostController,
43    userViewModel: UserViewModel
44) {
45    navigation(
46        startDestination = Screen.AppScaffold.route,
47        route = BOTTOM_BAR_GRAPH_ROUTE
48    ) {
49        composable(
50            route = Screen.AppScaffold.route,
51            content = {
52                AppScaffold(
53                    navController = navController,
54                    userViewModel = userViewModel
55                )
56            })
57    }
58}
59

BottomBarNavGraph.kt

1@Composable
2fun SetupNavGraph(
3    navController: NavHostController,
4    userViewModel: UserViewModel
5) {
6    NavHost(
7        navController = navController,
8        startDestination = BOTTOM_BAR_GRAPH_ROUTE,
9        route = ROOT_GRAPH_ROUTE
10    ) {
11        loginNavGraph(navController = navController, userViewModel)
12        bottomBarNavGraph(navController = navController, userViewModel)
13    }
14}
15fun NavGraphBuilder.loginNavGraph(
16    navController: NavHostController,
17    userViewModel: UserViewModel
18) {
19    navigation(
20        startDestination = Screen.LoginScreen.route,
21        route = LOGIN_GRAPH_ROUTE
22    ) {
23        composable(
24            route = Screen.LoginScreen.route,
25            content = {
26                LoginScreen(
27                    navController = navController,
28                    loginViewModel = userViewModel
29                )
30            })
31        composable(
32            route = Screen.RegisterScreen.route,
33            content = {
34                RegisterScreen(
35                    navController = navController,
36                    loginViewModel = userViewModel
37                )
38            })
39    }
40}
41fun NavGraphBuilder.bottomBarNavGraph(
42    navController: NavHostController,
43    userViewModel: UserViewModel
44) {
45    navigation(
46        startDestination = Screen.AppScaffold.route,
47        route = BOTTOM_BAR_GRAPH_ROUTE
48    ) {
49        composable(
50            route = Screen.AppScaffold.route,
51            content = {
52                AppScaffold(
53                    navController = navController,
54                    userViewModel = userViewModel
55                )
56            })
57    }
58}
59@Composable
60fun AppScaffold(
61    navController: NavHostController,
62    userViewModel: UserViewModel
63) {
64    val scaffoldState = rememberScaffoldState()
65
66    Scaffold(
67
68        bottomBar = {
69            BottomBar(mainNavController = navController)
70        },
71        scaffoldState = scaffoldState,
72
73        ) {
74
75        NavHost(
76            navController = navController,
77            startDestination = NavigationScreen.EmergencyCallScreen.route
78        ) {
79            composable(NavigationScreen.EmergencyCallScreen.route) {
80                EmergencyCallScreen(
81                    navController = navController,
82                    loginViewModel = userViewModel
83                )
84            }
85            composable(NavigationScreen.ChatScreen.route) { ChatScreen() }
86            composable(NavigationScreen.SettingsScreen.route) {
87                SettingsScreen(
88                    navController = navController,
89                    loginViewModel = userViewModel
90                )
91            }
92        }
93    }
94}
95

AppScaffold.kt

1@Composable
2fun SetupNavGraph(
3    navController: NavHostController,
4    userViewModel: UserViewModel
5) {
6    NavHost(
7        navController = navController,
8        startDestination = BOTTOM_BAR_GRAPH_ROUTE,
9        route = ROOT_GRAPH_ROUTE
10    ) {
11        loginNavGraph(navController = navController, userViewModel)
12        bottomBarNavGraph(navController = navController, userViewModel)
13    }
14}
15fun NavGraphBuilder.loginNavGraph(
16    navController: NavHostController,
17    userViewModel: UserViewModel
18) {
19    navigation(
20        startDestination = Screen.LoginScreen.route,
21        route = LOGIN_GRAPH_ROUTE
22    ) {
23        composable(
24            route = Screen.LoginScreen.route,
25            content = {
26                LoginScreen(
27                    navController = navController,
28                    loginViewModel = userViewModel
29                )
30            })
31        composable(
32            route = Screen.RegisterScreen.route,
33            content = {
34                RegisterScreen(
35                    navController = navController,
36                    loginViewModel = userViewModel
37                )
38            })
39    }
40}
41fun NavGraphBuilder.bottomBarNavGraph(
42    navController: NavHostController,
43    userViewModel: UserViewModel
44) {
45    navigation(
46        startDestination = Screen.AppScaffold.route,
47        route = BOTTOM_BAR_GRAPH_ROUTE
48    ) {
49        composable(
50            route = Screen.AppScaffold.route,
51            content = {
52                AppScaffold(
53                    navController = navController,
54                    userViewModel = userViewModel
55                )
56            })
57    }
58}
59@Composable
60fun AppScaffold(
61    navController: NavHostController,
62    userViewModel: UserViewModel
63) {
64    val scaffoldState = rememberScaffoldState()
65
66    Scaffold(
67
68        bottomBar = {
69            BottomBar(mainNavController = navController)
70        },
71        scaffoldState = scaffoldState,
72
73        ) {
74
75        NavHost(
76            navController = navController,
77            startDestination = NavigationScreen.EmergencyCallScreen.route
78        ) {
79            composable(NavigationScreen.EmergencyCallScreen.route) {
80                EmergencyCallScreen(
81                    navController = navController,
82                    loginViewModel = userViewModel
83                )
84            }
85            composable(NavigationScreen.ChatScreen.route) { ChatScreen() }
86            composable(NavigationScreen.SettingsScreen.route) {
87                SettingsScreen(
88                    navController = navController,
89                    loginViewModel = userViewModel
90                )
91            }
92        }
93    }
94}
95@Composable
96fun BottomBar(mainNavController: NavHostController) {
97
98    val items = listOf(
99        NavigationScreen.EmergencyCallScreen,
100        NavigationScreen.ChatScreen,
101        NavigationScreen.SettingsScreen,
102    )
103
104    BottomNavigation(
105        elevation = 5.dp,
106    ) {
107        val navBackStackEntry by mainNavController.currentBackStackEntryAsState()
108        val currentRoute = navBackStackEntry?.destination?.route
109        items.map {
110            BottomNavigationItem(
111                icon = {
112                    Icon(
113                        painter = painterResource(id = it.icon),
114                        contentDescription = it.title
115                    )
116                },
117                label = {
118                    Text(
119                        text = it.title
120                    )
121                },
122                selected = currentRoute == it.route,
123                selectedContentColor = Color.White,
124                unselectedContentColor = Color.White.copy(alpha = 0.4f),
125                onClick = {
126                    mainNavController.navigate(it.route) {
127                        mainNavController.graph.startDestinationRoute?.let { route -&gt;
128                            popUpTo(route) {
129                                saveState = true
130                            }
131                        }
132                        restoreState = true
133                        launchSingleTop = true
134                    }
135                },
136
137                )
138        }
139
140    }
141}
142

BottomBar.kt

1@Composable
2fun SetupNavGraph(
3    navController: NavHostController,
4    userViewModel: UserViewModel
5) {
6    NavHost(
7        navController = navController,
8        startDestination = BOTTOM_BAR_GRAPH_ROUTE,
9        route = ROOT_GRAPH_ROUTE
10    ) {
11        loginNavGraph(navController = navController, userViewModel)
12        bottomBarNavGraph(navController = navController, userViewModel)
13    }
14}
15fun NavGraphBuilder.loginNavGraph(
16    navController: NavHostController,
17    userViewModel: UserViewModel
18) {
19    navigation(
20        startDestination = Screen.LoginScreen.route,
21        route = LOGIN_GRAPH_ROUTE
22    ) {
23        composable(
24            route = Screen.LoginScreen.route,
25            content = {
26                LoginScreen(
27                    navController = navController,
28                    loginViewModel = userViewModel
29                )
30            })
31        composable(
32            route = Screen.RegisterScreen.route,
33            content = {
34                RegisterScreen(
35                    navController = navController,
36                    loginViewModel = userViewModel
37                )
38            })
39    }
40}
41fun NavGraphBuilder.bottomBarNavGraph(
42    navController: NavHostController,
43    userViewModel: UserViewModel
44) {
45    navigation(
46        startDestination = Screen.AppScaffold.route,
47        route = BOTTOM_BAR_GRAPH_ROUTE
48    ) {
49        composable(
50            route = Screen.AppScaffold.route,
51            content = {
52                AppScaffold(
53                    navController = navController,
54                    userViewModel = userViewModel
55                )
56            })
57    }
58}
59@Composable
60fun AppScaffold(
61    navController: NavHostController,
62    userViewModel: UserViewModel
63) {
64    val scaffoldState = rememberScaffoldState()
65
66    Scaffold(
67
68        bottomBar = {
69            BottomBar(mainNavController = navController)
70        },
71        scaffoldState = scaffoldState,
72
73        ) {
74
75        NavHost(
76            navController = navController,
77            startDestination = NavigationScreen.EmergencyCallScreen.route
78        ) {
79            composable(NavigationScreen.EmergencyCallScreen.route) {
80                EmergencyCallScreen(
81                    navController = navController,
82                    loginViewModel = userViewModel
83                )
84            }
85            composable(NavigationScreen.ChatScreen.route) { ChatScreen() }
86            composable(NavigationScreen.SettingsScreen.route) {
87                SettingsScreen(
88                    navController = navController,
89                    loginViewModel = userViewModel
90                )
91            }
92        }
93    }
94}
95@Composable
96fun BottomBar(mainNavController: NavHostController) {
97
98    val items = listOf(
99        NavigationScreen.EmergencyCallScreen,
100        NavigationScreen.ChatScreen,
101        NavigationScreen.SettingsScreen,
102    )
103
104    BottomNavigation(
105        elevation = 5.dp,
106    ) {
107        val navBackStackEntry by mainNavController.currentBackStackEntryAsState()
108        val currentRoute = navBackStackEntry?.destination?.route
109        items.map {
110            BottomNavigationItem(
111                icon = {
112                    Icon(
113                        painter = painterResource(id = it.icon),
114                        contentDescription = it.title
115                    )
116                },
117                label = {
118                    Text(
119                        text = it.title
120                    )
121                },
122                selected = currentRoute == it.route,
123                selectedContentColor = Color.White,
124                unselectedContentColor = Color.White.copy(alpha = 0.4f),
125                onClick = {
126                    mainNavController.navigate(it.route) {
127                        mainNavController.graph.startDestinationRoute?.let { route -&gt;
128                            popUpTo(route) {
129                                saveState = true
130                            }
131                        }
132                        restoreState = true
133                        launchSingleTop = true
134                    }
135                },
136
137                )
138        }
139
140    }
141}
142const val ROOT_GRAPH_ROUTE = &quot;root&quot;
143const val LOGIN_GRAPH_ROUTE = &quot;login_register&quot;
144const val BOTTOM_BAR_GRAPH_ROUTE = &quot;bottom_bar&quot;
145
146sealed class Screen(val route: String) {
147    object LoginScreen : Screen(&quot;login_screen&quot;)
148    object RegisterScreen : Screen(&quot;register_screen&quot;)
149    object AppScaffold : Screen(&quot;app_scaffold&quot;)
150
151}
152

Screen.kt

1@Composable
2fun SetupNavGraph(
3    navController: NavHostController,
4    userViewModel: UserViewModel
5) {
6    NavHost(
7        navController = navController,
8        startDestination = BOTTOM_BAR_GRAPH_ROUTE,
9        route = ROOT_GRAPH_ROUTE
10    ) {
11        loginNavGraph(navController = navController, userViewModel)
12        bottomBarNavGraph(navController = navController, userViewModel)
13    }
14}
15fun NavGraphBuilder.loginNavGraph(
16    navController: NavHostController,
17    userViewModel: UserViewModel
18) {
19    navigation(
20        startDestination = Screen.LoginScreen.route,
21        route = LOGIN_GRAPH_ROUTE
22    ) {
23        composable(
24            route = Screen.LoginScreen.route,
25            content = {
26                LoginScreen(
27                    navController = navController,
28                    loginViewModel = userViewModel
29                )
30            })
31        composable(
32            route = Screen.RegisterScreen.route,
33            content = {
34                RegisterScreen(
35                    navController = navController,
36                    loginViewModel = userViewModel
37                )
38            })
39    }
40}
41fun NavGraphBuilder.bottomBarNavGraph(
42    navController: NavHostController,
43    userViewModel: UserViewModel
44) {
45    navigation(
46        startDestination = Screen.AppScaffold.route,
47        route = BOTTOM_BAR_GRAPH_ROUTE
48    ) {
49        composable(
50            route = Screen.AppScaffold.route,
51            content = {
52                AppScaffold(
53                    navController = navController,
54                    userViewModel = userViewModel
55                )
56            })
57    }
58}
59@Composable
60fun AppScaffold(
61    navController: NavHostController,
62    userViewModel: UserViewModel
63) {
64    val scaffoldState = rememberScaffoldState()
65
66    Scaffold(
67
68        bottomBar = {
69            BottomBar(mainNavController = navController)
70        },
71        scaffoldState = scaffoldState,
72
73        ) {
74
75        NavHost(
76            navController = navController,
77            startDestination = NavigationScreen.EmergencyCallScreen.route
78        ) {
79            composable(NavigationScreen.EmergencyCallScreen.route) {
80                EmergencyCallScreen(
81                    navController = navController,
82                    loginViewModel = userViewModel
83                )
84            }
85            composable(NavigationScreen.ChatScreen.route) { ChatScreen() }
86            composable(NavigationScreen.SettingsScreen.route) {
87                SettingsScreen(
88                    navController = navController,
89                    loginViewModel = userViewModel
90                )
91            }
92        }
93    }
94}
95@Composable
96fun BottomBar(mainNavController: NavHostController) {
97
98    val items = listOf(
99        NavigationScreen.EmergencyCallScreen,
100        NavigationScreen.ChatScreen,
101        NavigationScreen.SettingsScreen,
102    )
103
104    BottomNavigation(
105        elevation = 5.dp,
106    ) {
107        val navBackStackEntry by mainNavController.currentBackStackEntryAsState()
108        val currentRoute = navBackStackEntry?.destination?.route
109        items.map {
110            BottomNavigationItem(
111                icon = {
112                    Icon(
113                        painter = painterResource(id = it.icon),
114                        contentDescription = it.title
115                    )
116                },
117                label = {
118                    Text(
119                        text = it.title
120                    )
121                },
122                selected = currentRoute == it.route,
123                selectedContentColor = Color.White,
124                unselectedContentColor = Color.White.copy(alpha = 0.4f),
125                onClick = {
126                    mainNavController.navigate(it.route) {
127                        mainNavController.graph.startDestinationRoute?.let { route -&gt;
128                            popUpTo(route) {
129                                saveState = true
130                            }
131                        }
132                        restoreState = true
133                        launchSingleTop = true
134                    }
135                },
136
137                )
138        }
139
140    }
141}
142const val ROOT_GRAPH_ROUTE = &quot;root&quot;
143const val LOGIN_GRAPH_ROUTE = &quot;login_register&quot;
144const val BOTTOM_BAR_GRAPH_ROUTE = &quot;bottom_bar&quot;
145
146sealed class Screen(val route: String) {
147    object LoginScreen : Screen(&quot;login_screen&quot;)
148    object RegisterScreen : Screen(&quot;register_screen&quot;)
149    object AppScaffold : Screen(&quot;app_scaffold&quot;)
150
151}
152sealed class NavigationScreen(val route: String, val title: String, @DrawableRes val icon: Int) {
153    object EmergencyCallScreen : NavigationScreen(
154        route = &quot;emergency_call_screen&quot;,
155        title = &quot;Emergency Call&quot;,
156        icon = R.drawable.ic_phone
157    )
158
159    object ChatScreen :
160        NavigationScreen(
161            route = &quot;chat_screen&quot;,
162            title = &quot;Chat&quot;,
163            icon = R.drawable.ic_chat)
164
165    object SettingsScreen : NavigationScreen(
166        route = &quot;settings_screen&quot;,
167        title = &quot;Settings&quot;,
168        icon = R.drawable.ic_settings
169    )
170}
171

NavigationScreen.kt

ANSWER

Answered 2021-Nov-13 at 16:37

Nesting of NavHost is not allowed. It results in ViewModelStore should be set before setGraph call Exception. Generally, the bottom nav is outside of the NavHost, which is what the docs show. The recommended approach is a single NavHost, where you hide and show your bottom nav based on what destination you are on.

Source https://stackoverflow.com/questions/69738397

QUESTION

slack chat.postMessage API endpoint is not allowing the authorization header

Asked 2022-Jan-17 at 23:28

I have this code running in the browser

1&lt;html&gt;
2
3    &lt;script type=&quot;module&quot;&gt;
4        console.log(&quot;working&quot;);
5
6        var url = &quot;https://slack.com/api/chat.postMessage&quot;;
7        var auth_token = &quot;xoxb-2B&quot;; //Your Bot's auth token
8        var body = {channel: &quot;ses&quot;, text: &quot;testing app&quot;}
9
10        async function postData(url = '', data = {}) {
11            // Default options are marked with *
12            const response = await fetch(url, {
13                method: 'POST', // *GET, POST, PUT, DELETE, etc.
14                headers: {
15                    &quot;Authorization&quot;: &quot;Bearer &quot; + auth_token,
16                    &quot;Content-Type&quot; : &quot;application/json&quot;
17                },
18                body: JSON.stringify(data) // body data type must match &quot;Content-Type&quot; header
19            });
20            return response.json(); // parses JSON response into native JavaScript objects
21        }
22
23        postData('https://slack.com/api/chat.postMessage', body)
24        .then(data =&gt; {
25            console.log(data); // JSON data parsed by `data.json()` call
26        });
27    &lt;/script&gt;
28&lt;/html&gt;
29

I'm getting

Access to fetch at 'https://slack.com/api/chat.postMessage' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

I don't understand, I need to specify the bearer token somehow, even in the docs it says to put it in the Authorization header, why aren't they allowing it?

ANSWER

Answered 2022-Jan-17 at 23:28

I don't understand, I need to specify the bearer token somehow, even in the docs it says to put it in the Authorization header, why aren't they allowing it?

This is a different problem, is not related to the Bearer token at all. From the error you're getting, it means, the origin you're using to fetch the Slack API, is not trusted (http://127.0.0.1:5500), there is nothing you can do from the browser since this is a policy that comes from the server which defines the authorized origins. (Learn more about CORS here) Since I don't think this is supported by Slack, you will need to fetch the Slack API from the server.

One way to solve this, is by exposing a backend API, for example:

Post a message to Slack	`Run in Fusebit`

1&lt;html&gt;
2
3    &lt;script type=&quot;module&quot;&gt;
4        console.log(&quot;working&quot;);
5
6        var url = &quot;https://slack.com/api/chat.postMessage&quot;;
7        var auth_token = &quot;xoxb-2B&quot;; //Your Bot's auth token
8        var body = {channel: &quot;ses&quot;, text: &quot;testing app&quot;}
9
10        async function postData(url = '', data = {}) {
11            // Default options are marked with *
12            const response = await fetch(url, {
13                method: 'POST', // *GET, POST, PUT, DELETE, etc.
14                headers: {
15                    &quot;Authorization&quot;: &quot;Bearer &quot; + auth_token,
16                    &quot;Content-Type&quot; : &quot;application/json&quot;
17                },
18                body: JSON.stringify(data) // body data type must match &quot;Content-Type&quot; header
19            });
20            return response.json(); // parses JSON response into native JavaScript objects
21        }
22
23        postData('https://slack.com/api/chat.postMessage', body)
24        .then(data =&gt; {
25            console.log(data); // JSON data parsed by `data.json()` call
26        });
27    &lt;/script&gt;
28&lt;/html&gt;
29router.post('/api/tenant/:tenantId/test', async (ctx) =&gt; {
30  // Create a Slack client pre-configured with credentials necessary to communicate with your tenant's Slack workspace.
31  // For the Slack SDK documentation, see https://slack.dev/node-slack-sdk/web-api.
32  const slackClient = await integration.tenant.getSdkByTenant(ctx, connectorName, ctx.params.tenantId);
33
34  // Get the Slack user ID associated with your tenant
35  const slackUserId = slackClient.fusebit.credentials.authed_user.id;
36
37  // Send a Direct Message to the Slack user
38  const result = await slackClient.chat.postMessage({
39    text: 'Hello world!',
40    channel: slackUserId,
41  });
42
43  console.log('message response', result.message);
44  ctx.body = { message: `Successfully sent a message to Slack user ${slackUserId}!` };
45});
46
47

Source https://stackoverflow.com/questions/70727979

QUESTION

React/Socket.io not displaying latest message passed down as prop

Asked 2022-Jan-13 at 17:37

I am working on a chat application using React and socket.io. Back end is express/node. The relevant components are: Room.js --> Chat.js --> Messages.js --> Message.js

messageData received from the server is stored in state in Room.js. It is then passed down through Chat.js to Messages.js, where it is mapped onto a series of Message.js components.

When messages are received, they ARE appearing, but only after I start typing in the form again, triggering messageChangeHandler(). Any ideas why the Messages won't re-render when a new message is received and added to state in Room.js? I have confirmed that the state and props are updating everywhere they should be--they just aren't appearing/re-rendering until messageChangeHandler() triggers its own re-render.

Here are the components.

Room.js

1export default function Room(props) {
2    const [messagesData, setMessagesData] = useState([])
3
4    useEffect(() =&gt; {
5        console.log('the use effect ')
6        socket.on('broadcast', data =&gt; {
7            console.log(messagesData)
8            let previousData = messagesData
9            previousData.push(data)
10            // buildMessages(previousData)
11            setMessagesData(previousData)
12        })
13    }, [socket])
14
15
16    console.log('this is messagesData in queue.js', messagesData)
17
18    return(
19        // queue counter will go up here
20        // &lt;QueueDisplay /&gt;
21
22        // chat goes here
23        &lt;Chat 
24            profile={props.profile} 
25            messagesData={messagesData}
26        /&gt;
27
28    )
29}
30

Chat.js

1export default function Room(props) {
2    const [messagesData, setMessagesData] = useState([])
3
4    useEffect(() =&gt; {
5        console.log('the use effect ')
6        socket.on('broadcast', data =&gt; {
7            console.log(messagesData)
8            let previousData = messagesData
9            previousData.push(data)
10            // buildMessages(previousData)
11            setMessagesData(previousData)
12        })
13    }, [socket])
14
15
16    console.log('this is messagesData in queue.js', messagesData)
17
18    return(
19        // queue counter will go up here
20        // &lt;QueueDisplay /&gt;
21
22        // chat goes here
23        &lt;Chat 
24            profile={props.profile} 
25            messagesData={messagesData}
26        /&gt;
27
28    )
29}
30export default function Chat(props) {
31    // state
32    const [newPayload, setNewPayload] = useState({
33        message: '',
34        sender: props.profile.name
35    })
36    // const [messagesData, setMessagesData] = useState([])
37    const [updateToggle, setUpdateToggle] = useState(true)
38
39
40    const messageChangeHandler = (e) =&gt; {
41        setNewPayload({... newPayload, [e.target.name]: e.target.value})
42    }
43
44    const messageSend = (e) =&gt; {
45        e.preventDefault()
46        if (newPayload.message) {
47            socket.emit('chat message', newPayload)
48            setNewPayload({
49                message: '',
50                sender: props.profile.name  
51            })
52        }
53    }
54    
55    return(
56        &lt;div id='chatbox'&gt;
57            &lt;div id='messages'&gt;
58                &lt;Messages messagesData={props.messagesData} /&gt;
59            &lt;/div&gt;
60            &lt;form onSubmit={messageSend}&gt;
61                &lt;input 
62                    type=&quot;text&quot; 
63                    name=&quot;message&quot; 
64                    id=&quot;message&quot; 
65                    placeholder=&quot;Start a new message&quot; 
66                    onChange={messageChangeHandler} 
67                    value={newPayload.message}
68                    autoComplete='off'
69                /&gt;
70                &lt;input type=&quot;submit&quot; value=&quot;Send&quot; /&gt;
71            &lt;/form&gt;
72        &lt;/div&gt;
73    )
74}
75

Messages.js

1export default function Room(props) {
2    const [messagesData, setMessagesData] = useState([])
3
4    useEffect(() =&gt; {
5        console.log('the use effect ')
6        socket.on('broadcast', data =&gt; {
7            console.log(messagesData)
8            let previousData = messagesData
9            previousData.push(data)
10            // buildMessages(previousData)
11            setMessagesData(previousData)
12        })
13    }, [socket])
14
15
16    console.log('this is messagesData in queue.js', messagesData)
17
18    return(
19        // queue counter will go up here
20        // &lt;QueueDisplay /&gt;
21
22        // chat goes here
23        &lt;Chat 
24            profile={props.profile} 
25            messagesData={messagesData}
26        /&gt;
27
28    )
29}
30export default function Chat(props) {
31    // state
32    const [newPayload, setNewPayload] = useState({
33        message: '',
34        sender: props.profile.name
35    })
36    // const [messagesData, setMessagesData] = useState([])
37    const [updateToggle, setUpdateToggle] = useState(true)
38
39
40    const messageChangeHandler = (e) =&gt; {
41        setNewPayload({... newPayload, [e.target.name]: e.target.value})
42    }
43
44    const messageSend = (e) =&gt; {
45        e.preventDefault()
46        if (newPayload.message) {
47            socket.emit('chat message', newPayload)
48            setNewPayload({
49                message: '',
50                sender: props.profile.name  
51            })
52        }
53    }
54    
55    return(
56        &lt;div id='chatbox'&gt;
57            &lt;div id='messages'&gt;
58                &lt;Messages messagesData={props.messagesData} /&gt;
59            &lt;/div&gt;
60            &lt;form onSubmit={messageSend}&gt;
61                &lt;input 
62                    type=&quot;text&quot; 
63                    name=&quot;message&quot; 
64                    id=&quot;message&quot; 
65                    placeholder=&quot;Start a new message&quot; 
66                    onChange={messageChangeHandler} 
67                    value={newPayload.message}
68                    autoComplete='off'
69                /&gt;
70                &lt;input type=&quot;submit&quot; value=&quot;Send&quot; /&gt;
71            &lt;/form&gt;
72        &lt;/div&gt;
73    )
74}
75export default function Messages(props) {
76    return(
77        &lt;&gt;
78        {props.messagesData.map((data, i) =&gt; {
79            return &lt;Message key={i} sender={data.sender} message={data.message} /&gt;
80        })}
81        &lt;/&gt;
82    )
83}
84

Message.js

1export default function Room(props) {
2    const [messagesData, setMessagesData] = useState([])
3
4    useEffect(() =&gt; {
5        console.log('the use effect ')
6        socket.on('broadcast', data =&gt; {
7            console.log(messagesData)
8            let previousData = messagesData
9            previousData.push(data)
10            // buildMessages(previousData)
11            setMessagesData(previousData)
12        })
13    }, [socket])
14
15
16    console.log('this is messagesData in queue.js', messagesData)
17
18    return(
19        // queue counter will go up here
20        // &lt;QueueDisplay /&gt;
21
22        // chat goes here
23        &lt;Chat 
24            profile={props.profile} 
25            messagesData={messagesData}
26        /&gt;
27
28    )
29}
30export default function Chat(props) {
31    // state
32    const [newPayload, setNewPayload] = useState({
33        message: '',
34        sender: props.profile.name
35    })
36    // const [messagesData, setMessagesData] = useState([])
37    const [updateToggle, setUpdateToggle] = useState(true)
38
39
40    const messageChangeHandler = (e) =&gt; {
41        setNewPayload({... newPayload, [e.target.name]: e.target.value})
42    }
43
44    const messageSend = (e) =&gt; {
45        e.preventDefault()
46        if (newPayload.message) {
47            socket.emit('chat message', newPayload)
48            setNewPayload({
49                message: '',
50                sender: props.profile.name  
51            })
52        }
53    }
54    
55    return(
56        &lt;div id='chatbox'&gt;
57            &lt;div id='messages'&gt;
58                &lt;Messages messagesData={props.messagesData} /&gt;
59            &lt;/div&gt;
60            &lt;form onSubmit={messageSend}&gt;
61                &lt;input 
62                    type=&quot;text&quot; 
63                    name=&quot;message&quot; 
64                    id=&quot;message&quot; 
65                    placeholder=&quot;Start a new message&quot; 
66                    onChange={messageChangeHandler} 
67                    value={newPayload.message}
68                    autoComplete='off'
69                /&gt;
70                &lt;input type=&quot;submit&quot; value=&quot;Send&quot; /&gt;
71            &lt;/form&gt;
72        &lt;/div&gt;
73    )
74}
75export default function Messages(props) {
76    return(
77        &lt;&gt;
78        {props.messagesData.map((data, i) =&gt; {
79            return &lt;Message key={i} sender={data.sender} message={data.message} /&gt;
80        })}
81        &lt;/&gt;
82    )
83}
84export default function Message(props) {
85    return(
86        &lt;div key={props.key}&gt;
87            &lt;p&gt;{props.sender}&lt;/p&gt;
88            &lt;p&gt;{props.message}&lt;/p&gt;
89        &lt;/div&gt;
90    )
91}
92

Thank you in advance for any help!

ANSWER

Answered 2022-Jan-11 at 19:44

Changing the useEffect in room to contain the following fixed the issue:

1export default function Room(props) {
2    const [messagesData, setMessagesData] = useState([])
3
4    useEffect(() =&gt; {
5        console.log('the use effect ')
6        socket.on('broadcast', data =&gt; {
7            console.log(messagesData)
8            let previousData = messagesData
9            previousData.push(data)
10            // buildMessages(previousData)
11            setMessagesData(previousData)
12        })
13    }, [socket])
14
15
16    console.log('this is messagesData in queue.js', messagesData)
17
18    return(
19        // queue counter will go up here
20        // &lt;QueueDisplay /&gt;
21
22        // chat goes here
23        &lt;Chat 
24            profile={props.profile} 
25            messagesData={messagesData}
26        /&gt;
27
28    )
29}
30export default function Chat(props) {
31    // state
32    const [newPayload, setNewPayload] = useState({
33        message: '',
34        sender: props.profile.name
35    })
36    // const [messagesData, setMessagesData] = useState([])
37    const [updateToggle, setUpdateToggle] = useState(true)
38
39
40    const messageChangeHandler = (e) =&gt; {
41        setNewPayload({... newPayload, [e.target.name]: e.target.value})
42    }
43
44    const messageSend = (e) =&gt; {
45        e.preventDefault()
46        if (newPayload.message) {
47            socket.emit('chat message', newPayload)
48            setNewPayload({
49                message: '',
50                sender: props.profile.name  
51            })
52        }
53    }
54    
55    return(
56        &lt;div id='chatbox'&gt;
57            &lt;div id='messages'&gt;
58                &lt;Messages messagesData={props.messagesData} /&gt;
59            &lt;/div&gt;
60            &lt;form onSubmit={messageSend}&gt;
61                &lt;input 
62                    type=&quot;text&quot; 
63                    name=&quot;message&quot; 
64                    id=&quot;message&quot; 
65                    placeholder=&quot;Start a new message&quot; 
66                    onChange={messageChangeHandler} 
67                    value={newPayload.message}
68                    autoComplete='off'
69                /&gt;
70                &lt;input type=&quot;submit&quot; value=&quot;Send&quot; /&gt;
71            &lt;/form&gt;
72        &lt;/div&gt;
73    )
74}
75export default function Messages(props) {
76    return(
77        &lt;&gt;
78        {props.messagesData.map((data, i) =&gt; {
79            return &lt;Message key={i} sender={data.sender} message={data.message} /&gt;
80        })}
81        &lt;/&gt;
82    )
83}
84export default function Message(props) {
85    return(
86        &lt;div key={props.key}&gt;
87            &lt;p&gt;{props.sender}&lt;/p&gt;
88            &lt;p&gt;{props.message}&lt;/p&gt;
89        &lt;/div&gt;
90    )
91}
92    useEffect(() =&gt; {
93        console.log('the use effect ')
94        socket.on('broadcast', data =&gt; {
95            console.log(messagesData)
96            // let previousData = messagesData
97            // previousData.push(data)
98            // setMessagesData(previousData)
99            setMessagesData(prev =&gt; prev.concat([data]))
100        })
101    }, [socket])```
102

Source https://stackoverflow.com/questions/70671831

QUESTION

Avoid rerendering every component in list while updating only one in React

Asked 2021-Dec-17 at 07:39

I have a simple chat app using Firebase v9, with these components from parent to child in this hierarchical order: ChatSection, Chat, ChatLine, EditMessage.

I have a custom hook named useChatService holding the list of messages in state, the hook is called in ChatSection, the hook returns the messages and I pass them from ChatSection in a prop to Chat, then I loop through messages and create a ChatLine component for every message.

I can click the Edit button in front of each message, it shows the EditMessage component so I can edit the text, then when I press "Enter", the function updateMessage gets executed and updates the message in the db, but then every single ChatLine gets rerendered again, which is a problem as the list gets bigger.

EDIT 2: I've completed the code to make a working example with Firebase v9 so you can visualize the rerenders I'm talking about after every (add, edit or delete) of a message. I'm using ReactDevTools Profiler to track rerenders.

Here is the full updated code: CodeSandbox
Also deployed on: Netlify

ChatSection.js:

1import useChatService from &quot;../hooks/useChatService&quot;;
2import { useEffect } from &quot;react&quot;;
3import Chat from &quot;./Chat&quot;;
4import NoChat from &quot;./NoChat&quot;;
5import ChatInput from &quot;./ChatInput&quot;;
6
7const ChatSection = () =&gt; {
8  let unsubscribe;
9  const { getChatAndUnsub, messages } = useChatService();
10
11  useEffect(() =&gt; {
12    const getChat = async () =&gt; {
13      unsubscribe = await getChatAndUnsub();
14    };
15
16    getChat();
17
18    return () =&gt; {
19      unsubscribe?.();
20    };
21  }, []);
22
23  return (
24    &lt;div&gt;
25      {messages.length ? &lt;Chat messages={messages} /&gt; : &lt;NoChat /&gt;}
26      &lt;p&gt;ADD A MESSAGE&lt;/p&gt;
27      &lt;ChatInput /&gt;
28    &lt;/div&gt;
29  );
30};
31
32export default ChatSection;
33

Chat.js:

1import useChatService from &quot;../hooks/useChatService&quot;;
2import { useEffect } from &quot;react&quot;;
3import Chat from &quot;./Chat&quot;;
4import NoChat from &quot;./NoChat&quot;;
5import ChatInput from &quot;./ChatInput&quot;;
6
7const ChatSection = () =&gt; {
8  let unsubscribe;
9  const { getChatAndUnsub, messages } = useChatService();
10
11  useEffect(() =&gt; {
12    const getChat = async () =&gt; {
13      unsubscribe = await getChatAndUnsub();
14    };
15
16    getChat();
17
18    return () =&gt; {
19      unsubscribe?.();
20    };
21  }, []);
22
23  return (
24    &lt;div&gt;
25      {messages.length ? &lt;Chat messages={messages} /&gt; : &lt;NoChat /&gt;}
26      &lt;p&gt;ADD A MESSAGE&lt;/p&gt;
27      &lt;ChatInput /&gt;
28    &lt;/div&gt;
29  );
30};
31
32export default ChatSection;
33import { useState } from &quot;react&quot;;
34import ChatLine from &quot;./ChatLine&quot;;
35import useChatService from &quot;../hooks/useChatService&quot;;
36
37const Chat = ({ messages }) =&gt; {
38  const [editValue, setEditValue] = useState(&quot;&quot;);
39  const [editingId, setEditingId] = useState(null);
40
41  const { updateMessage, deleteMessage } = useChatService();
42
43  return (
44    &lt;div&gt;
45      &lt;p&gt;MESSAGES :&lt;/p&gt;
46      {messages.map((line) =&gt; (
47        &lt;ChatLine
48          key={line.id}
49          line={line}
50          editValue={line.id === editingId ? editValue : &quot;&quot;}
51          setEditValue={setEditValue}
52          editingId={line.id === editingId ? editingId : null}
53          setEditingId={setEditingId}
54          updateMessage={updateMessage}
55          deleteMessage={deleteMessage}
56        /&gt;
57      ))}
58    &lt;/div&gt;
59  );
60};
61
62export default Chat;
63

ChatInput:

1import useChatService from &quot;../hooks/useChatService&quot;;
2import { useEffect } from &quot;react&quot;;
3import Chat from &quot;./Chat&quot;;
4import NoChat from &quot;./NoChat&quot;;
5import ChatInput from &quot;./ChatInput&quot;;
6
7const ChatSection = () =&gt; {
8  let unsubscribe;
9  const { getChatAndUnsub, messages } = useChatService();
10
11  useEffect(() =&gt; {
12    const getChat = async () =&gt; {
13      unsubscribe = await getChatAndUnsub();
14    };
15
16    getChat();
17
18    return () =&gt; {
19      unsubscribe?.();
20    };
21  }, []);
22
23  return (
24    &lt;div&gt;
25      {messages.length ? &lt;Chat messages={messages} /&gt; : &lt;NoChat /&gt;}
26      &lt;p&gt;ADD A MESSAGE&lt;/p&gt;
27      &lt;ChatInput /&gt;
28    &lt;/div&gt;
29  );
30};
31
32export default ChatSection;
33import { useState } from &quot;react&quot;;
34import ChatLine from &quot;./ChatLine&quot;;
35import useChatService from &quot;../hooks/useChatService&quot;;
36
37const Chat = ({ messages }) =&gt; {
38  const [editValue, setEditValue] = useState(&quot;&quot;);
39  const [editingId, setEditingId] = useState(null);
40
41  const { updateMessage, deleteMessage } = useChatService();
42
43  return (
44    &lt;div&gt;
45      &lt;p&gt;MESSAGES :&lt;/p&gt;
46      {messages.map((line) =&gt; (
47        &lt;ChatLine
48          key={line.id}
49          line={line}
50          editValue={line.id === editingId ? editValue : &quot;&quot;}
51          setEditValue={setEditValue}
52          editingId={line.id === editingId ? editingId : null}
53          setEditingId={setEditingId}
54          updateMessage={updateMessage}
55          deleteMessage={deleteMessage}
56        /&gt;
57      ))}
58    &lt;/div&gt;
59  );
60};
61
62export default Chat;
63import { useState } from &quot;react&quot;;
64import useChatService from &quot;../hooks/useChatService&quot;;
65
66const ChatInput = () =&gt; {
67  const [inputValue, setInputValue] = useState(&quot;&quot;);
68  const { addMessage } = useChatService();
69
70  return (
71    &lt;textarea
72      onKeyPress={(e) =&gt; {
73        if (e.key === &quot;Enter&quot;) {
74          e.preventDefault();
75          addMessage(inputValue);
76          setInputValue(&quot;&quot;);
77        }
78      }}
79      placeholder=&quot;new message...&quot;
80      onChange={(e) =&gt; {
81        setInputValue(e.target.value);
82      }}
83      value={inputValue}
84      autoFocus
85    /&gt;
86  );
87};
88
89export default ChatInput;
90

ChatLine.js:

1import useChatService from &quot;../hooks/useChatService&quot;;
2import { useEffect } from &quot;react&quot;;
3import Chat from &quot;./Chat&quot;;
4import NoChat from &quot;./NoChat&quot;;
5import ChatInput from &quot;./ChatInput&quot;;
6
7const ChatSection = () =&gt; {
8  let unsubscribe;
9  const { getChatAndUnsub, messages } = useChatService();
10
11  useEffect(() =&gt; {
12    const getChat = async () =&gt; {
13      unsubscribe = await getChatAndUnsub();
14    };
15
16    getChat();
17
18    return () =&gt; {
19      unsubscribe?.();
20    };
21  }, []);
22
23  return (
24    &lt;div&gt;
25      {messages.length ? &lt;Chat messages={messages} /&gt; : &lt;NoChat /&gt;}
26      &lt;p&gt;ADD A MESSAGE&lt;/p&gt;
27      &lt;ChatInput /&gt;
28    &lt;/div&gt;
29  );
30};
31
32export default ChatSection;
33import { useState } from &quot;react&quot;;
34import ChatLine from &quot;./ChatLine&quot;;
35import useChatService from &quot;../hooks/useChatService&quot;;
36
37const Chat = ({ messages }) =&gt; {
38  const [editValue, setEditValue] = useState(&quot;&quot;);
39  const [editingId, setEditingId] = useState(null);
40
41  const { updateMessage, deleteMessage } = useChatService();
42
43  return (
44    &lt;div&gt;
45      &lt;p&gt;MESSAGES :&lt;/p&gt;
46      {messages.map((line) =&gt; (
47        &lt;ChatLine
48          key={line.id}
49          line={line}
50          editValue={line.id === editingId ? editValue : &quot;&quot;}
51          setEditValue={setEditValue}
52          editingId={line.id === editingId ? editingId : null}
53          setEditingId={setEditingId}
54          updateMessage={updateMessage}
55          deleteMessage={deleteMessage}
56        /&gt;
57      ))}
58    &lt;/div&gt;
59  );
60};
61
62export default Chat;
63import { useState } from &quot;react&quot;;
64import useChatService from &quot;../hooks/useChatService&quot;;
65
66const ChatInput = () =&gt; {
67  const [inputValue, setInputValue] = useState(&quot;&quot;);
68  const { addMessage } = useChatService();
69
70  return (
71    &lt;textarea
72      onKeyPress={(e) =&gt; {
73        if (e.key === &quot;Enter&quot;) {
74          e.preventDefault();
75          addMessage(inputValue);
76          setInputValue(&quot;&quot;);
77        }
78      }}
79      placeholder=&quot;new message...&quot;
80      onChange={(e) =&gt; {
81        setInputValue(e.target.value);
82      }}
83      value={inputValue}
84      autoFocus
85    /&gt;
86  );
87};
88
89export default ChatInput;
90import EditMessage from &quot;./EditMessage&quot;;
91import { memo } from &quot;react&quot;;
92
93const ChatLine = ({
94  line,
95  editValue,
96  setEditValue,
97  editingId,
98  setEditingId,
99  updateMessage,
100  deleteMessage,
101}) =&gt; {
102  return (
103    &lt;div&gt;
104      {editingId !== line.id ? (
105        &lt;&gt;
106          &lt;span style={{ marginRight: &quot;20px&quot; }}&gt;{line.id}: &lt;/span&gt;
107          &lt;span style={{ marginRight: &quot;20px&quot; }}&gt;[{line.displayName}]&lt;/span&gt;
108          &lt;span style={{ marginRight: &quot;20px&quot; }}&gt;{line.message}&lt;/span&gt;
109          &lt;button
110            onClick={() =&gt; {
111              setEditingId(line.id);
112              setEditValue(line.message);
113            }}
114          &gt;
115            EDIT
116          &lt;/button&gt;
117          &lt;button
118            onClick={() =&gt; {
119              deleteMessage(line.id);
120            }}
121          &gt;
122            DELETE
123          &lt;/button&gt;
124        &lt;/&gt;
125      ) : (
126        &lt;EditMessage
127          editValue={editValue}
128          setEditValue={setEditValue}
129          setEditingId={setEditingId}
130          editingId={editingId}
131          updateMessage={updateMessage}
132        /&gt;
133      )}
134    &lt;/div&gt;
135  );
136};
137
138export default memo(ChatLine);
139

EditMessage.js:

1import useChatService from &quot;../hooks/useChatService&quot;;
2import { useEffect } from &quot;react&quot;;
3import Chat from &quot;./Chat&quot;;
4import NoChat from &quot;./NoChat&quot;;
5import ChatInput from &quot;./ChatInput&quot;;
6
7const ChatSection = () =&gt; {
8  let unsubscribe;
9  const { getChatAndUnsub, messages } = useChatService();
10
11  useEffect(() =&gt; {
12    const getChat = async () =&gt; {
13      unsubscribe = await getChatAndUnsub();
14    };
15
16    getChat();
17
18    return () =&gt; {
19      unsubscribe?.();
20    };
21  }, []);
22
23  return (
24    &lt;div&gt;
25      {messages.length ? &lt;Chat messages={messages} /&gt; : &lt;NoChat /&gt;}
26      &lt;p&gt;ADD A MESSAGE&lt;/p&gt;
27      &lt;ChatInput /&gt;
28    &lt;/div&gt;
29  );
30};
31
32export default ChatSection;
33import { useState } from &quot;react&quot;;
34import ChatLine from &quot;./ChatLine&quot;;
35import useChatService from &quot;../hooks/useChatService&quot;;
36
37const Chat = ({ messages }) =&gt; {
38  const [editValue, setEditValue] = useState(&quot;&quot;);
39  const [editingId, setEditingId] = useState(null);
40
41  const { updateMessage, deleteMessage } = useChatService();
42
43  return (
44    &lt;div&gt;
45      &lt;p&gt;MESSAGES :&lt;/p&gt;
46      {messages.map((line) =&gt; (
47        &lt;ChatLine
48          key={line.id}
49          line={line}
50          editValue={line.id === editingId ? editValue : &quot;&quot;}
51          setEditValue={setEditValue}
52          editingId={line.id === editingId ? editingId : null}
53          setEditingId={setEditingId}
54          updateMessage={updateMessage}
55          deleteMessage={deleteMessage}
56        /&gt;
57      ))}
58    &lt;/div&gt;
59  );
60};
61
62export default Chat;
63import { useState } from &quot;react&quot;;
64import useChatService from &quot;../hooks/useChatService&quot;;
65
66const ChatInput = () =&gt; {
67  const [inputValue, setInputValue] = useState(&quot;&quot;);
68  const { addMessage } = useChatService();
69
70  return (
71    &lt;textarea
72      onKeyPress={(e) =&gt; {
73        if (e.key === &quot;Enter&quot;) {
74          e.preventDefault();
75          addMessage(inputValue);
76          setInputValue(&quot;&quot;);
77        }
78      }}
79      placeholder=&quot;new message...&quot;
80      onChange={(e) =&gt; {
81        setInputValue(e.target.value);
82      }}
83      value={inputValue}
84      autoFocus
85    /&gt;
86  );
87};
88
89export default ChatInput;
90import EditMessage from &quot;./EditMessage&quot;;
91import { memo } from &quot;react&quot;;
92
93const ChatLine = ({
94  line,
95  editValue,
96  setEditValue,
97  editingId,
98  setEditingId,
99  updateMessage,
100  deleteMessage,
101}) =&gt; {
102  return (
103    &lt;div&gt;
104      {editingId !== line.id ? (
105        &lt;&gt;
106          &lt;span style={{ marginRight: &quot;20px&quot; }}&gt;{line.id}: &lt;/span&gt;
107          &lt;span style={{ marginRight: &quot;20px&quot; }}&gt;[{line.displayName}]&lt;/span&gt;
108          &lt;span style={{ marginRight: &quot;20px&quot; }}&gt;{line.message}&lt;/span&gt;
109          &lt;button
110            onClick={() =&gt; {
111              setEditingId(line.id);
112              setEditValue(line.message);
113            }}
114          &gt;
115            EDIT
116          &lt;/button&gt;
117          &lt;button
118            onClick={() =&gt; {
119              deleteMessage(line.id);
120            }}
121          &gt;
122            DELETE
123          &lt;/button&gt;
124        &lt;/&gt;
125      ) : (
126        &lt;EditMessage
127          editValue={editValue}
128          setEditValue={setEditValue}
129          setEditingId={setEditingId}
130          editingId={editingId}
131          updateMessage={updateMessage}
132        /&gt;
133      )}
134    &lt;/div&gt;
135  );
136};
137
138export default memo(ChatLine);
139import { memo } from &quot;react&quot;;
140
141const EditMessage = ({
142  editValue,
143  setEditValue,
144  editingId,
145  setEditingId,
146  updateMessage,
147}) =&gt; {
148  return (
149    &lt;div&gt;
150      &lt;textarea
151        onKeyPress={(e) =&gt; {
152          if (e.key === &quot;Enter&quot;) {
153            // prevent textarea default behaviour (line break on Enter)
154            e.preventDefault();
155            // updating message in DB
156            updateMessage(editValue, setEditValue, editingId, setEditingId);
157          }
158        }}
159        onChange={(e) =&gt; setEditValue(e.target.value)}
160        value={editValue}
161        autoFocus
162      /&gt;
163      &lt;button
164        onClick={() =&gt; {
165          setEditingId(null);
166          setEditValue(null);
167        }}
168      &gt;
169        CANCEL
170      &lt;/button&gt;
171    &lt;/div&gt;
172  );
173};
174
175export default memo(EditMessage);
176

useChatService.js:

1import useChatService from &quot;../hooks/useChatService&quot;;
2import { useEffect } from &quot;react&quot;;
3import Chat from &quot;./Chat&quot;;
4import NoChat from &quot;./NoChat&quot;;
5import ChatInput from &quot;./ChatInput&quot;;
6
7const ChatSection = () =&gt; {
8  let unsubscribe;
9  const { getChatAndUnsub, messages } = useChatService();
10
11  useEffect(() =&gt; {
12    const getChat = async () =&gt; {
13      unsubscribe = await getChatAndUnsub();
14    };
15
16    getChat();
17
18    return () =&gt; {
19      unsubscribe?.();
20    };
21  }, []);
22
23  return (
24    &lt;div&gt;
25      {messages.length ? &lt;Chat messages={messages} /&gt; : &lt;NoChat /&gt;}
26      &lt;p&gt;ADD A MESSAGE&lt;/p&gt;
27      &lt;ChatInput /&gt;
28    &lt;/div&gt;
29  );
30};
31
32export default ChatSection;
33import { useState } from &quot;react&quot;;
34import ChatLine from &quot;./ChatLine&quot;;
35import useChatService from &quot;../hooks/useChatService&quot;;
36
37const Chat = ({ messages }) =&gt; {
38  const [editValue, setEditValue] = useState(&quot;&quot;);
39  const [editingId, setEditingId] = useState(null);
40
41  const { updateMessage, deleteMessage } = useChatService();
42
43  return (
44    &lt;div&gt;
45      &lt;p&gt;MESSAGES :&lt;/p&gt;
46      {messages.map((line) =&gt; (
47        &lt;ChatLine
48          key={line.id}
49          line={line}
50          editValue={line.id === editingId ? editValue : &quot;&quot;}
51          setEditValue={setEditValue}
52          editingId={line.id === editingId ? editingId : null}
53          setEditingId={setEditingId}
54          updateMessage={updateMessage}
55          deleteMessage={deleteMessage}
56        /&gt;
57      ))}
58    &lt;/div&gt;
59  );
60};
61
62export default Chat;
63import { useState } from &quot;react&quot;;
64import useChatService from &quot;../hooks/useChatService&quot;;
65
66const ChatInput = () =&gt; {
67  const [inputValue, setInputValue] = useState(&quot;&quot;);
68  const { addMessage } = useChatService();
69
70  return (
71    &lt;textarea
72      onKeyPress={(e) =&gt; {
73        if (e.key === &quot;Enter&quot;) {
74          e.preventDefault();
75          addMessage(inputValue);
76          setInputValue(&quot;&quot;);
77        }
78      }}
79      placeholder=&quot;new message...&quot;
80      onChange={(e) =&gt; {
81        setInputValue(e.target.value);
82      }}
83      value={inputValue}
84      autoFocus
85    /&gt;
86  );
87};
88
89export default ChatInput;
90import EditMessage from &quot;./EditMessage&quot;;
91import { memo } from &quot;react&quot;;
92
93const ChatLine = ({
94  line,
95  editValue,
96  setEditValue,
97  editingId,
98  setEditingId,
99  updateMessage,
100  deleteMessage,
101}) =&gt; {
102  return (
103    &lt;div&gt;
104      {editingId !== line.id ? (
105        &lt;&gt;
106          &lt;span style={{ marginRight: &quot;20px&quot; }}&gt;{line.id}: &lt;/span&gt;
107          &lt;span style={{ marginRight: &quot;20px&quot; }}&gt;[{line.displayName}]&lt;/span&gt;
108          &lt;span style={{ marginRight: &quot;20px&quot; }}&gt;{line.message}&lt;/span&gt;
109          &lt;button
110            onClick={() =&gt; {
111              setEditingId(line.id);
112              setEditValue(line.message);
113            }}
114          &gt;
115            EDIT
116          &lt;/button&gt;
117          &lt;button
118            onClick={() =&gt; {
119              deleteMessage(line.id);
120            }}
121          &gt;
122            DELETE
123          &lt;/button&gt;
124        &lt;/&gt;
125      ) : (
126        &lt;EditMessage
127          editValue={editValue}
128          setEditValue={setEditValue}
129          setEditingId={setEditingId}
130          editingId={editingId}
131          updateMessage={updateMessage}
132        /&gt;
133      )}
134    &lt;/div&gt;
135  );
136};
137
138export default memo(ChatLine);
139import { memo } from &quot;react&quot;;
140
141const EditMessage = ({
142  editValue,
143  setEditValue,
144  editingId,
145  setEditingId,
146  updateMessage,
147}) =&gt; {
148  return (
149    &lt;div&gt;
150      &lt;textarea
151        onKeyPress={(e) =&gt; {
152          if (e.key === &quot;Enter&quot;) {
153            // prevent textarea default behaviour (line break on Enter)
154            e.preventDefault();
155            // updating message in DB
156            updateMessage(editValue, setEditValue, editingId, setEditingId);
157          }
158        }}
159        onChange={(e) =&gt; setEditValue(e.target.value)}
160        value={editValue}
161        autoFocus
162      /&gt;
163      &lt;button
164        onClick={() =&gt; {
165          setEditingId(null);
166          setEditValue(null);
167        }}
168      &gt;
169        CANCEL
170      &lt;/button&gt;
171    &lt;/div&gt;
172  );
173};
174
175export default memo(EditMessage);
176import { useCallback, useState } from &quot;react&quot;;
177import {
178  collection,
179  onSnapshot,
180  orderBy,
181  query,
182  serverTimestamp,
183  updateDoc,
184  doc,
185  addDoc,
186  deleteDoc,
187} from &quot;firebase/firestore&quot;;
188import { db } from &quot;../firebase/firebase-config&quot;;
189
190const useChatService = () =&gt; {
191  const [messages, setMessages] = useState([]);
192
193  /**
194   * Get Messages
195   *
196   * @returns {Promise&lt;Unsubscribe&gt;}
197   */
198  const getChatAndUnsub = async () =&gt; {
199    const q = query(collection(db, &quot;messages&quot;), orderBy(&quot;createdAt&quot;));
200
201    const unsubscribe = onSnapshot(q, (snapshot) =&gt; {
202      const data = snapshot.docs.map((doc, index) =&gt; {
203        const entry = doc.data();
204
205        return {
206          id: doc.id,
207          message: entry.message,
208          createdAt: entry.createdAt,
209          updatedAt: entry.updatedAt,
210          uid: entry.uid,
211          displayName: entry.displayName,
212          photoURL: entry.photoURL,
213        };
214      });
215
216      setMessages(data);
217    });
218
219    return unsubscribe;
220  };
221
222  /**
223   * Memoized using useCallback
224   */
225  const updateMessage = useCallback(
226    async (editValue, setEditValue, editingId, setEditingId) =&gt; {
227      const message = editValue;
228      const id = editingId;
229
230      // resetting state as soon as we press Enter
231      setEditValue(&quot;&quot;);
232      setEditingId(null);
233
234      try {
235        await updateDoc(doc(db, &quot;messages&quot;, id), {
236          message,
237          updatedAt: serverTimestamp(),
238        });
239      } catch (err) {
240        console.log(err);
241      }
242    },
243    []
244  );
245
246  const addMessage = async (inputValue) =&gt; {
247    if (!inputValue) {
248      return;
249    }
250    const message = inputValue;
251
252    const messageData = {
253      // hardcoded photoURL, uid, and displayName for demo purposes
254      photoURL:
255        &quot;https://lh3.googleusercontent.com/a/AATXAJwNw_ECd4OhqV0bwAb7l4UqtPYeSrRMpVB7ayxY=s96-c&quot;,
256      uid: keyGen(),
257      message,
258      displayName: &quot;John Doe&quot;,
259      createdAt: serverTimestamp(),
260      updatedAt: null,
261    };
262
263    try {
264      await addDoc(collection(db, &quot;messages&quot;), messageData);
265    } catch (e) {
266      console.log(e);
267    }
268  };
269
270  /**
271   * Memoized using useCallback
272   */
273  const deleteMessage = useCallback(async (idToDelete) =&gt; {
274    if (!idToDelete) {
275      return;
276    }
277    try {
278      await deleteDoc(doc(db, &quot;messages&quot;, idToDelete));
279    } catch (err) {
280      console.log(err);
281    }
282  }, []);
283
284  const keyGen = () =&gt; {
285    const s = &quot;abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&quot;;
286    return Array(20)
287      .join()
288      .split(&quot;,&quot;)
289      .map(function () {
290        return s.charAt(Math.floor(Math.random() * s.length));
291      })
292      .join(&quot;&quot;);
293  };
294
295  return {
296    messages,
297    getChatAndUnsub,
298    updateMessage,
299    addMessage,
300    deleteMessage,
301  };
302};
303
304export default useChatService;
305

When a message gets updated using updateMessage method, I only need the affected ChatLine to rerender (same for add & delete), not every single ChatLine in the list, while keeping the messages state passed from ChatSection to Chat, I understand that ChatSection & Chat should rerender, but not every ChatLine in the list. (Also ChatLine is memoized)

EDIT 1: I guess the problem is with setMessages(data) in useChatService.js, but I thought React will only rerender the edited line because I already provided the key={line.id} when looping through messages in Chat component, but I have no idea how to fix this.

ANSWER

Answered 2021-Dec-13 at 23:35

This is what I think, You are passing Messages in ChatSection and that means that when Messages get updated ChatSection will rerender and all its children will rerender too.

So here is my idea remove Messages from ChatSection and only add it in Chat.

You already using useChatService in Chat so adding Messages there should be better.

Try this and gets back too us if it working.

If still not as you like it to be there is also other way we could fix it.

But you have to create a working example for us so we could have a look and make small changes.

Source https://stackoverflow.com/questions/70319227

QUESTION

Google Play App Rejection - Not a core feature - Use of All files access

Asked 2021-Nov-26 at 12:40

I have an application on play store to whom the targetSdkVersion is update to 30 from 29, which is getting rejected again and again by Google Play after an update.

Previously, there was a permission of MANAGE_EXTERNAL_STORAGE in one of the SDK Manifest.

After removing MANAGE_EXTERNAL_STORAGE permission and storage permission (WRITE_EXTERNAL_STORAGE) completely from my app, uploading the app on store, app update gets rejected again.

This is the email received from Google Play for the rejection reason.

Note: I am saving all my media files in app-specific internal storage.

Also, I have the permission of READ_EXTERNAL_STORAGE in my SDK as we have chat feature in our app to get images and videos of device to sent it.

According to Use of All files access (MANAGE_EXTERNAL_STORAGE) permission READ_EXTERNAL_STORAGE permission has not impact.

Attached reference.

Update

I also removed READ_EXTERNAL_STORAGE permission from the app, but still got the rejection with same reason from Google Play.

Is the issue with Storage Policy, or something else?

ANSWER

Answered 2021-Nov-25 at 13:10

I had the same error for a month but finally, Google Play Store accepted my uploads.

Briefly, what I did was to create new builds for each track, and -interestingly- it worked!

(Before my countless update trials, our latest version on Production was 2.23.5 (build 1), our active tracks were Internal Testing Track and Production, and I was trying to upload my updates to Internal Testing Track.)

Below are the steps that I've applied:

Created a new build 2.24.1 (build 1) with all necessary changes. (e.g. upgrading targetSdkVersion to 30, removing MANAGE_EXTERNAL_STORAGE permission, etc.)
Activated our inactive tracks (Open, Closed Alpha, and Beta Testing Tracks), uploaded the same build 2.24.1 (build 1) to these tracks, and then paused those tracks. (I've paused them as I won't use them actively, you may not want to pause it)
Created another build 2.24.1 (build 2) which was completely the same as build 1. I've just updated its build number.
Uploaded 2.24.1 (build 2) to the Internal Testing Track.
Created another build 2.24.1 (build 3) which was completely the same as build 3. I've just updated its build number.
Uploaded 2.24.1 (build 3) to the Production Track.
Went to "Publishing Overview" page, activated Managed Publishing in order to manually publish my uploads to Production and other tracks as they got accepted.
Sent these uploads to review at once and voila, Google accepts your uploads!

Sarcasm on.

Hereby, I would like to congratulate Google Play Support as they've shared all these details within their documentation, within their rejection e-mails, and within their super fast response to the appeal.

Sarcasm off.

I've found this solution referencing from this answer https://stackoverflow.com/a/69933431/2833718. I couldn't find any help from Google's official docs. They've always rejected my uploads with the same e-mail which is impossible to decode for a human being. They've never returned to my appeal.

This migration and support process was completely a failure.

Thank you Google Play Support, you are everything but support to developers.

Source https://stackoverflow.com/questions/70035032

QUESTION

How to add count values in venn diagram for more than 6 sets?

Asked 2021-Nov-04 at 00:43

I used following code to generate the sets for more than 5 groups:

1library(venneuler)
2
3H=list('ASD'=c(&quot;SCN3A&quot;, &quot;TSC2&quot;, &quot;RASSF8&quot;, &quot;XDH&quot;, &quot;CNTN5&quot;, &quot;CHD7&quot;, &quot;DPYD&quot;, &quot;BUB1&quot;, &quot;DPP4&quot;, &quot;AMPD1&quot;, &quot;ARID4A&quot;, &quot;QSER1&quot;, &quot;OCA2&quot;, &quot;GPR141&quot;, &quot;DNAH9&quot;, &quot;LOXHD1&quot;, &quot;SETX&quot;, &quot;GSTP1&quot;, &quot;SLC6A15&quot;, &quot;ASTN1&quot;, &quot;CACNA1D&quot;, &quot;WFS1&quot;, &quot;KCNC1&quot;, &quot;TPRA1&quot;, &quot;NBAS&quot;, &quot;LAMB1&quot;, &quot;TSNARE1&quot;, &quot;GABRB3&quot;, &quot;PAG1&quot;, &quot;SOS1&quot;, &quot;LHFPL4&quot;, &quot;KMT2C&quot;, &quot;GATM&quot;, &quot;NPTX2&quot;, &quot;ANK3&quot;, &quot;SH3TC2&quot;, &quot;CLPP&quot;, &quot;TP53BP1&quot;, &quot;EBF4&quot;, &quot;ANO1&quot;, &quot;DNAJC10&quot;, &quot;TTC25&quot;, &quot;NDUFB7&quot;, &quot;PCSK1&quot;, &quot;ROBO3&quot;, &quot;MYO9A&quot;, &quot;RPS23&quot;, &quot;ZNF292&quot;, &quot;CRBN&quot;, &quot;HIVEP2&quot;, &quot;CYP1B1&quot;, &quot;KCNE2&quot;, &quot;NRP2&quot;, &quot;ADSL&quot;, &quot;XIRP2&quot;, &quot;SMARCA4&quot;, &quot;HDAC2&quot;, &quot;JAK2&quot;, &quot;ATP9B&quot;, &quot;ESR1&quot;, &quot;MDN1&quot;, &quot;CTNNA2&quot;, &quot;CNTNAP2&quot;, &quot;SPTB&quot;, &quot;ACY1&quot;, &quot;CEP290&quot;, &quot;WNT2&quot;, &quot;IQGAP3&quot;, &quot;CACNG3&quot;, &quot;CACNA1H&quot;, &quot;FOXN1&quot;, &quot;SPAST&quot;, &quot;ADCY1&quot;, &quot;IGF2&quot;, &quot;RNF4&quot;, &quot;CTTNBP2&quot;, &quot;TMF1&quot;, &quot;CPT1A&quot;, &quot;TENM3&quot;, &quot;RABGGTA&quot;, &quot;MBD3&quot;, &quot;CCDC18&quot;, &quot;SMG1&quot;, &quot;SYNE1&quot;, &quot;PITX3&quot;, &quot;HMGA2&quot;, &quot;PDE6C&quot;, &quot;CTU2&quot;, &quot;PNPLA7&quot;, &quot;PIEZO1&quot;, &quot;MAP2&quot;, &quot;MCF2L&quot;, &quot;PRF1&quot;, &quot;VWA8&quot;, &quot;LRP2&quot;, &quot;RYR3&quot;, &quot;IPO9&quot;, &quot;DIXDC1&quot;, &quot;CNTNAP5&quot;, &quot;ELP4&quot;, &quot;LRRN1&quot;, &quot;TRIO&quot;, &quot;SACS&quot;, &quot;ASIC2&quot;, &quot;KIF1B&quot;, &quot;AXIN2&quot;, &quot;SORL1&quot;, &quot;DLG2&quot;, &quot;VPS13C&quot;, &quot;F2RL1&quot;, &quot;NRP1&quot;, &quot;LAMA1&quot;, &quot;LARP1&quot;, &quot;SDK1&quot;, &quot;LAMC2&quot;, &quot;LSG1&quot;, &quot;EP300&quot;, &quot;DGCR6L&quot;, &quot;TSHB&quot;, &quot;APC&quot;, &quot;TENM4&quot;, &quot;IGSF21&quot;),
4             'Epilepsy'=c(&quot;ADCY1&quot;, &quot;ADSL&quot;, &quot;ANK3&quot;, &quot;APC&quot;, &quot;ASIC2&quot;, &quot;ASTN1&quot;, &quot;ATP9B&quot;, &quot;AXIN2&quot;, &quot;BUB1&quot;, &quot;CACNA1D&quot;, &quot;CACNA1H&quot;, &quot;CACNG3&quot;, &quot;CEP290&quot;, &quot;CLPP&quot;, &quot;CNTN5&quot;, &quot;CNTNAP2&quot;, &quot;CNTNAP5&quot;, &quot;CTNNA2&quot;, &quot;CTU2&quot;, &quot;DGCR6L&quot;, &quot;DLG2&quot;, &quot;DNAJC10&quot;, &quot;ELP4&quot;, &quot;EP300&quot;, &quot;GABRB3&quot;, &quot;HDAC2&quot;, &quot;HMGA2&quot;, &quot;IGSF21&quot;, &quot;IPO9&quot;, &quot;IQGAP3&quot;, &quot;JAK2&quot;, &quot;KCNC1&quot;, &quot;KCNE2&quot;, &quot;KIF1B&quot;, &quot;LAMB1&quot;, &quot;LAMC2&quot;, &quot;LARP1&quot;, &quot;LHFPL4&quot;, &quot;MCF2L&quot;, &quot;MYO9A&quot;, &quot;NDUFB7&quot;, &quot;NRP2&quot;, &quot;RABGGTA&quot;, &quot;RYR3&quot;, &quot;SACS&quot;, &quot;SCN3A&quot;, &quot;SETX&quot;, &quot;SMARCA4&quot;, &quot;SMG1&quot;, &quot;SORL1&quot;, &quot;SPAST&quot;, &quot;SPTB&quot;, &quot;TMF1&quot;, &quot;TP53BP1&quot;, &quot;TPRA1&quot;, &quot;TRIO&quot;, &quot;TSC2&quot;, &quot;TSHB&quot;, &quot;VPS13C&quot;, &quot;WFS1&quot;, &quot;XDH&quot;, &quot;ZNF292&quot;, &quot;ABCA1&quot;, &quot;ABCG5&quot;, &quot;ACP2&quot;, &quot;ADCY6&quot;, &quot;ADGRA3&quot;, &quot;ADGRV1&quot;, &quot;AGA&quot;, &quot;AGRN&quot;, &quot;ALG3&quot;, &quot;ANK2&quot;, &quot;ANKRD44&quot;, &quot;AP5Z1&quot;, &quot;ARAP1&quot;, &quot;ARHGEF11&quot;, &quot;ASCC3&quot;, &quot;ASPM&quot;, &quot;ATRN&quot;, &quot;AURKB&quot;, &quot;BRINP2&quot;, &quot;BRSK2&quot;, &quot;CAPN15&quot;, &quot;CAPN2&quot;, &quot;CC2D2A&quot;, &quot;CD36&quot;, &quot;CDX1&quot;, &quot;CHAT&quot;, &quot;CHM&quot;, &quot;CHTF18&quot;, &quot;CLCN2&quot;, &quot;CLCN7&quot;, &quot;CLEC12A&quot;, &quot;COG5&quot;, &quot;COG6&quot;, &quot;COL12A1&quot;, &quot;COL17A1&quot;, &quot;COL28A1&quot;, &quot;COL6A2&quot;, &quot;COQ3&quot;, &quot;CYBB&quot;, &quot;DBNL&quot;, &quot;DBR1&quot;, &quot;DEAF1&quot;, &quot;DGKQ&quot;, &quot;DHX29&quot;, &quot;DMXL1&quot;, &quot;DMXL2&quot;, &quot;DNAH12&quot;, &quot;DOCK7&quot;, &quot;DOLK&quot;, &quot;DSG4&quot;, &quot;DZIP1&quot;, &quot;EFHC1&quot;, &quot;EPHA7&quot;, &quot;EPHB1&quot;, &quot;EPHB3&quot;, &quot;ESYT1&quot;, &quot;EXOC7&quot;, &quot;F13A1&quot;, &quot;F5&quot;, &quot;FAH&quot;, &quot;FARP1&quot;, &quot;FASN&quot;, &quot;FAT1&quot;, &quot;FERMT1&quot;, &quot;FGFR3&quot;, &quot;FLNB&quot;, &quot;FLRT1&quot;, &quot;FMNL1&quot;, &quot;FN1&quot;, &quot;FOLR1&quot;, &quot;FZD4&quot;, &quot;GAA&quot;, &quot;GAK&quot;, &quot;GALC&quot;, &quot;GANAB&quot;, &quot;GLB1&quot;, &quot;GM2A&quot;, &quot;GNA14&quot;, &quot;GOSR2&quot;, &quot;GPC1&quot;, &quot;GSS&quot;, &quot;GTPBP4&quot;, &quot;HEATR1&quot;, &quot;HGS&quot;, &quot;HIPK2&quot;, &quot;HSPA13&quot;, &quot;HTR2B&quot;, &quot;INO80E&quot;, &quot;KALRN&quot;, &quot;KCNH2&quot;, &quot;KCNJ16&quot;, &quot;KIAA0586&quot;, &quot;KRIT1&quot;, &quot;LAMB2&quot;, &quot;LMAN1&quot;, &quot;LTBP3&quot;, &quot;MASTL&quot;, &quot;MED17&quot;, &quot;METTL25&quot;, &quot;MGAT5B&quot;, &quot;MPL&quot;, &quot;MRPL24&quot;, &quot;MRPS27&quot;, &quot;MSX2&quot;, &quot;MUS81&quot;, &quot;NALCN&quot;, &quot;NEB&quot;, &quot;NFE2L1&quot;, &quot;NMBR&quot;, &quot;NOL11&quot;, &quot;NUCB1&quot;, &quot;OBSL1&quot;, &quot;OGDHL&quot;, &quot;OGFOD2&quot;, &quot;PARP1&quot;, &quot;PCCB&quot;, &quot;PDGFRA&quot;, &quot;PDYN&quot;, &quot;PFAS&quot;, &quot;PFKFB3&quot;, &quot;PLEC&quot;, &quot;PLOD2&quot;, &quot;PNKD&quot;, &quot;PNPO&quot;, &quot;POLD1&quot;, &quot;POLE&quot;, &quot;POLL&quot;, &quot;PPAT&quot;, &quot;PRDX3&quot;, &quot;PSEN2&quot;, &quot;PTCH1&quot;, &quot;PTK2B&quot;, &quot;RAB5A&quot;, &quot;RAD54B&quot;, &quot;RELB&quot;, &quot;RHOT2&quot;, &quot;RIMS2&quot;, &quot;RTN4IP1&quot;, &quot;SAE1&quot;, &quot;SCAPER&quot;, &quot;SCN1B&quot;, &quot;SCN5A&quot;, &quot;SEC23IP&quot;, &quot;SERPINE2&quot;, &quot;SGCB&quot;, &quot;SIGLEC1&quot;, &quot;SLC18A3&quot;, &quot;SLC26A4&quot;, &quot;SLC2A1&quot;, &quot;SLC4A1&quot;, &quot;SLC4A3&quot;, &quot;SLITRK6&quot;, &quot;SPG11&quot;, &quot;STARD13&quot;, &quot;STT3A&quot;, &quot;SYF2&quot;, &quot;SYNJ1&quot;, &quot;SZT2&quot;, &quot;TECPR2&quot;, &quot;TES&quot;, &quot;TMEM67&quot;, &quot;TNK2&quot;, &quot;TNS1&quot;, &quot;TNS3&quot;, &quot;TRAP1&quot;, &quot;TRAPPC11&quot;, &quot;TRAPPC8&quot;, &quot;TRIP10&quot;, &quot;TRPM2&quot;, &quot;TRPM3&quot;, &quot;TRPV1&quot;, &quot;TUBGCP6&quot;, &quot;TYW1&quot;, &quot;UNC13B&quot;, &quot;USP45&quot;, &quot;VCP&quot;, &quot;WDR62&quot;, &quot;WWOX&quot;, &quot;YAP1&quot;, &quot;ZBTB48&quot;, &quot;ZFHX4&quot;, &quot;ZW10&quot;),
5             'Intellectual'=c(&quot;YAP1&quot;, &quot;TSC2&quot;, &quot;FMNL1&quot;, &quot;MADD&quot;, &quot;KRIT1&quot;, &quot;TNK2&quot;, &quot;NUP155&quot;, &quot;COG6&quot;, &quot;TRAPPC8&quot;, &quot;IPO9&quot;, &quot;CCT8&quot;, &quot;ZFYVE16&quot;, &quot;FAT1&quot;, &quot;SLC37A1&quot;, &quot;KAT6B&quot;, &quot;WWOX&quot;, &quot;PTK2B&quot;, &quot;CNTNAP5&quot;, &quot;HEATR1&quot;, &quot;TRAPPC11&quot;, &quot;ARID4A&quot;, &quot;ADGRV1&quot;, &quot;GPC1&quot;, &quot;AURKB&quot;, &quot;TTC39B&quot;, &quot;GSS&quot;, &quot;GANAB&quot;, &quot;RFWD3&quot;, &quot;CUL9&quot;, &quot;SAE1&quot;, &quot;CACNG3&quot;, &quot;SMC4&quot;, &quot;ASIC2&quot;, &quot;SYF2&quot;, &quot;PFAS&quot;, &quot;GAK&quot;, &quot;METTL25&quot;, &quot;OGDHL&quot;, &quot;RAB5A&quot;, &quot;VPS13C&quot;, &quot;FGFR3&quot;, &quot;KCNC1&quot;, &quot;DDOST&quot;, &quot;CTNND1&quot;, &quot;ATRN&quot;, &quot;UNC13B&quot;, &quot;FASN&quot;, &quot;MYO18A&quot;, &quot;TMF1&quot;, &quot;CRBN&quot;, &quot;FLNB&quot;, &quot;LARP1&quot;, &quot;RCC2&quot;, &quot;MASTL&quot;, &quot;ADGRA3&quot;, &quot;SCAPER&quot;, &quot;SZT2&quot;, &quot;LRP4&quot;, &quot;SMG1&quot;, &quot;SYNE1&quot;, &quot;ADCY6&quot;, &quot;RNGTT&quot;, &quot;EP300&quot;, &quot;ARAP1&quot;, &quot;ANKRD44&quot;, &quot;VPS39&quot;, &quot;DGCR6L&quot;, &quot;STT3A&quot;, &quot;COG5&quot;, &quot;NFE2L1&quot;, &quot;SLC7A2&quot;, &quot;ASCC3&quot;, &quot;LMAN1&quot;, &quot;OBSL1&quot;, &quot;KIF20B&quot;, &quot;PNPLA7&quot;),
6             'Schizophrenia'=c(&quot;CRB1&quot;, &quot;FBXW4&quot;, &quot;CNTN5&quot;, &quot;CHM&quot;, &quot;DPYD&quot;, &quot;BUB1&quot;, &quot;DPP4&quot;, &quot;ADGRV1&quot;, &quot;GPC1&quot;, &quot;DLD&quot;, &quot;RBM19&quot;, &quot;ITIH1&quot;, &quot;ADCY7&quot;, &quot;KCNC1&quot;, &quot;ACBD5&quot;, &quot;ELF1&quot;, &quot;TSNARE1&quot;, &quot;GABRB3&quot;, &quot;TMEM182&quot;, &quot;STT3A&quot;, &quot;KMT2C&quot;, &quot;ANK3&quot;, &quot;SAMD4A&quot;, &quot;NALCN&quot;, &quot;PDLIM5&quot;, &quot;LIMA1&quot;, &quot;DYNC1I2&quot;, &quot;TMEM26&quot;, &quot;ANK2&quot;, &quot;GRIN3A&quot;, &quot;EPHB1&quot;, &quot;BRINP2&quot;, &quot;KALRN&quot;, &quot;MICAL2&quot;, &quot;TTLL6&quot;, &quot;ZNF292&quot;, &quot;SERPINB1&quot;, &quot;SCAPER&quot;, &quot;KCNS3&quot;, &quot;VAMP1&quot;, &quot;HDAC2&quot;, &quot;DLG1&quot;, &quot;CFAP58&quot;, &quot;JAK2&quot;, &quot;ESR1&quot;, &quot;EFCAB14&quot;, &quot;CNTNAP2&quot;, &quot;PENK&quot;, &quot;WWOX&quot;, &quot;GLT8D1&quot;, &quot;SFMBT2&quot;, &quot;EEFSEC&quot;, &quot;PDZD8&quot;, &quot;GALC&quot;, &quot;CACNG3&quot;, &quot;SPG7&quot;, &quot;ADCY1&quot;, &quot;CLDN10&quot;, &quot;TENM3&quot;, &quot;OTOS&quot;, &quot;CAPN2&quot;, &quot;LRP4&quot;, &quot;SYNE1&quot;, &quot;HMGA2&quot;, &quot;APOL4&quot;, &quot;ARAP1&quot;, &quot;DOPEY1&quot;, &quot;EPN2&quot;, &quot;MCF2L&quot;, &quot;PLAA&quot;, &quot;RYR3&quot;, &quot;CNTNAP5&quot;, &quot;POLE&quot;, &quot;TRIO&quot;, &quot;RAB11FIP5&quot;, &quot;BNIP3L&quot;, &quot;RUNX1&quot;, &quot;AXIN2&quot;, &quot;KIF1B&quot;, &quot;DLG2&quot;, &quot;MAP3K9&quot;, &quot;CERCAM&quot;, &quot;VPS13C&quot;, &quot;MYO18B&quot;, &quot;NRP1&quot;, &quot;IRS1&quot;, &quot;MANEA&quot;, &quot;EP300&quot;, &quot;DGCR6L&quot;, &quot;TSHB&quot;, &quot;AASDHPPT&quot;, &quot;TRAPPC3&quot;, &quot;APC&quot;, &quot;TENM4&quot;),
7             'ADHD'=c(&quot;TSC2&quot;, &quot;CSMD2&quot;, &quot;ANK3&quot;, &quot;ASPM&quot;, &quot;CNTN5&quot;, &quot;TP53BP1&quot;, &quot;CNTNAP2&quot;, &quot;CHD7&quot;, &quot;GLT8D1&quot;, &quot;CNTNAP5&quot;, &quot;SFMBT2&quot;, &quot;MLH1&quot;, &quot;FLII&quot;, &quot;PTCH1&quot;, &quot;SPRED1&quot;, &quot;ARHGEF12&quot;, &quot;CHMP7&quot;, &quot;SVEP1&quot;, &quot;CREB5&quot;, &quot;MSH6&quot;, &quot;TTLL8&quot;, &quot;DLG2&quot;, &quot;MICAL2&quot;, &quot;DNAH3&quot;, &quot;ADGRA3&quot;, &quot;ACBD5&quot;, &quot;SYNE1&quot;, &quot;NUCB1&quot;, &quot;NRP2&quot;, &quot;TMEM182&quot;, &quot;STT3A&quot;, &quot;GNE&quot;, &quot;PAX5&quot;, &quot;TENM4&quot;),
8             'Biopolar Disoder'=c(&quot;CSMD2&quot;, &quot;ANK3&quot;, &quot;NUMB&quot;, &quot;CNTN5&quot;, &quot;CTNNA2&quot;, &quot;CNTNAP2&quot;, &quot;NALCN&quot;, &quot;RDH14&quot;, &quot;WWOX&quot;, &quot;GLT8D1&quot;, &quot;SFMBT2&quot;, &quot;SPRED1&quot;, &quot;ADAMTS14&quot;, &quot;TTC39B&quot;, &quot;SVEP1&quot;, &quot;COL28A1&quot;, &quot;PDZD8&quot;, &quot;GALC&quot;, &quot;SORL1&quot;, &quot;ITIH1&quot;, &quot;CLSPN&quot;, &quot;SLCO4A1&quot;, &quot;VPS13C&quot;, &quot;MYO18B&quot;, &quot;TTLL6&quot;, &quot;CRBN&quot;, &quot;NFATC2&quot;, &quot;SYNE1&quot;, &quot;INTS7&quot;, &quot;TMEM182&quot;, &quot;STT3A&quot;, &quot;WSCD1&quot;, &quot;KCNS3&quot;, &quot;PDGFRA&quot;),
9             'circadian'=c(&quot;YTHDC2&quot;, &quot;LRP1B&quot;, &quot;SAMD4A&quot;, &quot;VTA1&quot;, &quot;NALCN&quot;, &quot;F13A1&quot;, &quot;SLC4A1&quot;, &quot;TMEM26&quot;, &quot;ADAMTS14&quot;, &quot;COL28A1&quot;, &quot;RNF19A&quot;, &quot;BRINP2&quot;, &quot;TRHR&quot;, &quot;CCBE1&quot;, &quot;CACNA2D3&quot;, &quot;MYO18A&quot;, &quot;SLC26A7&quot;, &quot;FRAS1&quot;, &quot;EP300&quot;, &quot;GNE&quot;, &quot;LMAN1&quot;, &quot;NMBR&quot;, &quot;TGFBI&quot;, &quot;CHAT&quot;, &quot;HIPK2&quot;, &quot;SERPINE2&quot;, &quot;RELB&quot;, &quot;ARHGEF12&quot;, &quot;SETX&quot;, &quot;CACNA1D&quot;, &quot;ADCY7&quot;, &quot;NBAS&quot;, &quot;GPR83&quot;, &quot;LTBP3&quot;, &quot;GABRB3&quot;, &quot;HMBS&quot;, &quot;PSMA4&quot;, &quot;MADD&quot;, &quot;SIX3&quot;, &quot;EPHB1&quot;, &quot;GAK&quot;, &quot;SPRY4&quot;, &quot;ABCA13&quot;, &quot;SLC8A3&quot;, &quot;HIVEP2&quot;, &quot;FAH&quot;, &quot;ADCY6&quot;, &quot;MYLIP&quot;, &quot;NFE2L1&quot;, &quot;PRKAG1&quot;, &quot;HDAC2&quot;, &quot;TNS1&quot;, &quot;GSS&quot;, &quot;CACNA1H&quot;, &quot;POLL&quot;, &quot;CPT1A&quot;, &quot;CAPN2&quot;, &quot;PITX3&quot;, &quot;NFE2L3&quot;, &quot;PNPLA7&quot;, &quot;AGA&quot;, &quot;STX16&quot;, &quot;TNK2&quot;, &quot;PRF1&quot;, &quot;RYR3&quot;, &quot;DIXDC1&quot;, &quot;PSEN2&quot;, &quot;SREBF1&quot;, &quot;POLE&quot;, &quot;RAB11FIP5&quot;, &quot;KIF1B&quot;, &quot;RAB5A&quot;, &quot;NGB&quot;, &quot;ARHGEF11&quot;, &quot;SIX6&quot;, &quot;SDK1&quot;, &quot;AATK&quot;, &quot;CYP7A1&quot;, &quot;CUL9&quot;),
10             'dementia'=c(&quot;LMAN1&quot;, &quot;PRDX3&quot;, &quot;NPLOC4&quot;, &quot;PSEN2&quot;, &quot;ZFYVE16&quot;, &quot;CHAT&quot;, &quot;PENK&quot;, &quot;LTBP1&quot;, &quot;SNCAIP&quot;, &quot;NOL11&quot;, &quot;GANAB&quot;, &quot;DLD&quot;, &quot;SPG11&quot;, &quot;IGSF21&quot;, &quot;RNF19A&quot;, &quot;ASIC2&quot;, &quot;ASTN1&quot;, &quot;SORL1&quot;, &quot;SPRY4&quot;, &quot;VCP&quot;, &quot;TATDN1&quot;, &quot;RAB5A&quot;, &quot;VPS13C&quot;, &quot;GM2A&quot;, &quot;IRS1&quot;, &quot;PSMB4&quot;, &quot;NGB&quot;, &quot;F2RL1&quot;, &quot;RAB38&quot;, &quot;SMOX&quot;, &quot;PARP1&quot;, &quot;ABCC9&quot;, &quot;RPN2&quot;, &quot;CAPN2&quot;, &quot;GALNT7&quot;, &quot;SMG1&quot;, &quot;TBK1&quot;, &quot;MASP2&quot;, &quot;GNE&quot;, &quot;GTPBP4&quot;, &quot;CCT8&quot;, &quot;CD63&quot;, &quot;PSMA4&quot;, &quot;TUBA4A&quot;, &quot;CUL9&quot;)
11            )
12    
13Hmat &lt;- lapply(seq_along(H), \(i) {
14Set &lt;- names(H)[i]
15data.frame(Element = H[[i]], Set)
16    })
17Hmat &lt;- do.call(rbind, Hmat)
18vd &lt;- venneuler(Hmat)
19plot(vd)
20

and got the output as:

How do I add the count (number) inside the each circle?

ANSWER

Answered 2021-Nov-04 at 00:43

Change vd's label manually will help.

1library(venneuler)
2
3H=list('ASD'=c(&quot;SCN3A&quot;, &quot;TSC2&quot;, &quot;RASSF8&quot;, &quot;XDH&quot;, &quot;CNTN5&quot;, &quot;CHD7&quot;, &quot;DPYD&quot;, &quot;BUB1&quot;, &quot;DPP4&quot;, &quot;AMPD1&quot;, &quot;ARID4A&quot;, &quot;QSER1&quot;, &quot;OCA2&quot;, &quot;GPR141&quot;, &quot;DNAH9&quot;, &quot;LOXHD1&quot;, &quot;SETX&quot;, &quot;GSTP1&quot;, &quot;SLC6A15&quot;, &quot;ASTN1&quot;, &quot;CACNA1D&quot;, &quot;WFS1&quot;, &quot;KCNC1&quot;, &quot;TPRA1&quot;, &quot;NBAS&quot;, &quot;LAMB1&quot;, &quot;TSNARE1&quot;, &quot;GABRB3&quot;, &quot;PAG1&quot;, &quot;SOS1&quot;, &quot;LHFPL4&quot;, &quot;KMT2C&quot;, &quot;GATM&quot;, &quot;NPTX2&quot;, &quot;ANK3&quot;, &quot;SH3TC2&quot;, &quot;CLPP&quot;, &quot;TP53BP1&quot;, &quot;EBF4&quot;, &quot;ANO1&quot;, &quot;DNAJC10&quot;, &quot;TTC25&quot;, &quot;NDUFB7&quot;, &quot;PCSK1&quot;, &quot;ROBO3&quot;, &quot;MYO9A&quot;, &quot;RPS23&quot;, &quot;ZNF292&quot;, &quot;CRBN&quot;, &quot;HIVEP2&quot;, &quot;CYP1B1&quot;, &quot;KCNE2&quot;, &quot;NRP2&quot;, &quot;ADSL&quot;, &quot;XIRP2&quot;, &quot;SMARCA4&quot;, &quot;HDAC2&quot;, &quot;JAK2&quot;, &quot;ATP9B&quot;, &quot;ESR1&quot;, &quot;MDN1&quot;, &quot;CTNNA2&quot;, &quot;CNTNAP2&quot;, &quot;SPTB&quot;, &quot;ACY1&quot;, &quot;CEP290&quot;, &quot;WNT2&quot;, &quot;IQGAP3&quot;, &quot;CACNG3&quot;, &quot;CACNA1H&quot;, &quot;FOXN1&quot;, &quot;SPAST&quot;, &quot;ADCY1&quot;, &quot;IGF2&quot;, &quot;RNF4&quot;, &quot;CTTNBP2&quot;, &quot;TMF1&quot;, &quot;CPT1A&quot;, &quot;TENM3&quot;, &quot;RABGGTA&quot;, &quot;MBD3&quot;, &quot;CCDC18&quot;, &quot;SMG1&quot;, &quot;SYNE1&quot;, &quot;PITX3&quot;, &quot;HMGA2&quot;, &quot;PDE6C&quot;, &quot;CTU2&quot;, &quot;PNPLA7&quot;, &quot;PIEZO1&quot;, &quot;MAP2&quot;, &quot;MCF2L&quot;, &quot;PRF1&quot;, &quot;VWA8&quot;, &quot;LRP2&quot;, &quot;RYR3&quot;, &quot;IPO9&quot;, &quot;DIXDC1&quot;, &quot;CNTNAP5&quot;, &quot;ELP4&quot;, &quot;LRRN1&quot;, &quot;TRIO&quot;, &quot;SACS&quot;, &quot;ASIC2&quot;, &quot;KIF1B&quot;, &quot;AXIN2&quot;, &quot;SORL1&quot;, &quot;DLG2&quot;, &quot;VPS13C&quot;, &quot;F2RL1&quot;, &quot;NRP1&quot;, &quot;LAMA1&quot;, &quot;LARP1&quot;, &quot;SDK1&quot;, &quot;LAMC2&quot;, &quot;LSG1&quot;, &quot;EP300&quot;, &quot;DGCR6L&quot;, &quot;TSHB&quot;, &quot;APC&quot;, &quot;TENM4&quot;, &quot;IGSF21&quot;),
4             'Epilepsy'=c(&quot;ADCY1&quot;, &quot;ADSL&quot;, &quot;ANK3&quot;, &quot;APC&quot;, &quot;ASIC2&quot;, &quot;ASTN1&quot;, &quot;ATP9B&quot;, &quot;AXIN2&quot;, &quot;BUB1&quot;, &quot;CACNA1D&quot;, &quot;CACNA1H&quot;, &quot;CACNG3&quot;, &quot;CEP290&quot;, &quot;CLPP&quot;, &quot;CNTN5&quot;, &quot;CNTNAP2&quot;, &quot;CNTNAP5&quot;, &quot;CTNNA2&quot;, &quot;CTU2&quot;, &quot;DGCR6L&quot;, &quot;DLG2&quot;, &quot;DNAJC10&quot;, &quot;ELP4&quot;, &quot;EP300&quot;, &quot;GABRB3&quot;, &quot;HDAC2&quot;, &quot;HMGA2&quot;, &quot;IGSF21&quot;, &quot;IPO9&quot;, &quot;IQGAP3&quot;, &quot;JAK2&quot;, &quot;KCNC1&quot;, &quot;KCNE2&quot;, &quot;KIF1B&quot;, &quot;LAMB1&quot;, &quot;LAMC2&quot;, &quot;LARP1&quot;, &quot;LHFPL4&quot;, &quot;MCF2L&quot;, &quot;MYO9A&quot;, &quot;NDUFB7&quot;, &quot;NRP2&quot;, &quot;RABGGTA&quot;, &quot;RYR3&quot;, &quot;SACS&quot;, &quot;SCN3A&quot;, &quot;SETX&quot;, &quot;SMARCA4&quot;, &quot;SMG1&quot;, &quot;SORL1&quot;, &quot;SPAST&quot;, &quot;SPTB&quot;, &quot;TMF1&quot;, &quot;TP53BP1&quot;, &quot;TPRA1&quot;, &quot;TRIO&quot;, &quot;TSC2&quot;, &quot;TSHB&quot;, &quot;VPS13C&quot;, &quot;WFS1&quot;, &quot;XDH&quot;, &quot;ZNF292&quot;, &quot;ABCA1&quot;, &quot;ABCG5&quot;, &quot;ACP2&quot;, &quot;ADCY6&quot;, &quot;ADGRA3&quot;, &quot;ADGRV1&quot;, &quot;AGA&quot;, &quot;AGRN&quot;, &quot;ALG3&quot;, &quot;ANK2&quot;, &quot;ANKRD44&quot;, &quot;AP5Z1&quot;, &quot;ARAP1&quot;, &quot;ARHGEF11&quot;, &quot;ASCC3&quot;, &quot;ASPM&quot;, &quot;ATRN&quot;, &quot;AURKB&quot;, &quot;BRINP2&quot;, &quot;BRSK2&quot;, &quot;CAPN15&quot;, &quot;CAPN2&quot;, &quot;CC2D2A&quot;, &quot;CD36&quot;, &quot;CDX1&quot;, &quot;CHAT&quot;, &quot;CHM&quot;, &quot;CHTF18&quot;, &quot;CLCN2&quot;, &quot;CLCN7&quot;, &quot;CLEC12A&quot;, &quot;COG5&quot;, &quot;COG6&quot;, &quot;COL12A1&quot;, &quot;COL17A1&quot;, &quot;COL28A1&quot;, &quot;COL6A2&quot;, &quot;COQ3&quot;, &quot;CYBB&quot;, &quot;DBNL&quot;, &quot;DBR1&quot;, &quot;DEAF1&quot;, &quot;DGKQ&quot;, &quot;DHX29&quot;, &quot;DMXL1&quot;, &quot;DMXL2&quot;, &quot;DNAH12&quot;, &quot;DOCK7&quot;, &quot;DOLK&quot;, &quot;DSG4&quot;, &quot;DZIP1&quot;, &quot;EFHC1&quot;, &quot;EPHA7&quot;, &quot;EPHB1&quot;, &quot;EPHB3&quot;, &quot;ESYT1&quot;, &quot;EXOC7&quot;, &quot;F13A1&quot;, &quot;F5&quot;, &quot;FAH&quot;, &quot;FARP1&quot;, &quot;FASN&quot;, &quot;FAT1&quot;, &quot;FERMT1&quot;, &quot;FGFR3&quot;, &quot;FLNB&quot;, &quot;FLRT1&quot;, &quot;FMNL1&quot;, &quot;FN1&quot;, &quot;FOLR1&quot;, &quot;FZD4&quot;, &quot;GAA&quot;, &quot;GAK&quot;, &quot;GALC&quot;, &quot;GANAB&quot;, &quot;GLB1&quot;, &quot;GM2A&quot;, &quot;GNA14&quot;, &quot;GOSR2&quot;, &quot;GPC1&quot;, &quot;GSS&quot;, &quot;GTPBP4&quot;, &quot;HEATR1&quot;, &quot;HGS&quot;, &quot;HIPK2&quot;, &quot;HSPA13&quot;, &quot;HTR2B&quot;, &quot;INO80E&quot;, &quot;KALRN&quot;, &quot;KCNH2&quot;, &quot;KCNJ16&quot;, &quot;KIAA0586&quot;, &quot;KRIT1&quot;, &quot;LAMB2&quot;, &quot;LMAN1&quot;, &quot;LTBP3&quot;, &quot;MASTL&quot;, &quot;MED17&quot;, &quot;METTL25&quot;, &quot;MGAT5B&quot;, &quot;MPL&quot;, &quot;MRPL24&quot;, &quot;MRPS27&quot;, &quot;MSX2&quot;, &quot;MUS81&quot;, &quot;NALCN&quot;, &quot;NEB&quot;, &quot;NFE2L1&quot;, &quot;NMBR&quot;, &quot;NOL11&quot;, &quot;NUCB1&quot;, &quot;OBSL1&quot;, &quot;OGDHL&quot;, &quot;OGFOD2&quot;, &quot;PARP1&quot;, &quot;PCCB&quot;, &quot;PDGFRA&quot;, &quot;PDYN&quot;, &quot;PFAS&quot;, &quot;PFKFB3&quot;, &quot;PLEC&quot;, &quot;PLOD2&quot;, &quot;PNKD&quot;, &quot;PNPO&quot;, &quot;POLD1&quot;, &quot;POLE&quot;, &quot;POLL&quot;, &quot;PPAT&quot;, &quot;PRDX3&quot;, &quot;PSEN2&quot;, &quot;PTCH1&quot;, &quot;PTK2B&quot;, &quot;RAB5A&quot;, &quot;RAD54B&quot;, &quot;RELB&quot;, &quot;RHOT2&quot;, &quot;RIMS2&quot;, &quot;RTN4IP1&quot;, &quot;SAE1&quot;, &quot;SCAPER&quot;, &quot;SCN1B&quot;, &quot;SCN5A&quot;, &quot;SEC23IP&quot;, &quot;SERPINE2&quot;, &quot;SGCB&quot;, &quot;SIGLEC1&quot;, &quot;SLC18A3&quot;, &quot;SLC26A4&quot;, &quot;SLC2A1&quot;, &quot;SLC4A1&quot;, &quot;SLC4A3&quot;, &quot;SLITRK6&quot;, &quot;SPG11&quot;, &quot;STARD13&quot;, &quot;STT3A&quot;, &quot;SYF2&quot;, &quot;SYNJ1&quot;, &quot;SZT2&quot;, &quot;TECPR2&quot;, &quot;TES&quot;, &quot;TMEM67&quot;, &quot;TNK2&quot;, &quot;TNS1&quot;, &quot;TNS3&quot;, &quot;TRAP1&quot;, &quot;TRAPPC11&quot;, &quot;TRAPPC8&quot;, &quot;TRIP10&quot;, &quot;TRPM2&quot;, &quot;TRPM3&quot;, &quot;TRPV1&quot;, &quot;TUBGCP6&quot;, &quot;TYW1&quot;, &quot;UNC13B&quot;, &quot;USP45&quot;, &quot;VCP&quot;, &quot;WDR62&quot;, &quot;WWOX&quot;, &quot;YAP1&quot;, &quot;ZBTB48&quot;, &quot;ZFHX4&quot;, &quot;ZW10&quot;),
5             'Intellectual'=c(&quot;YAP1&quot;, &quot;TSC2&quot;, &quot;FMNL1&quot;, &quot;MADD&quot;, &quot;KRIT1&quot;, &quot;TNK2&quot;, &quot;NUP155&quot;, &quot;COG6&quot;, &quot;TRAPPC8&quot;, &quot;IPO9&quot;, &quot;CCT8&quot;, &quot;ZFYVE16&quot;, &quot;FAT1&quot;, &quot;SLC37A1&quot;, &quot;KAT6B&quot;, &quot;WWOX&quot;, &quot;PTK2B&quot;, &quot;CNTNAP5&quot;, &quot;HEATR1&quot;, &quot;TRAPPC11&quot;, &quot;ARID4A&quot;, &quot;ADGRV1&quot;, &quot;GPC1&quot;, &quot;AURKB&quot;, &quot;TTC39B&quot;, &quot;GSS&quot;, &quot;GANAB&quot;, &quot;RFWD3&quot;, &quot;CUL9&quot;, &quot;SAE1&quot;, &quot;CACNG3&quot;, &quot;SMC4&quot;, &quot;ASIC2&quot;, &quot;SYF2&quot;, &quot;PFAS&quot;, &quot;GAK&quot;, &quot;METTL25&quot;, &quot;OGDHL&quot;, &quot;RAB5A&quot;, &quot;VPS13C&quot;, &quot;FGFR3&quot;, &quot;KCNC1&quot;, &quot;DDOST&quot;, &quot;CTNND1&quot;, &quot;ATRN&quot;, &quot;UNC13B&quot;, &quot;FASN&quot;, &quot;MYO18A&quot;, &quot;TMF1&quot;, &quot;CRBN&quot;, &quot;FLNB&quot;, &quot;LARP1&quot;, &quot;RCC2&quot;, &quot;MASTL&quot;, &quot;ADGRA3&quot;, &quot;SCAPER&quot;, &quot;SZT2&quot;, &quot;LRP4&quot;, &quot;SMG1&quot;, &quot;SYNE1&quot;, &quot;ADCY6&quot;, &quot;RNGTT&quot;, &quot;EP300&quot;, &quot;ARAP1&quot;, &quot;ANKRD44&quot;, &quot;VPS39&quot;, &quot;DGCR6L&quot;, &quot;STT3A&quot;, &quot;COG5&quot;, &quot;NFE2L1&quot;, &quot;SLC7A2&quot;, &quot;ASCC3&quot;, &quot;LMAN1&quot;, &quot;OBSL1&quot;, &quot;KIF20B&quot;, &quot;PNPLA7&quot;),
6             'Schizophrenia'=c(&quot;CRB1&quot;, &quot;FBXW4&quot;, &quot;CNTN5&quot;, &quot;CHM&quot;, &quot;DPYD&quot;, &quot;BUB1&quot;, &quot;DPP4&quot;, &quot;ADGRV1&quot;, &quot;GPC1&quot;, &quot;DLD&quot;, &quot;RBM19&quot;, &quot;ITIH1&quot;, &quot;ADCY7&quot;, &quot;KCNC1&quot;, &quot;ACBD5&quot;, &quot;ELF1&quot;, &quot;TSNARE1&quot;, &quot;GABRB3&quot;, &quot;TMEM182&quot;, &quot;STT3A&quot;, &quot;KMT2C&quot;, &quot;ANK3&quot;, &quot;SAMD4A&quot;, &quot;NALCN&quot;, &quot;PDLIM5&quot;, &quot;LIMA1&quot;, &quot;DYNC1I2&quot;, &quot;TMEM26&quot;, &quot;ANK2&quot;, &quot;GRIN3A&quot;, &quot;EPHB1&quot;, &quot;BRINP2&quot;, &quot;KALRN&quot;, &quot;MICAL2&quot;, &quot;TTLL6&quot;, &quot;ZNF292&quot;, &quot;SERPINB1&quot;, &quot;SCAPER&quot;, &quot;KCNS3&quot;, &quot;VAMP1&quot;, &quot;HDAC2&quot;, &quot;DLG1&quot;, &quot;CFAP58&quot;, &quot;JAK2&quot;, &quot;ESR1&quot;, &quot;EFCAB14&quot;, &quot;CNTNAP2&quot;, &quot;PENK&quot;, &quot;WWOX&quot;, &quot;GLT8D1&quot;, &quot;SFMBT2&quot;, &quot;EEFSEC&quot;, &quot;PDZD8&quot;, &quot;GALC&quot;, &quot;CACNG3&quot;, &quot;SPG7&quot;, &quot;ADCY1&quot;, &quot;CLDN10&quot;, &quot;TENM3&quot;, &quot;OTOS&quot;, &quot;CAPN2&quot;, &quot;LRP4&quot;, &quot;SYNE1&quot;, &quot;HMGA2&quot;, &quot;APOL4&quot;, &quot;ARAP1&quot;, &quot;DOPEY1&quot;, &quot;EPN2&quot;, &quot;MCF2L&quot;, &quot;PLAA&quot;, &quot;RYR3&quot;, &quot;CNTNAP5&quot;, &quot;POLE&quot;, &quot;TRIO&quot;, &quot;RAB11FIP5&quot;, &quot;BNIP3L&quot;, &quot;RUNX1&quot;, &quot;AXIN2&quot;, &quot;KIF1B&quot;, &quot;DLG2&quot;, &quot;MAP3K9&quot;, &quot;CERCAM&quot;, &quot;VPS13C&quot;, &quot;MYO18B&quot;, &quot;NRP1&quot;, &quot;IRS1&quot;, &quot;MANEA&quot;, &quot;EP300&quot;, &quot;DGCR6L&quot;, &quot;TSHB&quot;, &quot;AASDHPPT&quot;, &quot;TRAPPC3&quot;, &quot;APC&quot;, &quot;TENM4&quot;),
7             'ADHD'=c(&quot;TSC2&quot;, &quot;CSMD2&quot;, &quot;ANK3&quot;, &quot;ASPM&quot;, &quot;CNTN5&quot;, &quot;TP53BP1&quot;, &quot;CNTNAP2&quot;, &quot;CHD7&quot;, &quot;GLT8D1&quot;, &quot;CNTNAP5&quot;, &quot;SFMBT2&quot;, &quot;MLH1&quot;, &quot;FLII&quot;, &quot;PTCH1&quot;, &quot;SPRED1&quot;, &quot;ARHGEF12&quot;, &quot;CHMP7&quot;, &quot;SVEP1&quot;, &quot;CREB5&quot;, &quot;MSH6&quot;, &quot;TTLL8&quot;, &quot;DLG2&quot;, &quot;MICAL2&quot;, &quot;DNAH3&quot;, &quot;ADGRA3&quot;, &quot;ACBD5&quot;, &quot;SYNE1&quot;, &quot;NUCB1&quot;, &quot;NRP2&quot;, &quot;TMEM182&quot;, &quot;STT3A&quot;, &quot;GNE&quot;, &quot;PAX5&quot;, &quot;TENM4&quot;),
8             'Biopolar Disoder'=c(&quot;CSMD2&quot;, &quot;ANK3&quot;, &quot;NUMB&quot;, &quot;CNTN5&quot;, &quot;CTNNA2&quot;, &quot;CNTNAP2&quot;, &quot;NALCN&quot;, &quot;RDH14&quot;, &quot;WWOX&quot;, &quot;GLT8D1&quot;, &quot;SFMBT2&quot;, &quot;SPRED1&quot;, &quot;ADAMTS14&quot;, &quot;TTC39B&quot;, &quot;SVEP1&quot;, &quot;COL28A1&quot;, &quot;PDZD8&quot;, &quot;GALC&quot;, &quot;SORL1&quot;, &quot;ITIH1&quot;, &quot;CLSPN&quot;, &quot;SLCO4A1&quot;, &quot;VPS13C&quot;, &quot;MYO18B&quot;, &quot;TTLL6&quot;, &quot;CRBN&quot;, &quot;NFATC2&quot;, &quot;SYNE1&quot;, &quot;INTS7&quot;, &quot;TMEM182&quot;, &quot;STT3A&quot;, &quot;WSCD1&quot;, &quot;KCNS3&quot;, &quot;PDGFRA&quot;),
9             'circadian'=c(&quot;YTHDC2&quot;, &quot;LRP1B&quot;, &quot;SAMD4A&quot;, &quot;VTA1&quot;, &quot;NALCN&quot;, &quot;F13A1&quot;, &quot;SLC4A1&quot;, &quot;TMEM26&quot;, &quot;ADAMTS14&quot;, &quot;COL28A1&quot;, &quot;RNF19A&quot;, &quot;BRINP2&quot;, &quot;TRHR&quot;, &quot;CCBE1&quot;, &quot;CACNA2D3&quot;, &quot;MYO18A&quot;, &quot;SLC26A7&quot;, &quot;FRAS1&quot;, &quot;EP300&quot;, &quot;GNE&quot;, &quot;LMAN1&quot;, &quot;NMBR&quot;, &quot;TGFBI&quot;, &quot;CHAT&quot;, &quot;HIPK2&quot;, &quot;SERPINE2&quot;, &quot;RELB&quot;, &quot;ARHGEF12&quot;, &quot;SETX&quot;, &quot;CACNA1D&quot;, &quot;ADCY7&quot;, &quot;NBAS&quot;, &quot;GPR83&quot;, &quot;LTBP3&quot;, &quot;GABRB3&quot;, &quot;HMBS&quot;, &quot;PSMA4&quot;, &quot;MADD&quot;, &quot;SIX3&quot;, &quot;EPHB1&quot;, &quot;GAK&quot;, &quot;SPRY4&quot;, &quot;ABCA13&quot;, &quot;SLC8A3&quot;, &quot;HIVEP2&quot;, &quot;FAH&quot;, &quot;ADCY6&quot;, &quot;MYLIP&quot;, &quot;NFE2L1&quot;, &quot;PRKAG1&quot;, &quot;HDAC2&quot;, &quot;TNS1&quot;, &quot;GSS&quot;, &quot;CACNA1H&quot;, &quot;POLL&quot;, &quot;CPT1A&quot;, &quot;CAPN2&quot;, &quot;PITX3&quot;, &quot;NFE2L3&quot;, &quot;PNPLA7&quot;, &quot;AGA&quot;, &quot;STX16&quot;, &quot;TNK2&quot;, &quot;PRF1&quot;, &quot;RYR3&quot;, &quot;DIXDC1&quot;, &quot;PSEN2&quot;, &quot;SREBF1&quot;, &quot;POLE&quot;, &quot;RAB11FIP5&quot;, &quot;KIF1B&quot;, &quot;RAB5A&quot;, &quot;NGB&quot;, &quot;ARHGEF11&quot;, &quot;SIX6&quot;, &quot;SDK1&quot;, &quot;AATK&quot;, &quot;CYP7A1&quot;, &quot;CUL9&quot;),
10             'dementia'=c(&quot;LMAN1&quot;, &quot;PRDX3&quot;, &quot;NPLOC4&quot;, &quot;PSEN2&quot;, &quot;ZFYVE16&quot;, &quot;CHAT&quot;, &quot;PENK&quot;, &quot;LTBP1&quot;, &quot;SNCAIP&quot;, &quot;NOL11&quot;, &quot;GANAB&quot;, &quot;DLD&quot;, &quot;SPG11&quot;, &quot;IGSF21&quot;, &quot;RNF19A&quot;, &quot;ASIC2&quot;, &quot;ASTN1&quot;, &quot;SORL1&quot;, &quot;SPRY4&quot;, &quot;VCP&quot;, &quot;TATDN1&quot;, &quot;RAB5A&quot;, &quot;VPS13C&quot;, &quot;GM2A&quot;, &quot;IRS1&quot;, &quot;PSMB4&quot;, &quot;NGB&quot;, &quot;F2RL1&quot;, &quot;RAB38&quot;, &quot;SMOX&quot;, &quot;PARP1&quot;, &quot;ABCC9&quot;, &quot;RPN2&quot;, &quot;CAPN2&quot;, &quot;GALNT7&quot;, &quot;SMG1&quot;, &quot;TBK1&quot;, &quot;MASP2&quot;, &quot;GNE&quot;, &quot;GTPBP4&quot;, &quot;CCT8&quot;, &quot;CD63&quot;, &quot;PSMA4&quot;, &quot;TUBA4A&quot;, &quot;CUL9&quot;)
11            )
12    
13Hmat &lt;- lapply(seq_along(H), \(i) {
14Set &lt;- names(H)[i]
15data.frame(Element = H[[i]], Set)
16    })
17Hmat &lt;- do.call(rbind, Hmat)
18vd &lt;- venneuler(Hmat)
19plot(vd)
20HH &lt;- Hmat %&gt;%
21  group_by(Set) %&gt;%
22  summarise(n = n()) %&gt;%
23  .[match(vd$labels, .$Set),] %&gt;%
24  mutate(n = paste(Set, &quot;\n&quot;, n))
25vd$labels &lt;- HH$n
26plot(vd)
27

Using eulerr::euler function,

1library(venneuler)
2
3H=list('ASD'=c(&quot;SCN3A&quot;, &quot;TSC2&quot;, &quot;RASSF8&quot;, &quot;XDH&quot;, &quot;CNTN5&quot;, &quot;CHD7&quot;, &quot;DPYD&quot;, &quot;BUB1&quot;, &quot;DPP4&quot;, &quot;AMPD1&quot;, &quot;ARID4A&quot;, &quot;QSER1&quot;, &quot;OCA2&quot;, &quot;GPR141&quot;, &quot;DNAH9&quot;, &quot;LOXHD1&quot;, &quot;SETX&quot;, &quot;GSTP1&quot;, &quot;SLC6A15&quot;, &quot;ASTN1&quot;, &quot;CACNA1D&quot;, &quot;WFS1&quot;, &quot;KCNC1&quot;, &quot;TPRA1&quot;, &quot;NBAS&quot;, &quot;LAMB1&quot;, &quot;TSNARE1&quot;, &quot;GABRB3&quot;, &quot;PAG1&quot;, &quot;SOS1&quot;, &quot;LHFPL4&quot;, &quot;KMT2C&quot;, &quot;GATM&quot;, &quot;NPTX2&quot;, &quot;ANK3&quot;, &quot;SH3TC2&quot;, &quot;CLPP&quot;, &quot;TP53BP1&quot;, &quot;EBF4&quot;, &quot;ANO1&quot;, &quot;DNAJC10&quot;, &quot;TTC25&quot;, &quot;NDUFB7&quot;, &quot;PCSK1&quot;, &quot;ROBO3&quot;, &quot;MYO9A&quot;, &quot;RPS23&quot;, &quot;ZNF292&quot;, &quot;CRBN&quot;, &quot;HIVEP2&quot;, &quot;CYP1B1&quot;, &quot;KCNE2&quot;, &quot;NRP2&quot;, &quot;ADSL&quot;, &quot;XIRP2&quot;, &quot;SMARCA4&quot;, &quot;HDAC2&quot;, &quot;JAK2&quot;, &quot;ATP9B&quot;, &quot;ESR1&quot;, &quot;MDN1&quot;, &quot;CTNNA2&quot;, &quot;CNTNAP2&quot;, &quot;SPTB&quot;, &quot;ACY1&quot;, &quot;CEP290&quot;, &quot;WNT2&quot;, &quot;IQGAP3&quot;, &quot;CACNG3&quot;, &quot;CACNA1H&quot;, &quot;FOXN1&quot;, &quot;SPAST&quot;, &quot;ADCY1&quot;, &quot;IGF2&quot;, &quot;RNF4&quot;, &quot;CTTNBP2&quot;, &quot;TMF1&quot;, &quot;CPT1A&quot;, &quot;TENM3&quot;, &quot;RABGGTA&quot;, &quot;MBD3&quot;, &quot;CCDC18&quot;, &quot;SMG1&quot;, &quot;SYNE1&quot;, &quot;PITX3&quot;, &quot;HMGA2&quot;, &quot;PDE6C&quot;, &quot;CTU2&quot;, &quot;PNPLA7&quot;, &quot;PIEZO1&quot;, &quot;MAP2&quot;, &quot;MCF2L&quot;, &quot;PRF1&quot;, &quot;VWA8&quot;, &quot;LRP2&quot;, &quot;RYR3&quot;, &quot;IPO9&quot;, &quot;DIXDC1&quot;, &quot;CNTNAP5&quot;, &quot;ELP4&quot;, &quot;LRRN1&quot;, &quot;TRIO&quot;, &quot;SACS&quot;, &quot;ASIC2&quot;, &quot;KIF1B&quot;, &quot;AXIN2&quot;, &quot;SORL1&quot;, &quot;DLG2&quot;, &quot;VPS13C&quot;, &quot;F2RL1&quot;, &quot;NRP1&quot;, &quot;LAMA1&quot;, &quot;LARP1&quot;, &quot;SDK1&quot;, &quot;LAMC2&quot;, &quot;LSG1&quot;, &quot;EP300&quot;, &quot;DGCR6L&quot;, &quot;TSHB&quot;, &quot;APC&quot;, &quot;TENM4&quot;, &quot;IGSF21&quot;),
4             'Epilepsy'=c(&quot;ADCY1&quot;, &quot;ADSL&quot;, &quot;ANK3&quot;, &quot;APC&quot;, &quot;ASIC2&quot;, &quot;ASTN1&quot;, &quot;ATP9B&quot;, &quot;AXIN2&quot;, &quot;BUB1&quot;, &quot;CACNA1D&quot;, &quot;CACNA1H&quot;, &quot;CACNG3&quot;, &quot;CEP290&quot;, &quot;CLPP&quot;, &quot;CNTN5&quot;, &quot;CNTNAP2&quot;, &quot;CNTNAP5&quot;, &quot;CTNNA2&quot;, &quot;CTU2&quot;, &quot;DGCR6L&quot;, &quot;DLG2&quot;, &quot;DNAJC10&quot;, &quot;ELP4&quot;, &quot;EP300&quot;, &quot;GABRB3&quot;, &quot;HDAC2&quot;, &quot;HMGA2&quot;, &quot;IGSF21&quot;, &quot;IPO9&quot;, &quot;IQGAP3&quot;, &quot;JAK2&quot;, &quot;KCNC1&quot;, &quot;KCNE2&quot;, &quot;KIF1B&quot;, &quot;LAMB1&quot;, &quot;LAMC2&quot;, &quot;LARP1&quot;, &quot;LHFPL4&quot;, &quot;MCF2L&quot;, &quot;MYO9A&quot;, &quot;NDUFB7&quot;, &quot;NRP2&quot;, &quot;RABGGTA&quot;, &quot;RYR3&quot;, &quot;SACS&quot;, &quot;SCN3A&quot;, &quot;SETX&quot;, &quot;SMARCA4&quot;, &quot;SMG1&quot;, &quot;SORL1&quot;, &quot;SPAST&quot;, &quot;SPTB&quot;, &quot;TMF1&quot;, &quot;TP53BP1&quot;, &quot;TPRA1&quot;, &quot;TRIO&quot;, &quot;TSC2&quot;, &quot;TSHB&quot;, &quot;VPS13C&quot;, &quot;WFS1&quot;, &quot;XDH&quot;, &quot;ZNF292&quot;, &quot;ABCA1&quot;, &quot;ABCG5&quot;, &quot;ACP2&quot;, &quot;ADCY6&quot;, &quot;ADGRA3&quot;, &quot;ADGRV1&quot;, &quot;AGA&quot;, &quot;AGRN&quot;, &quot;ALG3&quot;, &quot;ANK2&quot;, &quot;ANKRD44&quot;, &quot;AP5Z1&quot;, &quot;ARAP1&quot;, &quot;ARHGEF11&quot;, &quot;ASCC3&quot;, &quot;ASPM&quot;, &quot;ATRN&quot;, &quot;AURKB&quot;, &quot;BRINP2&quot;, &quot;BRSK2&quot;, &quot;CAPN15&quot;, &quot;CAPN2&quot;, &quot;CC2D2A&quot;, &quot;CD36&quot;, &quot;CDX1&quot;, &quot;CHAT&quot;, &quot;CHM&quot;, &quot;CHTF18&quot;, &quot;CLCN2&quot;, &quot;CLCN7&quot;, &quot;CLEC12A&quot;, &quot;COG5&quot;, &quot;COG6&quot;, &quot;COL12A1&quot;, &quot;COL17A1&quot;, &quot;COL28A1&quot;, &quot;COL6A2&quot;, &quot;COQ3&quot;, &quot;CYBB&quot;, &quot;DBNL&quot;, &quot;DBR1&quot;, &quot;DEAF1&quot;, &quot;DGKQ&quot;, &quot;DHX29&quot;, &quot;DMXL1&quot;, &quot;DMXL2&quot;, &quot;DNAH12&quot;, &quot;DOCK7&quot;, &quot;DOLK&quot;, &quot;DSG4&quot;, &quot;DZIP1&quot;, &quot;EFHC1&quot;, &quot;EPHA7&quot;, &quot;EPHB1&quot;, &quot;EPHB3&quot;, &quot;ESYT1&quot;, &quot;EXOC7&quot;, &quot;F13A1&quot;, &quot;F5&quot;, &quot;FAH&quot;, &quot;FARP1&quot;, &quot;FASN&quot;, &quot;FAT1&quot;, &quot;FERMT1&quot;, &quot;FGFR3&quot;, &quot;FLNB&quot;, &quot;FLRT1&quot;, &quot;FMNL1&quot;, &quot;FN1&quot;, &quot;FOLR1&quot;, &quot;FZD4&quot;, &quot;GAA&quot;, &quot;GAK&quot;, &quot;GALC&quot;, &quot;GANAB&quot;, &quot;GLB1&quot;, &quot;GM2A&quot;, &quot;GNA14&quot;, &quot;GOSR2&quot;, &quot;GPC1&quot;, &quot;GSS&quot;, &quot;GTPBP4&quot;, &quot;HEATR1&quot;, &quot;HGS&quot;, &quot;HIPK2&quot;, &quot;HSPA13&quot;, &quot;HTR2B&quot;, &quot;INO80E&quot;, &quot;KALRN&quot;, &quot;KCNH2&quot;, &quot;KCNJ16&quot;, &quot;KIAA0586&quot;, &quot;KRIT1&quot;, &quot;LAMB2&quot;, &quot;LMAN1&quot;, &quot;LTBP3&quot;, &quot;MASTL&quot;, &quot;MED17&quot;, &quot;METTL25&quot;, &quot;MGAT5B&quot;, &quot;MPL&quot;, &quot;MRPL24&quot;, &quot;MRPS27&quot;, &quot;MSX2&quot;, &quot;MUS81&quot;, &quot;NALCN&quot;, &quot;NEB&quot;, &quot;NFE2L1&quot;, &quot;NMBR&quot;, &quot;NOL11&quot;, &quot;NUCB1&quot;, &quot;OBSL1&quot;, &quot;OGDHL&quot;, &quot;OGFOD2&quot;, &quot;PARP1&quot;, &quot;PCCB&quot;, &quot;PDGFRA&quot;, &quot;PDYN&quot;, &quot;PFAS&quot;, &quot;PFKFB3&quot;, &quot;PLEC&quot;, &quot;PLOD2&quot;, &quot;PNKD&quot;, &quot;PNPO&quot;, &quot;POLD1&quot;, &quot;POLE&quot;, &quot;POLL&quot;, &quot;PPAT&quot;, &quot;PRDX3&quot;, &quot;PSEN2&quot;, &quot;PTCH1&quot;, &quot;PTK2B&quot;, &quot;RAB5A&quot;, &quot;RAD54B&quot;, &quot;RELB&quot;, &quot;RHOT2&quot;, &quot;RIMS2&quot;, &quot;RTN4IP1&quot;, &quot;SAE1&quot;, &quot;SCAPER&quot;, &quot;SCN1B&quot;, &quot;SCN5A&quot;, &quot;SEC23IP&quot;, &quot;SERPINE2&quot;, &quot;SGCB&quot;, &quot;SIGLEC1&quot;, &quot;SLC18A3&quot;, &quot;SLC26A4&quot;, &quot;SLC2A1&quot;, &quot;SLC4A1&quot;, &quot;SLC4A3&quot;, &quot;SLITRK6&quot;, &quot;SPG11&quot;, &quot;STARD13&quot;, &quot;STT3A&quot;, &quot;SYF2&quot;, &quot;SYNJ1&quot;, &quot;SZT2&quot;, &quot;TECPR2&quot;, &quot;TES&quot;, &quot;TMEM67&quot;, &quot;TNK2&quot;, &quot;TNS1&quot;, &quot;TNS3&quot;, &quot;TRAP1&quot;, &quot;TRAPPC11&quot;, &quot;TRAPPC8&quot;, &quot;TRIP10&quot;, &quot;TRPM2&quot;, &quot;TRPM3&quot;, &quot;TRPV1&quot;, &quot;TUBGCP6&quot;, &quot;TYW1&quot;, &quot;UNC13B&quot;, &quot;USP45&quot;, &quot;VCP&quot;, &quot;WDR62&quot;, &quot;WWOX&quot;, &quot;YAP1&quot;, &quot;ZBTB48&quot;, &quot;ZFHX4&quot;, &quot;ZW10&quot;),
5             'Intellectual'=c(&quot;YAP1&quot;, &quot;TSC2&quot;, &quot;FMNL1&quot;, &quot;MADD&quot;, &quot;KRIT1&quot;, &quot;TNK2&quot;, &quot;NUP155&quot;, &quot;COG6&quot;, &quot;TRAPPC8&quot;, &quot;IPO9&quot;, &quot;CCT8&quot;, &quot;ZFYVE16&quot;, &quot;FAT1&quot;, &quot;SLC37A1&quot;, &quot;KAT6B&quot;, &quot;WWOX&quot;, &quot;PTK2B&quot;, &quot;CNTNAP5&quot;, &quot;HEATR1&quot;, &quot;TRAPPC11&quot;, &quot;ARID4A&quot;, &quot;ADGRV1&quot;, &quot;GPC1&quot;, &quot;AURKB&quot;, &quot;TTC39B&quot;, &quot;GSS&quot;, &quot;GANAB&quot;, &quot;RFWD3&quot;, &quot;CUL9&quot;, &quot;SAE1&quot;, &quot;CACNG3&quot;, &quot;SMC4&quot;, &quot;ASIC2&quot;, &quot;SYF2&quot;, &quot;PFAS&quot;, &quot;GAK&quot;, &quot;METTL25&quot;, &quot;OGDHL&quot;, &quot;RAB5A&quot;, &quot;VPS13C&quot;, &quot;FGFR3&quot;, &quot;KCNC1&quot;, &quot;DDOST&quot;, &quot;CTNND1&quot;, &quot;ATRN&quot;, &quot;UNC13B&quot;, &quot;FASN&quot;, &quot;MYO18A&quot;, &quot;TMF1&quot;, &quot;CRBN&quot;, &quot;FLNB&quot;, &quot;LARP1&quot;, &quot;RCC2&quot;, &quot;MASTL&quot;, &quot;ADGRA3&quot;, &quot;SCAPER&quot;, &quot;SZT2&quot;, &quot;LRP4&quot;, &quot;SMG1&quot;, &quot;SYNE1&quot;, &quot;ADCY6&quot;, &quot;RNGTT&quot;, &quot;EP300&quot;, &quot;ARAP1&quot;, &quot;ANKRD44&quot;, &quot;VPS39&quot;, &quot;DGCR6L&quot;, &quot;STT3A&quot;, &quot;COG5&quot;, &quot;NFE2L1&quot;, &quot;SLC7A2&quot;, &quot;ASCC3&quot;, &quot;LMAN1&quot;, &quot;OBSL1&quot;, &quot;KIF20B&quot;, &quot;PNPLA7&quot;),
6             'Schizophrenia'=c(&quot;CRB1&quot;, &quot;FBXW4&quot;, &quot;CNTN5&quot;, &quot;CHM&quot;, &quot;DPYD&quot;, &quot;BUB1&quot;, &quot;DPP4&quot;, &quot;ADGRV1&quot;, &quot;GPC1&quot;, &quot;DLD&quot;, &quot;RBM19&quot;, &quot;ITIH1&quot;, &quot;ADCY7&quot;, &quot;KCNC1&quot;, &quot;ACBD5&quot;, &quot;ELF1&quot;, &quot;TSNARE1&quot;, &quot;GABRB3&quot;, &quot;TMEM182&quot;, &quot;STT3A&quot;, &quot;KMT2C&quot;, &quot;ANK3&quot;, &quot;SAMD4A&quot;, &quot;NALCN&quot;, &quot;PDLIM5&quot;, &quot;LIMA1&quot;, &quot;DYNC1I2&quot;, &quot;TMEM26&quot;, &quot;ANK2&quot;, &quot;GRIN3A&quot;, &quot;EPHB1&quot;, &quot;BRINP2&quot;, &quot;KALRN&quot;, &quot;MICAL2&quot;, &quot;TTLL6&quot;, &quot;ZNF292&quot;, &quot;SERPINB1&quot;, &quot;SCAPER&quot;, &quot;KCNS3&quot;, &quot;VAMP1&quot;, &quot;HDAC2&quot;, &quot;DLG1&quot;, &quot;CFAP58&quot;, &quot;JAK2&quot;, &quot;ESR1&quot;, &quot;EFCAB14&quot;, &quot;CNTNAP2&quot;, &quot;PENK&quot;, &quot;WWOX&quot;, &quot;GLT8D1&quot;, &quot;SFMBT2&quot;, &quot;EEFSEC&quot;, &quot;PDZD8&quot;, &quot;GALC&quot;, &quot;CACNG3&quot;, &quot;SPG7&quot;, &quot;ADCY1&quot;, &quot;CLDN10&quot;, &quot;TENM3&quot;, &quot;OTOS&quot;, &quot;CAPN2&quot;, &quot;LRP4&quot;, &quot;SYNE1&quot;, &quot;HMGA2&quot;, &quot;APOL4&quot;, &quot;ARAP1&quot;, &quot;DOPEY1&quot;, &quot;EPN2&quot;, &quot;MCF2L&quot;, &quot;PLAA&quot;, &quot;RYR3&quot;, &quot;CNTNAP5&quot;, &quot;POLE&quot;, &quot;TRIO&quot;, &quot;RAB11FIP5&quot;, &quot;BNIP3L&quot;, &quot;RUNX1&quot;, &quot;AXIN2&quot;, &quot;KIF1B&quot;, &quot;DLG2&quot;, &quot;MAP3K9&quot;, &quot;CERCAM&quot;, &quot;VPS13C&quot;, &quot;MYO18B&quot;, &quot;NRP1&quot;, &quot;IRS1&quot;, &quot;MANEA&quot;, &quot;EP300&quot;, &quot;DGCR6L&quot;, &quot;TSHB&quot;, &quot;AASDHPPT&quot;, &quot;TRAPPC3&quot;, &quot;APC&quot;, &quot;TENM4&quot;),
7             'ADHD'=c(&quot;TSC2&quot;, &quot;CSMD2&quot;, &quot;ANK3&quot;, &quot;ASPM&quot;, &quot;CNTN5&quot;, &quot;TP53BP1&quot;, &quot;CNTNAP2&quot;, &quot;CHD7&quot;, &quot;GLT8D1&quot;, &quot;CNTNAP5&quot;, &quot;SFMBT2&quot;, &quot;MLH1&quot;, &quot;FLII&quot;, &quot;PTCH1&quot;, &quot;SPRED1&quot;, &quot;ARHGEF12&quot;, &quot;CHMP7&quot;, &quot;SVEP1&quot;, &quot;CREB5&quot;, &quot;MSH6&quot;, &quot;TTLL8&quot;, &quot;DLG2&quot;, &quot;MICAL2&quot;, &quot;DNAH3&quot;, &quot;ADGRA3&quot;, &quot;ACBD5&quot;, &quot;SYNE1&quot;, &quot;NUCB1&quot;, &quot;NRP2&quot;, &quot;TMEM182&quot;, &quot;STT3A&quot;, &quot;GNE&quot;, &quot;PAX5&quot;, &quot;TENM4&quot;),
8             'Biopolar Disoder'=c(&quot;CSMD2&quot;, &quot;ANK3&quot;, &quot;NUMB&quot;, &quot;CNTN5&quot;, &quot;CTNNA2&quot;, &quot;CNTNAP2&quot;, &quot;NALCN&quot;, &quot;RDH14&quot;, &quot;WWOX&quot;, &quot;GLT8D1&quot;, &quot;SFMBT2&quot;, &quot;SPRED1&quot;, &quot;ADAMTS14&quot;, &quot;TTC39B&quot;, &quot;SVEP1&quot;, &quot;COL28A1&quot;, &quot;PDZD8&quot;, &quot;GALC&quot;, &quot;SORL1&quot;, &quot;ITIH1&quot;, &quot;CLSPN&quot;, &quot;SLCO4A1&quot;, &quot;VPS13C&quot;, &quot;MYO18B&quot;, &quot;TTLL6&quot;, &quot;CRBN&quot;, &quot;NFATC2&quot;, &quot;SYNE1&quot;, &quot;INTS7&quot;, &quot;TMEM182&quot;, &quot;STT3A&quot;, &quot;WSCD1&quot;, &quot;KCNS3&quot;, &quot;PDGFRA&quot;),
9             'circadian'=c(&quot;YTHDC2&quot;, &quot;LRP1B&quot;, &quot;SAMD4A&quot;, &quot;VTA1&quot;, &quot;NALCN&quot;, &quot;F13A1&quot;, &quot;SLC4A1&quot;, &quot;TMEM26&quot;, &quot;ADAMTS14&quot;, &quot;COL28A1&quot;, &quot;RNF19A&quot;, &quot;BRINP2&quot;, &quot;TRHR&quot;, &quot;CCBE1&quot;, &quot;CACNA2D3&quot;, &quot;MYO18A&quot;, &quot;SLC26A7&quot;, &quot;FRAS1&quot;, &quot;EP300&quot;, &quot;GNE&quot;, &quot;LMAN1&quot;, &quot;NMBR&quot;, &quot;TGFBI&quot;, &quot;CHAT&quot;, &quot;HIPK2&quot;, &quot;SERPINE2&quot;, &quot;RELB&quot;, &quot;ARHGEF12&quot;, &quot;SETX&quot;, &quot;CACNA1D&quot;, &quot;ADCY7&quot;, &quot;NBAS&quot;, &quot;GPR83&quot;, &quot;LTBP3&quot;, &quot;GABRB3&quot;, &quot;HMBS&quot;, &quot;PSMA4&quot;, &quot;MADD&quot;, &quot;SIX3&quot;, &quot;EPHB1&quot;, &quot;GAK&quot;, &quot;SPRY4&quot;, &quot;ABCA13&quot;, &quot;SLC8A3&quot;, &quot;HIVEP2&quot;, &quot;FAH&quot;, &quot;ADCY6&quot;, &quot;MYLIP&quot;, &quot;NFE2L1&quot;, &quot;PRKAG1&quot;, &quot;HDAC2&quot;, &quot;TNS1&quot;, &quot;GSS&quot;, &quot;CACNA1H&quot;, &quot;POLL&quot;, &quot;CPT1A&quot;, &quot;CAPN2&quot;, &quot;PITX3&quot;, &quot;NFE2L3&quot;, &quot;PNPLA7&quot;, &quot;AGA&quot;, &quot;STX16&quot;, &quot;TNK2&quot;, &quot;PRF1&quot;, &quot;RYR3&quot;, &quot;DIXDC1&quot;, &quot;PSEN2&quot;, &quot;SREBF1&quot;, &quot;POLE&quot;, &quot;RAB11FIP5&quot;, &quot;KIF1B&quot;, &quot;RAB5A&quot;, &quot;NGB&quot;, &quot;ARHGEF11&quot;, &quot;SIX6&quot;, &quot;SDK1&quot;, &quot;AATK&quot;, &quot;CYP7A1&quot;, &quot;CUL9&quot;),
10             'dementia'=c(&quot;LMAN1&quot;, &quot;PRDX3&quot;, &quot;NPLOC4&quot;, &quot;PSEN2&quot;, &quot;ZFYVE16&quot;, &quot;CHAT&quot;, &quot;PENK&quot;, &quot;LTBP1&quot;, &quot;SNCAIP&quot;, &quot;NOL11&quot;, &quot;GANAB&quot;, &quot;DLD&quot;, &quot;SPG11&quot;, &quot;IGSF21&quot;, &quot;RNF19A&quot;, &quot;ASIC2&quot;, &quot;ASTN1&quot;, &quot;SORL1&quot;, &quot;SPRY4&quot;, &quot;VCP&quot;, &quot;TATDN1&quot;, &quot;RAB5A&quot;, &quot;VPS13C&quot;, &quot;GM2A&quot;, &quot;IRS1&quot;, &quot;PSMB4&quot;, &quot;NGB&quot;, &quot;F2RL1&quot;, &quot;RAB38&quot;, &quot;SMOX&quot;, &quot;PARP1&quot;, &quot;ABCC9&quot;, &quot;RPN2&quot;, &quot;CAPN2&quot;, &quot;GALNT7&quot;, &quot;SMG1&quot;, &quot;TBK1&quot;, &quot;MASP2&quot;, &quot;GNE&quot;, &quot;GTPBP4&quot;, &quot;CCT8&quot;, &quot;CD63&quot;, &quot;PSMA4&quot;, &quot;TUBA4A&quot;, &quot;CUL9&quot;)
11            )
12    
13Hmat &lt;- lapply(seq_along(H), \(i) {
14Set &lt;- names(H)[i]
15data.frame(Element = H[[i]], Set)
16    })
17Hmat &lt;- do.call(rbind, Hmat)
18vd &lt;- venneuler(Hmat)
19plot(vd)
20HH &lt;- Hmat %&gt;%
21  group_by(Set) %&gt;%
22  summarise(n = n()) %&gt;%
23  .[match(vd$labels, .$Set),] %&gt;%
24  mutate(n = paste(Set, &quot;\n&quot;, n))
25vd$labels &lt;- HH$n
26plot(vd)
27library(reshape2)
28library(eulerr)
29library(purrr)
30vennfun &lt;- function(x) { 
31  x$id &lt;- seq(1, nrow(x))  #add a column of numbers (required for melt)
32  xm &lt;- melt(x, id.vars=&quot;id&quot;, na.rm=TRUE)  #melt table into two columns (value &amp; variable)
33  xc &lt;- dcast(xm, value~variable, fun.aggregate=length)  #remove NA's, list presence/absence of each value for each variable (1 or 0)
34  rownames(xc) &lt;- xc$value  #value column = rownames (required for Venneuler)
35  xc$value &lt;- NULL  #remove redundent value column
36  xc  #output the new dataframe
37}
38
39HHH&lt;- as.data.frame(t(map_dfr(H, ~as_data_frame(t(.)))))
40HHHH &lt;- vennfun(HHH)
41plot(eulerr::euler(HHHH), quantities = TRUE)
42

Source https://stackoverflow.com/questions/69820167

QUESTION

What do the values for gitlab's predefiner variable CI_PIPELINE_SOURCE mean?

Asked 2021-Oct-27 at 08:17

In the gitlab documentation you find a list of predefined variables HERE, where the variable CI_PIPELINE_SOURCE is explained to have the possible values "push, web, schedule, api, external, chat, webide, merge_request_event, external_pull_request_event, parent_pipeline, trigger, or pipeline."

However, it is not explained, what they mean.

push: When you push something to a branch?
web: When you trigger a pipeline from the web GUI?
schedule: When a pipeline is triggered by a schedule
api: When the pipeline is triggered by an API request
external: ???
chat: ???
webide: ???
merge_request_event: Seems to be triggered when a merge request is created. Does not trigger when a change is actually merged
external_pull_request_event: ???
parent_pipeline: ???
trigger: ???
pipeline: another pipeline?

If someone knows where the documentation for that is hiding, I appreciate if you can let me know where to find it.

In addition, how can I figure out when some changes are actually merged into a branch? How can I trigger a pipeline in that event?

ANSWER

Answered 2021-Oct-27 at 08:17

Regarding your first set of questions, i have to point you forward to the gitlab CI Documentation and the rules:if section. They have their a good explanation of the states and also some addtion https://docs.gitlab.com/ee/ci/jobs/job_control.html#common-if-clauses-for-rules - i am just screenshoting this, so people can relate to it in the future if the link gets outdated:

Regarding your additional question:

A merge is a push. We do not check on some branches for CI_PIPELINE_SOURCE but for the branch name and do checks simply against that like:

1    rules:
2        - if: '$CI_COMMIT_BRANCH == &quot;master&quot;'
3        - if: '$CI_COMMIT_BRANCH == &quot;develop&quot;'
4        - if: '$CI_COMMIT_BRANCH =~ /^release.*$/i'
5        - if: '$CI_PIPELINE_SOURCE == &quot;merge_request_event&quot;'
6

This works eg perfectly in our case for gitflow. But you can vary your rules and easily define them to your own needs - the rules documentation gives a lot of good examples see: https://docs.gitlab.com/ee/ci/jobs/job_control.html#common-if-clauses-for-rules

Source https://stackoverflow.com/questions/69734612

Community Discussions contain sources that include Stack Exchange Network