@arpproject/recrate 0.1.2

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

@@ -0,0 +1,215 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { Select, Input, Button, Typography } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+import debounce from 'lodash/debounce';
+import { CrateManagerContext, LookupsContext } from '../Shell';
+import { useStateStore } from '../store';
+import { Lookup, wrapPromise } from './auto-complete.lib';
+
+interface AutoCompleteProps {
+  type: string;
+  onLinkEntity: (data: { json: any }) => void;
+  onCreateEntity: (data: { json: any }) => void;
+}
+
+interface MatchGroup {
+  label: string;
+  entities: any[];
+}
+
+const AutoComplete: React.FC<AutoCompleteProps> = ({ type, onLinkEntity, onCreateEntity }) => {
+  const { t } = useTranslation();
+  const crateManager = useContext(CrateManagerContext);
+  const lookupHandler = useContext(LookupsContext);
+  const state = useStateStore();
+
+  const [loading, setLoading] = useState(false);
+  const [selection, setSelection] = useState<any>(null);
+  const [matches, setMatches] = useState<MatchGroup[]>([]);
+  const [inputValue, setInputValue] = useState('');
+
+  const promiseTimeout = 2500;
+
+  const querySearch = async (queryString: string) => {
+    setLoading(true);
+
+    const lookup = new Lookup({
+      config: crateManager?.profile?.lookup,
+      lookup: lookupHandler,
+      crateManager,
+    });
+
+    const newEntity = queryString ? [
+      {
+        type: 'new',
+        '@id': queryString,
+        '@type': type,
+        name: queryString,
+      },
+    ] : [];
+
+    const lookups = [];
+
+    if (crateManager?.getEntities) {
+      lookups.push(wrapPromise(lookup.getEntities(type, queryString), promiseTimeout));
+    }
+
+    if (lookupHandler?.dataPacks) {
+      lookups.push(
+        wrapPromise(lookup.dataPacks(type, queryString), promiseTimeout, {
+          reason: 'External Lookup Timeout',
+        })
+      );
+    }
+
+    if (lookupHandler?.entityTemplates) {
+      lookups.push(
+        wrapPromise(lookup.entityTemplates(type, queryString), promiseTimeout, {
+          reason: 'External Lookup Timeout',
+        })
+      );
+    }
+
+    if (lookupHandler?.entities) {
+      lookups.push(
+        wrapPromise(lookup.entities(type, queryString), promiseTimeout, {
+          reason: 'External Lookup Timeout',
+        })
+      );
+    }
+
+    if (['Organisation', 'Organization'].includes(type) || type === 'ANY') {
+      lookups.push(
+        wrapPromise(lookup.ror(queryString), promiseTimeout, {
+          reason: 'ROR Lookup Timeout',
+        })
+      );
+    }
+
+    const responses = await Promise.all(lookups);
+    const newMatches: MatchGroup[] = [];
+
+    responses.forEach((response) => {
+      if (response.endpoint === 'internal' && response.documents?.length) {
+        newMatches.push({
+          label: t('associate_existing_entity'),
+          entities: response.documents.map((e) => ({ ...e, type: 'internal' })).slice(0, 5),
+        });
+      } else if (response.endpoint === 'templates' && response.documents?.length) {
+        newMatches.push({
+          label: t('associate_entity_from_template'),
+          entities: response.documents.map((entity) => ({
+            ...entity,
+            type: 'template',
+          })),
+        });
+      } else if (response.endpoint === 'ror' && response.documents?.length) {
+        newMatches.push({
+          label: t('associate_organization_from_ror'),
+          entities: response.documents.map((entity) => ({ ...entity, type: 'ror' })),
+        });
+      } else if (response.endpoint === 'entities' && response.documents?.length) {
+        newMatches.push({
+          label: t('associate_user_created_entity'),
+          entities: response.documents.map((entity) => ({ ...entity, type: 'datapack' })),
+        });
+      } else if (response.endpoint === 'datapacks' && response.documents?.length) {
+        newMatches.push({
+          label: t('associate_from_datapack'),
+          entities: response.documents.map((entity) => ({ ...entity, type: 'datapack' })),
+        });
+      }
+    });
+
+    if (type !== 'ANY') {
+      newMatches.push({
+        label: t('create_new_entity'),
+        entities: newEntity,
+      });
+    }
+
+    setMatches(newMatches);
+    setLoading(false);
+  };
+
+  const debouncedQuerySearch = debounce(querySearch, 1000, { leading: true });
+
+  useEffect(() => {
+    querySearch('');
+  }, [type]);
+
+  const handleSelect = (value: string, option: any) => {
+    const entity = option.entity;
+    if (entity) {
+      const updatedEntity = {
+        ...entity,
+        '@type': entity['@type'].split(', ').map((t: string) => t.trim()),
+      };
+
+      if (entity?.type === 'internal') {
+        onLinkEntity({ json: updatedEntity });
+      } else {
+        onCreateEntity({ json: updatedEntity });
+      }
+    }
+    setSelection(null);
+  };
+
+  const renderOption = (option: any) => {
+    const entity = option.entity;
+    if (!entity) return null;
+
+    if (entity.type === 'new') {
+      return (
+        <Button 
+          size="middle"
+          variant="solid"
+          color="green"
+          block 
+          icon={<PlusOutlined />}
+        >
+          {t('create_new_of_type', { type: entity['@type'] })}: {entity.name}
+        </Button>
+      );
+    } else if (entity.type === 'datapack') {
+      return (
+        <div className="flex flex-row space-x-2">
+          <Typography.Text>{entity['@type']}:</Typography.Text>
+          <Typography.Text>{entity.name} ({entity['@id']})</Typography.Text>
+        </div>
+      );
+    } else {
+      return (
+        <div className="flex flex-row space-x-2">
+          <Typography.Text>{entity['@type']}:</Typography.Text>
+          <Typography.Text>{entity.name || entity['@id']}</Typography.Text>
+        </div>
+      );
+    }
+  };
+
+  return (
+    <div className={loading ? 'opacity-50' : ''}>
+      <Select
+        showSearch
+        size="middle"
+        value={selection}
+        placeholder={t('select_existing_or_create_new') || 'select an existing entity or create a new one'}
+        defaultActiveFirstOption={false}
+        filterOption={false}
+        onSearch={debouncedQuerySearch}
+        onChange={handleSelect}
+        notFoundContent={loading ? 'Loading...' : 'No results'}
+        options={matches.flatMap((group) => [
+          { label: <Typography.Text strong>{group.label}</Typography.Text>, options: group.entities.map(entity => ({ label: renderOption({ entity }), value: entity['@id'], entity })) }
+        ]).flatMap(group => [
+          { label: group.label, options: group.options }
+        ])}
+        optionRender={(option) => option.label}
+      />
+    </div>
+  );
+};
+
+export default AutoComplete;

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

