add option to deactivate tagger, further added smaller optimizations

config/runtime.exs

@@ -63,15 +63,16 @@ if config_env() == :prod do
     port: String.to_integer(System.get_env("DATABASE_PORT", "5432")),
     ssl: System.get_env("DATABASE_SSL", "true") == "true",
     socket_options: maybe_ipv6,
-    ssl_opts: [verify: :verify_peer,
-               cacerts: :public_key.cacerts_get(),
-               versions: [:"tlsv1.3"],
-               depth: 3,
-               server_name_indication: String.to_charlist(System.get_env("DATABASE_HOST")),
-               customize_hostname_check: [
-                match_fun: :public_key.pkix_verify_hostname_match_fun(:https)
-               ]
-              ]
+    ssl_opts: [
+      verify: :verify_peer,
+      cacerts: :public_key.cacerts_get(),
+      versions: [:"tlsv1.3"],
+      depth: 3,
+      server_name_indication: String.to_charlist(System.get_env("DATABASE_HOST")),
+      customize_hostname_check: [
+        match_fun: :public_key.pkix_verify_hostname_match_fun(:https)
+      ]
+    ]
 
   # The secret key base is used to sign/encrypt cookies and other secrets.
   # A default value is used in config/dev.exs and config/test.exs but you

frontend/compiled-lang/de.json

@@ -28,6 +28,7 @@
   "live.text.button.submit": "Text hinzufügen",
   "live.text.loading": "Anfrage wird bearbeitet...",
   "live.text.success": "Wörter hinzugefügt. Je nach Filter werden Wörter ausgeblendet.",
+  "live.text.toggler.tokenizerActive": "Grammatik eingegebener Wörter erkennen",
   "sharemodal.title": "Teilen",
   "start.buttons.feedback": "Feedback",
   "start.buttons.live": "Text",

frontend/compiled-lang/en.json

@@ -23,6 +23,7 @@
   "live.text.button.submit": "Add Text",
   "live.text.loading": "Request is being processed...",
   "live.text.success": "Words added. Depending on the chosen filter they might not be visible yet.",
+  "live.text.toggler.tokenizerActive": "Tag grammar cateogries of input",
   "sharemodal.title": "Share",
   "start.buttons.feedback": "Feedback",
   "start.buttons.live": "Text",

frontend/compiled-lang/lang.json

@@ -5,7 +5,6 @@
   "chart.buttons.share.feedback": "Share a link to your feedback chart to allow others to add new words.",
   "close": "Close",
   "download": "Download",
-  "feedback.admin.header": "Feedback Chart",
   "feedback.admin.header.subline": "Collect feedback and display it in a chart",
   "feedback.user.button.submit": "Submit Feedback",
   "feedback.user.input.hint": "Please enter Feedback",
@@ -15,12 +14,12 @@
   "filter.all": "All categories",
   "languages.de": "German",
   "languages.en": "English",
-  "live.admin.header": "Live Text Chart",
   "live.admin.header.subline": "Enter text to count and categorize words",
   "live.filter": "Filter",
   "live.text.button.submit": "Add Text",
   "live.text.loading": "Request is being processed...",
   "live.text.success": "Words added. Depending on the chosen filter they might not be visible yet.",
+  "live.text.toggler.tokenizerActive": "Tag grammar cateogries of input",
   "sharemodal.title": "Share",
   "start.buttons.feedback": "Feedback",
   "start.buttons.live": "Text",
@@ -32,35 +31,12 @@
   "toolbar.buttons.clear": "Clear",
   "toolbar.buttons.colors": "Colors",
   "toolbar.buttons.danger": "Danger",
-  "toolbar.buttons.dropdown.filter.adjective": "Adjective",
-  "toolbar.buttons.dropdown.filter.adverb": "Adverb",
-  "toolbar.buttons.dropdown.filter.all": "All",
-  "toolbar.buttons.dropdown.filter.article": "Article",
-  "toolbar.buttons.dropdown.filter.conjuncture": "Conjuncture",
-  "toolbar.buttons.dropdown.filter.misc": "Misc",
-  "toolbar.buttons.dropdown.filter.none": "No filter",
-  "toolbar.buttons.dropdown.filter.noun": "Noun",
-  "toolbar.buttons.dropdown.filter.preposition": "Preposition",
-  "toolbar.buttons.dropdown.filter.pronoun": "Pronoun",
-  "toolbar.buttons.dropdown.filter.verb": "Verb",
-  "toolbar.buttons.dropdown.orientation.ninety": "Set rotation angle 90",
-  "toolbar.buttons.dropdown.orientation.zero": "Set rotation angle 0",
   "toolbar.buttons.dropdown.theme.grammar": "Change to grammatical category",
   "toolbar.buttons.dropdown.theme.grey": "Change to greyscale colors",
   "toolbar.buttons.dropdown.theme.mix": "Change to fancy colors",
