Ontology Improvements #1008

browser/CHANGELOG.md

@@ -11,12 +11,19 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - [#992](https://github.com/atomicdata-dev/atomic-server/issues/992) Fix Searchbox overflowing when displaying long names.
 - [#999](https://github.com/atomicdata-dev/atomic-server/issues/999) Fix parseMetaTags character escape issue.
 - [#1014](https://github.com/atomicdata-dev/atomic-server/issues/1014) Fix date input always showing required error even when filled in.
+- [#1008](https://github.com/atomicdata-dev/atomic-server/issues/1005) Showcase standard properties in the resource selector
+- [#1008](https://github.com/atomicdata-dev/atomic-server/issues/1008) Add 'New Property' button to the property list in the ontology editor.
+- [#1008](https://github.com/atomicdata-dev/atomic-server/issues/1008) Fix disabled resource selectors still get highlighted on hover.
+- [#1008](https://github.com/atomicdata-dev/atomic-server/issues/1008) Add 'open' option to classes and properties in the ontology edit view.
+- [#1008](https://github.com/atomicdata-dev/atomic-server/issues/1008) Updated the look of the resource selector and made it more responsive.
+- [#1008](https://github.com/atomicdata-dev/atomic-server/issues/1008) Add info dropdowns to different sections of the ontology editor for more information about the section.
 
 ### @tomic/lib
 
 - `resource.props` is now writeable: `resource.props.name = 'New Name'`.
 - Added `store.preloadResourceTree()` method, see docs for more info.
 - Fix generated ontologies not working in a Next.js server context.
+- SEMI BREAKING CHANGE: When using generated types by cli, @tomic/lib now requires them to be generated by @tomic/cli v0.41.0 or above.
 
 ### @tomic/cli
 

browser/cli/readme.md

@@ -1,15 +1,21 @@
 _Check out [the docs here](https://docs.atomicdata.dev/js-cli)._
 
-`@tomic/cli` is an NPM tool that helps the developer with creating a front-end for their atomic data project by providing typesafety on resources.
+`@tomic/cli` is a command line tool that helps the developer with creating a front-end for their atomic data project by providing typesafety on resources.
 In atomic data you can create [ontologies](https://atomicdata.dev/class/ontology) that describe your business model.
 You can use `@tomic/cli` to generate Typscript types for these ontologies in your front-end.
 
 ```typescript
-import { Post } from './ontolgies/blog'; // <--- generated
+import { type Post } from './ontolgies/blog'; // <--- generated
 
-const myBlogpost = await store.getResourceAsync<Post>(
+const myBlogpost = await store.getResource<Post>(
   'https://myblog.com/atomic-is-awesome',
 );
 
 const comments = myBlogpost.props.comments; // string[] automatically inferred!
+
+myBlogpost.props.name = 'New title';
+myBlogpost.save();
 ```
+
+_Check out [the docs here](https://docs.atomicdata.dev/js-cli)._
+

browser/create-template/templates/sveltekit-site/src/lib/views/MenuItem/MenuItem.svelte

@@ -49,7 +49,7 @@
 		if (!button || !popover) return;
 
 		// Check if the anchor position api is supported. If so we don't need to calculate the position.
-		if (getComputedStyle(popover).getPropertyValue('--supports-position-anchor') !== 'false') {
+		if (CSS.supports('anchor-name', '--something')) {
 			return;
 		}
 
@@ -142,7 +142,6 @@
 		position-area: bottom center;
 
 		@supports not (anchor-name: --something) {
-			--supports-position-anchor: false;
 			position: fixed;
 			top: var(--top);
 			left: var(--left);

browser/data-browser/src/chunks/GraphViewer/OntologyGraph.tsx

@@ -12,7 +12,7 @@ import { buildGraph } from './buildGraph';
 import { FloatingEdge } from './FloatingEdge';
 import { useGraph } from './useGraph';
 import { useEffectOnce } from '../../hooks/useEffectOnce';
-import { toAnchorId } from '../../views/OntologyPage/toAnchorId';
+import { toAnchorId } from '../../helpers/toAnchorId';
 
 const edgeTypes = {
   floating: FloatingEdge,

browser/data-browser/src/chunks/GraphViewer/buildGraph.ts

@@ -183,6 +183,7 @@ export function applyNodeStyling(
       borderColor: theme.colors.bg2,
       color: theme.colors.text,
       borderStyle: node.data.external ? 'dashed' : 'solid',
+      opacity: node.data.external ? 0.7 : 1,
     },
   }));
 }

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

@@ -89,6 +89,8 @@ const OntologySection = ({ subject, onClassSelect }: OntologySectionProps) => {
         {resource.props.classes?.map(s => (
           <ClassButton key={s} subject={s} onClassSelect={onClassSelect} />
         ))}
+        {!resource.props.classes ||
+          (resource.props.classes.length === 0 && <span>No classes</span>)}
       </Row>
     </OutlinedSection>
   );

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

@@ -17,6 +17,7 @@ import { useDialog } from './useDialog';
 import { useControlLock } from '../../hooks/useControlLock';
 import { useDialogGlobalContext } from './DialogGlobalContextProvider';
 import { DIALOG_CONTENT_CONTAINER } from '../../helpers/containers';
+import { CurrentBackgroundColor } from '../../globalCssVars';
 
 export interface InternalDialogProps {
   show: boolean;
@@ -268,6 +269,7 @@ const fadeInBackground = keyframes`
 `;
 
 const StyledDialog = styled.dialog<{ $width?: CSS.Property.Width }>`
+  ${CurrentBackgroundColor.define(p => p.theme.colors.bg)}
   --dialog-width: min(90vw, ${p => p.$width ?? '60ch'});
 
   ${VAR_DIALOG_INNER_WIDTH}: calc(
@@ -280,7 +282,7 @@ const StyledDialog = styled.dialog<{ $width?: CSS.Property.Width }>`
   z-index: ${p => p.theme.zIndex.dialog};
   padding: ${p => p.theme.size()};
   color: ${props => props.theme.colors.text};
-  background-color: ${props => props.theme.colors.bg};
+  background-color: ${CurrentBackgroundColor.var()};
   border-radius: ${props => props.theme.radius};
   border: solid 1px ${props => props.theme.colors.bg2};
   inline-size: var(--dialog-width);

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

@@ -378,6 +378,7 @@ export function MenuItem({
 
 const StyledShortcut = styled(Shortcut)`
   margin-left: 0.3rem;
+  color: ${p => p.theme.colors.textLight};
 `;
 
 const StyledLabel = styled.span`
@@ -389,44 +390,46 @@ interface MenuItemStyledProps {
 }
 
 const MenuItemStyled = styled(Button)<MenuItemStyledProps>`
+  --menu-item-bg: ${p =>
+    p.selected ? p.theme.colors.mainSelectedBg : p.theme.colors.bg};
+  --menu-item-fg: ${p =>
+    p.selected ? p.theme.colors.mainSelectedFg : p.theme.colors.text};
   align-items: center;
   display: flex;
   gap: 0.5rem;
   width: 100%;
   text-align: left;
-  color: ${p => p.theme.colors.text};
+  color: var(--menu-item-fg);
   padding: 0.4rem 1rem;
   height: auto;
-  background-color: ${p =>
-    p.selected ? p.theme.colors.bg1 : p.theme.colors.bg};
-  text-decoration: ${p => (p.selected ? 'underline' : 'none')};
+  background-color: var(--menu-item-bg);
+  outline: none;
 
   & svg {
-    color: ${p => p.theme.colors.textLight};
+    color: var(--menu-item-fg);
   }
+
   &:hover {
-    background-color: ${p => p.theme.colors.bg1};
+    --menu-item-bg: ${p => p.theme.colors.mainSelectedBg};
+    --menu-item-fg: ${p => p.theme.colors.mainSelectedFg};
+
+    @media (prefers-contrast: more) {
+      --menu-item-bg: ${p => (p.theme.darkMode ? 'white' : 'black')};
+      --menu-item-fg: ${p => (p.theme.darkMode ? 'black' : 'white')};
+    }
   }
   &:active {
-    background-color: ${p => p.theme.colors.bg2};
+    filter: brightness(0.9);
   }
   &:disabled {
     color: ${p => p.theme.colors.textLight2};
     cursor: default;
     background-color: ${p => p.theme.colors.bg};
 
-    &:hover {
-      cursor: 'default';
-    }
-
     & svg {
       color: ${p => p.theme.colors.textLight2};
     }
   }
-
-  svg {
-    color: ${p => p.theme.colors.textLight};
-  }
 `;
 
 const ItemDivider = styled.div`
@@ -450,9 +453,13 @@ const Menu = styled.div<MenuProps>`
   width: auto;
   box-shadow: ${p => p.theme.boxShadowSoft};
   opacity: ${p => (p.isActive ? 1 : 0)};
+  ${transition('opacity')};
 
   @starting-style {
     opacity: 0;
   }
-  ${transition('opacity')};
+
+  @media (prefers-contrast: more) {
+    border: solid 1px ${p => p.theme.colors.bg2};
+  }
 `;

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

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { Row } from './Row';
 import { styled } from 'styled-components';
+import { CurrentBackgroundColor } from '../globalCssVars';
 
 interface OutlinedSectionProps {
   title: string;
@@ -39,7 +40,7 @@ const Heading = styled.h2`
   color: ${p => p.theme.colors.textLight};
   font-weight: normal;
   margin: 0;
-  background-color: ${p => p.theme.colors.bgBody};
+  background-color: ${CurrentBackgroundColor.var()};
   position: absolute;
   top: -0.5rem;
   left: ${p => p.theme.size()};

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

@@ -25,6 +25,7 @@ import {
   FaShare,
   FaTrash,
   FaPlus,
+  FaArrowUpRightFromSquare,
 } from 'react-icons/fa6';
 import { useQueryScopeHandler } from '../../hooks/useQueryScope';
 import {
@@ -50,6 +51,7 @@ export enum ContextMenuOptions {
   UseInCode = 'useInCode',
   NewChild = 'newChild',
   Export = 'export',
+  Open = 'open',
 }
 
 export interface ResourceContextMenuProps {
@@ -64,6 +66,7 @@ export interface ResourceContextMenuProps {
   /** Callback that is called after the resource was deleted */
   onAfterDelete?: () => void;
   title?: string;
+  external?: boolean;
 }
 
 /** Dropdown menu that opens a bunch of actions for some resource */
@@ -74,6 +77,7 @@ function ResourceContextMenu({
   simple,
   isMainMenu,
   title,
+  external,
   bindActive,
   onAfterDelete,
 }: ResourceContextMenuProps) {
@@ -132,10 +136,16 @@ function ResourceContextMenu({
       },
       DIVIDER,
     ),
+    ...addIf(!!external, {
+      id: ContextMenuOptions.Open,
+      label: 'Open',
+      helper: 'Open the resource',
+      onClick: () => navigate(constructOpenURL(subject)),
+      icon: <FaArrowUpRightFromSquare />,
+    }),
     ...addIf(
       canWrite,
       {
-        // disabled: !canWrite || location.pathname.startsWith(paths.edit),
         id: ContextMenuOptions.Edit,
         label: 'Edit',
         helper: 'Open the edit form.',