Create docmap.js

docmap.js

@@ -0,0 +1,349 @@
+/* Enhanced styles for R&D DocMap Catalog */
+
+/* Document card enhancements */
+.document-item {
+  transition: all 0.3s ease;
+  border-left: 4px solid transparent;
+}
+
+.document-item:hover {
+  transform: translateX(5px);
+  background-color: #f8fafc;
+}
+
+/* Phase-specific colors */
+.document-item[data-phase="Discovery"] { border-left-color: #3b82f6; }
+.document-item[data-phase="Preclinical"] { border-left-color: #10b981; }
+.document-item[data-phase="Clinical Phase 1"] { border-left-color: #6366f1; }
+.document-item[data-phase="Clinical Phase 2"] { border-left-color: #8b5cf6; }
+.document-item[data-phase="Clinical Phase 3"] { border-left-color: #a855f7; }
+.document-item[data-phase="Clinical (All Phases)"] { border-left-color: #7c3aed; }
+.document-item[data-phase="Regulatory Submission"] { border-left-color: #ec4899; }
+.document-item[data-phase="Post-Marketing"] { border-left-color: #f59e0b; }
+.document-item[data-phase="Pre/Post-Approval"] { border-left-color: #f97316; }
+
+/* Enhanced modal styles */
+.details-tabs {
+  display: flex;
+  border-bottom: 1px solid #e5e7eb;
+  margin-bottom: 1rem;
+}
+
+.details-tab {
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.details-tab.active {
+  border-bottom-color: #3b82f6;
+  color: #1e40af;
+}
+
+.details-tab:hover:not(.active) {
+  border-bottom-color: #e5e7eb;
+}
+
+.details-content {
+  display: none;
+}
+
+.details-content.active {
+  display: block;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Dependency graph styles */
+.dependency-graph {
+  width: 100%;
+  height: 400px;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+/* Flow card styles */
+.flow-card {
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  background-color: white;
+}
+
+.flow-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  border-color: #3b82f6;
+}
+
+.flow-card.active {
+  border-color: #3b82f6;
+  background-color: #eff6ff;
+}
+
+/* Loading spinner */
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  margin: 2rem auto;
+  border-radius: 50%;
+  border: 4px solid #e5e7eb;
+  border-top-color: #3b82f6;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Enhanced detail card styles for better readability */
+.detail-card {
+  background-color: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  padding: 1.25rem;
+  margin-bottom: 1rem;
+  border-left: 4px solid #3b82f6;
+}
+
+.detail-card-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 0.75rem;
+}
+
+.detail-card-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #1e40af;
+}
+
+.detail-card-badge {
+  background-color: #eff6ff;
+  color: #1e40af;
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.detail-card-section {
+  margin-bottom: 0.75rem;
+}
+
+.detail-card-label {
+  font-weight: 500;
+  color: #4b5563;
+  margin-bottom: 0.25rem;
+  display: block;
+}
+
+.detail-card-value {
+  background-color: #f9fafb;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  color: #1f2937;
+}
+
+/* Data lineage view styles */
+.lineage-container {
+  padding: 1.5rem;
+  background-color: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.lineage-filters {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.lineage-filters select {
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid #d1d5db;
+  background-color: white;
+  min-width: 200px;
+}
+
+.lineage-graph {
+  height: 600px;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+/* Template card styles */
+.template-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  background-color: white;
+  transition: all 0.3s ease;
+  margin-bottom: 1rem;
+}
+
+.template-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.template-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 0.75rem;
+}
+
+.template-header h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1e3a8a;
+  margin: 0;
+}
+
+.template-badge {
+  background-color: #eff6ff;
+  color: #1e40af;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+}
+
+.template-description {
+  font-size: 0.875rem;
+  color: #4b5563;
+  margin-bottom: 0.75rem;
+}
+
+.template-sections {
+  background-color: #f9fafb;
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.template-section {
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px dashed #e5e7eb;
+}
+
+.template-section:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.template-section-title {
+  font-weight: 500;
+  color: #1f2937;
+  font-size: 0.875rem;
+}
+
+.template-section-description {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-top: 0.25rem;
+}
+
+.template-metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.template-metadata-item {
+  display: flex;
+  align-items: center;
+  font-size: 0.75rem;
+  color: #6b7280;
+  padding: 0.25rem 0.5rem;
+  background-color: #f3f4f6;
+  border-radius: 0.25rem;
+}
+
+.template-metadata-item i {
+  margin-right: 0.375rem;
+  color: #4b5563;
+}
+
+/* Section lineage specific styles */
+.section-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+  margin-bottom: 0.75rem;
+  background-color: white;
+  transition: all 0.2s ease;
+}
+
+.section-card:hover {
+  background-color: #f9fafb;
+  cursor: pointer;
+}
+
+.section-card-title {
+  font-weight: 600;
+  color: #1e40af;
+  margin-bottom: 0.25rem;
+}
+
+.section-card-document {
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.section-input {
+  font-size: 0.75rem;
+  color: #4b5563;
+  margin-top: 0.25rem;
+}
+
+.section-input-name {
+  font-weight: 500;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .details-tabs {
+    overflow-x: auto;
+    white-space: nowrap;
+    padding-bottom: 0.5rem;
+  }
+  
+  .lineage-filters {
+    flex-direction: column;
+  }
+  
+  .lineage-filters select {
+    width: 100%;
+  }
+  
+  .detail-card-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .detail-card-badge {
+    margin-top: 0.5rem;
+  }
+}