workspace page

app/.prettierrc

@@ -0,0 +1,17 @@
+{
+    "arrowParens": "avoid",
+    "bracketSpacing": true,
+    "htmlWhitespaceSensitivity": "css",
+    "insertPragma": false,
+    "jsxBracketSameLine": false,
+    "jsxSingleQuote": true,
+    "printWidth": 80,
+    "proseWrap": "always",
+    "quoteProps": "as-needed",
+    "requirePragma": false,
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "all",
+    "useTabs": false
+}

app/src/lib/api/mapping_service/index.ts

@@ -0,0 +1,110 @@
+import encodeFileToBase64 from '../../../utils/base64encoder';
+import ApiService from '../../services/api_service';
+import { MappingGraph } from './types';
+
+class MappingService {
+  private static getApiClient(): ApiService {
+    return ApiService.getInstance('default');
+  }
+
+  public static async getMappingsInWorkspace(
+    workspaceUuid: string,
+  ): Promise<MappingGraph[]> {
+    const result = await this.getApiClient().callApi<MappingGraph[]>(
+      `/workspaces/${workspaceUuid}/mapping`,
+      {
+        method: 'GET',
+        parser: data => data as MappingGraph[],
+      },
+    );
+
+    if (result.type === 'success') {
+      return result.data;
+    }
+
+    throw new Error(
+      `Failed to get mappings: ${result.message} (status: ${result.status})`,
+    );
+  }
+
+  public static async createMappingInWorkspace(
+    workspaceUuid: string,
+    name: string,
+    description: string,
+    content: File,
+    sourceType: 'csv' | 'json',
+    extra: Record<string, unknown>,
+  ): Promise<boolean> {
+    const base64EncodedFile = await encodeFileToBase64(content);
+    const data = {
+      name,
+      description,
+      content: base64EncodedFile,
+      source_type: sourceType,
+      extra,
+    };
+
+    const result = await this.getApiClient().callApi<boolean>(
+      `/workspaces/${workspaceUuid}/mapping`,
+      {
+        method: 'POST',
+        body: data,
+        parser: () => true,
+      },
+    );
+
+    if (result.type === 'success') {
+      return result.data;
+    }
+
+    throw new Error(
+      `Failed to create mapping: ${result.message} (status: ${result.status})`,
+    );
+  }
+
+  public static async deleteMappingInWorkspace(
+    workspaceUuid: string,
+    mappingUuid: string,
+  ): Promise<boolean> {
+    const result = await this.getApiClient().callApi<boolean>(
+      `/workspaces/${workspaceUuid}/mapping/${mappingUuid}`,
+      {
+        method: 'DELETE',
+        parser: () => true,
+      },
+    );
+
+    if (result.type === 'success') {
+      return result.data;
+    }
+
+    throw new Error(
+      `Failed to delete mapping: ${result.message} (status: ${result.status})`,
+    );
+  }
+
+  public static async updateMapping(
+    workspaceUuid: string,
+    mappingUuid: string,
+    data: MappingGraph,
+  ): Promise<boolean> {
+    const result = await this.getApiClient().callApi<boolean>(
+      `/workspaces/${workspaceUuid}/mapping/${mappingUuid}`,
+      {
+        method: 'PUT',
+        body: data,
+        parser: () => true,
+      },
+    );
+
+    if (result.type === 'success') {
+      return result.data;
+    }
+
+    throw new Error(
+      `Failed to update mapping: ${result.message} (status: ${result.status})`,
+    );
+  }
+}
+
+export default MappingService;

app/src/lib/api/mapping_service/types.ts

@@ -0,0 +1,43 @@
+export enum MappingNodeType {
+  ENTITY = 'entity',
+  LITERAL = 'literal',
+  URIRef = 'uri_ref',
+}
+
+export interface MappingNode {
+  id: string;
+  type: MappingNodeType.ENTITY;
+  label: string;
+  uri_pattern: string;
+  rdf_type: string[];
+}
+
+export interface MappingLiteral {
+  id: string;
+  type: MappingNodeType.LITERAL;
+  label: string;
+  value: string;
+  literal_type: string;
+}
+
+export interface MappingURIRef {
+  id: string;
+  type: MappingNodeType.URIRef;
+  uri_pattern: string;
+}
+
+export interface MappingEdge {
+  id: string;
+  source: string;
+  target: string;
+  predicate_uri: string;
+}
+
+export interface MappingGraph {
+  uuid: string;
+  name: string;
+  description: string;
+  source_id: string;
+  nodes: (MappingNode | MappingLiteral | MappingURIRef)[];
+  edges: MappingEdge[];
+}

