Network Map button on Graph view not needed

[lewlefton]

Visit site. Enter an org. Click on Graph view and notice Map view button that does nothing and isn't needed.

[gladishd]

It appears that the Network Map button has been removed..By the way, having done some tidying these Issues up, I just deleted my expired branches (there's no one who owns these branches which is why it's inspiring). The inspiration is Sort Alphabetically and then Search by page #: I discovered this branch:
initial commit; global sorting behavior for A-Z toggle and normalizat… · 817d031
https://github.com/OKN-CollabNext/CollabNext_public/commit/817d0310abf3701db51b402555123945e3c7dbf3

Now, we can sort from A to Z & sort by No of people & input lines directly from the keyboard. Some notes:

The data object "re-fetches"; "switch" between "A-Z" and "No of people" and back.

Cleaner Git Diffs. Autoformatting is unnecessary for Git to track, that which we have already formatted in various forms.

• I want to isolate Git tracked changes by formatting not automatically but intentionally; ⌘⇧P (Command+Shift+P), Preferences; Open Settings (UI), search for "trimTrail", and then uncheck the following two boxes: "Files: Trim Trailing Whitespace in Regex And Strings", as well as uncheck "Files: Trim Trailing Whitespace".

• ⌘⇧P, Preferences: Open Settings (UI), search for "insertFinal". Uncheck the box that says "Files: Insert Final Newline".

• &, dis-able and re-start ESLint..Disable and Restart your Python Linter.

• Last on the list, ⌘⇧P, Preferences: Open Settings (UI), search for "Format on Save", you can uncheck the Editor: "Format On Save (Modified elsewhere)".

Or, the minimum changes to be made to the current main branch at 95fab7119d06b9b1f1ab9ba06db4e239a6c22265 are as follows:

backend/app.py
Fundamentally, this file should be changed with regard to the following two functions:

def get_institution_results
Alter the function def get_institution_results. After the edges = [] declaration and before the total_topics = len(data['data']) declaration (Immediately after Line 494), insert the following:

    if sort_mode == 'count':
        data['data'].sort(key=lambda e: (-e['num_of_authors'], e['topic_subfield']))
    else:
        data['data'].sort(key=lambda e: e['topic_subfield'])

Insert on the existing Line 336 (without making a new line):
sort_mode = request_data.get('sort_mode', 'alpha')

Insert on the existing Line 465 (without making a new line):

def get_institution_results(institution, page=1, per_page=10, sort_mode = "alpha"):

Now,

def initial_search :

In the elif institution block add the parameter sort_mode. This change is:
results = get_institution_results(institution, page, per_page, sort_mode)
Add the sort_mode parameter. (On Line 357).

frontend/src/pages/Search.tsx
Within the return statement, on the <InstitutionMetadata tag put this immediately after Line 660 :

                  sortMode={sortMode}
                  setSortMode={setSortMode}

