Add help section to MAT page

components/aggregation/mat/Help.js

@@ -0,0 +1,55 @@
+import { DetailsBox } from 'components/measurement/DetailsBox'
+import { Flex, Box, Text, Heading } from 'ooni-components'
+import { MdHelp } from 'react-icons/md'
+import styled from 'styled-components'
+
+import { categoryCodes } from 'components/utils/categoryCodes'
+import FormattedMarkdown from 'components/FormattedMarkdown'
+import { FormattedMessage } from 'react-intl'
+
+const Row = styled(Flex)`
+  padding: 8px 0px;
+  /* odd/even stying - uses index prop given to Row from Array.map */
+  ${props => Number(props.index) % 2 && 'background: inherit;'};
+  border-bottom: 1px solid ${props => props.theme.colors.gray2};
+`
+
+const Name = styled(Box).attrs({
+  fontWeight: 'bold'
+})``
+
+const boxTitle = (
+  <Flex alignItems='center'>
+    <MdHelp size={22} />
+    <Text mx={1}><FormattedMessage id='MAT.Help.Box.Title' /></Text>
+  </Flex>
+)
+
+const Help = () => {
+  return (
+    <DetailsBox title={boxTitle} collapsed={true}>
+      <Heading h={2}>
+        <FormattedMessage id='MAT.Help.Title' />
+      </Heading>
+      <FormattedMarkdown id='MAT.Help.Content' />
+      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida in fermentum et sollicitudin. Elementum sagittis vitae et leo duis ut. Convallis tellus id interdum velit. Eget dolor morbi non arcu. Tristique nulla aliquet enim tortor. Magnis dis parturient montes nascetur ridiculus mus. Mattis aliquam faucibus purus in massa tempor. Egestas quis ipsum suspendisse ultrices gravida. Ut tellus elementum sagittis vitae et leo. Interdum velit laoreet id donec ultrices. Arcu non sodales neque sodales ut etiam sit amet. Volutpat ac tincidunt vitae semper. Cras fermentum odio eu feugiat. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Tristique nulla aliquet enim tortor at. Tempor orci eu lobortis elementum nibh tellus. Netus et malesuada fames ac turpis egestas sed tempus urna. Luctus accumsan tortor posuere ac ut consequat. Tempor commodo ullamcorper a lacus.</Text>
+      <Text>In tellus integer feugiat scelerisque. Curabitur vitae nunc sed velit dignissim. Sit amet porttitor eget dolor morbi non arcu. Ligula ullamcorper malesuada proin libero nunc. Nisl pretium fusce id velit. Eu non diam phasellus vestibulum lorem sed risus ultricies. Tortor aliquam nulla facilisi cras fermentum odio eu. Tellus in hac habitasse platea dictumst. Scelerisque mauris pellentesque pulvinar pellentesque habitant. Sed sed risus pretium quam vulputate dignissim suspendisse in. Libero justo laoreet sit amet cursus sit. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Donec pretium vulputate sapien nec sagittis aliquam. Aliquet nibh praesent tristique magna sit. Vel facilisis volutpat est velit egestas.</Text>
+
+      <Heading h={2}>
+        <FormattedMessage id='MAT.Help.Subtitle.Categories' />
+      </Heading>
+      <Flex flexDirection='column'>
+        {categoryCodes.map(([code, name, description], i) => (
+          <Row key={code} index={i} width={[1, 3/4]} alignItems='center' bg='gray0'>
+            <Name width={[1, 1/3]}>{name}</Name>
+            <Box width={[1, 2/3]}>{description}</Box>
+          </Row>
+        ))}
+      </Flex>
+
+      <Text><a rel="noreferrer" target='_blank' href='https://github.com/citizenlab/test-lists'>https://github.com/citizenlab/test-lists</a> </Text>
+    </DetailsBox>
+  )
+}
+
+export default Help

components/utils/categoryCodes.js

@@ -4,135 +4,157 @@
 // [ [code, name, description], [], [], ...]
 //
 
