Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
progedo
Data Catalogue
Commits
30aa1d2b
Commit
30aa1d2b
authored
Jan 23, 2022
by
Emmanuel Raviart
Browse files
UI: Add Debug menu (to show/hide JSON trees) in development mode.
parent
3a955c2d
Changes
17
Hide whitespace changes
Inline
Side-by-side
src/components/DatafileBody.svelte
View file @
30aa1d2b
<script lang="ts">
import JsonTree from "svelte-json-tree"
import type { FileDescription } from "$lib/accessors"
//import type { Var } from "../raw_types/codebooks"
import SimpleJsonTree from "./fields/SimpleJsonTree.svelte"
export let datafile: FileDescription
...
...
@@ -27,12 +24,5 @@
</div>
{/each}
<div class="mt-10 mb-4 text-xs text-red-400">
<b> Votre ddi pour ce fichier : </b>
</div>
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(datafile) as [key, value]}
<JsonTree {key} {value} />
{/each}
</div>
<SimpleJsonTree title="DDI pour ce fichier" value={datafile} />
</section>
src/components/NavPrimaryMenu.svelte
View file @
30aa1d2b
<script
lang=
"ts"
>
import
{
dev
}
from
"
$app/env
"
import
{
goto
}
from
"
$app/navigation
"
import
{
page
,
session
}
from
"
$app/stores
"
import
{
validateJsonResponse
}
from
"
$lib/auditors/responses
"
import
{
proposedLanguagesAndLabels
}
from
"
$lib/locales
"
import
{
language
,
localize
,
shoppingCart
}
from
"
$lib/stores
"
import
{
debugMode
,
language
,
localize
,
shoppingCart
}
from
"
$lib/stores
"
import
type
{
ZammadUser
}
from
"
$lib/server/zammad
"
export
let
display
:
string
...
...
@@ -144,6 +145,13 @@
</li>
</ul>
{#if dev}
<label>
<input
bind:checked=
{$debugMode}
type=
"checkbox"
/>
Debug
</label>
{/if}
<select
class=
"border-0 portal mx-2 text-slate-600 hover:bg-gray-100 rounded-lg w-20"
on:blur=
{(event)
=
>
setLanguage(event.target.value)}
...
...
src/components/StudyView.svelte
View file @
30aa1d2b
<script
lang=
"ts"
>
import
JsonTree
from
"
svelte-json-tree
"
import
{
page
,
session
}
from
"
$app/stores
"
import
{
// extractCodeBookText,
...
...
@@ -20,6 +18,8 @@
}
from
"
$lib/accessors
"
import
{
validateJsonResponse
}
from
"
$lib/auditors/responses
"
import
Drawer
from
"
./Drawer.svelte
"
import
CodeBookSimpleJsonTrees
from
"
./fields/CodeBookSimpleJsonTrees.svelte
"
import
SimpleJsonTree
from
"
./fields/SimpleJsonTree.svelte
"
import
MarkdownDisplayDDI
from
"
./MarkdownDisplayDDI.svelte
"
import
OrganizationName
from
"
./OrganizationName.svelte
"
import
Tabs
from
"
./Tabs.svelte
"
...
...
@@ -60,7 +60,7 @@
{
label
:
"
Documentation
"
,
symbol
:
"
documents
"
},
{
label
:
"
Accès
"
,
symbol
:
"
access
"
},
{
label
:
"
Publications
"
,
symbol
:
"
public
"
},
// { label: "Votre json entier
", symbol: "json" },
{
debugOnly
:
true
,
label
:
"
DDI
"
,
symbol
:
"
json
"
},
]
$
:
_
=
$localize
...
...
@@ -351,28 +351,7 @@
</p>
<MarkdownDisplayDDI
markdownAst=
{markdownAstSum}
{
study
}
/>
<!-- Codebook extract for Description-->
<p
class=
"text-center text-l font-bold text-gray-300"
>
CODEBOOK DDI
</p>
{#if codeBook?.stdyDscr.stdyInfo != null}
<div
class=
"my-10 text-l text-gray-400 text-center"
>
<p>
Section "CodeBook/stdyDscr/stdyInfo" :
</p>
</div>
<div
style=
"--json-tree-font-size: 12px;"
>
{#each Object.entries(codeBook.stdyDscr.stdyInfo) as [key, value]}
<div
class=
"py-4"
>
<JsonTree
{
key
}
{
value
}
/>
</div>
{/each}
</div>
{:else}
<div
class=
"my-10 text-l text-gray-400 text-center"
>
<p>
Section "CodeBook/stdyDscr/stdyInfo" NOT FOUND in this DDI
</p>
</div>
{/if}
<CodeBookSimpleJsonTrees
{
codeBook
}
paths=
{["stdyDscr/stdyInfo"]}
/>
<hr
class=
"sep h-20"
/>
</div>
...
...
@@ -413,26 +392,8 @@
</a>
</p>
<MarkdownDisplayDDI
markdownAst=
{markdownAstDet}
{
study
}
/>
<!-- Codebook extract for method -->
<p
class=
"text-center text-l font-bold text-gray-300"
>
CODEBOOK DDI
</p>
{#if codeBook?.stdyDscr != null}
<div
class=
"my-10 text-l text-gray-400 text-center"
>
<p>
Section "CodeBook/stdyDscr/" :
</p>
</div>
<div
style=
"--json-tree-font-size: 12px;"
>
{#each Object.entries(codeBook.stdyDscr) as [key, value]}
<div
class=
"py-4"
>
<JsonTree
{
key
}
{
value
}
/>
</div>
{/each}
</div>
{:else}
<div
class=
"my-10 text-l text-gray-400 text-center"
>
<p>
Section "CodeBook/stdyDscr/method" NOT FOUND in this DDI
</p>
</div>
{/if}
<CodeBookSimpleJsonTrees
{
codeBook
}
paths=
{["stdyDscr"]}
/>
<hr
class=
"sep h-20"
/>
</div>
...
...
@@ -440,11 +401,13 @@
{:else if tab === "variables"}
<div
class=
"flex flex-col w-auto overflow-hidden ml-4 mr-2 my-4"
>
{#if variables.length > 0}
<!--
<p
class="py-4 px-20 text-center italic text-gray-300 text-opacity-50"
>
AFFICHAGE CONFIGURÉ MANUELLEMENT
</p>
-->
{#each variables as variable}
<Drawer>
<!--
...
...
@@ -496,28 +459,7 @@
</div>
{/if}
<!-- Codebook extract for variables -->
<!--
<p class="text-center text-l font-bold text-gray-300">
CODEBOOK DDI
</p>
{#if codeBook?.dataDscr != null}
<div class="my-10 text-l text-gray-400">
<p>Section "codeBook/dataDscr" :</p>
</div>
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.dataDscr) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="my-10 text-l text-gray-400">
<p>Section "codeBook/dataDscr" not found in this DDI</p>
</div>
{/if}
-->
<CodeBookSimpleJsonTrees
{
codeBook
}
paths=
{["dataDscr"]}
/>
<hr
class=
"sep h-20"
/>
</div>
...
...
@@ -541,11 +483,13 @@
{/each}-->
<!-- CODE WITH TABLE FROM JS OBJECT-->
<!--
<p
class="py-4 px-20 text-center italic text-gray-300 text-opacity-50"
>
AFFICHAGE CONFIGURÉ MANUELLEMENT
</p>
-->
{#each datafilesDscr as datafile}
<Drawer>
<!-- HEAD-->
...
...
@@ -601,26 +545,7 @@
<MarkdownDisplayDDI markdownAst={markdownAstData} {study} />
-->
<!-- Codebook extract for datafiles
<p class="text-center text-l font-bold text-gray-300">
CODEBOOK DDI
</p>
{#if codeBook?.fileDscr != null}
<div class="my-10 text-l text-gray-400">
<p>Section "codeBook/fileDscr/" :</p>
</div>
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.fileDscr) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="my-10 text-l text-gray-400">
<p>Section "codeBook/fileDscr/" not found in this DDI</p>
</div>
{/if}-->
<CodeBookSimpleJsonTrees
{
codeBook
}
paths=
{["fileDscr"]}
/>
-->
</div>
<hr
class=
"sep h-20"
/>
...
...
@@ -695,42 +620,11 @@
</div>
</section>
{/each} -->
<!-- Codebook extract for ressources -->
<div
class=
"py-10 px-20"
>
<p
class=
"text-center text-l font-bold text-gray-300"
>
CODEBOOK DDI
</p>
{#if codeBook?.stdyDscr.othrStdyMat != null}
<p
class=
"my-10 text-l text-gray-400"
>
Section "codeBook/stdyDscr/othrStdyMat" :
</p>
<div
style=
"--json-tree-font-size: 12px;"
>
{#each Object.entries(codeBook.stdyDscr.othrStdyMat) as [key, value]}
<div
class=
"py-4"
>
<JsonTree
{
key
}
{
value
}
/>
</div>
{/each}
</div>
{:else}
<p
class=
"my-10 text-l text-gray-400"
>
Section "codeBook/stdyDscr/othrStdyMat" not found in this DDI
</p>
{/if}
{#if codeBook?.otherMat != null}
<p
class=
"my-10 text-l text-gray-400"
>
Section "codeBook/otherMat" :
</p>
<div
style=
"--json-tree-font-size: 12px;"
>
<div
class=
"py-4"
>
<JsonTree
value=
{codeBook.otherMat}
/>
</div>
</div>
{:else}
<div
class=
"my-10 text-l text-gray-400"
>
<p>
Section "codeBook/otherMat" not found in this DDI
</p>
</div>
{/if}
</div>
<CodeBookSimpleJsonTrees
{
codeBook
}
paths=
{["stdyDscr/othrStdyMat",
"
otherMat
"]}
/>
</div>
<hr
class=
"sep h-20"
/>
...
...
@@ -750,46 +644,18 @@
</p>
<MarkdownDisplayDDI
markdownAst=
{markdownAstAcc}
{
study
}
/>
<!-- Codebook extract for access -->
<div
class=
"py-10 px-20"
>
<p
class=
"text-center text-l font-bold text-gray-300"
>
CODEBOOK DDI
</p>
{#if codeBook?.stdyDscr.dataAccs != null}
<p
class=
"my-10 text-l text-gray-400"
>
Section "codeBook/stdyDscr/dataAccs" :
</p>
<div
style=
"--json-tree-font-size: 12px;"
>
{#each Object.entries(codeBook.stdyDscr.dataAccs) as [key, value]}
<div
class=
"py-4"
>
<JsonTree
{
key
}
{
value
}
/>
</div>
{/each}
</div>
{:else}
<p
class=
"my-10 text-l text-gray-400"
>
Section "codeBook/stdyDscr/dataAccs" not found in this DDI
</p>
{/if}
</div>
<CodeBookSimpleJsonTrees
{
codeBook
}
paths=
{["stdyDscr/dataAccs"]}
/>
<hr
class=
"sep h-20"
/>
</div>
<!-- ONGLET CODEBOOK -->
{:else if tab === "json"}
<div
class=
"flex flex-col overflow-hidden my-4 ml-16"
>
<div
style=
"--json-tree-font-size: 14px;"
>
{#if codeBook == null}
<JsonTree
value=
{codeBook}
/>
{:else}
{#each Object.entries(codeBook) as [key, value]}
<div
class=
"py-4"
>
<JsonTree
{
key
}
{
value
}
/>
</div>
{/each}
{/if}
</div>
<SimpleJsonTree
fontSize=
"14px"
title=
"DDI pour ce fichier"
value=
{codeBook}
/>
</div>
<hr
class=
"sep h-20"
/>
{/if}
...
...
src/components/StudyViewUser.svelte
View file @
30aa1d2b
<script lang="ts">
import JsonTree from "svelte-json-tree"
import { page } from "$app/stores"
import {
extractCodeBookText,
...
...
@@ -14,6 +12,8 @@
iterCodeBookDataKinds,
} from "$lib/accessors"
import Drawer from "./Drawer.svelte"
import CodeBookSimpleJsonTrees from "./fields/CodeBookSimpleJsonTrees.svelte"
import SimpleJsonTree from "./fields/SimpleJsonTree.svelte"
import MarkdownDisplayDDI from "./MarkdownDisplayDDI.svelte"
import OrganizationName from "./OrganizationName.svelte"
import Tabs from "./Tabs.svelte"
...
...
@@ -251,30 +251,8 @@
</a>
</p>
<MarkdownDisplayDDI {markdownAst} {study} />
<!-- Codebook extract for Description-->
<div class="mt-20 mb-4 text-sm text-red-400">
<b> Votre ddi pour cette section: </b>
<p class="text-xs">
Ici nous affichons une partie de votre document ddi avec le
chemin : "CodeBook/stdyDscr/stdyInfo" pour vous aider à definir
les règles de l'affichage:
</p>
</div>
{#if codeBook?.stdyDscr.method != null}
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.stdyDscr.stdyInfo) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="mt-16 mb-4 text-xl text-gray-200 text-center">
<p>
Section "CodeBook/stdyDscr/stdyInfo" NOT FOUND in this DDI
</p>
</div>
{/if}
<CodeBookSimpleJsonTrees {codeBook} paths={["stdyDscr/stdyInfo"]} />
<hr class="sep h-20" />
</div>
...
...
@@ -303,28 +281,7 @@
</p>
{/each}
<!-- Codebook extract for method -->
<div class="mt-20 mb-4 text-sm text-red-400">
<b> Votre ddi pour cette section: </b>
<p class="text-xs">
Ici nous affichons une partie de votre document ddi avec le
chemin : "CodeBook/stdyDscr/method" pour vous aider à definir
les règles de l'affichage:
</p>
</div>
{#if codeBook?.stdyDscr.method != null}
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.stdyDscr.method) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="mt-16 mb-4 text-xl text-gray-200 text-center">
<p>Section "CodeBook/stdyDscr/method" NOT FOUND in this DDI</p>
</div>
{/if}
<CodeBookSimpleJsonTrees {codeBook} paths={["stdyDscr/method"]} />
<hr class="sep h-20" />
</div>
...
...
@@ -364,30 +321,9 @@
</div>
{/if}
<!-- Codebook extract for variables -->
<div class="mt-20 mb-4 text-sm text-red-400">
<b> Votre ddi pour cette section: </b>
<p class="text-xs">
Ici nous affichons une partie de votre document ddi avec le
chemin : "codeBook/dataDscr" pour vous aider à definir les
règles de l'affichage:
</p>
</div>
{#if codeBook?.dataDscr != null}
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.dataDscr) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="mt-16 mb-4 text-xl text-gray-200">
<p>Section "codeBook/dataDscr" not found in this DDI</p>
</div>
{/if}
<CodeBookSimpleJsonTrees {codeBook} paths={["dataDscr"]} />
<hr class="sep h-20" />
</div>
<hr class="sep h-20" />
<!-- ONGLET DATAFILES -->
{:else if tab === "datafiles"}
...
...
@@ -406,30 +342,7 @@
</section>
{/each}
<!-- Codebook extract for datafiles -->
<div class="mt-20 mb-4 text-sm text-red-400">
<b> Votre ddi pour cette section: </b>
<p class="text-xs">
Ici nous affichons une partie de votre document ddi avec le
chemin : "codeBook/stdyDscr/dataAccs" pour vous aider à definir
les règles de l'affichage:
</p>
</div>
{#if codeBook?.stdyDscr.dataAccs != null}
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.stdyDscr.dataAccs) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="mt-16 mb-4 text-xl text-gray-200">
<p>
Section "codeBook/stdyDscr/dataAccs" not found in this DDI
</p>
</div>
{/if}
<CodeBookSimpleJsonTrees {codeBook} paths={["stdyDscr/dataAccs"]} />
</div>
<hr class="sep h-20" />
...
...
@@ -450,47 +363,18 @@
</section>
{/each}
<!-- Codebook extract for ressources -->
<div class="mt-20 mb-4 text-sm text-red-400">
<b> Votre ddi pour cette section: </b>
<p class="text-xs">
Ici nous affichons une partie de votre document ddi avec le
chemin : "codeBook/stdyDscr/othrStdyMat" pour vous aider à
definir les règles de l'affichage:
</p>
</div>
{#if codeBook?.stdyDscr.othrStdyMat != null}
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(codeBook.stdyDscr.othrStdyMat) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
</div>
{:else}
<div class="mt-16 mb-4 text-xl text-gray-200">
<p>
Section "codeBook/stdyDscr/othrStdyMat" not found in this DDI
</p>
</div>
{/if}
<CodeBookSimpleJsonTrees {codeBook} paths={["stdyDscr/othrStdyMat"]} />
<hr class="sep h-20" />
</div>
<hr class="sep h-20" />
<!-- ONGLET CODEBOOK -->
{:else if tab === "json"}
<div class="flex flex-col overflow-hidden my-4 ml-16">
<div style="--json-tree-font-size: 14px;">
{#if codeBook == null}
<JsonTree value={codeBook} />
{:else}
{#each Object.entries(codeBook) as [key, value]}
<div class="py-4">
<JsonTree {key} {value} />
</div>
{/each}
{/if}
</div>
<SimpleJsonTree
fontSize="14px"
title="DDI pour ce fichier"
value={codeBook}
/>
</div>
<hr class="sep h-20" />
{/if}
...
...
src/components/Tabs.svelte
View file @
30aa1d2b
<script lang="ts">
import { page } from "$app/stores"
import { localize } from "$lib/stores"
import {
debugMode,
localize } from "$lib/stores"
import type { Tab } from "../tabs"
export let divClass: string =
...
...
@@ -25,14 +25,16 @@
<div class={divClass}>
{#each tabs as tab}
{#if symbol === tab.symbol}
<span class="portal px-3 text-gray-500 ~neutral active"
>{_(tab.label)}</span
>
{:else}
<a class="portal px-3 text-gray-500" href={newUrl(pathname, tab.symbol)}
>{_(tab.label)}</a
>
{#if !tab.debugOnly || $debugMode}
{#if symbol === tab.symbol}
<span class="portal px-3 text-gray-500 ~neutral active"
>{_(tab.label)}</span
>
{:else}
<a class="portal px-3 text-gray-500" href={newUrl(pathname, tab.symbol)}
>{_(tab.label)}</a
>
{/if}
{/if}
{/each}
</div>
src/components/VariableBody.svelte
View file @
30aa1d2b
<script lang="ts">
import JsonTree from "svelte-json-tree"
import { extractCodeBookText, iterVariableCategories } from "$lib/accessors"
import SimpleJsonTree from "./fields/SimpleJsonTree.svelte"
import type { Var } from "$lib/raw_types/codebooks"
export let caseQuantity: number | null | undefined
...
...
@@ -133,21 +132,6 @@
{/each}
</table>
{/if}
<!--
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(variable.catgry) as [key, value]}
<JsonTree {key} {value} />
{/each}
</div>
-->
<!--
<div class="mt-10 mb-4 text-xs text-red-400">
<b> Votre ddi pour cette variable : </b>
</div>
<div style="--json-tree-font-size: 12px;">
{#each Object.entries(variable) as [key, value]}
<JsonTree {key} {value} />
{/each}
</div>
-->
<SimpleJsonTree title="DDI pour cette variable" value={variable} />
</section>
src/components/fields/CodeBookSimpleJsonTrees.svelte
0 → 100644
View file @
30aa1d2b
<script lang="ts">
import JsonTree from "svelte-json-tree"
import { getCodeBookElement } from "$lib/accessors"
import type { CodeBook } from "$lib/raw_types/codebooks"
import { debugMode } from "$lib/stores"
export let codeBook: CodeBook
export let paths: string[]
export let title = "CodeBook DDI"
</script>
{#if $debugMode}
<section class="px-20 py-10">
{#if title}
<h1 class="font-bold text-center text-gray-300 text-lg uppercase">
{title}
</h1>
{/if}
{#each paths.map( (path) => [path, getCodeBookElement(codeBook, path)], ) as [path, element]}
{#if element != null}
<p class="my-10 text-l text-gray-400">
Section "{path}" :
</p>
<div class="py-4" style="--json-tree-font-size: 12px;">
<JsonTree value={element} />
</div>
{:else}
<p class="my-10 text-l text-gray-400">
Section "{path}" not found in this DDI
</p>
{/if}
{/each}
</section>
{/if}
src/components/fields/SimpleJsonTree.svelte
0 → 100644
View file @
30aa1d2b
<script lang="ts">
import JsonTree from "svelte-json-tree"
import { debugMode } from "$lib/stores"
export let fontSize = "12px"
export let key: string | undefined | null = undefined
export let title: string | undefined | null = undefined
export let value: any
</script>
{#if $debugMode}
<section class="px-20 py-10">
{#if title}
<h1 class="font-bold text-center text-gray-300 text-lg uppercase">
{title}
</h1>
{/if}
<div class="py-4" style="--json-tree-font-size: {fontSize};">