@arpproject/recrate 0.1.2

package/src/crate-builder/RenderEntity/DialogEditContext.tsx

@@ -0,0 +1,107 @@
+import React, { useRef, useEffect, useState, useContext } from 'react';
+import {
+  Drawer,
+  Button,
+  Flex,
+  Typography,
+  Divider,
+} from 'antd';
+import { CloseOutlined, SaveOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+import { EditorView, basicSetup } from 'codemirror';
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { CrateManagerContext } from '../Shell';
+
+interface DialogEditContextProps {
+  onClose: () => void;
+  onUpdateContext: (context: any) => void;
+  open: boolean;
+}
+
+const DialogEditContext: React.FC<DialogEditContextProps> = ({
+  onClose,
+  onUpdateContext,
+  open,
+}) => {
+  const { t } = useTranslation();
+  const crateManager = useContext(CrateManagerContext);
+  const [error, setError] = useState(false);
+  const editorRef = useRef<EditorView | undefined>(undefined);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      const timeout = setTimeout(() => {
+        if (containerRef.current) {
+          const context = crateManager.getContext();
+          const initialState = EditorState.create({
+            doc: JSON.stringify(context, null, 2),
+            extensions: [basicSetup, oneDark, javascript()],
+          });
+  
+          if (editorRef.current) {
+            editorRef.current.destroy();
+          }
+  
+          editorRef.current = new EditorView({
+            state: initialState,
+            parent: containerRef.current,
+          });
+        }
+      }, 50); // Delay just enough for the drawer to render
+  
+      return () => {
+        clearTimeout(timeout);
+        editorRef.current?.destroy();
+      };
+    }
+  }, [open, crateManager]);
+
+  const handleSave = () => {
+    try {
+      const context = JSON.parse(editorRef.current?.state.doc.toString() || '');
+      onUpdateContext(context);
+      setError(false);
+      onClose();
+    } catch (error) {
+      console.error(error);
+      setError(true);
+    }
+  };
+
+  return (
+    <Drawer 
+      title={<Typography.Title className='m-2' level={4}>{t('edit_context')}</Typography.Title>}
+      placement="left" 
+      onClose={onClose}
+      open={open}
+      width={600} // Equivalent to minWidth: '600px'
+    >
+        <Divider style={{ margin: '16px 0' }} />
+
+        <div
+          ref={containerRef}
+          className="cm-editor"
+        ></div>
+
+        {error && (
+          <Typography.Text type="danger">
+            The context is not a valid JSON data structure.
+          </Typography.Text>
+        )}
+
+        <Button
+          onClick={handleSave}
+          type="primary"
+          icon={<SaveOutlined />}
+          style={{ marginTop: '16px' }}
+        >
+          {t('save_label')}
+        </Button>
+    </Drawer>
+  );
+};
+
+export default DialogEditContext;

package/src/crate-builder/RenderEntity/DialogPreviewCrate.tsx

@@ -0,0 +1,54 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { Flex, Typography, Drawer, Button } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { CrateManagerContext } from '../Shell';
+import { CloseOutlined } from '@ant-design/icons';
+
+interface DialogPreviewCrateProps {
+  onClose: () => void;
+  open: boolean;
+}
+
+const DialogPreviewCrate: React.FC<DialogPreviewCrateProps> = ({ onClose, open }) => {
+  const { t } = useTranslation();
+  const crateManager = useContext(CrateManagerContext);
+  const [crate, setCrate] = useState<any>({});
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (open) { // Only load when drawer is open
+      const loadCrate = async () => {
+        setLoading(true);
+        await new Promise(resolve => setTimeout(resolve, 400));
+        setCrate(crateManager.exportCrate());
+        setLoading(false);
+      };
+      loadCrate();
+    }
+    return () => {
+      setCrate({});
+    };
+  }, [crateManager, open]); // Removed 'key' from dependencies
+
+  return (
+    <Drawer
+      title={<Typography.Title className='m-2' level={4}>{t('preview_crate') || 'Preview Crate'}</Typography.Title>}
+      placement="left"
+      onClose={onClose}
+      open={open}
+      width={600} // Equivalent to minWidth: '600px'
+    >
+      <Flex vertical className="h-full">
+        <div className="text-sm overflow-auto flex-grow">
+          {crate['@graph'] ? (
+            <pre className="whitespace-pre-wrap">{JSON.stringify(crate, null, 2)}</pre>
+          ) : (
+            <Typography.Text>{t('preview_loading')}</Typography.Text>
+          )}
+        </div>
+      </Flex>
+    </Drawer>
+  );
+};
+
+export default DialogPreviewCrate;