+/* eslint-disable quotes */
 export const categoryCodes = [
   [
     'ALDR',
     'Alcohol & Drugs',
     'Sites devoted to the use, paraphernalia, and sale of drugs and alcohol irrespective of the local legality.'
   ],
   [
-    'REL',
-    'Religion',
-    'Sites devoted to discussion of religious issues, both supportive and critical, as well as discussion of minority religious groups.'
+    'ANON',
+    'Anonymization and circumvention tools',
+    'Sites that provide tools used for anonymization, circumvention, proxy-services and encryption.'
   ],
-  ['PORN', 'Pornography', 'Hard-core and soft-core pornography.'],
   [
-    'PROV',
-    'Provocative Attire',
-    'Websites which show provocative attire and portray women in a sexual manner, wearing minimal clothing.'
+    'COMT',
+    'Communication Tools',
+    'Sites and tools for individual and group communications. Includes webmail, VoIP, instant messaging, chat and mobile messaging applications.'
   ],
   [
-    'POLR',
-    'Political Criticism',
-    'Content that offers critical political viewpoints. Includes critical authors and bloggers, as well as oppositional political organizations. Includes pro-democracy content, anti-corruption content as well as content calling for changes in leadership, governance issues, legal reform. Etc.'
+    'CTRL',
+    'Control content',
+    'Benign or innocuous content used as a control.'
   ],
   [
-    'HUMR',
-    'Human Rights Issues',
-    'Sites dedicated to discussing human rights issues in various forms. Includes women\'s rights and rights of minority ethnic groups.'
+    'CULTR',
+    'Culture',
+    'Content relating to entertainment, history, literature, music, film, books, satire and humour'
+  ],
+  [
+    'COMM',
+    'E-commerce',
+    'Websites of commercial services and products.'
+  ],
+  [
+    'ECON',
+    'Economics',
+    'General economic development and poverty related topics, agencies and funding opportunities'
   ],
   [
     'ENV',
     'Environment',
     'Pollution, international environmental treaties, deforestation, environmental justice, disasters, etc.'
   ],
   [
-    'MILX',
-    'Terrorism and Militants',
-    'Sites promoting terrorism, violent militant or separatist movements.'
+    'FILE',
+    'File-sharing',
+    'Sites and tools used to share files, including cloud-based file storage, torrents and P2P file-sharing tools.'
   ],
   [
-    'HATE',
-    'Hate Speech',
-    'Content that disparages particular groups or persons based on race, sex, sexuality or other characteristics'
+    'GMB',
+    'Gambling',
+    'Online gambling sites. Includes casino games, sports betting, etc.'
   ],
   [
-    'NEWS',
-    'News Media',
-    'This category includes major news outlets (BBC, CNN, etc.) as well as regional news outlets and independent media.'
+    'GAME',
+    'Gaming',
+    'Online games and gaming platforms, excluding gambling sites.'
   ],
   [
-    'XED',
-    'Sex Education',
-    'Includes contraception, abstinence, STDs, healthy sexuality, teen pregnancy, rape prevention, abortion, sexual rights, and sexual health services.'
+    'GOVT',
+    'Government',
+    'Government-run websites, including military sites.'
   ],
   [
-    'PUBH',
-    'Public Health',
-    'HIV, SARS, bird flu, centers for disease control, World Health Organization, etc'
+    'HACK',
+    'Hacking Tools',
+    'Sites dedicated to computer security, including news and tools. Includes malicious and non-malicious content.'
   ],
   [
-    'GMB',
-    'Gambling',
-    'Online gambling sites. Includes casino games, sports betting, etc.'
+    'HATE',
+    'Hate Speech',
+    'Content that disparages particular groups or persons based on race, sex, sexuality or other characteristics'
   ],
   [
-    'ANON',
-    'Anonymization and circumvention tools',
-    'Sites that provide tools used for anonymization, circumvention, proxy-services and encryption.'
+    'HOST',
+    'Hosting and Blogging Platforms',
+    'Web hosting services, blogging and other online publishing platforms.'
   ],
   [
-    'DATE',
-    'Online Dating',
-    'Online dating services which can be used to meet people, post profiles, chat, etc'
+    'HUMR',
+    'Human Rights Issues',
+    "Sites dedicated to discussing human rights issues in various forms. Includes women's rights and rights of minority ethnic groups."
+  ],
+  [
+    'IGO',
+    'Intergovernmental Organizations',
+    'Websites of intergovernmental organizations such as the United Nations.'
   ],
-  ['GRP', 'Social Networking', 'Social networking tools and platforms.'],
   [
     'LGBT',
     'LGBT',
     'A range of gay-lesbian-bisexual-transgender queer issues. (Excluding pornography)'
   ],
   [
-    'FILE',
-    'File-sharing',
-    'Sites and tools used to share files, including cloud-based file storage, torrents and P2P file-sharing tools.'
+    'MMED',
+    'Media sharing',
+    'Video, audio or photo sharing platforms.'
   ],
   [
-    'HACK',
-    'Hacking Tools',
-    'Sites dedicated to computer security, including news and tools. Includes malicious and non-malicious content.'
+    'MISC',
+    'Miscelaneous content',
+    "Sites that don't fit in any category (XXX Things in here should be categorised)"
   ],
   [
-    'COMT',
-    'Communication Tools',
-    'Sites and tools for individual and group communications. Includes webmail, VoIP, instant messaging, chat and mobile messaging applications.'
+    'NEWS',
+    'News Media',
+    'This category includes major news outlets (BBC, CNN, etc.) as well as regional news outlets and independent media.'
   ],
-  ['MMED', 'Media sharing', 'Video, audio or photo sharing platforms.'],
   [
-    'HOST',
-    'Hosting and Blogging Platforms',
-    'Web hosting services, blogging and other online publishing platforms.'
+    'DATE',
+    'Online Dating',
+    'Online dating services which can be used to meet people, post profiles, chat, etc'
   ],
-  ['SRCH', 'Search Engines', 'Search engines and portals.'],
   [
-    'GAME',
-    'Gaming',
-    'Online games and gaming platforms, excluding gambling sites.'
+    'POLR',
+    'Political Criticism',
+    'Content that offers critical political viewpoints. Includes critical authors and bloggers, as well as oppositional political organizations. Includes pro-democracy content, anti-corruption content as well as content calling for changes in leadership, governance issues, legal reform. Etc.'
   ],
+  [ 'PORN', 'Pornography', 'Hard-core and soft-core pornography.' ],
   [
-    'CULTR',
-    'Culture',
-    'Content relating to entertainment, history, literature, music, film, books, satire and humour'
+    'PROV',
+    'Provocative Attire',
+    'Websites which show provocative attire and portray women in a sexual manner, wearing minimal clothing.'
   ],
   [
-    'ECON',
-    'Economics',
-    'General economic development and poverty related topics, agencies and funding opportunities'
+    'PUBH',
+    'Public Health',
+    'HIV, SARS, bird flu, centers for disease control, World Health Organization, etc'
   ],
-  ['GOVT', 'Government', 'Government-run websites, including military sites.'],
-  ['COMM', 'E-commerce', 'Websites of commercial services and products.'],
-  ['CTRL', 'Control content', 'Benign or innocuous content used as a control.'],
   [
-    'IGO',
-    'Intergovernmental Organizations',
-    'Websites of intergovernmental organizations such as the United Nations.'
+    'REL',
+    'Religion',
+    'Sites devoted to discussion of religious issues, both supportive and critical, as well as discussion of minority religious groups.'
   ],
+  [ 'SRCH', 'Search Engines', 'Search engines and portals.' ],
   [
-    'MISC',
-    'Miscelaneous content',
-    'Sites that don\'t fit in any category (XXX Things in here should be categorised)'
+    'XED',
+    'Sex Education',
+    'Includes contraception, abstinence, STDs, healthy sexuality, teen pregnancy, rape prevention, abortion, sexual rights, and sexual health services.'
+  ],
+  [
+    'GRP',
+    'Social Networking',
+    'Social networking tools and platforms.'
+  ],
+  [
+    'MILX',
+    'Terrorism and Militants',
+    'Sites promoting terrorism, violent militant or separatist movements.'
   ]
 ]
