User dataset summary char limit

packages/libs/user-datasets/src/lib/Components/UploadForm.scss

@@ -6,8 +6,16 @@
     margin: 0;
     padding: 22px 0 8px 0;
   }
-  .formSection > label {
-    font-size: medium;
+  .formSection {
+    & + & {
+      margin-block-start: 0.5em;
+    }
+    > * + * {
+      margin-block-start: 0.25em;
+    }
+    > label {
+      font-size: medium;
+    }
   }
   #data-set-name {
     min-width: 300px;
@@ -42,6 +50,7 @@
 
     li > label {
       display: grid;
+      align-items: baseline;
       grid-template-columns: auto 10em 1fr;
 
       label {

packages/libs/user-datasets/src/lib/Components/UploadForm.tsx

@@ -253,6 +253,8 @@ function UploadForm({
   const summaryRequired = summaryInputProps?.required ?? true;
   const descriptionRequired = descriptionInputProps?.required ?? false;
 
+  const summaryMaxLength = summaryInputProps?.maxLength ?? 4000;
+
   const defaultFileInputField = (
     <FileInput
       accept={
@@ -415,11 +417,13 @@ function UploadForm({
           <FieldLabel htmlFor="data-set-summary" required={summaryRequired}>
             Summary
           </FieldLabel>
-          <TextBox
+          <TextArea
             type="input"
             id="data-set-summary"
             placeholder="brief summary of the data set contents in a few sentences"
             required={summaryRequired}
+            cols={2}
+            maxLength={summaryMaxLength}
             {...summaryInputProps}
             value={summary}
             onChange={setSummary}

packages/libs/user-datasets/src/lib/Utils/types.ts

@@ -83,7 +83,7 @@ export interface DatasetUploadTypeConfigEntry<T extends string> {
       inputProps: Partial<React.InputHTMLAttributes<HTMLInputElement>>;
     };
     summary?: {
-      inputProps: Partial<React.InputHTMLAttributes<HTMLInputElement>>;
+      inputProps: Partial<React.InputHTMLAttributes<HTMLTextAreaElement>>;
     };
     description?: {
       inputProps: Partial<React.TextareaHTMLAttributes<HTMLTextAreaElement>>;

packages/libs/wdk-client/src/Components/InputControls/RadioList.css

@@ -5,8 +5,8 @@ ul.wdk-RadioList {
   margin-left: -1em;
 }
 
-ul.wdk-RadioList li {
-  margin: 0.4em 0;
+ul.wdk-RadioList li + li {
+  margin-block-start: 1em;
 }
 
 ul.wdk-RadioList li.disabled {

packages/libs/wdk-client/src/Components/InputControls/TextArea.scss

@@ -0,0 +1,12 @@
+.TextArea-container {
+  display: inline-block;
+  aside {
+    font-size: 0.95em;
+    &.warn {
+      color: orange;
+    }
+    &.error {
+      color: red;
+    }
+  }
+}

packages/libs/wdk-client/src/Components/InputControls/TextArea.tsx

@@ -9,18 +9,41 @@ import React, { TextareaHTMLAttributes } from 'react';
 import { Omit } from '../../Core/CommonTypes';
 import { wrappable } from '../../Utils/ComponentUtils';
 
+import './TextArea.scss';
+
 type InputProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
 type InputPropsWithoutOnChange = Omit<InputProps, 'onChange'>;
 type Props = InputPropsWithoutOnChange & {
   onChange: (value: string) => void;
 };
 
 let TextArea: React.FC<Props> = function (props) {
+  const { maxLength, value } = props;
+  const remainingNumChars =
+    maxLength != null && typeof value === 'string'
+      ? maxLength - value.length
+      : null;
   return (
-    <textarea
-      {...props}
-      onChange={(event) => props.onChange(event.target.value)}
-    />
+    <div className="TextArea-container">
+      <textarea
+        {...props}
+        onChange={(event) => props.onChange(event.target.value)}
+      />
+      {remainingNumChars != null && typeof value === 'string' && (
+        <aside
+          title={`You have used ${value.length.toLocaleString()} of ${maxLength?.toLocaleString()} allowed characters`}
+          className={
+            remainingNumChars === 0
+              ? 'error'
+              : remainingNumChars <= 10
+              ? 'warn'
+              : undefined
+          }
+        >
+          {remainingNumChars.toLocaleString()}
+        </aside>
+      )}
+    </div>
   );
 };
 

packages/libs/wdk-client/src/Views/Favorites/wdk-Favorites.scss

@@ -95,6 +95,7 @@
       flex-grow: 1;
     }
     textarea {
+      width: 100%;
       position: relative;
       margin-top: 10px;
       display: block;

packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/userComments/UserCommentForm/UserCommentFormView.scss

@@ -88,7 +88,7 @@
           width: calc(100ch + 4px);
         }
 
-        > div > textarea {
+        > div textarea {
           height: 5em;
           box-sizing: content-box;
           width: calc(100ch + 4px);
@@ -135,6 +135,7 @@
               margin-bottom: 0.5em;
             }
 
+            .TextArea-container,
             textarea {
               height: 5em;
               width: 100%;