OpenConceptLab/ocl_issues#2903 | a new user's empty project list explains the first step and offers a sample spreadsheet

Dockerfile

@@ -51,6 +51,7 @@ RUN cp public/light-favicon.svg dist/
 RUN cp public/fhir.svg dist/
 RUN cp public/openmrs_logo_white.gif dist/
 RUN cp public/mapper_landing_placeholder.png dist/
+RUN cp public/mapper_sample_lab_tests.csv dist/
 RUN cp public/FullLogo-BlackText.png dist/
 RUN cp -rf public/fontello dist/
 

public/mapper_sample_lab_tests.csv

@@ -0,0 +1,11 @@
+Code,Name,Specimen
+GLU,Glucose,Serum
+HBA1C,Hemoglobin A1c,Whole blood
+HGB,Hemoglobin,Whole blood
+CREA,Creatinine,Serum
+NA,Sodium,Serum
+K,Potassium,Serum
+CHOL,Total Cholesterol,Serum
+LDL,LDL Cholesterol,Serum
+ALT,Alanine aminotransferase,Serum
+TSH,Thyroid stimulating hormone,Serum

src/components/map-projects/MapProjects.jsx

@@ -13,6 +13,7 @@ import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
 import Paper from '@mui/material/Paper'
 import Typography from '@mui/material/Typography'
+import Link from '@mui/material/Link'
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -40,6 +41,26 @@ import QuotaDialog from '../common/QuotaDialog'
 
 const NEW_PROJECT_BLOCK_ERROR_CODES = {access: 'mapper_access_denied', projects_not_entitled: 'mapper_projects_not_entitled'}
 
