#873 Add support for resource arrays in tables

.github/pull_request_template.md

@@ -1,6 +1,8 @@
-PR Checklist:
+## Related Issues
 
-- [ ] Link to related issues: #number
+closes #number
+
+## Checklist
 - [ ] Add changelog entry linking to issue, describe API changes
-- [ ] Add tests (optional)
-- [ ] (If new feature) add to description / readme
+- [ ] Add or update tests if needed
+- [ ] Update docs if needed

.vscode/settings.json

@@ -21,7 +21,6 @@
   "eslint.alwaysShowStatus": true,
   "eslint.format.enable": true,
   "eslint.lintTask.enable": true,
-  "eslint.packageManager": "pnpm",
   "eslint.quiet": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
@@ -32,6 +31,9 @@
   "eslint.workingDirectories": [
     "./data-browser",
     "./react",
-    "./lib"
-  ]
+    "./lib",
+    "./cli",
+    "./svelte"
+  ],
+  "typescript.preferences.preferTypeOnlyAutoImports": true,
 }

browser/CHANGELOG.md

@@ -12,6 +12,7 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - [#842](https://github.com/atomicdata-dev/atomic-server/issues/842) Add media picker for properties with classtype file.
 - [#850](https://github.com/atomicdata-dev/atomic-server/issues/850) Add drag & drop sorting to ResourceArray inputs.
 - [#757](https://github.com/atomicdata-dev/atomic-server/issues/757) Add drag & drop sorting to sidebar.
+- [#873](https://github.com/atomicdata-dev/atomic-server/issues/873) Add option to allow multiple resources in relation columns (Tables).
 
 ### @tomic/lib
 

browser/cli/package.json

@@ -7,7 +7,7 @@
     "prettier": "3.0.3"
   },
   "devDependencies": {
-    "typescript": "^4.8"
+    "typescript": "^5.4.5"
   },
   "description": "",
   "license": "MIT",

browser/data-browser/jest.config.cjs

@@ -1,3 +1,4 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   roots: ['<rootDir>/src'],
   testMatch: [

browser/data-browser/package.json

@@ -33,7 +33,7 @@
     "react-intersection-observer": "^9.4.1",
     "react-is": "^18",
     "react-markdown": "^8.0.3",
-    "react-pdf": "^6.2.2",
+    "react-pdf": "^8.0.2",
     "react-router": "^6.9.0",
     "react-router-dom": "^6.9.0",
     "react-virtualized-auto-sizer": "^1.0.7",
@@ -45,6 +45,7 @@
     "yamde": "^1.7.1"
   },
   "devDependencies": {
+    "vite": "^5.2.10",
     "@swc/plugin-styled-components": "^1.5.110",
     "@types/react-pdf": "^6.2.0",
     "@types/react-window": "^1.8.7",
@@ -55,8 +56,10 @@
     "types-wm": "^1.1.0",
     "vite-plugin-pwa": "^0.17.0",
     "vite-plugin-webfont-dl": "^3.9.1",
-    "workbox-cli": "^6.4.1"
+    "workbox-cli": "^6.4.1",
+    "typescript": "^5.4.5"
   },
+  "type": "module",
   "homepage": "https://atomicdata.dev/",
   "husky": {
     "hooks": {

browser/data-browser/src/components/ButtonGroup.tsx

@@ -108,7 +108,9 @@ const Label = styled.label`
   color: ${p => p.theme.colors.textLight};
   cursor: pointer;
 
-  transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
+  transition:
+    background-color 0.1s ease-in-out,
+    color 0.1s ease-in-out;
 
   input:checked + & {
     background-color: ${p => p.theme.colors.bg1};

browser/data-browser/src/components/Details.tsx

@@ -95,7 +95,8 @@ const IconButton = styled.button<IconButtonProps>`
   align-items: center;
   padding: 0.2rem;
   visibility: ${props => (props.hide ? 'hidden' : 'visible')};
-  transition: transform var(--speed) ease-in-out,
+  transition:
+    transform var(--speed) ease-in-out,
     background-color var(--speed) ease;
   transform: rotate(${props => (props.turn ? '90deg' : '0deg')});
   background-color: transparent;

browser/data-browser/src/components/Dialog/index.tsx

@@ -282,13 +282,15 @@ const StyledDialog = styled.dialog<{ $width?: CSS.Property.Width }>`
   opacity: 0;
   transform: translateY(5rem);
   // Use a transition when animating out (for some reason keyframe animations don't work on outgoing dialog).
-  transition: opacity ${ANIM_SPEED} ease-in-out,
+  transition:
+    opacity ${ANIM_SPEED} ease-in-out,
     transform ${ANIM_SPEED} ease-in-out;
 
   &::backdrop {
     background-color: rgba(0, 0, 0, 0);
     backdrop-filter: blur(0px);
-    transition: background-color ${ANIM_SPEED} ease-out,
+    transition:
+      background-color ${ANIM_SPEED} ease-out,
       backdrop-filter ${ANIM_SPEED} ease-out;
     // Make sure the browser paints the backdrop on another layer so the animation is less expensive.
     will-change: background-color, backdrop-filter;

browser/data-browser/src/components/ExternalLink.tsx

@@ -54,7 +54,11 @@ const ExternalLinkButton = styled.a`
   justify-content: center;
   color: ${props => props.theme.colors.main};
   white-space: nowrap;
-  transition: 0.1s transform, 0.1s background-color, 0.1s box-shadow, 0.1s color;
+  transition:
+    0.1s transform,
+    0.1s background-color,
+    0.1s box-shadow,
+    0.1s color;
 
   &:hover,
   &:focus-within {

browser/data-browser/src/components/IconButton/IconButton.tsx

@@ -137,7 +137,8 @@ const OutlineIconButton = styled(IconButtonBase)<ButtonStyleProps>`
     &:hover,
     &:focus-visible {
       color: ${p => p.theme.colors.main};
-      box-shadow: 0px 0px 0px 1.5px ${p => p.theme.colors.main},
+      box-shadow:
+        0px 0px 0px 1.5px ${p => p.theme.colors.main},
         ${p => p.theme.boxShadowSoft};
     }
   }

browser/data-browser/src/components/InlineFormattedResourceList.tsx

@@ -2,6 +2,8 @@ import { ResourceInline } from '../views/ResourceInline';
 
 interface InlineFormattedResourceListProps {
   subjects: string[];
+  /** Optional component to render items instead of an inline resource */
+  RenderComp?: React.FC<{ subject: string }>;
 }
 
 const formatter = new Intl.ListFormat('en-GB', {
@@ -11,6 +13,7 @@ const formatter = new Intl.ListFormat('en-GB', {
 
 export function InlineFormattedResourceList({
   subjects,
+  RenderComp,
 }: InlineFormattedResourceListProps): JSX.Element {
   // There are rare cases where a resource array can locally have an undefined value, we filter these out to prevent the formatter from throwing an error.
   const filteredSubjects = subjects.filter(subject => subject !== undefined);
@@ -22,6 +25,10 @@ export function InlineFormattedResourceList({
           return value;
         }
 
+        if (RenderComp) {
+          return <RenderComp subject={value} key={value} />;
+        }
+
         return <ResourceInline subject={value} key={value} />;
       })}
     </>

browser/data-browser/src/components/NewCard.tsx

@@ -24,7 +24,9 @@ const Thing = styled(GridCard)`
   width: 100%;
   font-size: 3rem;
   color: ${p => p.theme.colors.textLight};
-  transition: color 0.1s ease-in-out, font-size 0.1s ease-out,
+  transition:
+    color 0.1s ease-in-out,
+    font-size 0.1s ease-out,
     border-color 0.1s ease-in-out;
   &:hover,
   &:focus {

browser/data-browser/src/components/Popover.tsx

@@ -112,9 +112,8 @@ const Arrow = styled(RadixPopover.Arrow)`
   fill: ${p => p.theme.colors.bg2};
 `;
 
-const PopoverContainerContext = createContext<RefObject<HTMLDivElement>>(
-  createRef(),
-);
+const PopoverContainerContext =
+  createContext<RefObject<HTMLDivElement>>(createRef());
 
 export const PopoverContainer: FC<PropsWithChildren> = ({ children }) => {
   const popoverContainerRef = useRef<HTMLDivElement>(null);

browser/data-browser/src/components/SideBar/index.tsx

@@ -125,7 +125,9 @@ const SideBarStyled = styled.nav.attrs<SideBarStyledProps>(p => ({
   z-index: ${p => p.theme.zIndex.sidebar};
   box-sizing: border-box;
   background: ${p => p.theme.colors.bg};
-  transition: opacity 0.3s, left 0.3s;
+  transition:
+    opacity 0.3s,
+    left 0.3s;
   left: ${p => (p.exposed ? '0' : `calc(var(--width) * -1 + 0.5rem)`)};
   /* When the user is hovering, show half opacity */
   opacity: ${p => (p.exposed ? 1 : 0)};

browser/data-browser/src/components/TableEditor/ActiveCellIndicator.tsx

@@ -210,7 +210,9 @@ const Indicator = styled.div.attrs<IndicatorProps>(p => ({
   border: 2px solid ${p => p.theme.colors.main};
   pointer-events: none;
   will-change: transform, width;
-  transition: transform var(--speed) ease-out, width var(--speed) ease-out,
+  transition:
+    transform var(--speed) ease-out,
+    width var(--speed) ease-out,
     height var(--speed) ease-out;
   z-index: 1;
   background-color: ${p =>

browser/data-browser/src/components/TableEditor/Cell.tsx

@@ -136,7 +136,14 @@ export function Cell({
       setCursorMode(CursorMode.Visual);
       setActiveCell(rowIndex, columnIndex);
     },
-    [setActiveCell, columnIndex, shouldEnterEditMode, cursorMode, isActive],
+    [
+      setActiveCell,
+      columnIndex,
+      shouldEnterEditMode,
+      cursorMode,
+      isActive,
+      disabledKeyboardInteractions,
+    ],
   );
 
   const handleClick = useCallback(() => {

browser/data-browser/src/components/forms/FilePicker/FilePickerDialog.tsx

@@ -10,7 +10,7 @@ import { InputStyled, InputWrapper } from '../InputStyles';
 import { FaPlus, FaSearch } from 'react-icons/fa';
 import { core, server, useServerSearch } from '@tomic/react';
 import { styled } from 'styled-components';
-import { FilePickerItem } from './FIlePickerItem';
+import { FilePickerItem } from './FilePickerItem';
 import { Button } from '../../Button';
 import { Row } from '../../Row';
 import { useSettings } from '../../../helpers/AppSettings';

browser/data-browser/src/components/forms/FilePicker/FIlePickerItem.tsx → browser/data-browser/src/components/forms/FilePicker/FilePickerItem.tsx

@@ -41,7 +41,9 @@ const ItemCard = styled.div`
   touch-action: none;
   pointer-events: none;
   user-select: none;
-  transition: border 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
+  transition:
+    border 0.1s ease-in-out,
+    box-shadow 0.1s ease-in-out;
 `;
 
 const ItemWrapper = styled.button`

browser/data-browser/src/components/forms/NewForm/CustomCreateActions/CustomForms/NewDriveDialog.tsx

@@ -63,8 +63,8 @@ export const NewDriveDialog: FC<CustomResourceDialogProps> = ({
             parent: resource.subject,
             propVals: {
               [core.properties.shortname]: ontologyName,
-              [core.properties
-                .description]: `Default ontology for the ${name} drive`,
+              [core.properties.description]:
+                `Default ontology for the ${name} drive`,
               [core.properties.classes]: [],
               [core.properties.properties]: [],
               [core.properties.instances]: [],

browser/data-browser/src/components/forms/NewForm/CustomCreateActions/CustomForms/NewTableDialog.tsx

@@ -29,9 +29,8 @@ export const NewTableDialog: FC<NewTableDialogProps> = ({
   onClose,
 }) => {
   const store = useStore();
-  const [useExistingClass, setUseExistingClass] = useState(
-    !!initialExistingClass,
-  );
+  const [useExistingClass, setUseExistingClass] =
+    useState(!!initialExistingClass);
   const [existingClass, setExistingClass] = useState<string | undefined>(
     initialExistingClass,
   );
@@ -52,8 +51,8 @@ export const NewTableDialog: FC<NewTableDialogProps> = ({
         isA: core.classes.class,
         propVals: {
           [core.properties.shortname]: stringToSlug(name),
-          [core.properties
-            .description]: `Represents a row in the ${name} table`,
+          [core.properties.description]:
+            `Represents a row in the ${name} table`,
           [core.properties.recommends]: [core.properties.name],
         },
       });

browser/data-browser/src/components/forms/SearchBox/SearchBox.tsx

@@ -129,16 +129,17 @@ export function SearchBox({
   const openLink =
     !value || selectedResource.error
       ? '#'
-      : constructOpenURL(selectedResource.getSubject());
+      : constructOpenURL(selectedResource.subject);
 
-  const navigateToSelectedResource: MouseEventHandler<HTMLAnchorElement> =
-    e => {
-      e.preventDefault();
-      navigate(openLink);
-    };
+  const navigateToSelectedResource: MouseEventHandler<
+    HTMLAnchorElement
+  > = e => {
+    e.preventDefault();
+    navigate(openLink);
+  };
 
   const title = selectedResource.error
-    ? selectedResource.getSubject()
+    ? selectedResource.subject
     : selectedResource.title;
 
   return (

browser/data-browser/src/views/Card/ResourceCardTitle.tsx

@@ -11,21 +11,22 @@ interface ResourceCardTitleProps {
   resource: Resource;
 }
 
-export const ResourceCardTitle: FC<PropsWithChildren<ResourceCardTitleProps>> =
-  ({ resource, children }) => {
-    const [isA] = useArray(resource, core.properties.isA);
-    const Icon = getIconForClass(isA[0]);
+export const ResourceCardTitle: FC<
+  PropsWithChildren<ResourceCardTitleProps>
+> = ({ resource, children }) => {
+  const [isA] = useArray(resource, core.properties.isA);
+  const Icon = getIconForClass(isA[0]);
 
-    return (
-      <TitleRow center gap='1ch'>
-        <Icon />
-        <AtomicLink subject={resource.getSubject()}>
-          <Title subject={resource.getSubject()}>{resource.title}</Title>
-        </AtomicLink>
-        {children}
-      </TitleRow>
-    );
-  };
+  return (
+    <TitleRow center gap='1ch'>
+      <Icon />
+      <AtomicLink subject={resource.getSubject()}>
+        <Title subject={resource.getSubject()}>{resource.title}</Title>
+      </AtomicLink>
+      {children}
+    </TitleRow>
+  );
+};
 
 const Title = styled.h2<ViewTransitionProps>`
   font-size: 1.4rem;