2c:null 2d:["$","title",null,{"children":"GitHub User Explorer | Northeastern University John A. Guerra Gomez classes | Observable"}] 32:T993,# GitHub User Explorer ## Motivation and use cases Think of this input as a tool to provide author documentation. If someone wants to include their GitHub profile at the end of their notebook, they could use this input. Another use case is for anyone needing to perform analysis where a person's GitHub profile data is required; this could be the perfect input for them. ## Overview **Note: You need a GitHub Personal Access Token to use GithubUserSearch** [How to get a GitHub Personal Access Token?](https://docs.github.com/en/enterprise-server@3.9/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token) `GitHubUserSearch` fetches and displays GitHub user data based on input which can be a text file, JSON file, or an array of usernames. It provides an interface to select users when in analysis mode and displays user information in a list with optional checkboxes. ### Parameters `options`: An object containing configuration options for the function: - `githubToken(REQUIRED)`: A GitHub Personal Access Token - `input(REQUIRED)`: The source of GitHub usernames. It can be a text file, JSON file, or an array or usernames. - `analysisMode`: Boolean flag to determine whether to include checkboxes for selecting multiple users, use this if you want the input to return values when used with viewof. - `headerText`: Customizable text for the header. - **Note: The input throws an error if the input is not provided or is of an unsupported type.** ## How to import import {GitHubUserSearch} from "@nu-cs3200-spring24-db/github-user-explorer" ## How to use The input can be called with appropriate options in an Observable notebook to create a dynamic, interactive list of GitHub users. It can be particularly useful for projects where user selection and data visualization from GitHub are required. Example ```javascript // Usage in documentation mode GitHubUserSearch({ input: ['agnibha-chatterjee'], githubToken: '' }) ``` ```javascript // Usage in analysis mode GitHubUserSearch({ input: ['agnibha-chatterjee'], githubToken: '' analysisMode: true, headerText: 'Select GitHub Users', }) ``` ## Sample Output ![output-image](https://firebasestorage.googleapis.com/v0/b/cartology-pdp.appspot.com/o/Screenshot%202024-04-14%20at%209.10.50%E2%80%AFPM.png?alt=media&token=ae1cca2c-fd45-46c9-b551-b2895185c75d "Sample Image") 33:Td02,GitHubUserSearch = async (options) => { const { input = null, analysisMode = false, headerText = 'User(s)', githubToken = '' } = options let inputUserNames = [] let globalUserData = [] let selectedUsers = [] const fetchGhUsers = async () => { const parsedInput = input let fileValue = '' let userNames = [] if (!githubToken || typeof githubToken !== 'string') { throw new Error('This input needs a valid GitHub Personal Access Token') } if (!input) { throw new Error('The input property has to be set') } if (parsedInput.mimeType === 'text/plain'){ fileValue = await input.text() userNames = fileValue.split('\n').filter(Boolean) } else if (parsedInput.mimeType === 'application/json') { userNames = await input.json() } else if (Array.isArray(input)) { userNames = input } else { throw new Error(`Invalid input provided. GitHubUserSearch only supports the following inputs. 1. Text file with GitHub usernames 2. JSON file with GitHub usernames 3. A simple array of GitHub usernames `) } inputUserNames = userNames if(!userNames.length) return; const userData = [] for (let usr of userNames) { let ghUser = await useGithubApi(`/users/${usr}`, githubToken) userData.push(ghUser) } globalUserData = userData } await fetchGhUsers() const handleOnChecked = (e) => { const id = e.target.id if (e.target.checked) { const user = globalUserData.find((usr) => `${usr?.data?.id}` === id) selectedUsers.push({...user.data}) } else { const idx = selectedUsers.findIndex(usr => `${usr?.id}` === id) selectedUsers.splice(idx, 1) } element.dispatchEvent(new CustomEvent("input", {bubbles: true})); } const element = htl.html`

${headerText}

Could not find user with username: ${inputUserNames[idx]}

Cross check the username (or the Personal Access Token)
${user.name} (${user.login})
${user.name} (${user.login})

` element.value = selectedUsers return element; }34:[{"id":"7516790fbe244d7cf15e3cc3625b1a2ea6d836aa6143f639b7c77566a3bab779ccc1c6fbb5955766b91604c7d437bec5d0b604e90302e86b80cebcf728398e64","href":"https://static.observableusercontent.com/files/7516790fbe244d7cf15e3cc3625b1a2ea6d836aa6143f639b7c77566a3bab779ccc1c6fbb5955766b91604c7d437bec5d0b604e90302e86b80cebcf728398e64","name":"sample-output.png","type":"image/png","lastModified":1713154574704.812,"size":128289}] 30:{"id":"74e020cc5270a633","slug":"github-user-explorer","title":"GitHub User Explorer","thumbnail":"564e4102cc9206a2fad7e0037f1e15bf4efaf0f9316f89f8450210ba0b873014","access_level":"public","create_time":"$D2024-04-14T03:51:34.060Z","update_time":"$D2024-04-16T02:24:18.894Z","view_time":null,"first_public_time":"$D2024-04-15T03:58:30.752Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","bio":""},"version":373,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e6c36eea28ddeac5","login":"agnibha-chatterjee","name":"Agnibha Chatterjee","avatar_url":"https://avatars-next.observableusercontent.com/b351f02a429076558a3a897b0aa10f5fef227c3e21fbaee43fc290224bcee620","tier":null,"bio":""}],"members":[{"type":"individual","id":"e6c36eea28ddeac5","login":"agnibha-chatterjee","name":"Agnibha Chatterjee","avatar_url":"https://avatars-next.observableusercontent.com/b351f02a429076558a3a897b0aa10f5fef227c3e21fbaee43fc290224bcee620","tier":null,"role":"editor"},{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"GitHub User Explorer","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"## An example of `GitHubUserSearch`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":348,"value":"viewof apiToken = Inputs.text({placeholder: \"Paste GitHub API token here\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"viewof users = GitHubUserSearch({\n input: ['agnibha-chatterjee'],\n githubToken: apiToken,\n analysisMode: true,\n headerText: 'Example Run'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"users","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"useGithubApi = async (endpoint, apiToken) => {\n const finalEndpoint = 'https://api.github.com' + endpoint\n const reqHeaders = {\n Accept: \"application/vnd.github+json\",\n Authorization: `Bearer ${apiToken}`,\n \"X-GitHub-Api-Version\": \"2022-11-28\",\n }\n try {\n const res = await fetch(finalEndpoint, {\n headers: reqHeaders\n })\n\n if (!res.ok) {\n const errorText = await res.text()\n const parsedErrorText = JSON.parse(errorText)\n return {\n error: parsedErrorText.message,\n data: null\n }\n }\n return {\n data: (await res.json()),\n error: null\n }\n } catch (error) {\n return {\n data: null,\n error: 'Something went wrong!'\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"

${headerText}

Could not find user with username: ${inputUserNames[idx]}

${user.name} (${user.login})

${user.name} (${user.login})