@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import { Button, Select, Input, Typography, Flex } from 'antd';
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+
+interface BulkAddProps {
+  types: string | string[];
+  primitives: string[];
+  onCreateEntity: (data: { json: any }) => void;
+}
+
+interface DataRow {
+  id: string;
+  name: string;
+}
+
+const BulkAdd: React.FC<BulkAddProps> = ({ types, primitives, onCreateEntity }) => {
+  const { t } = useTranslation();
+  const [selectedType, setSelectedType] = useState<string>('');
+  const [data, setData] = useState<DataRow[]>([
+    { id: '', name: '' },
+    { id: '', name: '' },
+    { id: '', name: '' },
+    { id: '', name: '' },
+    { id: '', name: '' },
+  ]);
+
+  const availableTypes = Array.isArray(types) 
+    ? types.filter(t => !primitives.includes(t) && t !== 'ANY')
+    : [];
+
+  const addRow = () => {
+    setData([...data, { id: '', name: '' }]);
+  };
+
+  const deleteRow = (index: number) => {
+    setData(data.filter((_, idx) => idx !== index));
+  };
+
+  const updateRow = (index: number, field: keyof DataRow, value: string) => {
+    const newData = [...data];
+    newData[index] = { ...newData[index], [field]: value };
+    setData(newData);
+  };
+
+  const createEntities = () => {
+    data.forEach(entity => {
+      if (entity.id && entity.name) {
+        onCreateEntity({
+          json: {
+            '@id': entity.id,
+            '@type': selectedType,
+            name: entity.name,
+          },
+        });
+      }
+    });
+  };
+
+  return (
+    <div className="flex flex-col space-y-2 m-1">
+      <Typography.Title level={5} className="my-1 text-lg text-center">
+        Note beforehand: This does not lookup existing entities.
+      </Typography.Title>
+      
+      <div>
+        <Typography.Text>@type</Typography.Text>
+        <Select
+          value={selectedType}
+          onChange={(value) => setSelectedType(value as string)}
+          style={{ width: '100%' }}
+          placeholder="Select a type"
+          size='middle'
+        >
+          <Select.Option value="">Select a type</Select.Option>
+          {availableTypes.map((type) => (
+            <Select.Option key={type} value={type}>
+              {type}
+            </Select.Option>
+          ))}
+        </Select>
+      </div>
+
+      <Flex className="flex-row space-x-1">
+        <div className="w-1/2">@id</div>
+        <div className="w-1/2">name</div>
+        <div className="w-12"></div>
+      </Flex>
+
+      {data.map((row, idx) => (
+        <Flex key={idx} className="flex-row space-x-1">
+          <Input
+            size='small'
+            value={row.id}
+            onChange={(e) => updateRow(idx, 'id', e.target.value)}
+            style={{ flex: 1 }}
+          />
+          <Input
+            size='small'
+            value={row.name}
+            onChange={(e) => updateRow(idx, 'name', e.target.value)}
+            style={{ flex: 1 }}
+          />
+          <Button
+            danger
+            variant='solid'
+            color='red'
+            onClick={() => deleteRow(idx)}
+            icon={<DeleteOutlined />}
+          />
+        </Flex>
+      ))}
+
+      <Flex justify="space-between">
+        <Button
+          type="primary"
+          onClick={addRow}
+          icon={<PlusOutlined />}
+        >
+          Add row
+        </Button>
+        <Button
+          size='middle'
+          variant='solid'
+          color='green'
+          onClick={createEntities}
+          disabled={!selectedType}
+        >
+          Create these entities
+        </Button>
+      </Flex>
+    </div>
+  );
+};
+
+export default BulkAdd;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Button } from 'antd';
+import { DeleteOutlined, LinkOutlined } from '@ant-design/icons';
+
+interface DeletePropertyProps {
+  type?: 'delete' | 'unlink';
+  property: string;
+  onDeleteProperty: () => void;
+}
+
+const DeleteProperty: React.FC<DeletePropertyProps> = ({
+  type = 'unlink',
+  property,
+  onDeleteProperty
+}) => {
+  const handleDelete = () => {
+    onDeleteProperty();
+  };
+
+  return (
+    <Button
+      danger
+      onClick={handleDelete}
+      size="middle"
+      variant='solid'
+      color='red'
+      className="describo-delete-property"
+      icon={type === 'delete' ? <DeleteOutlined /> : <LinkOutlined />}
+    />
+  );
+};
+
+export default DeleteProperty;

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

