Enhance Institution Type Display with Standardized Components and Sty…

frontend/package.json

@@ -21,7 +21,7 @@
     "@types/react-dom": "^19.0.4",
     "@typescript-eslint/eslint-plugin": "^8.29.1",
     "@typescript-eslint/parser": "^8.29.1",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.4.1",
     "eslint": "^9.24.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-prettier": "^5.2.6",
@@ -32,6 +32,6 @@
     "prettier": "^3.5.3",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.0"
+    "vite": "^6.3.5"
   }
 }

frontend/src/components/InstitutionType.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { 
+  getInstitutionTypeDisplayName, 
+  getInstitutionTypeIcon,
+  INSTITUTION_TYPES
+} from '../constants/institutionTypes';
+
+interface InstitutionTypeProps {
+  type: string | null | undefined;
+  showIcon?: boolean;
+  className?: string;
+  showTooltip?: boolean;
+}
+
+/**
+ * A component for displaying institution types with consistent formatting and styling
+ * based on the OpenAlex institution type vocabulary.
+ * 
+ * @param props.type - The institution type (from OpenAlex)
+ * @param props.showIcon - Whether to show an icon (default: true)
+ * @param props.className - Additional CSS classes to apply
+ * @param props.showTooltip - Whether to show a tooltip with the description (default: true)
+ */
+const InstitutionType: React.FC<InstitutionTypeProps> = ({ 
+  type, 
+  showIcon = true,
+  className = '',
+  showTooltip = true
+}) => {
+  if (!type) return <span className="text-muted">N/A</span>;
+
+  // Get display name and icon from constants
+  const displayName = getInstitutionTypeDisplayName(type);
+  const icon = getInstitutionTypeIcon(type);
+
+  // Apply specific styling based on institution type
+  const typeKey = type.toLowerCase();
+  const baseClassName = `institution-type institution-type-${typeKey in INSTITUTION_TYPES ? typeKey : 'unknown'}`;
+
+  // Get description for tooltip
+  const description = typeKey in INSTITUTION_TYPES ? 
+    INSTITUTION_TYPES[typeKey].description : 
+    'Unknown institution type';
+
+  return (
+    <span 
+      className={`${baseClassName} ${className}`}
+      title={showTooltip ? description : undefined}
+    >
+      {showIcon && <span className="institution-type-icon">{icon}</span>}
+      {displayName}
+    </span>
+  );
+};
+
+export default InstitutionType; 

frontend/src/components/InstitutionTypeFilter.css

@@ -0,0 +1,41 @@
+.institution-type-filter {
+  margin: 16px 0;
+}
+
+.institution-type-filter h4 {
+  margin-bottom: 8px;
+}
+
+.institution-type-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.institution-type-filter-item {
+  cursor: pointer;
+  padding: 6px 12px;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  user-select: none;
+}
+
+.institution-type-filter-item:hover {
+  background-color: #e0e0e0;
+}
+
+.institution-type-filter-item.selected {
+  background-color: #e3f2fd;
+  border: 1px solid #2196f3;
+}
+
+/* Override the default institution type styling within filter items */
+.institution-type-filter-item .institution-type {
+  background-color: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}