SOW3.1.4: smaller new feature additions

src/components/config/theme.ts

@@ -65,35 +65,15 @@ const customTheme = createMuiTheme({
   palette: {
     type: 'dark',
     primary: {
-      // TODO: rm when dialed in
-      // OLD
-      // light: '#66ab9d',
-      // main: '#409685',
-      // dark: '#2c695d',
-      // NEW
       light: '#62aca0',
       main: '#379587',
       dark: '#286a61',
       contrastText: '#fff',
     },
     secondary: {
-      // TODO: rm when dialed in
-      // light: '#2f86c1',
-      // main: '#016aa3',
-      // dark: '#014971',
-      // light: '#6386b0',
-      // main: '#325b93',
-      // dark: '#2e456b',
-      // light: '#20c5e0',
-      // main: '#139fb4',
-      // dark: '#0d7d8c',
-      // OPTION 3
       light: '#55a9c1',
       main: '#207d96',
       dark: '#2d6777',
-      // light: '#56abc2',
-      // main: '#207d96',
-      // dark: '#2d6676',
       contrastText: '#fff',
     },
   },
@@ -110,6 +90,15 @@ const customTheme = createMuiTheme({
 
 // Global overrides of MUI components that need to be re-styled often
 customTheme.overrides = {
+  MuiFormHelperText: {
+    root: {
+      fontSize: '0.65rem',
+    },
+    contained: {
+      marginLeft: '0.75rem',
+      marginRight: 0,
+    },
+  },
   MuiInput: {
     root: {
       fontSize: customTheme.typography.body2.fontSize, // default inputs: huge
@@ -121,6 +110,11 @@ customTheme.overrides = {
       },
     },
   },
+  MuiInputAdornment: {
+    root: {
+      color: customTheme.palette.text.secondary,
+    },
+  },
   MuiDialog: {
     // Outside boundary of all dialogs
     paper: {
@@ -146,6 +140,13 @@ customTheme.overrides = {
       color: customTheme.palette.secondary.light,
     },
   },
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  MuiAutocomplete: {
+    root: {
+      marginBottom: '1rem',
+    },
+  },
 }
 
 export const theme = responsiveFontSizes(customTheme)

src/components/context/MapToolsContext.tsx

@@ -3,6 +3,7 @@ import React, { FC } from 'react'
 import * as Types from './types'
 
 const initialState = {
+  autoZoomCensus: true,
   boundariesVisible: false,
   geolocActive: false,
 } as Types.InitialMapToolsState
@@ -19,6 +20,8 @@ function reducer(
   action: Types.MapToolsAction
 ) {
   switch (action.type) {
+    case 'TOGGLE_CENSUS_AUTO_ZOOM':
+      return { ...state, autoZoomCensus: !state.autoZoomCensus }
     case 'SET_BOUNDARIES_VISIBLE':
       return { ...state, boundariesVisible: action.payload }
     case 'SET_GEOLOC_ACTIVE':

src/components/context/SymbAndLabelContext.tsx

@@ -4,20 +4,24 @@ import { LangSchemaCol } from './types'
 
 type Dispatch = React.Dispatch<Action>
 type InitialState = {
-  activeLabelID: LangSchemaCol | '' | 'None'
+  activeLabelID: LangSchemaCol
   activeSymbGroupID: LangSchemaCol
   hideLangPoints: boolean
+  hideLangLabels: boolean
 }
 
 export type Action =
-  | { type: 'TOGGLE_LANG_POINTS' }
-  | { type: 'SET_LANG_LAYER_LABELS'; payload: LangSchemaCol | '' }
+  | { type: 'TOGGLE_LANG_LABELS'; payload?: boolean }
+  | { type: 'TOGGLE_LANG_POINTS'; payload?: boolean }
+  | { type: 'SET_LANG_LAYER_LABELS'; payload: LangSchemaCol }
   | { type: 'SET_LANG_LAYER_SYMBOLOGY'; payload: LangSchemaCol }
 
 const initialState = {
-  activeLabelID: '',
+  activeLabelID: 'Language',
   activeSymbGroupID: 'World Region',
+  autoZoomCensus: true,
   hideLangPoints: false,
+  hideLangLabels: true,
 } as InitialState
 
 const SymbAndLabelContext = React.createContext<InitialState | undefined>(
@@ -32,18 +36,23 @@ function reducer(state: InitialState, action: Action) {
     case 'TOGGLE_LANG_POINTS':
       return {
         ...state,
-        hideLangPoints: !state.hideLangPoints,
+        hideLangPoints:
+          // `undefined` if from individual checkboxes (as opposed to "all",
+          // e.g. from Census panel)
+          action.payload === undefined ? !state.hideLangPoints : action.payload,
       }
-    case 'SET_LANG_LAYER_LABELS':
+    case 'TOGGLE_LANG_LABELS':
       return {
         ...state,
-        activeLabelID: action.payload,
+        hideLangLabels:
+          // `undefined` if from individual checkboxes (as opposed to "all",
+          // e.g. from Census panel)
+          action.payload === undefined ? !state.hideLangLabels : action.payload,
       }
+    case 'SET_LANG_LAYER_LABELS':
+      return { ...state, activeLabelID: action.payload }
     case 'SET_LANG_LAYER_SYMBOLOGY':
-      return {
-        ...state,
-        activeSymbGroupID: action.payload,
-      }
+      return { ...state, activeSymbGroupID: action.payload }
     default: {
       return state
     }

src/components/context/types.ts

@@ -59,6 +59,8 @@ export type LangLevelOptional = CensusFields &
     addlNeighborhoods: string[] // suuuper shakes mcgee
     Audio: string
     descriptionID: string
+    // Used in "Language Profile" (aka Pre-Details), not Details
+    langProfileDescripID: string
     Glottocode: string
     Macrocommunity: string[]
     Neighborhood: string[]
@@ -95,19 +97,18 @@ type CensusFieldPayload = {
 }
 
 export type InitialMapToolsState = {
+  autoZoomCensus: boolean
   boundariesVisible: boolean
   geolocActive: boolean
   censusActiveField?: CensusFieldPayload
 }
 
 export type MapToolsAction =
+  | { type: 'CLEAR_CENSUS_FIELD' }
   | { type: 'SET_BOUNDARIES_VISIBLE'; payload: boolean }
+  | { type: 'SET_CENSUS_FIELD'; payload: CensusFieldPayload }
   | { type: 'SET_GEOLOC_ACTIVE'; payload: boolean }
-  | { type: 'CLEAR_CENSUS_FIELD' }
-  | {
-      type: 'SET_CENSUS_FIELD'
-      payload: CensusFieldPayload
-    }
+  | { type: 'TOGGLE_CENSUS_AUTO_ZOOM' }
 
 export type MapToolsDispatch = React.Dispatch<MapToolsAction>
 

src/components/details/DetailedIntro.tsx

@@ -1,11 +1,13 @@
 import React, { FC } from 'react'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Route } from 'react-router-dom'
 
 import { Media } from 'components/media'
 import { MoreLikeThis } from 'components/details'
 import { CensusPopover } from 'components/explore/CensusPopover'
 import { StatsAndMeta } from 'components/explore/StatsAndMeta'
-import { FancyHorizRule } from 'components/generic'
+import { LangProfileDescrip } from 'components/explore'
+import { routes } from 'components/config/api'
 import { LangOrEndoIntro } from './LangOrEndoIntro'
 import { DetailedIntroProps } from './types'
 import { ReadMoreLangDescrip } from './ReadMoreLangDescrip'
@@ -14,11 +16,14 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       textAlign: 'center',
+      paddingBottom: '0.75rem',
+      marginBottom: '1rem',
+      borderBottom: `solid 1px ${theme.palette.divider}`,
     },
   })
 )
 
-// The intro section of pre-Details and Details views
+// The intro section of pre-Details ("Language Profile") and Details views
 export const DetailedIntro: FC<DetailedIntroProps> = (props) => {
   const { data, shareNoun, isInstance, langDescripID } = props
   const classes = useStyles()
@@ -32,7 +37,13 @@ export const DetailedIntro: FC<DetailedIntroProps> = (props) => {
       </MoreLikeThis>
       <Media data={data} shareNoun={shareNoun} omitClear={!isInstance} />
       {langDescripID && <ReadMoreLangDescrip langDescripID={langDescripID} />}
-      <FancyHorizRule />
+      <Route path={routes.explore}>
+        {data.langProfileDescripID && (
+          <LangProfileDescrip
+            langProfileDescripID={data.langProfileDescripID}
+          />
+        )}
+      </Route>
     </header>
   )
 }

src/components/details/NeighborhoodList.tsx

@@ -110,6 +110,7 @@ export const NeighborhoodList: FC<Types.NeighborhoodListProps> = (props) => {
           let url // TODO: de-shabbify, wire up w/Town
           const footer = <CardFooter text={loc} />
 
+          // TODO: use Routes, dude
           if (!isInstance)
             url = `/details/${instanceIDs ? instanceIDs[i] : 999999}`
           else url = `/Explore/${locRouteName}/${loc}`

src/components/explore/CustomCard.tsx

@@ -93,7 +93,7 @@ export const GlottoIsoFooter: FC<GlottoIsoFooterProps> = (props) => {
 }
 
 export const CustomCard: FC<Types.CustomCardProps> = (props) => {
-  const { title, url, uniqueInstances, intro, icon, footer, footerIcon } = props
+  const { title, url, uniqueInstances, intro, icon, footer } = props
   const classes = useStyles()
 
   return (
@@ -126,7 +126,6 @@ export const CustomCard: FC<Types.CustomCardProps> = (props) => {
         variant="caption"
         className={classes.footer}
       >
-        {footerIcon}
         {footer ||
           (uniqueInstances !== undefined &&
             utils.prettyTruncate(uniqueInstances as string[]))}

src/components/explore/LangProfileDescrip.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react'
+
+import { ReadMore } from 'components/generic'
+import { useAirtable } from './hooks'
+
+export const LangProfileDescrip: FC<{ langProfileDescripID: string }> = (
+  props
+) => {
+  const { langProfileDescripID } = props
+
+  const { data, error, isLoading } = useAirtable<{ Description: string }>(
+    // TODO: TS-ify the names of all tables
+    'Language Profiles',
+    // TODO: TS-ify the field names for all tables
+    { filterByFormula: `{id} = '${langProfileDescripID}'` }
+  )
+
+  if (isLoading || error || !data.length) return null
+
+  return <ReadMore text={data[0].Description} />
+}

src/components/explore/MidLevelExplore.tsx

@@ -5,7 +5,6 @@ import {
   Route,
   Link as RouterLink,
 } from 'react-router-dom'
-import { BiMapPin } from 'react-icons/bi'
 
 import { FlagFromHook } from 'components/generic/icons-and-swatches'
 import { SwatchOnly } from 'components/legend'
@@ -87,9 +86,6 @@ export const MidLevelExplore: FC<MidLevelExploreProps> = (props) => {
     )
   }
 
-  const footerIcon = (value !== undefined || tableName === 'Language') && (
-    <BiMapPin />
-  )
   const { definition, plural } = landingData[0] || {}
 
   let primaryData
@@ -131,7 +127,6 @@ export const MidLevelExplore: FC<MidLevelExploreProps> = (props) => {
               key={nameOrLang}
               intro={value || field === 'Language' ? nameOrLang : ''}
               title={tableName === 'Language' ? row.Endonym : nameOrLang}
-              footerIcon={footerIcon}
               uniqueInstances={uniqueInstances}
               url={`${url}/${nameOrLang}`}
               // TODO: use and refactor SwatchOrFlagOrIcon for icon prop

src/components/explore/index.ts

@@ -3,6 +3,7 @@ export * from './CardList'
 export * from './CustomCard'
 export * from './Explore'
 export * from './LangCardsList'
+export * from './LangProfileDescrip'
 export * from './MidLevelExplore'
 
 export * from './config'

src/components/explore/types.ts

@@ -13,7 +13,7 @@ export type ReactQueryOptions = {
 }
 
 // TODO: try to reuse some of these, they're pretty common in sev. components
-type CategoryProps = {
+export type CustomCardProps = {
   title: string
   uniqueInstances?: unknown[]
   url: string
@@ -22,10 +22,6 @@ type CategoryProps = {
   intro?: string
 }
 
-export type CustomCardProps = CategoryProps & {
-  footerIcon?: React.ReactNode
-}
-
 export type CategoryConfig = {
   name: keyof InstanceLevelSchema
   definition?: string
@@ -41,7 +37,7 @@ export type RouteMatch = {
   language?: string
 }
 
-export type CardConfig = CategoryProps & {
+export type CardConfig = CustomCardProps & {
   footer: string
   to: string
 }

src/components/generic/ReadMore.tsx

@@ -50,7 +50,8 @@ const useStyles = makeStyles((theme: Theme) =>
     description: {
       textAlign: 'left',
       fontSize: (props: ReadMoreStyles) => props.fontSize,
-      marginBottom: '0.25rem',
+      marginBottom: '0.75rem',
+      lineHeight: 1.75,
     },
   })
 )

src/components/generic/ToggleableSection.tsx

@@ -25,6 +25,9 @@ const useStyles = makeStyles(() =>
   })
 )
 
+// TODO: consider ellipsizing with `line-clamp`:
+// https://css-tricks.com/multiline-truncated-text-with-show-more-button/
+// https://css-tricks.com/almanac/properties/l/line-clamp/
 export const ToggleableSection: FC<ToggleableProps> = (props) => {
   const { children, show, initialHeight = 0 } = props
   const classes = useStyles({ show, initialHeight })

src/components/home/Home.tsx

@@ -1,15 +1,13 @@
 import React, { FC } from 'react'
-import { GoSearch } from 'react-icons/go'
 
 import { LegendPanel } from 'components/legend'
-import { PanelContentSimple, PanelHeading } from 'components/panels'
+import { PanelContentSimple } from 'components/panels'
 import { SearchByOmnibox } from './SearchByOmnibox'
 import { FiltersWarning } from './FiltersWarning'
 
 export const Home: FC = () => {
   return (
     <PanelContentSimple>
-      <PanelHeading icon={<GoSearch />} text="Search language communities" />
       <SearchByOmnibox />
       <FiltersWarning />
       <LegendPanel />