-  "toolbar.buttons.orientation": "Orientation",
   "toolbar.buttons.settings": "Toggle Settings",
-  "toolbar.buttons.share": "Share",
   "toolbar.settings.language": "Language",
-  "toolbar.settings.theme.adjective": "Adjective color",
-  "toolbar.settings.theme.adverb": "Adverb color",
-  "toolbar.settings.theme.article": "Article color",
-  "toolbar.settings.theme.conjuncture": "Conjuncture color",
-  "toolbar.settings.theme.hint": "Color is used when color filter is set on setting "grammatical category"",
-  "toolbar.settings.theme.misc": "Misc color",
-  "toolbar.settings.theme.noun": "Noun color",
-  "toolbar.settings.theme.preposition": "Preposition color",
-  "toolbar.settings.theme.pronoun": "Pronoun color",
-  "toolbar.settings.theme.verb": "Verb color",
+  "toolbar.settings.rotation": "Limit rotation angle to 0°",
+  "toolbar.settings.theme.explanation": "Please select a color for each grammar category",
   "wordchart.empty": "This word chart is currently empty."
 }

frontend/lang/de.json

@@ -86,6 +86,9 @@
   "live.text.success": {
     "defaultMessage": "Wörter hinzugefügt. Je nach Filter werden Wörter ausgeblendet."
   },
+  "live.text.toggler.tokenizerActive": {
+    "defaultMessage": "Grammatik eingegebener Wörter erkennen"
+  },
   "sharemodal.title": {
     "defaultMessage": "Teilen"
   },

frontend/lang/en.json

@@ -71,6 +71,9 @@
   "live.text.success": {
     "defaultMessage": "Words added. Depending on the chosen filter they might not be visible yet."
   },
+  "live.text.toggler.tokenizerActive": {
+    "defaultMessage": "Tag grammar cateogries of input"
+  },
   "sharemodal.title": {
     "defaultMessage": "Share"
   },

frontend/lang/lang.json

@@ -17,9 +17,6 @@
   "download": {
     "defaultMessage": "Download"
   },
-  "feedback.admin.header": {
-    "defaultMessage": "Feedback Chart"
-  },
   "feedback.admin.header.subline": {
     "defaultMessage": "Collect feedback and display it in a chart"
   },
@@ -47,9 +44,6 @@
   "languages.en": {
     "defaultMessage": "English"
   },
-  "live.admin.header": {
-    "defaultMessage": "Live Text Chart"
-  },
   "live.admin.header.subline": {
     "defaultMessage": "Enter text to count and categorize words"
   },
@@ -65,6 +59,9 @@
   "live.text.success": {
     "defaultMessage": "Words added. Depending on the chosen filter they might not be visible yet."
   },
+  "live.text.toggler.tokenizerActive": {
+    "defaultMessage": "Tag grammar cateogries of input"
+  },
   "sharemodal.title": {
     "defaultMessage": "Share"
   },
@@ -98,45 +95,6 @@
   "toolbar.buttons.danger": {
     "defaultMessage": "Danger"
   },
-  "toolbar.buttons.dropdown.filter.all": {
-    "defaultMessage": "All"
-  },
-  "toolbar.buttons.dropdown.filter.none": {
-    "defaultMessage": "No filter"
-  },
-  "toolbar.buttons.dropdown.filter.noun": {
-    "defaultMessage": "Noun"
-  },
-  "toolbar.buttons.dropdown.filter.verb": {
-    "defaultMessage": "Verb"
-  },
-  "toolbar.buttons.dropdown.filter.adjective": {
-    "defaultMessage": "Adjective"
-  },
-  "toolbar.buttons.dropdown.filter.adverb": {
-    "defaultMessage": "Adverb"
-  },
-  "toolbar.buttons.dropdown.filter.article": {
-    "defaultMessage": "Article"
-  },
-  "toolbar.buttons.dropdown.filter.preposition": {
-    "defaultMessage": "Preposition"
-  },
-  "toolbar.buttons.dropdown.filter.conjuncture": {
-    "defaultMessage": "Conjuncture"
-  },
-  "toolbar.buttons.dropdown.filter.pronoun": {
-    "defaultMessage": "Pronoun"
-  },
-  "toolbar.buttons.dropdown.filter.misc": {
-    "defaultMessage": "Misc"
-  },
-  "toolbar.buttons.dropdown.orientation.ninety": {
-    "defaultMessage": "Set rotation angle 90"
-  },
-  "toolbar.buttons.dropdown.orientation.zero": {
-    "defaultMessage": "Set rotation angle 0"
-  },
   "toolbar.buttons.dropdown.theme.grammar": {
     "defaultMessage": "Change to grammatical category"
   },
