New data model implementation

public/data/glTF-projects-data.json

@@ -1372,8 +1372,7 @@
   "link" : "https://github.com/BabylonJS/Babylon.js/tree/master/packages/dev/loaders/src/glTF",
   "task" : [ "import", "view" ],
   "type" : [ "engine" ],
-  "inputs" : [ "glTF 2.0" ],
-  "tags" : [ "Staff Picks" ]
+  "inputs" : [ "glTF 2.0" ]
 }, {
   "name" : "OSG.JS glTF loader",
   "description" : "WebGL engine",
@@ -1541,7 +1540,7 @@
   "name" : "Microsoft.glTF.CPP",
   "description" : "A C++ library for serializing and deserializing gltf/glb files.",
   "link" : "https://github.com/microsoft/glTF-SDK",
-  "language" : [ "2.0" ],
+  "language" : [ "C++" ],
   "inputs" : [ "glTF 2.0" ]
 }, {
   "name" : "Qt 3D",
@@ -2108,47 +2107,47 @@
   "link" : "https://prototechsolutions.com/3d-products/inventor/gltf-exporter/",
   "task" : [ "export" ],
   "type" : [ "plugin", "sdk" ],
-  "language" : [ "c#" ],
+  "language" : [ "C#" ],
   "outputs" : [ "glTF 2.0" ]
 }, {
   "name" : "ProtoTech glTF Exporter For Fusion 360",
   "description" : "Export Fusion 360 model to GLTF and GLB files",
   "link" : "https://prototechsolutions.com/3d-products/fusion-360/gltf-exporter/",
   "task" : [ "export" ],
   "type" : [ "plugin", "sdk" ],
-  "language" : [ "c#" ],
+  "language" : [ "C#" ],
   "outputs" : [ "glTF 2.0" ]
 }, {
   "name" : "ProtoTech glTF Exporter For Revit",
   "description" : "Export Revit design to GLTF and GLB files",
   "link" : "https://prototechsolutions.com/3d-products/revit/gltf-exporter/",
    "task" : [ "export" ],
   "type" : [ "plugin", "sdk" ],
-  "language" : [ "c#" ],
+  "language" : [ "C#" ],
   "outputs" : [ "glTF 2.0" ]
 }, {
   "name" : "ProtoTech glTF Exporter For SolidEdge",
   "description" : "Export SolidEdge model to GLTF and GLB files",
   "link" : "https://prototechsolutions.com/3d-products/solidedge/gltf-exporter/",
   "task" : [ "export" ],
   "type" : [ "plugin", "sdk" ],
-  "language" : [ "c#" ],
+  "language" : [ "C#" ],
   "outputs" : [ "glTF 2.0" ]
  }, {
   "name" : "ProtoTech glTF Exporter For SolidWorks",
   "description" : "Export Solidworks model to GLTF and GLB files",
   "link" : "https://prototechsolutions.com/3d-products/solidworks/gltf-exporter/",
   "task" : [ "export" ],
   "type" : [ "plugin", "sdk" ],
-  "language" : [ "c#" ],
+  "language" : [ "C#" ],
   "outputs" : [ "glTF 2.0" ]
 }, {
   "name" : "F3D",
   "description" : "A fast and minimalist 3D viewer",
   "link" : "https://f3d-app.github.io/f3d/",
   "task" : [ "view" ],
   "type" : [ "application" ],
-  "language" : [ "c++" ],
+  "language" : [ "C++" ],
   "inputs" : [ "glTF 2.0" ]
 }, {
   "name": "Cesium for Unreal",

public/data/glTF-projects-metadata.json

@@ -0,0 +1,45 @@
+{
+  "name": {
+    "type": "string",
+    "isArray": false
+  },
+  "link": {
+    "type": "url",
+    "isArray": false
+  },
+  "description": {
+    "type": "markdown",
+    "isArray": false
+  },
+  "tags": {
+    "task": {
+      "type": "string",
+      "isArray": true
+    },
+    "type": {
+      "type": "string",
+      "isArray": true
+    },
+    "license": {
+      "type": "string",
+      "isArray": true
+    },
+    "language": {
+      "type": "string",
+      "isArray": true
+    },
+    "inputs": {
+      "type": "string",
+      "isArray": true
+    },
+    "outputs": {
+      "type": "string",
+      "isArray": true
+    },
+    "tags": {
+      "type": "string",
+      "isArray": true
+    }
+  },
+  "filterTags": ["tags", "task", "type", "language", "license"]
+}

src/components/FilterBar.tsx

@@ -6,7 +6,6 @@ import { updateSelectedFilters } from "../store/filters/Actions";
 import FilterBarOptions from "./FilterBarOptions";
 import "./FilterBar.css";
 import FilterBarSelected from "./FilterBarSelected";
-import { ProjectFilterProperties } from "../interfaces/IProjectInfo";
 
 interface IFilterBarOwnProps {
   allowCollapse: boolean;
@@ -44,7 +43,7 @@ const FilterBar: React.FC<IFilterBarProps> = (props) => {
   const handleFilterAddClick = useCallback(
     (filter: IFilter) => (_: React.MouseEvent) => {
       selectedFilters.add(filter);
-      const options = filterOptions.get(filter.propertyName);
+      const options = filterOptions.get(filter.tagName);
       if (options) {
         const index = options.indexOf(filter);
         options.splice(index, 1);
@@ -57,7 +56,7 @@ const FilterBar: React.FC<IFilterBarProps> = (props) => {
   const handleFilterRemoveClick = useCallback(
     (filter: IFilter) => (_: React.MouseEvent) => {
       selectedFilters.delete(filter);
-      const options = filterOptions.get(filter.propertyName);
+      const options = filterOptions.get(filter.tagName);
       if (options) {
         options.push(filter);
         options.sort((f0, f1) => f0.value.localeCompare(f1.value));
@@ -70,7 +69,7 @@ const FilterBar: React.FC<IFilterBarProps> = (props) => {
   const handleFilterResetClick = useCallback(
     (_) => {
       for (const filter of selectedFilters) {
-        const options = filterOptions.get(filter.propertyName);
+        const options = filterOptions.get(filter.tagName);
         if (options) {
           options.push(filter);
         }
@@ -106,7 +105,7 @@ const FilterBar: React.FC<IFilterBarProps> = (props) => {
           <FilterBarOptions
             key={entry[0]}
             filters={entry[1]}
-            label={`Filter by ${ProjectFilterProperties.get(entry[0])}`}
+            label={`Filter by ${entry[0]}`}
             allowCollapse={allowCollapse}
             addAction={handleFilterAddClick}
           />

src/components/ProjectCard.tsx

@@ -1,4 +1,4 @@
-import { IProjectInfo, ProjectProperties } from "../interfaces/IProjectInfo";
+import { IProjectInfo } from "../interfaces/IProjectInfo";
 import ProjectDetailList from "./ProjectDetailList";
 import ProjectCardHeader from "./ProjectCardHeader";
 import "./ProjectCard.css";
@@ -23,13 +23,13 @@ const ProjectCard: React.FC<IProjectCardProps> = (props) => {
           />
         )}
         <div className="grid gap-4 md:grid-cols-3 lg:col-span-2 lg:grid-cols-4">
-          {Object.keys(project.properties).map((propName) => {
-            const items = project.properties[propName];
+          {Object.keys(project.tags).map((propName) => {
+            const items = project.tags[propName];
             return (
               shouldShowSection(items) && (
                 <ProjectDetailList
                   key={propName}
-                  header={`${ProjectProperties.get(propName)}`}
+                  header={`${propName}`}
                   items={items}
                 />
               )

src/components/ProjectList.tsx

@@ -9,7 +9,6 @@ interface IProjectListProps {
 
 const ProjectList: React.FC<IProjectListProps> = (props) => {
   const { projects } = props;
-
   return (
     <>
       {projects && projects.map((p) => <ProjectCard project={p} key={p.id} />)}

src/interfaces/IAppState.ts

@@ -1,6 +1,7 @@
 import { Document } from "flexsearch";
 import { IFilter } from "./IFilter";
 import { IProjectInfo } from "./IProjectInfo";
+import { IProjectsMetadata } from "./IProjectsMetadata";
 
 /**
  * This is the document layout used for indexing the Projects.
@@ -24,12 +25,14 @@ export interface IProjectsState {
   isFetchingProjects: boolean;
   values: IProjectInfo[];
   searchIndex?: Document<IProjectSearchDoc>;
+  isFetchingProjectsMetadata: boolean;
+  projectsMetadata?: IProjectsMetadata
 }
 
 /**
  * The part of the state that summarizes the filter options and selection.
  *
- * @property filterOptions A record that maps ProjectProperties keys to the
+ * @property filterOptions A record that maps projectsMetadata tags to the
  * list of filters that are available for this project property. These are
  * one filter object for each possible value of this property.
  * @property titleSubstring The string that was entered in the free-text search box

src/interfaces/IFilter.ts

@@ -1,13 +1,11 @@
 export interface IFilter {
-  propertyName: string;
+  tagName: string;
   value: string;
-  // selected: boolean;
 }
 
-export function createNewFilter(propertyName: string, value: string): IFilter {
+export function createNewFilter(tagName: string, value: string): IFilter {
   return {
-    propertyName,
+    tagName,
     value,
-    // selected: false
   };
 }

src/interfaces/IProjectInfo.ts

@@ -1,68 +1,22 @@
-// Aliases as these are the four possible types of filters.
-type ProjectTask = string;
-type ProjectType = string;
-type ProjectLanguage = string;
-type ProjectLicense = string;
-type ProjectTag = string;
-
-/**
- * TODO_GENERALIZATION:
- *
- * The IProjectInfo COULD already be an entity description generated
- * using https://github.com/typeorm/typeorm, but
- * - we don't know yet how persistence will be implemented
- * - the entities have to be dynamic in terms of the "columns"
- * But instances of the IProjectInfo could probably be mapped to
- * actual TypeORM entities in the persistence layer, while
- * the UI solely operates on the IProjectInfo.
- *
- * The ProjectProperties and ProjectFilterProperties are the
- * point of configuration for different project types. For now
- * they are hard-coded here.
- */
-
-/**
- * The map of keys for the IProjectInfo#properties map,
- * mapped to a human-readable form that is shown in the UI
- */
-export const ProjectProperties = new Map<string, string>([
-  ["task", "Task"],
-  ["license", "License"],
-  ["type", "Type"],
-  ["language", "Language"],
-  ["inputs", "Inputs"],
-  ["outputs", "Outputs"],
-  ["tags", "Tags"],
-]);
-
-/**
- * A map defining the ProjectProperties by which the projects
- * can be filtered, which is a subset of the ProjectProperties 
- */
-export const ProjectFilterProperties = new Map<string, string>([
-  ["tags", "Tags"],
-  ["task", "Task"],
-  ["type", "Type"],
-  ["language", "Language"],
-  ["license", "License"],
-]);
-
 export interface IProjectInfo {
   id: number;
   name: string;
   description?: string;
   link?: string;
 
-  properties: Record<string, string[]>;
+  tags: Record<string, any>;
+}
 
-  // TODO_GENERALIZATION These are supposed to be removed.
-  // Right now, they are "migrated" and written into the
-  // "properties" record in the DataService.ts
-  task?: ProjectTask[];
-  license?: ProjectLicense[];
-  type?: ProjectType[];
-  language?: ProjectLanguage[];
+export interface ILegacyProjectInfo {
+  id: number;
+  name: string;
+  description?: string;
+  link?: string;
+  task?: string[];
+  license?: string[];
+  type?: string[];
+  language?: string[];
   inputs?: string[];
   outputs?: string[];
-  tags?: ProjectTag[];
+  tags?: string[];
 }

src/interfaces/IProjectsMetadata.ts

@@ -0,0 +1,13 @@
+
+export interface IValueType {
+  type: "string" | "url" | "date" | "markdown" | "number";
+  isArray: boolean;
+}
+
+export interface IProjectsMetadata {
+  name: IValueType;
+  description: IValueType;
+  link: IValueType;
+  tags: Record<string, IValueType>;
+  filterTags: string[]
+}