app/src/pages/prefixes_page/components/PrefixCardItem/index.tsx

@@ -12,18 +12,14 @@ const PrefixCardItem = ({ prefix, onDelete }: PrefixCardItemProps) => {
     <CardItem
       title={prefix.prefix}
       description={
-        <>
-          <p>
-            <b>URI</b>: {prefix.uri}
-          </p>
-        </>
+        <p>
+          <b>URI</b>: {prefix.uri}
+        </p>
       }
       actions={
-        <>
-          <Button intent='danger' onClick={() => onDelete(prefix)}>
-            Delete
-          </Button>
-        </>
+        <Button intent='danger' onClick={() => onDelete(prefix)}>
+          Delete
+        </Button>
       }
     />
   );

app/src/pages/workspace_page/components/MappingCard/index.tsx

@@ -0,0 +1,34 @@
+import { Button } from '@blueprintjs/core';
+import CardItem from '../../../../components/CardItem';
+import { MappingGraph } from '../../../../lib/api/mapping_service/types';
+
+interface MappingCardItemProps {
+  mapping: MappingGraph;
+  onSelected: (mapping: MappingGraph) => void;
+  onDelete: (mapping: MappingGraph) => void;
+}
+
+const MappingCardItem = ({
+  mapping,
+  onSelected,
+  onDelete,
+}: MappingCardItemProps) => {
+  return (
+    <CardItem
+      title={mapping.name}
+      description={
+        <p>
+          <b>Description:</b> {mapping.description}
+        </p>
+      }
+      actions={
+        <>
+          <Button onClick={() => onSelected(mapping)}>Open</Button>
+          <Button onClick={() => onDelete(mapping)}>Delete</Button>
+        </>
+      }
+    />
+  );
+};
+
+export default MappingCardItem;

app/src/pages/workspace_page/index.tsx

@@ -1,9 +1,10 @@
-import { Button, ButtonGroup, Navbar } from '@blueprintjs/core';
+import { Button, ButtonGroup, Navbar, NonIdealState } from '@blueprintjs/core';
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import useWorkspacePageState from './state';
 
 import useErrorToast from '../../hooks/useErrorToast';
+import MappingCardItem from './components/MappingCard';
 import './styles.scss';
 
 type WorkspacePageURLProps = {
@@ -14,6 +15,7 @@ const WorkspacePage = () => {
   const props = useParams<WorkspacePageURLProps>();
   const navigation = useNavigate();
   const workspace = useWorkspacePageState(state => state.workspace);
+  const mappingGraphs = useWorkspacePageState(state => state.mappingGraphs);
   const isLoading = useWorkspacePageState(state => state.isLoading);
   const error = useWorkspacePageState(state => state.error);
   const loadWorkspace = useWorkspacePageState(state => state.loadWorkspace);
@@ -64,6 +66,37 @@ const WorkspacePage = () => {
           </ButtonGroup>
         </Navbar.Group>
       </Navbar>
+      <div className='workspace-page-content'>
+        {!workspace && <></>}
+        {workspace && mappingGraphs.length === 0 && (
+          <NonIdealState
+            title='No Mappings Found'
+            icon='search-around'
+            description='There are no mappings in this workspace.'
+            action={
+              <Button
+                icon='add-to-artifact'
+                intent='primary'
+                onClick={() => navigation('create')}
+              >
+                Create New Mapping
+              </Button>
+            }
+          />
+        )}
+        {workspace && mappingGraphs.length > 0 && (
+          <div className='card-grid-4'>
+            {mappingGraphs.map(mappingGraph => (
+              <MappingCardItem
+                key={mappingGraph.uuid}
+                mapping={mappingGraph}
+                onDelete={() => {}}
+                onSelected={() => {}}
+              />
+            ))}
+          </div>
+        )}
+      </div>
     </div>
   );
 };