@@ -146,47 +104,17 @@
   "toolbar.buttons.dropdown.theme.mix": {
     "defaultMessage": "Change to fancy colors"
   },
-  "toolbar.buttons.orientation": {
-    "defaultMessage": "Orientation"
-  },
   "toolbar.buttons.settings": {
     "defaultMessage": "Toggle Settings"
   },
-  "toolbar.buttons.share": {
-    "defaultMessage": "Share"
-  },
   "toolbar.settings.language": {
     "defaultMessage": "Language"
   },
-  "toolbar.settings.theme.article": {
-    "defaultMessage": "Article color"
-  },
-  "toolbar.settings.theme.adjective": {
-    "defaultMessage": "Adjective color"
-  },
-  "toolbar.settings.theme.adverb": {
-    "defaultMessage": "Adverb color"
-  },
-  "toolbar.settings.theme.conjuncture": {
-    "defaultMessage": "Conjuncture color"
-  },
-  "toolbar.settings.theme.pronoun": {
-    "defaultMessage": "Pronoun color"
-  },
-  "toolbar.settings.theme.preposition": {
-    "defaultMessage": "Preposition color"
-  },
-  "toolbar.settings.theme.misc": {
-    "defaultMessage": "Misc color"
-  },
-  "toolbar.settings.theme.noun": {
-    "defaultMessage": "Noun color"
-  },
-  "toolbar.settings.theme.verb": {
-    "defaultMessage": "Verb color"
+  "toolbar.settings.rotation": {
+    "defaultMessage": "Limit rotation angle to 0°"
   },
-  "toolbar.settings.theme.hint": {
-    "defaultMessage": "Color is used when color filter is set on setting "grammatical category""
+  "toolbar.settings.theme.explanation": {
+    "defaultMessage": "Please select a color for each grammar category"
   },
   "wordchart.empty": {
     "defaultMessage": "This word chart is currently empty."

frontend/src/live-chart/TextInputForm.test.tsx

@@ -41,7 +41,7 @@ describe('TestInputForm', () => {
     fireEvent.change(element, { target: { value: 'Text' } })
     fireEvent.click(screen.getByText(/Add Text/i))
 
-    expect(channel.push).toBeCalledWith('new_words', { words: 'Text', admin_url_id: 'adminId' })
+    expect(channel.push).toBeCalledWith('new_words', { words: 'Text', taggerActive: true })
   })
 
   test('pressing enter submits the form', () => {
@@ -57,6 +57,6 @@ describe('TestInputForm', () => {
 
     fireEvent.change(element, { target: { value: 'Text' } })
     fireEvent.keyPress(element, { key: 'Enter', charCode: 13 })
-    expect(channel.push).toBeCalledWith('new_words', { words: 'Text', admin_url_id: 'adminId' })
+    expect(channel.push).toBeCalledWith('new_words', { words: 'Text', taggerActive: true })
   })
 })

frontend/src/live-chart/TextInputForm.tsx

@@ -3,7 +3,7 @@ import Form from 'react-bootstrap/Form'
 import Button from 'react-bootstrap/Button'
 import Alert from 'react-bootstrap/Alert'
 import { WebsocketContext } from '../shared/PhoenixWebsocketProvider'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 
 const MAX_LENGTH = import.meta.env.VITE_NLP_WORD_TAGGER_MAX_INPUT !== undefined ? parseInt(import.meta.env.VITE_NLP_WORD_TAGGER_MAX_INPUT, 10) : 500
 
@@ -26,17 +26,23 @@ export interface Term {
 }
 
 function TextInputForm(): React.ReactElement {
+  const intl = useIntl()
   const [inputText, setInputText] = useState<string>('')
-  const { channel, adminId } = useContext(WebsocketContext)
+  const { channel } = useContext(WebsocketContext)
   const [waitingForChannelPush, setWaitingForChannelPush] = useState<boolean>(false)
   const [completedChannelPush, setCompletedChannelPush] = useState<boolean>(false)
   const [remainingTextInput, setRemainingTextInput] = useState<number>(MAX_LENGTH)
+  const [taggerActive, setTaggerActive] = useState<boolean>(true)
 
   const handleChange = (text: string): void => {
     setInputText(text)
     setRemainingTextInput(text.length < MAX_LENGTH ? MAX_LENGTH - text.length : 0)
   }
 
+  const handleToggleTaggerChange = (): void => {
+    setTaggerActive(!taggerActive)
+  }
+
   const submit = (event: React.SyntheticEvent<HTMLFormElement>): void => {
     if (channel === undefined) return
 
@@ -45,7 +51,7 @@ function TextInputForm(): React.ReactElement {
 
     setWaitingForChannelPush(true)
     setCompletedChannelPush(false)
-    channel.push('new_words', { words: inputText, admin_url_id: adminId })
+    channel.push('new_words', { words: inputText, taggerActive })
       .receive('ok', () => {
         setWaitingForChannelPush(false)
         setCompletedChannelPush(true)
@@ -79,7 +85,7 @@ function TextInputForm(): React.ReactElement {
             <Form.Control
               as="textarea"
               placeholder="Text"
-              maxLength={MAX_LENGTH}
+              maxLength={taggerActive ? MAX_LENGTH : undefined}
               onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => { handleChange((e.target as HTMLTextAreaElement).value) }}
               onKeyPress={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
                 if (e.key === 'Enter') {
@@ -94,10 +100,29 @@ function TextInputForm(): React.ReactElement {
               data-testid="test-input-control-text"
             />
           </Form.Group>
+          <Form.Check
+            type="switch"
+            checked={taggerActive}
+            onChange={(_e: React.ChangeEvent<HTMLInputElement>) => { handleToggleTaggerChange() }}
+            label={
+              intl.formatMessage(
+                {
+                  id: 'live.text.toggler.tokenizerActive',
+                  defaultMessage: 'Tag grammar cateogries of input'
+                }
+              )
+            }
+          />
           <div className="d-flex w-full">
-            <div className="flex-grow-1">{`${remainingTextInput} / ${MAX_LENGTH}`}</div>
+            { taggerActive &&
+              <div className="flex-grow-1">{`${remainingTextInput} / ${MAX_LENGTH}`}</div>
+            }
+            {
+              !taggerActive &&
+              <div className="flex-grow-1"></div>
+            }
             <div>
-              <Button type="submit" variant="primary" className="mt-1">
+              <Button type="submit" variant="secondary" className="mt-1 text-white">
                 <FormattedMessage
                   id="live.text.button.submit"
                   defaultMessage="Add Text"

frontend/src/shared/colors.ts

@@ -1,7 +1,7 @@
 const themeGreyColors: string[] = ['#080808', '#242424', '#3a3a3a', '#4f4f4f', '#646464']
 const themeMixedColors: string[] = ['#F75C03', '#D90368', '#820263', '#291720', '#04A777']
 
-export const DEFAULT_COLOR = '#666666'
+export const DEFAULT_COLOR = '#9E9E9E'
 
 export enum ColorTheme {
   Mixed,

frontend/src/shared/components/AdminOptionToolbar.tsx

@@ -13,7 +13,7 @@ interface AdminOptionToolbarProps {
   id: string | undefined
   adminId: string | undefined
   language?: string | undefined
-  filterFromServer?: string[] | undefined
+  filterFromServer?: string[]
   setWordFilter?: ((wordFilter: string[]) => void) | undefined
   setColorThemeGrey?: () => void
   setColorThemeFancy?: () => void
@@ -79,8 +79,12 @@ export function AdminOptionToolbar({ id, adminId, language, filterFromServer, se
   }
 
   const createCategoryFiltersForSmScreens = (): React.ReactNode[] => {
+    if (filterFromServer === undefined) return [<Dropdown.Item key={'filter-empty'}></Dropdown.Item>]
+
+    const normalizedFilterList = filterFromServer !== null && filterFromServer.length > 0 ? filterFromServer : ['all']
+
     return ['all', ...ALL_CATEGORIES].map((categoryName: string, index: number) => {
-      return (<Dropdown.Item key={`filter-sm-category-id-${index}`} variant="" onClick={(event) => handleFilterClick(categoryName)}>
+      return (<Dropdown.Item key={`filter-sm-category-id-${index}`} active={normalizedFilterList.includes(categoryName)} variant="" onClick={(event) => handleFilterClick(categoryName)}>
         <FormattedMessage
           id={`toolbar.buttons.dropdown.filter.${categoryName}`}
           defaultMessage={categoryName}