+// The sample lives in ocl-docs so it can change without a Mapper release
+// (OpenConceptLab/ocl_issues#2903). The bundled copy covers networks that
+// block raw.githubusercontent.com.
+const SAMPLE_SPREADSHEET_URL = 'https://raw.githubusercontent.com/OpenConceptLab/ocl-docs/main/docs/source/oclmap/samples/mapper_sample_lab_tests.csv'
+const SAMPLE_SPREADSHEET_FALLBACK_URL = '/mapper_sample_lab_tests.csv'
+
+const getCSV = url => fetch(url).then(response => response.ok ? response.blob() : Promise.reject(response.status))
+
+const onSampleSpreadsheetClick = event => {
+  event.preventDefault()
+  getCSV(SAMPLE_SPREADSHEET_URL).catch(() => getCSV(SAMPLE_SPREADSHEET_FALLBACK_URL)).then(blob => {
+    const url = URL.createObjectURL(blob)
+    const link = Object.assign(document.createElement('a'), {href: url, download: 'mapper_sample_lab_tests.csv'})
+    document.body.appendChild(link)
+    link.click()
+    link.remove()
+    setTimeout(() => URL.revokeObjectURL(url), 1000)
+  })
+}
+
 const MapProjects = () => {
   const { t } = useTranslation();
   const history = useHistory()
@@ -200,8 +221,32 @@ const MapProjects = () => {
                 {
                   loaded && projects.length === 0 &&
                     <TableRow>
-                      <TableCell colSpan={6} align='center'>
-                        <NoResults text={t('map_project.no_projects_found')} height='300px' />
+                      <TableCell colSpan={6} align='center' sx={{padding: '0 16px', borderBottom: 'none'}}>
+                        <NoResults
+                          height='max(380px, calc(var(--app-height) - 260px))'
+                          graphicWidth='clamp(160px, min(22vw, 28vh), 360px)'
+                          text={
+                            <div style={{padding: '16px 0'}}>
+                              <Typography sx={{fontSize: '18px', color: 'surface.dark', fontWeight: 600}}>{t('map_project.no_projects_found')}</Typography>
+                              <Typography sx={{color: 'surface.dark', mt: '4px', mb: '16px'}}>{t('map_project.no_projects_hint')}</Typography>
+                              <Button
+                                variant='contained'
+                                color='primary'
+                                startIcon={<AddIcon />}
+                                href='/map-projects/new'
+                                onClick={onNewProjectClick}
+                                sx={{textTransform: 'none', mb: '12px'}}
+                              >
+                                {t('map_project.new_map_project')}
+                              </Button>
+                              <div>
+                                <Link href={SAMPLE_SPREADSHEET_FALLBACK_URL} download onClick={onSampleSpreadsheetClick} sx={{fontSize: '14px'}}>
+                                  {t('map_project.download_sample_spreadsheet')}
+                                </Link>
+                              </div>
+                            </div>
+                          }
+                        />
                       </TableCell>
                     </TableRow>
                 }

src/components/search/NoResults.jsx

@@ -2,11 +2,11 @@ import React from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
 import { useTranslation } from 'react-i18next'
 
-const NoResults = ({searchedText, height, text}) => {
+const NoResults = ({searchedText, height, text, graphicWidth}) => {
   const { t } = useTranslation()
   return (
     <div className='col-xs-12' style={{display: 'flex', height: height, alignItems: 'center', justifyContent: 'center', textAlign: 'center', flexDirection: 'column'}}>
-      <SvgIcon style={{width: "236px", height: "139px", fill: "none"}} viewBox="0 0 236 139">
+      <SvgIcon style={{width: graphicWidth || "236px", height: graphicWidth ? "auto" : "139px", aspectRatio: "236 / 139", fill: "none"}} viewBox="0 0 236 139">
         <g clipPath="url(#6uor9l0n4a)" stroke="#5E5C71" strokeMiterlimit="10" strokeDasharray="3 3">
           <path d="M46.41 138.721c25.477 0 46.13-20.661 46.13-46.147 0-25.487-20.653-46.148-46.13-46.148C20.932 46.426.279 67.087.279 92.574c0 25.486 20.653 46.147 46.13 46.147zM128.815 91.52C108.071 87.003 92.54 68.532 92.54 46.426c0-23.244 17.181-42.478 39.53-45.679M228.963 39.673c9.008-9.012 9.008-23.623 0-32.635-9.009-9.012-23.615-9.012-32.624 0-9.008 9.012-9.008 23.623 0 32.635 9.009 9.012 23.615 9.012 32.624 0zM175.319 65.712c7.841-10.046 6.056-24.547-3.987-32.39-10.042-7.843-24.538-6.058-32.378 3.988s-6.055 24.548 3.987 32.39c10.042 7.844 24.538 6.058 32.378-3.988zM211.351 105.293c4.21-12.025-2.123-25.188-14.144-29.4-12.021-4.21-25.179 2.124-29.389 14.15-4.21 12.026 2.123 25.188 14.144 29.4 12.021 4.211 25.179-2.124 29.389-14.15z"/>
         </g>

src/i18n/locales/en/translations.json

@@ -413,6 +413,8 @@
     "project_owner": "Project Owner",
     "project_name": "Project Name",
     "no_projects_found": "No projects found.",
+    "no_projects_hint": "To start, upload a .csv or .xlsx file with one row per local term you want to map.",
+    "download_sample_spreadsheet": "Download a sample spreadsheet",
     "input_data": "Input Data",
     "context": "Context",
     "context_helper": "Describe your data and setting (for example, lab orders from a district hospital in Kenya). The OCL AI Assistant uses this to tailor its recommendations.",

src/i18n/locales/es/translations.json

@@ -388,6 +388,8 @@
     "project_owner": "Propietario del Proyecto",
     "project_name": "Nombre del Proyecto",
     "no_projects_found": "No se encontraron proyectos.",
+    "no_projects_hint": "Para empezar, suba un archivo .csv o .xlsx con una fila por cada término local que desee mapear.",
+    "download_sample_spreadsheet": "Descargar una hoja de cálculo de ejemplo",
     "input_data": "Datos de Entrada",
     "context": "Contexto",
     "context_helper": "Describa sus datos y su entorno (por ejemplo, órdenes de laboratorio de un hospital distrital en Kenia). El Asistente de IA de OCL usa esto para adaptar sus recomendaciones.",

src/i18n/locales/pt-BR/translations.json

@@ -413,6 +413,8 @@
     "project_owner": "Proprietário do Projeto",
     "project_name": "Nome do Projeto",
     "no_projects_found": "Nenhum projeto encontrado.",
+    "no_projects_hint": "Para começar, carregue um arquivo .csv ou .xlsx com uma linha para cada termo local que deseja mapear.",
+    "download_sample_spreadsheet": "Baixar uma planilha de exemplo",
     "input_data": "Dados de Entrada",
     "context": "Contexto",
     "context_helper": "Descreva seus dados e o contexto (por exemplo, pedidos de laboratório de um hospital distrital no Quênia). O Assistente de IA do OCL usa isso para adaptar suas recomendações.",

src/i18n/locales/zh/translations.json

@@ -413,6 +413,8 @@
     "project_owner": "项目所有者",
     "project_name": "项目名称",
     "no_projects_found": "未找到项目。",
+    "no_projects_hint": "开始之前，请上传一个 .csv 或 .xlsx 文件，每行对应一个要映射的本地术语。",
+    "download_sample_spreadsheet": "下载示例电子表格",
     "input_data": "输入数据",
     "context": "上下文",
     "context_helper": "描述您的数据及其使用场景（例如，肯尼亚某区级医院的实验室检验申请）。OCL AI 助手会据此调整其推荐结果。",