+/* eslint-enable quotes */
 
 export const getCategoryCodesMap = () => {
   const map = categoryCodes.reduce((acc, [code, name, description]) => 

pages/chart/mat.js

@@ -21,6 +21,7 @@ import { Form } from 'components/aggregation/mat/Form'
 import { axiosResponseTime } from 'components/axios-plugins'
 import TableView from 'components/aggregation/mat/TableView'
 import FormattedMarkdown from 'components/FormattedMarkdown'
+import Help from 'components/aggregation/mat/Help'
 
 const baseURL = process.env.NEXT_PUBLIC_MEASUREMENTS_URL
 axiosResponseTime(axios)
@@ -118,6 +119,9 @@ const MeasurementAggregationToolkit = ({ testNames }) => {
                   <TableView data={data.data.result} query={query} />
               }
             </Box>
+            <Box my={4}>
+              <Help />
+            </Box>
             {error && <Box>
               <Heading h={5} my={4}>Error</Heading>
               <pre>{JSON.stringify(error, null, 2)}</pre>

public/static/lang/en.json

@@ -499,6 +499,10 @@
   "MAT.Table.Header.probe_asn": "ASN",
   "MAT.Table.Header.blocking_type": "Blocking Type",
   "MAT.Table.Header.domain": "Domain",
+  "MAT.Help.Box.Title": "Help",
+  "MAT.Help.Title": "What is MAT?",
+  "MAT.Help.Content": "Content in Markdown",
+  "MAT.Help.Subtitle.Categories": "Categories",
   "ReachabilityDash.Heading.CircumventionTools": "Reachability of Censorship Circumvention Tools",
   "ReachabilityDash.Form.Label.CountrySelect.AllSelected": "All countries selected",
   "ReachabilityDash.Form.Label.CountrySelect.SearchPlaceholder": "Search",