At the very end, right before the return ( statement, put this immediately after Line 384 :

  useEffect(() => {
    handleSearch(universityName, institutionType, topicType, researcherType, currentPage);
  }, [sortMode]);

Then on the body: JSON.stringify({ put this immediately after Line 105:
sort_mode: sortMode,

Now, first thing inside of const Search = () => { is this immediately after Line 30:
const [sortMode, setSortMode] = useState<'count' | 'alpha'>('alpha');

frontend/src/components/InstitutionMetadata.tsx

Right after the end of the </Box> then put : replace (inclusive set) Lines 95 to 133 with:

          <Flex mt='.5rem' mb='.5rem' gap={2}>
            <Button
              size='xs'
              onClick={() => setSortMode('alpha')}
              bgGradient={
                sortMode === 'alpha'
                  ? 'linear(to-b, #053257, #7e7e7e)'
                  : undefined
              }
              color={sortMode === 'alpha' ? 'white' : undefined}
              _hover={
                sortMode === 'alpha'
                  ? { bgGradient: 'linear(to-b, #053257, #7e7e7e)' }
                  : undefined
              }
            >
              A-Z
            </Button>
            <Button
              size='xs'
              onClick={() => setSortMode('count')}
              bgGradient={
                sortMode === 'count'
                  ? 'linear(to-b, #053257, #7e7e7e)'
                  : undefined
              }
              color={sortMode === 'count' ? 'white' : undefined}
              _hover={
                sortMode === 'count'
                  ? { bgGradient: 'linear(to-b, #053257, #7e7e7e)' }
                  : undefined
              }
            >
              No of people
            </Button>
          </Flex>
          <Box>
            {sortedTopics?.map(([topicName, count]) => (
              <Flex key={topicName} justifyContent='space-between'>
                <Text
                  fontSize='14px'
                  w='72%'
                  onClick={() => setTopic(topicName)}
                  textDecoration='underline'
                  cursor='pointer'
                >
                  {topicName}
                </Text>
                <Text fontSize='14px' w='26%'>
                  {count}
                </Text>
              </Flex>
            ))}
          </Box>
        </Box>
      </Flex>
      <Flex justifyContent='center' mt={4} gap={2} alignItems='center'>
        <Button onClick={() => onPageChange(currentPage - 1)} isDisabled={currentPage === 1} size='sm'>Previous</Button>
        <Input
          type='number'
          min={1}
          max={totalPages}
          value={inputPage === 0 ? '' : inputPage}
          onChange={e => setInputPage(Number(e.target.value))}
          onBlur={() => {
            const p = Math.min(totalPages, Math.max(1, inputPage));
            onPageChange(p);
          }}
          onKeyDown={e => {
            if (e.key === 'Enter') {
              const p = Math.min(totalPages, Math.max(1, inputPage));
              onPageChange(p);
            }
          }}
          size='sm'
          width='4rem'
          textAlign='center'
        />
        <Text fontSize='sm'>/ {totalPages}</Text>
        <Button onClick={() => onPageChange(currentPage + 1)} isDisabled={currentPage === totalPages} size='sm'>Next</Button>
      </Flex>

Right before the return statement immediately before Line 46 put

  const sortedTopics = data?.topics
    ?.slice()
    .sort(([aName, aCount], [bName, bCount]) => {
      if (sortMode === 'count') {
        return bCount - aCount || aName.localeCompare(bName);
      }
      return aName.localeCompare(bName);
    });

Throw this useEffect hook at the very beginning of the function immediately after line 27:

  const [inputPage, setInputPage] = useState<number>(currentPage);
  useEffect(() => {
    setInputPage(currentPage);
  }, [currentPage]);

Within the function declaration const InstitutionMetadata insert after onPageChange immediately after Line 20 that is,

  sortMode,
  setSortMode,

Also, replace Line 15 only with this : const InstitutionMetadata: React.FC<InstitutionMetadataProps> = ({ .

Then, immediately after Line 13 make a new line and insert:

 interface InstitutionMetadataProps {
  data: ResearchDataInterface;
  setTopic: React.Dispatch<React.SetStateAction<string>>;
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
  sortMode: 'count' | 'alpha';
  setSortMode: React.Dispatch<React.SetStateAction<'count' | 'alpha'>>;
}

At the beginning of the file, modify (Line 1 and Line 3) to read :

Replace Line 1 with:
import React, { useState, useEffect } from 'react';

Replace Line 3 with:
import { Box, Button, Flex, Text, Input } from '@chakra-ui/react';

Go to http://localhost:3000/search?institution=Texas+Southern+University

Perhaps MUP data shouldn't show if it doesn't exist? Regardless, cleanest Git commits you'll ever make. Just make sure Visual Studio Code isn't..formatting on save. The end, the result of these instructions is just the demo for InstitutionMetadata only. (Instead of pressing 9 times Next or Previous) it's just for Sort Alphabetically and Search by Page Number.

This tutorial only works for institution only neither topic nor researcher.

git fetch origin
git checkout -b issue_#170_Network_Map_button_on_Graph_view_not_needed origin/issue_#170_Network_Map_button_on_Graph_view_not_needed
git checkout issue_#170_Network_Map_button_on_Graph_view_not_needed

Instead of showing "No data available" "No data available" "No data available" "No data available" "No data available" "No data available" "No data available", we can make a simple fix where we lift and remove the MUP Institution Data display unless there's MUP data!

[chinardankhara]

@lewlefton Professor, what is the request here? Would you like me to remove the button? I can do that.

@gladishd Quick tip: issue comments should not contain a lot of code or explanation of how something is done. These things are in code comments. Issue comments are for the what and why of something.

[lewlefton]

I assigned this to Joshua (@McDevvv) and I think he resolved it in his branch which is waiting for review and approval. He forgot to update the issue. Check https://github.com/OKN-CollabNext/CollabNext_public/tree/josh_updates2

[chinardankhara]

Current josh update 2 branch is upto date with main so it cannot be that branch. If it is josh update 3 branch and he can open the PR, I can run tests, review, and merge it.

[lewlefton]

@McDevvv please open a PR so it can be reviewed and merged.

[McDevvv]

Good Evening,

Please excuse my late response. I tend to do most of my work at night.

Update3 is just an adjustment to the fontsize on mobile view. Update2 deletes the Network Map button, the PR has been completed already. I believe it was merged last week by Keller.

PR for update3 has been opened.