@@ -0,0 +1,83 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { Input, Flex, Typography, Drawer, Button } from 'antd';
+import { CloseOutlined, ArrowRightOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+import { ProfileManagerContext } from '../Shell';
+
+interface DialogAddPropertyProps {
+  entity: any;
+  onClose: () => void;
+  open: boolean;
+  onAddPropertyPlaceholder: (property: string) => void;
+}
+
+const DialogAddProperty: React.FC<DialogAddPropertyProps> = ({
+  entity,
+  onClose,
+  open,
+  onAddPropertyPlaceholder
+}) => {
+  const { t } = useTranslation();
+  const profileManager = useContext(ProfileManagerContext);
+  const [filter, setFilter] = useState<string>('');
+  
+  const inputs = React.useMemo(() => {
+    if (!entity?.['@type']) return [];
+    const { inputs } = profileManager.getAllInputs({ entity });
+    if (!filter) return inputs;
+    return inputs.filter((i: any) => {
+      const re = new RegExp(filter, 'i');
+      return i?.name?.match(re) || i?.help?.match(re);
+    });
+  }, [entity, filter, profileManager]);
+
+  const handlePropertySelection = (item: any) => {
+    onAddPropertyPlaceholder(item.name);
+    onClose();
+  };
+
+  return (
+    <Drawer
+      title={<Typography.Title className='m-2' level={4}>{t("add_properties_to_this_entity") || 'Add properties to this entity'}</Typography.Title>}
+      placement="left"
+      onClose={onClose}
+      open={open}
+      width={600} // Equivalent to minWidth: '600px'
+    >
+      <Flex vertical className="h-full">
+        <Flex vertical gap={16} className="overflow-auto flex-grow">
+          <Input.Search
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            placeholder={t('filter_attribute_set') || 'Filter the attribute set'}
+            size="middle"
+          />
+          {inputs.map((item: any, idx: number) => (
+            <div
+              key={idx}
+              className="cursor-pointer p-2 hover:bg-blue-100 hover:rounded active:bg-blue-400"
+              onClick={() => handlePropertySelection(item)}
+            >
+              <Flex vertical className="text-black">
+                <Flex align="center" gap={4} className="border-b border-gray-700">
+                  {item.label ? (
+                    <Typography.Text className="text-nowrap">{item.label}</Typography.Text>
+                  ) : (
+                    <Typography.Text className="text-black">{item.name}</Typography.Text>
+                  )}
+                  <ArrowRightOutlined />
+                  <Typography.Text className="text-balance">
+                    {Array.isArray(item.type) ? item.type.join(', ') : item.type || ''}
+                  </Typography.Text>
+                </Flex>
+                <Typography.Text type="secondary" className="w-full">{item.help}</Typography.Text>
+              </Flex>
+            </div>
+          ))}
+        </Flex>
+      </Flex>
+    </Drawer>
+  );
+};
+
+export default DialogAddProperty;

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

@@ -0,0 +1,136 @@
+import React, { useState, useContext, useMemo } from 'react';
+import { Input, Select, Pagination, Flex, Drawer, Typography, Button, Card } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+import { compact } from 'lodash';
+import { CrateManagerContext } from '../Shell';
+import ItemLink from './ItemLink';
+
+interface DialogBrowseEntitiesProps {
+  onClose: () => void;
+  open: boolean;
+  onLoadEntity: (entity: any) => void;
+}
+
+const DialogBrowseEntities: React.FC<DialogBrowseEntitiesProps> = ({
+  onClose,
+  open,
+  onLoadEntity
+}) => {
+  const { t } = useTranslation();
+  const crateManager = useContext(CrateManagerContext);
+  const [data, setData] = useState({
+    filterInputModel: '',
+    pageSize: 10,
+    currentPage: 1,
+    total: 0,
+    query: '',
+    selectedEntityType: undefined as string | undefined,
+  });
+
+  const entityTypes = useMemo(() => 
+    crateManager.getEntityTypes(), [crateManager]);
+
+  const entities = useMemo(() => {
+    const offset = (data.currentPage - 1) * data.pageSize;
+    let entities;
+    
+    if (data.query) {
+      entities = [
+        ...crateManager.getEntities({
+          type: data.selectedEntityType,
+          query: data.query,
+          limit: data.pageSize,
+        }),
+      ];
+    } else {
+      entities = [...crateManager.getEntities({ type: data.selectedEntityType })];
+    }
+    
+    entities = compact(entities);
+    setData(prev => ({ ...prev, total: entities.length }));
+    return entities.slice(offset, offset + data.pageSize);
+  }, [data.currentPage, data.pageSize, data.query, data.selectedEntityType, crateManager]);
+
+  const handleLoadEntity = (entity: any) => {
+    onLoadEntity({ id: entity['@id'] });
+    onClose();
+};
+
+  return (
+    <Drawer
+      title={<Typography.Title className='m-2' level={4}>{t('browse_entities') || 'Browse Entities'}</Typography.Title>}
+      placement="right"
+      onClose={onClose}
+      open={open}
+      width={600} // Equivalent to minWidth: '600px'
+    >
+      <Flex vertical className="h-full">
+        <Flex vertical gap={16} className="overflow-auto flex-grow">
+          <Pagination
+            current={data.currentPage}
+            pageSize={data.pageSize}
+            total={data.total}
+            onChange={(page, pageSize) => setData(prev => ({ ...prev, currentPage: page, pageSize: pageSize }))}
+            size="default"
+            showSizeChanger={false}
+          />
+          <Flex gap={8}>
+            <Select
+              value={data.selectedEntityType || undefined}
+              onChange={(value) => setData(prev => ({ ...prev, selectedEntityType: value as string }))}
+              style={{ minWidth: 150 }}
+              placeholder={t('filter_by_type')}
+              size="middle"
+            >
+              <Select.Option value="">{t('filter_by_type')}</Select.Option>
+              {entityTypes.map((t: string) => (
+                <Select.Option key={t} value={t}>{t}</Select.Option>
+              ))}
+            </Select>
+            <Input.Search
+              style={{ flex: 1 }}
+              size="middle"
+              value={data.filterInputModel}
+              onChange={(e) => {
+                setData(prev => ({
+                  ...prev,
+                  filterInputModel: e.target.value,
+                  currentPage: 1,
+                  query: e.target.value
+                }));
+              }}
+              placeholder={t('search_for_connection') || 'Search for a connection'}
+            />
+          </Flex>
+          <div className="flex-grow">
+            {entities.map((entity) => (
+              <div key={entity['@id']} className="mb-2">
+                <Card 
+                  style={{ 
+                    backgroundColor: '#e6f0ff',
+                    cursor: 'pointer',
+                    transition: 'background-color 0.2s',
+                    borderLeft: '3px solid #409eff'
+                  }} 
+                  hoverable
+                >
+                  <Card.Meta
+                    title={
+                      <ItemLink
+                        entity={entity}
+                        onLoadEntity={() => handleLoadEntity(entity)}
+                      />
+                    }
+                  />
+                </Card>
+              </div>
+            ))}
+          </div>
+        </Flex>
+      </Flex>
+    </Drawer>
+  );
+};
+
+export default DialogBrowseEntities;