Project labels

package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-navigation-menu": "^1.1.3",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-scroll-area": "^1.0.4",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",

src/api/buildQuery.js

@@ -21,10 +21,10 @@ const imageCommentFields = `
 const labelFields = `
   _id
   type
-  category
   conf
   bbox
   labeledDate
+  labelId
   validation {
     validated
     validationDate
@@ -144,6 +144,13 @@ const automationRuleFields = `
   }
 `;
 
+const projectLabelFields = `
+  _id
+  name
+  color
+  reviewerEnabled
+`;
+
 const projectFields = `
   _id
   name
@@ -159,7 +166,7 @@ const projectFields = `
     ${cameraConfigFields}
   }
   labels {
-    categories
+    ${projectLabelFields}
   }
   availableMLModels 
 `
@@ -471,15 +478,52 @@ const queries = {
 
   deleteLabels: (input) => ({
     template: `
-      mutation CreateLabels($input: CreateLabelsInput!) {
-        createLabels(input: $input) {
+      mutation DeleteLabels($input: DeleteLabelsInput!) {
+        deleteLabels(input: $input) {
           isOk
         }
       }
     `,
     variables: { input: input },
   }),
 
+  createProjectLabel: (input) => ({
+    template: `
+      mutation CreateProjectLabel($input: CreateProjectLabelInput!) {
+        createProjectLabel(input: $input) {
+          label {
+            ${projectLabelFields}
+          }
+        }
+      }
+    `,
+    variables: { input: input },
+  }),
+
+  updateProjectLabel: (input) => ({
+    template: `
+      mutation UpdateProjectLabel($input: UpdateProjectLabelInput!) {
+        updateProjectLabel(input: $input) {
+          label {
+            ${projectLabelFields}
+          }
+        }
+      }
+    `,
+    variables: { input: input },
+  }),
+
+  deleteProjectLabel: (input) => ({
+    template: `
+      mutation DeleteProjectLabel($input: DeleteProjectLabelInput!) {
+        deleteProjectLabel(input: $input) {
+          message
+        }
+      }
+    `,
+    variables: { input: input },
+  }),
+
   createImageComment: (input) => ({
     template: `
       mutation CreateImageComment($input: CreateImageCommentInput!){

src/app/utils.js

@@ -121,3 +121,30 @@ export const inViewportTopHalf = (domElement) => {
   const elVerticalCenter = rect.top + rect.height / 2;
   return elVerticalCenter < viewportEquator;
 };
+
+/*
+ * returns a text color with high contrast relative to a given background color
+ */
+export const getTextColor = (bgColor) => {
+  if (!bgColor) {
+    return '$textDark';
+  }
+
+  const threshold = 0.6
+  const [red, green, blue] = [0, 2, 4].map((i) => parseInt(bgColor.slice(i + 1, i + 3), 16));
+  const l = (red * 0.299 + green * 0.587 + blue * 0.114) / 255;
+  return l < threshold ? '$loContrast' : '$textDark';
+};
+
+export const getRandomColor = () => {
+  const red = Math.floor(Math.random() * (255 - 0) + 0);
+  const green = Math.floor(Math.random() * (255 - 0) + 0);
+  const blue = Math.floor(Math.random() * (255 - 0) + 0);
+
+  const integer = ((Math.round(red) & 0xFF) << 16)
+    + ((Math.round(green) & 0xFF) << 8)
+    + (Math.round(blue) & 0xFF);
+
+  const string = integer.toString(16).toUpperCase();
+  return '000000'.substring(string.length) + string;
+}

src/assets/fontawesome.js

@@ -27,7 +27,9 @@ import {
   faSync,
   faExclamation,
   faUpload,
-  faUser
+  faUser,
+  faTag,
+  faRetweet
 } from '@fortawesome/free-solid-svg-icons';
 
 library.add(
@@ -58,5 +60,7 @@ library.add(
   faSync,
   faExclamation,
   faUpload,
-  faUser
+  faUser,
+  faTag,
+  faRetweet
 );

src/components/AlertDialog.jsx

@@ -33,6 +33,7 @@ const AlertDialogContent = styled(AD.AlertDialogContent, {
 
 const AlertDialogTitle = styled(AD.AlertDialogTitle, {
   margin: 0,
+  marginBottom: '$3',
   color: '$textDark', //mauve.mauve12,
   fontSize: '17px',
   fontWeight: '500',

src/components/Button.jsx

@@ -88,4 +88,4 @@ const Button = styled('button', {
   },
 });
 
-export default Button;
+export default Button;

src/components/CategorySelector.jsx

@@ -1,13 +1,13 @@
 import React, { forwardRef } from 'react';
 import { styled } from '../theme/stitches.config.js';
 import { useSelector, useDispatch } from 'react-redux';
-import CreatableSelect from 'react-select/creatable';
+import Select from 'react-select';
 import { createFilter } from 'react-select';
-import { selectAvailLabels } from '../features/filters/filtersSlice.js';
+import { selectSelectedProject, selectProjectLabelsLoading } from '../features/projects/projectsSlice.js';
 import { addLabelEnd } from '../features/loupe/loupeSlice.js';
 
 
-const StyledCategorySelector = styled(CreatableSelect, {
+const StyledCategorySelector = styled(Select, {
   width: '155px',
   fontFamily: '$mono',
   fontSize: '$2',
@@ -66,9 +66,10 @@ const CategorySelector = forwardRef(({
 }, ref) => {
 
   // update selector options when new labels become available
-  const createOption = (category) => ({ value: category.toLowerCase(), label: category });
-  const availLabels = useSelector(selectAvailLabels);
-  const options = availLabels.ids.map((id) => createOption(id));
+  const labelsLoading = useSelector(selectProjectLabelsLoading);
+  const createOption = (category) => ({ value: category._id, label: category.name });
+  const enabledLabels = useSelector(selectSelectedProject).labels.filter((lbl) => lbl.reviewerEnabled );
+  const options = enabledLabels.map(createOption);
   const dispatch = useDispatch();
 
   const defaultHandleBlur = (e) => dispatch(addLabelEnd());
@@ -85,14 +86,13 @@ const CategorySelector = forwardRef(({
       classNamePrefix='react-select'
       menuPlacement={menuPlacement}
       filterOption={createFilter({ matchFrom: 'start' })}
-      isLoading={availLabels.isLoading}
-      isDisabled={availLabels.isLoading}
+      isLoading={labelsLoading.isLoading}
+      isDisabled={labelsLoading.isLoading}
       onChange={handleCategoryChange}
-      onCreateOption={handleCategoryChange}
       onBlur={handleCategorySelectorBlur || defaultHandleBlur}
       options={options}
     />
   );
 });
 
-export default CategorySelector;
+export default CategorySelector;

src/components/ErrorAlerts.jsx

@@ -49,6 +49,7 @@ import {
 } from '../features/upload/uploadSlice';
 import getErrorContent from '../content/Errors';
 import { selectManageUserErrors, dismissManageUsersError } from '../features/projects/usersSlice';
+import { selectManageLabelsErrors, dismissManageLabelsError } from '../features/projects/projectsSlice';
 
 // TODO: add updateAutomationRules errors
 
@@ -69,6 +70,7 @@ const ErrorAlerts = () => {
   const redriveBatchErrors = useSelector(selectRedriveBatchErrors);
   const manageUserErrors = useSelector(selectManageUserErrors);
   const createProjectErrors = useSelector(selectCreateProjectsErrors);
+  const manageLabelsErrors = useSelector(selectManageLabelsErrors);
 
   const enrichedErrors = [
     enrichErrors(labelsErrors, 'Label Error', 'labels'),
@@ -86,6 +88,7 @@ const ErrorAlerts = () => {
     enrichErrors(redriveBatchErrors, 'Error retrying failed images in batch', 'redriveBatch'),
     enrichErrors(manageUserErrors, 'Manage user error', 'manageUsers'),
     enrichErrors(createProjectErrors, 'Error Creating Project', 'createProject'),
+    enrichErrors(manageLabelsErrors, 'Error Updating Label', 'manageLabels'),
   ];
 
   const errors = enrichedErrors.reduce((acc, curr) => (
@@ -147,6 +150,7 @@ const dismissErrorActions = {
   'uploadImageErrors': (i) => dismissExportErrorsError(i),
   'redriveBatch': (i) => dismissRedriveBatchError(i),
   'manageUsers': (i) => dismissManageUsersError(i),
+  'manageLabels': (i) => dismissManageLabelsError(i),
 };
 
 function enrichErrors(errors, title, entity) {

src/components/Form.jsx

@@ -17,7 +17,7 @@ const textInput = {
     transition: 'all 0.2s ease',
     outline: 'none',
     boxShadow: '0 0 0 3px $gray3',
-    borderColor: '$textDark',
+    // borderColor: '$textDark',
     '&:hover': {
       boxShadow: '0 0 0 3px $blue200',
       borderColor: '$blue500',

src/components/HydratedModal.jsx

@@ -9,6 +9,7 @@ import AutomationRulesForm from '../features/projects/AutomationRulesForm.jsx';
 import SaveViewForm from '../features/projects/SaveViewForm.jsx';
 import DeleteViewForm from '../features/projects/DeleteViewForm.jsx';
 import ManageUsersModal from '../features/projects/ManageUsersModal.jsx';
+import ManageLabelsModal from '../features/projects/ManageLabelsModal/index.jsx';
 import BulkUploadForm from '../features/upload/BulkUploadForm.jsx';
 import { clearExport, clearStats } from '../features/images/imagesSlice';
 import { clearErrorsExport } from '../features/upload/uploadSlice.js'
@@ -78,6 +79,12 @@ const HydratedModal = () => {
       content: <ManageUsersModal/>,
       callBackOnClose: () => dispatch(clearUsers()),
     },
+    'manage-labels-form': {
+      title: 'Manage labels',
+      size: 'md',
+      content: <ManageLabelsModal/>,
+      callBackOnClose: () => true,
+    },
   };
 
   const handleModalToggle = (content) => {

src/components/LabelPill.jsx

@@ -0,0 +1,43 @@
+import { styled } from '../theme/stitches.config.js';
+import { getTextColor } from '../app/utils.js';
+
+const Pill = styled('div', {
+  fontSize: '$2',
+  fontWeight: '$5',
+  fontFamily: '$mono',
+  padding: '$1 $3',
+  '&:not(:last-child)': {
+    marginRight: '$2',
+  },
+  minHeight: '28px',
+  borderRadius: '$3',
+  border: '1px solid rgba(0,0,0,0)',
+  transition: 'all 0.2s ease',
+  variants: {
+    focused: {
+      true: {
+        outline: 'none',
+        boxShadow: '0 0 0 3px $blue200',
+        borderColor: '$blue500',  
+      }
+    }
+  }
+});
+
+const LabelPill = ({ color, name, css, ...props }) => {
+  return (
+    <Pill
+      css={{
+        backgroundColor: `${color}1A`,
+        borderColor: color,
+        color: '$textDark', // getTextColor(color),
+        ...css
+      }}
+      {...props}
+    >
+      {name}
+    </Pill>
+  );
+}
+
+export default LabelPill;

src/components/SelectField.jsx

@@ -61,7 +61,8 @@ const SelectField = ({
   error,
   touched,
   isSearchable,
-  isMulti
+  isMulti,
+  menuPlacement='bottom'
 }) => {
 
   const handleChange = (value) => {
@@ -87,6 +88,7 @@ const SelectField = ({
         classNamePrefix='react-select'
         isSearchable={isSearchable}
         isMulti={isMulti}
+        menuPlacement={menuPlacement}
       />
       {!!error &&
         touched && (

src/components/Switch.jsx

@@ -0,0 +1,40 @@
+import * as Switch from '@radix-ui/react-switch';
+import { styled } from '../theme/stitches.config.js';
+import { blackA } from '@radix-ui/colors';
+
+export const SwitchRoot = styled(Switch.Root, {
+  all: 'unset',
+  width: 42,
+  height: 25,
+  backgroundColor: blackA.blackA6,
+  borderRadius: '9999px',
+  position: 'relative',
+  // boxShadow: `0 2px 10px ${blackA.blackA4}`,
+  border: '1px solid',
+  borderColor: '$border',
+  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+  '&:focus': {
+    transition: 'all 0.2s ease',
+    outline: 'none',
+    boxShadow: '0 0 0 3px $gray3',
+    // borderColor: '$textDark',
+    '&:hover': {
+      boxShadow: '0 0 0 3px $blue200',
+      borderColor: '$blue500',
+    },
+  },
+  '&[data-state="checked"]': { backgroundColor: 'black' },
+});
+
+export const SwitchThumb = styled(Switch.Thumb, {
+  display: 'block',
+  width: 21,
+  height: 21,
+  backgroundColor: 'white',
+  borderRadius: '9999px',
+  boxShadow: `0 2px 2px ${blackA.blackA4}`,
+  transition: 'transform 100ms',
+  transform: 'translateX(2px)',
+  willChange: 'transform',
+  '&[data-state="checked"]': { transform: 'translateX(19px)' },
+});

src/components/Tooltip.jsx

@@ -2,6 +2,7 @@ import { styled, keyframes } from '@stitches/react';
 // import { PlusIcon } from '@radix-ui/react-icons';
 // import { violet, blackA } from '@radix-ui/colors';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { blue } from '@radix-ui/colors';
 
 const slideUpAndFade = keyframes({
   '0%': { opacity: 0, transform: 'translateY(2px)' },
@@ -32,6 +33,9 @@ const StyledContent = styled(TooltipPrimitive.Content, {
   color: '$loContrast',
   backgroundColor: '$hiContrast',
   boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
+  'a': {
+    color: blue.blue9,
+  },
   '@media (prefers-reduced-motion: no-preference)': {
     animationDuration: '400ms',
     animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',