package/src/crate-builder/RenderEntity/DialogSaveCrateAsTemplate.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { Flex, Input, Button, Drawer, Typography } from 'antd';
+import { SaveOutlined, CloseOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+
+interface DialogSaveCrateAsTemplateProps {
+  entity: {
+    [key: string]: any;
+  };
+  onClose: () => void;
+  open: boolean;
+  onSaveCrateTemplate: (data: { name: string }) => void;
+}
+
+const DialogSaveCrateAsTemplate: React.FC<DialogSaveCrateAsTemplateProps> = ({
+  entity,
+  onClose,
+  open,
+  onSaveCrateTemplate
+}) => {
+  const { t } = useTranslation();
+  const [crateName, setCrateName] = useState<string>('');
+
+  const handleSave = () => {
+    onSaveCrateTemplate({ name: crateName });
+    setCrateName('');
+    onClose();
+  };
+
+  return (
+    <Drawer
+      title={<Typography.Title className='m-2' level={4} style={{ margin: 0 }}>{t('save_template') || 'Save as Template'}</Typography.Title>}
+      placement="right"
+      onClose={onClose}
+      open={open}
+      width={600} // Equivalent to minWidth: '600px'
+    >
+      <Flex vertical className="h-full">
+        <Flex vertical gap={16}>
+          <Typography.Text className="text-sm">
+            {t('save_template_prompt')}
+          </Typography.Text>
+          <Input
+            value={crateName}
+            onChange={(e) => setCrateName(e.target.value)}
+            placeholder={t('provide_name_for_template') || 'Enter template name'}
+            size="middle"
+          />
+          <Flex justify="flex-end">
+            <Button
+              onClick={handleSave}
+              disabled={!crateName}
+              type="primary"
+              icon={<SaveOutlined />}
+            >
+              {t('save_label')}
+            </Button>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Drawer>
+  );
+};
+
+export default DialogSaveCrateAsTemplate;

package/src/crate-builder/RenderEntity/DialogSaveEntityTemplate.tsx

@@ -0,0 +1,87 @@
+import React, { useState, useContext, useEffect } from 'react';
+import { Flex, Radio, Button, Drawer, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { CrateManagerContext } from '../Shell';
+import { CloseOutlined, SaveOutlined } from '@ant-design/icons';
+
+interface DialogSaveEntityTemplateProps {
+  entity: {
+    '@id': string;
+    [key: string]: any;
+  };
+  onClose: () => void;
+  open: boolean;
+  onSaveEntityTemplate: (data: { resolveDepth: number }) => void;
+}
+
+const DialogSaveEntityTemplate: React.FC<DialogSaveEntityTemplateProps> = ({
+  entity,
+  onClose,
+  open,
+  onSaveEntityTemplate
+}) => {
+  const { t } = useTranslation();
+  const crateManager = useContext(CrateManagerContext);
+  const [resolveDepth, setResolveDepth] = useState<string>('0');
+
+  const [exportedEntity, setExportedEntity] = useState<any>(null);
+
+  useEffect(() => {
+    if (crateManager && entity?.['@id']) {
+      try {
+        const exported = crateManager.exportEntityTemplate({
+          id: entity['@id'],
+          resolveDepth: parseInt(resolveDepth)
+        });
+        setExportedEntity(exported);
+      } catch (error) {
+        console.error('Error exporting entity template:', error);
+      }
+    }
+  }, [crateManager, entity, resolveDepth]);
+
+  return (
+    <Drawer
+      title={<Typography.Title level={4} style={{ margin: 0 }}>{'Save Entity Template'}</Typography.Title>}
+      placement="right"
+      onClose={onClose}
+      open={open}
+      width={600} // Equivalent to minWidth: '600px'
+    >
+      <Flex vertical className="h-full">
+        <Flex vertical gap={16}>
+          <Flex gap={16} align="center">
+            <Radio.Group
+              onChange={(e) => setResolveDepth(e.target.value as string)}
+              value={resolveDepth}
+            >
+              <Radio value="0">Depth: 0</Radio>
+              <Radio value="1">Depth: 1</Radio>
+            </Radio.Group>
+            <Button
+              type="primary"
+              icon={<SaveOutlined />}
+              onClick={() => {
+                onSaveEntityTemplate({ resolveDepth: parseInt(resolveDepth) });
+                onClose();
+              }}
+            >
+              {'Save Template'}
+            </Button>
+          </Flex>
+
+          <Flex vertical className="flex-grow overflow-auto">
+            <Typography.Text strong className="mb-2">
+              {'Template Preview'}
+            </Typography.Text>
+            <div className="p-4 border rounded bg-gray-50 font-mono text-sm overflow-auto">
+              <pre className="whitespace-pre-wrap">{JSON.stringify(exportedEntity, null, 2)}</pre>
+            </div>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Drawer>
+  );
+};
+
+export default DialogSaveEntityTemplate;

package/src/crate-builder/RenderEntity/DisplayPropertyName.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import DisplayPropertyName from './DisplayPropertyName';
+
+const meta: Meta<typeof DisplayPropertyName> = {
+  component: DisplayPropertyName,
+  argTypes: {
+    label: {
+      options: [
+        'name',
+        'nameOfThing',
+        'NameOfThing',
+        'name-of-thing',
+        'foaf:name',
+        'dcterms:nameOfThing',
+        'dcterms:name-of-thing',
+      ],
+      control: { type: 'select' },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DisplayPropertyName>;
+
+export const Default: Story = {
+  args: {
+    property: 'something',
+    label: 'name',
+  },
+};

package/src/crate-builder/RenderEntity/DisplayPropertyName.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface DisplayPropertyNameProps {
+  property: string;
+  label?: string;
+  className?: string; // Add this prop
+}
+
+const DisplayPropertyName: React.FC<DisplayPropertyNameProps> = ({ 
+  property, 
+  label,
+  className = '' // Default to empty string
+}) => {
+  return (
+    <div className={`describo-property-name ${className}`}>
+      {label || property}
+    </div>
+  );
+};
+
+export default DisplayPropertyName;

package/src/crate-builder/RenderEntity/EntityId.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ExportOutlined } from '@ant-design/icons';
+import { Button, Typography } from 'antd';
+import TextComponent from '../primitives/Text';
+import { isURL } from '../CrateManager/lib';
+import { useStateStore } from '../store';
+
+interface EntityIdProps {
+  entity: {
+    '@id': string;
+    '@type': string | string[];
+  };
+  onUpdate: (data: { property: string; value: string }) => void;
+}
+
+export const EntityId: React.FC<EntityIdProps> = ({ entity, onUpdate }) => {
+  const state = useStateStore();
+
+  const handleSave = async (data: { property: string; value: string }) => {
+    onUpdate(data);
+  };
+
+  const openInNewTab = (url: string) => {
+    window.open(url, '_blank');
+  };
+
+  const isDatasetOrFile = () => {
+    const types = Array.isArray(entity['@type']) ? entity['@type'] : [entity['@type']];
+    return entity['@id'] === './' || types.some(type => ['Dataset', 'File'].includes(type));
+  };
+
+  return (
+    <div className="flex flex-row">
+      <div className="min-w-32 w-1/3 xl:w-1/5 flex flex-col describo-property-name">@id</div>
+
+      {!state.configuration?.readonly ? (
+        <div className="w-2/3 xl:w-4/5 flex flex-row describo-property-value">
+          {isURL(entity['@id']) && (
+            <Button
+              type="link"
+              icon={<ExportOutlined />}
+              onClick={() => openInNewTab(entity['@id'])}
+              title="Open in new tab"
+            />
+          )}
+          {isDatasetOrFile() ? (
+            <div>{entity['@id']}</div>
+          ) : (
+            <div className="flex-grow">
+              <TextComponent
+                property="@id"
+                value={entity['@id']}
+                onSaveProperty={handleSave}
+              />
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="w-2/3 xl:w-4/5 flex flex-row describo-property-value">
+          {isURL(entity['@id']) ? (
+            <Typography.Link className='text-large' style={{ fontSize: '1em' }} href={entity['@id']} target="_blank" rel="noopener noreferrer">
+              {entity['@id']}
+              &nbsp;<ExportOutlined />
+            </Typography.Link>
+          ) : (
+            <div>{entity['@id']}</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EntityId;

package/src/crate-builder/RenderEntity/EntityName.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import TextComponent from '../primitives/Text';
+import { useTranslation } from 'react-i18next';
+import { useStateStore } from '../store';
+
+interface EntityNameProps {
+    entity: {
+        name: string;
+        value?: string;
+    };
+    onUpdate: (data: { property: string; value: string }) => void;
+}
+
+export const EntityName: React.FC<EntityNameProps> = ({ entity, onUpdate }) => {
+    const [t, i18n] = useTranslation();
+    const state = useStateStore();
+
+    const handleSave = async (data: { property: string; value: string }) => {
+        onUpdate(data);
+    };
+
+    return (
+        <div className="flex flex-row">
+            <div className="min-w-32 w-1/3 xl:w-1/5 flex flex-col">
+                <div className="describo-property-name">{t('name_field_label')}</div>
+                <div className="text-gray-600 font-light text-xs pr-1 describo-property-help">
+                    {t('name_field_help')}
+                </div>
+            </div>
+            {!state.configuration?.readonly ? (
+                <div className="w-2/3 xl:w-4/5 flex flex-col">
+                    <div className="flex-grow">
+                        <TextComponent
+                            property="name"
+                            value={entity.name}
+                            onSaveProperty={handleSave}
+                        />
+                    </div>
+                </div>
+            ) : (
+                <div className="w-2/3 xl:w-4/5 flex flex-row">
+                    {entity.name}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default EntityName;

package/src/crate-builder/RenderEntity/EntityProperty.tsx

@@ -0,0 +1,188 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { Badge } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { isPlainObject, orderBy } from 'lodash';
+import { ProfileManagerContext, CrateManagerContext } from '../Shell';
+import { useStateStore } from '../store';
+import PropertyHelp from './PropertyHelp';
+import EntityPropertyInstance from './EntityPropertyInstance';
+import PaginateLinkedEntities from './PaginateLinkedEntities';
+import DeleteProperty from './DeleteProperty';
+import Add from './Add';
+import DisplayPropertyName from './DisplayPropertyName';
+
+interface EntityPropertyProps {
+  entity: any;
+  property: string;
+  values: any[];
+  highlightRequired?: boolean;
+  savedProperty?: boolean;
+  onLoadEntity: (data: { id: string }) => void;
+  onCreateProperty: (data: any) => void;
+  onCreateEntity: (data: any) => void;
+  onLinkEntity: (data: any) => void;
+  onSaveProperty: (data: any) => void;
+  onDeleteProperty: (data: any) => void;
+  onUnlinkEntity: (data: any) => void;
+}
+
+export const EntityProperty: React.FC<EntityPropertyProps> = ({
+  entity,
+  property,
+  values,
+  highlightRequired = false,
+  savedProperty = false,
+  onLoadEntity,
+  onCreateProperty,
+  onCreateEntity,
+  onLinkEntity,
+  onSaveProperty,
+  onDeleteProperty,
+  onUnlinkEntity
+}) => {
+  const { t } = useTranslation();
+  const profileManager = useContext(ProfileManagerContext);
+  const crateManager = useContext(CrateManagerContext);
+  const state = useStateStore();
+  const [linkInstances, setLinkInstances] = useState<any[]>([]);
+  const [simpleInstances, setSimpleInstances] = useState<any[]>([]);
+
+  const propertyDefinition = profileManager?.getPropertyDefinition({
+    property,
+    entity
+  })?.propertyDefinition;
+
+  const isValid = values.length > 0;
+  const isRequired = propertyDefinition?.required;
+  const isNotValue = propertyDefinition?.type !== 'Value';
+  const profileWarnMissingProperty = profileManager?.profile.warnMissingProperty;
+  const showAddControl = !propertyDefinition?.readonly && 
+    (propertyDefinition?.multiple || !values?.length);
+
+  // Fix: Use a JSON string representation of values to prevent infinite loops
+  const valuesString = JSON.stringify(values);
+  
+  useEffect(() => {
+    // Only sort instances when values or propertyDefinition changes
+    let simpleInsts;
+    if (propertyDefinition?.handlesMultipleValues === true) {
+      simpleInsts = values.length === 0 ? values : [values];
+    } else {
+      simpleInsts = values;
+    }
+
+    setSimpleInstances(
+      simpleInsts
+        .map((v: any, i: number) => {
+          // Special handling for boolean values and non-objects
+          if (!isPlainObject(v) || typeof v === 'boolean') {
+            return { idx: i, value: v };
+          }
+          return null;
+        })
+        .filter(Boolean)
+    );
+
+    setLinkInstances(
+      orderBy(
+        values
+          .map((v: any, i: number) => {
+            if (isPlainObject(v) && typeof v !== 'boolean') return { idx: i, value: v };
+            return null;
+          })
+          .filter(Boolean),
+        '@id'
+      )
+    );
+  }, [valuesString, propertyDefinition?.handlesMultipleValues]);
+
+  // Remove the separate sortInstances function since we've moved its logic directly into the useEffect
+  return (
+    <div
+      className={`flex flex-row flex-grow p-2 describo-property-background ${
+        highlightRequired && isRequired && !isValid ? 'bg-red-200' : ''
+      } ${savedProperty ? 'bg-green-100 transition-colors duration-1000' : ''} describo-property describo-property-name-${property}`}
+    >
+      <div className="min-w-32 w-1/3 xl:w-1/5 flex flex-col describo-property-heading">
+        <div className="flex flex-row items-center">
+          <DisplayPropertyName
+            property={property}
+            label={propertyDefinition?.label}
+            className={`inline-block ${isRequired && !isValid ? 'text-red-600' : ''}`}
+          />
+          {isRequired && !isValid && (
+            <Badge status="error" dot className="animate-pulse ml-2" />
+          )}
+        </div>
+        <PropertyHelp help={propertyDefinition?.help} />
+        {!propertyDefinition && profileWarnMissingProperty && (
+          <div className="text-red-600 text-xs">
+            ({t('not_defined_in_profile')})
+          </div>
+        )}
+      </div>
+
+      <div className="w-2/3 xl:w-4/5 flex flex-col flex-grow describo-property-value">
+        <div className="flex flex-col space-y-1">
+          {simpleInstances.map((instance) => (
+            <div key={instance.idx}>
+              {propertyDefinition?.readonly ? (
+                <div className="describo-property-value-readonly">
+                  {instance.value}
+                </div>
+              ) : (
+                <div className="flex flex-row space-x-2">
+                  <EntityPropertyInstance
+                    className="flex-grow"
+                    property={property}
+                    value={instance.value}
+                    idx={instance.idx}
+                    definition={propertyDefinition}
+                    onSaveProperty={onSaveProperty}
+                    onCreateEntity={onCreateEntity}
+                  />
+                  {isNotValue &&
+                    !state.configuration?.readonly &&
+                    (instance.value || instance.value === false) &&
+                    !instance.value?.['@id'] && (
+                      <DeleteProperty
+                        type="delete"
+                        property={property}
+                        onDeleteProperty={() => onDeleteProperty({ property, idx: instance.idx })}
+                      />
+                    )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {linkInstances.length > 0 && (
+          <PaginateLinkedEntities
+            className={simpleInstances.length && linkInstances.length ? 'mt-2' : ''}
+            entities={linkInstances}
+            property={property}
+            readonly={propertyDefinition?.readonly}
+            onLoadEntity={onLoadEntity}
+            onUnlinkEntity={onUnlinkEntity}
+          />
+        )}
+
+        {showAddControl && !state.configuration?.readonly && (
+          <Add
+            property={property}
+            definition={propertyDefinition}
+            embedded={false}
+            placeholder={propertyDefinition?.placeholder}
+            onCreateProperty={onCreateProperty}
+            onCreateEntity={onCreateEntity}
+            onLinkEntity={onLinkEntity}
+            crateManager={crateManager}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default EntityProperty;