geomui 0.5.52 → 0.5.56

package/dist/InputParams.svelte

@@ -1,247 +1,272 @@
-<script>import ModalDiag from "./ModalDiag.svelte";
-import ModalImg from "./ModalImg.svelte";
-import LocStorWrite from "./LocStorWrite.svelte";
-import LocStorRead from "./LocStorRead.svelte";
-import SimpleDrawing from "./SimpleDrawing.svelte";
-import { PType, parseParamFile, createParamFile, adjustZero } from "geometrix";
-import { storePV } from "./storePVal";
-import { downloadParams, generateUrl } from "./downloadParams";
-import { onMount, createEventDispatcher } from "svelte";
-import { browser } from "$app/environment";
-import { page } from "$app/stores";
-import { base } from "$app/paths";
-const dispatch = createEventDispatcher();
-export let pDef;
-export let fgeom;
-export let selFace;
-export let zAdjust;
-export let simTime = 0;
-const cAdjustZero = adjustZero();
-let inputComment = "";
-function paramChange() {
-  dispatch("paramChg", { foo: "bla" });
-}
-function tolerantApply(iPartName, ipVal) {
-  let rMsg = "";
-  let applyWarn1 = false;
-  if (iPartName !== pDef.partName) {
-    rMsg += `warn361: read partName: '${iPartName}'  expected partName: '${pDef.partName}'
-`;
-    applyWarn1 = true;
-  }
-  let cover = 0;
-  let uncover = 0;
-  let equal = 0;
-  const pNameList = [];
-  for (const p of pDef.params) {
-    pNameList.push(p.name);
-    if (Object.hasOwn(ipVal, p.name)) {
-      cover += 1;
-      if ($storePV[pDef.partName][p.name] === ipVal[p.name]) {
-        equal += 1;
-      } else {
-        $storePV[pDef.partName][p.name] = ipVal[p.name];
-      }
-    } else {
-      uncover += 1;
-    }
-  }
-  let notInScope = 0;
-  for (const pa of Object.keys(ipVal)) {
-    if (!pNameList.includes(pa)) {
-      notInScope += 1;
-      rMsg += `warn363: parameter ${pa} not in the scope of the design (${notInScope})
-`;
-    }
-  }
-  const applyWarn2 = notInScope > 0 ? true : false;
-  const loadDate = (/* @__PURE__ */ new Date()).toLocaleTimeString();
-  rMsg += `Params loaded at ${loadDate} :`;
-  rMsg += ` def-nb: ${Object.keys(pDef.params).length}`;
-  rMsg += `, cover-nb: ${cover}, uncover-nb: ${uncover}
-`;
-  rMsg += ` load-nb: ${Object.keys(ipVal).length}`;
-  rMsg += `, equal-nb: ${equal}, changed-nb: ${cover - equal}`;
-  rMsg += `, out-of-scope: ${notInScope}`;
-  const rApplyWarn = applyWarn1 || applyWarn2;
-  return [rMsg, rApplyWarn];
-}
-let loadMsg = "";
-let applyWarn = false;
-function initParams2() {
-  if (browser) {
-    const searchParams = new URLSearchParams($page.url.search);
-    const pVal2 = {};
-    for (const [kk, vv] of searchParams) {
-      const vvn = Number(vv);
-      if (!isNaN(vvn)) {
-        pVal2[kk] = vvn;
-      }
-    }
-    if (Object.keys(pVal2).length > 0) {
-      [loadMsg, applyWarn] = tolerantApply(pDef.partName, pVal2);
-    }
-  }
-}
-function forceInit() {
-  initParams2();
-  paramChange();
-}
-onMount(() => {
-  forceInit();
-});
-function loadParams(iStr) {
-  try {
-    const [paramJson] = parseParamFile(iStr);
-    [loadMsg, applyWarn] = tolerantApply(paramJson.partName, paramJson.pVal);
-    inputComment = paramJson.comment;
-    paramChange();
-  } catch (emsg) {
-    let errMsg = "err723: error by parsing parameter file\n";
-    errMsg += emsg;
-    loadMsg = errMsg;
-    applyWarn = true;
-  }
-}
-async function loadFile(fileP) {
-  const fText = await fileP.text();
-  loadParams(fText);
-}
-function loadParamFromFile(eve) {
-  if (eve.target) {
-    const paramFiles = eve.target.files;
-    if (paramFiles) {
-      loadFile(paramFiles[0]);
-    }
-  }
-}
-function downloadParams2() {
-  downloadParams(pDef.partName, $storePV[pDef.partName], inputComment);
-}
-let modalLoadDefault = false;
-let modalLoadLocal = false;
-let modalSaveUrl = false;
-let modalSaveLocal = false;
-function loadDefaults() {
-  const pInit = {};
-  for (const p of pDef.params) {
-    pInit[p.name] = p.init;
-  }
-  [loadMsg, applyWarn] = tolerantApply(pDef.partName, pInit);
-}
-let locStorRname;
-function loadLocStor() {
-  if (locStorRname !== void 0 && locStorRname !== "") {
-    const storeKey = `${pDef.partName}_${locStorRname}`;
-    if (browser) {
-      const storeStr = window.localStorage.getItem(storeKey);
-      if (storeStr === null) {
-        loadMsg = `Warn157: localStorage key ${storeKey} is null`;
-        applyWarn = true;
-      } else {
-        loadParams(storeStr);
-      }
-    }
-  } else {
-    loadMsg = "Warn239: No valid name for loading from localStorage!";
-    applyWarn = true;
-  }
-}
-let locStorWname;
-function saveInLocStor() {
-  if (locStorWname !== void 0 && locStorWname !== "") {
-    const storeKey = `${pDef.partName}_${locStorWname}`;
-    const re2 = /\..*$/;
-    const lastModif = (/* @__PURE__ */ new Date()).toISOString().replace(re2, "");
-    const storeAllStr = createParamFile(
-      lastModif,
-      pDef.partName,
-      $storePV[pDef.partName],
-      inputComment
-    );
-    if (browser) {
-      window.localStorage.setItem(storeKey, storeAllStr);
-    }
-  } else {
-    console.log("Warn639: No valid name for writing to localStorage!");
-  }
-}
-let pUrl = "";
-function generateUrl2() {
-  const url1 = generateUrl($page.url.href, $storePV[pDef.partName], false);
-  return url1.toString();
-}
-function openModalUrl() {
-  pUrl = generateUrl2();
-  modalSaveUrl = true;
-}
-function saveAsUrl() {
-}
-let paramSvg = `${base}/pgdsvg/default_param_blank.svg`;
-function paramPict(keyName) {
-  paramSvg = `${base}/pgdsvg/default_param_blank.svg`;
-  if (Object.keys(pDef.paramSvg).includes(keyName)) {
-    paramSvg = `${base}/pgdsvg/${pDef.paramSvg[keyName]}`;
-  }
-}
-let prePartName = "";
-function paramPict2(idx, pDef_page) {
-  if (prePartName !== pDef.partName) {
-    const paramNb = Object.keys($storePV[pDef_page]).length;
-    if (idx < paramNb) {
-      paramPict(Object.keys($storePV[pDef_page])[idx]);
-    }
-  }
-}
-$: paramPict2(0, pDef.partName);
-let modalImg = false;
-function showSvg() {
-  modalImg = true;
-}
-function makeHTable(iParams) {
-  const rHTable = [];
-  const sectionMain = {
-    sectionName: "main",
-    sectionID: "g0main",
-    sectionVisible: false,
-    params: []
-  };
-  let section = sectionMain;
-  let sectionID = 0;
-  for (const param of iParams) {
-    if (param.pType === PType.eSectionSeparator) {
-      rHTable.push(section);
-      sectionID += 1;
-      const sectionNew = {
-        sectionName: param.name,
-        sectionID: `g${sectionID}${param.name}`,
-        sectionVisible: true,
-        params: []
-      };
-      section = sectionNew;
-    } else {
-      section.params.push(param);
-    }
-  }
-  rHTable.push(section);
-  return rHTable;
-}
-function makeHTableVis(iHTable) {
-  const rVis = {};
-  for (const section of iHTable) {
-    rVis[section.sectionID] = section.sectionVisible;
-  }
-  return rVis;
-}
-let htable;
-let htableVis;
-$: {
-  htable = makeHTable(pDef.params);
-  if (prePartName !== pDef.partName) {
-    prePartName = pDef.partName;
-    htableVis = makeHTableVis(htable);
-  }
-}
+<script lang="ts">
+	//import type { tOkFunc } from './ModalDiag.svelte';
+	import ModalDiag from './ModalDiag.svelte';
+	import ModalImg from './ModalImg.svelte';
+	import LocStorWrite from './LocStorWrite.svelte';
+	import LocStorRead from './LocStorRead.svelte';
+	import SimpleDrawing from './SimpleDrawing.svelte';
+	import type { tParam, tParamDef, tParamVal, Figure } from 'geometrix';
+	import { PType, parseParamFile, createParamFile } from 'geometrix';
+	import { sParams } from './stateParams.svelte';
+	import { downloadParams, generateUrl } from './downloadParams';
+	import { browser } from '$app/environment';
+	import { page } from '$app/stores';
+	import { base } from '$app/paths';
+
+	// props
+	interface Props {
+		pDef: tParamDef;
+		pFig: Figure;
+	}
+	let { pDef, pFig }: Props = $props();
+
+	// type
+	type tHTableVis = Record<string, boolean>;
+
+	// state
+	let inputComment: string = $state('');
+	let hideColumn: boolean = $state(false);
+	let loadMsg: string = $state('');
+	let applyWarn: boolean = $state(false);
+	let modalLoadDefault: boolean = $state(false);
+	let modalLoadLocal: boolean = $state(false);
+	let modalSaveUrl: boolean = $state(false);
+	let modalSaveLocal: boolean = $state(false);
+	let locStorRname: string = $state('');
+	let locStorWname: string = $state('');
+	let pUrl: string = $state('');
+	let paramSvg: string = $state(checkPict(pDef.params[0].name));
+	let modalImg: boolean = $state(false);
+	let htableVis: tHTableVis = $state(makeHTableVis(makeHTable(pDef.params)));
+
+	// initialization
+	// tolerant applyParamVal
+	function tolerantApply(iPartName: string, ipVal: tParamVal): [string, boolean] {
+		let rMsg = '';
+		// partName
+		let applyWarn1 = false;
+		if (iPartName !== pDef.partName) {
+			rMsg += `warn361: read partName: '${iPartName}'  expected partName: '${pDef.partName}'\n`;
+			applyWarn1 = true;
+		}
+		// forward
+		let cover = 0;
+		let uncover = 0;
+		let equal = 0;
+		const pNameList: string[] = [];
+		for (const p of pDef.params) {
+			pNameList.push(p.name);
+			if (Object.hasOwn(ipVal, p.name)) {
+				cover += 1;
+				if (sParams[pDef.partName][p.name] === ipVal[p.name]) {
+					equal += 1;
+				} else {
+					sParams[pDef.partName][p.name] = ipVal[p.name];
+				}
+			} else {
+				uncover += 1;
+			}
+		}
+		// backward
+		let notInScope = 0;
+		for (const pa of Object.keys(ipVal)) {
+			if (!pNameList.includes(pa)) {
+				notInScope += 1;
+				rMsg += `warn363: parameter ${pa} not in the scope of the design (${notInScope})\n`;
+			}
+		}
+		const applyWarn2 = notInScope > 0 ? true : false;
+		const loadDate = new Date().toLocaleTimeString();
+		rMsg += `Params loaded at ${loadDate} :`;
+		rMsg += ` def-nb: ${Object.keys(pDef.params).length}`;
+		rMsg += `, cover-nb: ${cover}, uncover-nb: ${uncover}\n`;
+		rMsg += ` load-nb: ${Object.keys(ipVal).length}`;
+		rMsg += `, equal-nb: ${equal}, changed-nb: ${cover - equal}`;
+		rMsg += `, out-of-scope: ${notInScope}`;
+		const rApplyWarn = applyWarn1 || applyWarn2;
+		return [rMsg, rApplyWarn];
+	}
+	function initParams2() {
+		if (browser) {
+			const searchParams = new URLSearchParams($page.url.search);
+			const pVal2: tParamVal = {};
+			for (const [kk, vv] of searchParams) {
+				//console.log(`dbg638: ${kk} ${vv}`);
+				const vvn = Number(vv);
+				if (!isNaN(vvn)) {
+					pVal2[kk] = vvn;
+				}
+			}
+			//console.log(`dbg072: pVal2.length ${Object.keys(pVal2).length}`);
+			if (Object.keys(pVal2).length > 0) {
+				[loadMsg, applyWarn] = tolerantApply(pDef.partName, pVal2);
+			}
+		}
+	}
+	// initiatlization
+	initParams2();
+
+	// actions
+	function loadParams(iStr: string) {
+		try {
+			const [paramJson] = parseParamFile(iStr);
+			[loadMsg, applyWarn] = tolerantApply(paramJson.partName, paramJson.pVal);
+			inputComment = paramJson.comment;
+		} catch (emsg) {
+			let errMsg = 'err723: error by parsing parameter file\n';
+			errMsg += emsg as string;
+			loadMsg = errMsg;
+			applyWarn = true;
+		}
+	}
+	// load from file
+	async function loadFile(fileP: File) {
+		const fText = await fileP.text();
+		loadParams(fText);
+	}
+	function loadParamFromFile(eve: Event) {
+		if (eve.target) {
+			type tEveFileList = FileList | null;
+			const paramFiles: tEveFileList = (eve.target as HTMLInputElement).files;
+			if (paramFiles) {
+				loadFile(paramFiles[0]);
+			}
+		}
+	}
+	// download parameters
+	function downloadParams2() {
+		downloadParams(pDef.partName, sParams[pDef.partName], inputComment);
+	}
+	// modal
+	function loadDefaults() {
+		const pInit: tParamVal = {};
+		for (const p of pDef.params) {
+			pInit[p.name] = p.init;
+		}
+		[loadMsg, applyWarn] = tolerantApply(pDef.partName, pInit);
+	}
+	// load parameters from localStorage
+	function loadLocStor() {
+		if (locStorRname !== undefined && locStorRname !== '') {
+			const storeKey = `${pDef.partName}_${locStorRname}`;
+			//console.log(`load from localStorage ${storeKey}`);
+			if (browser) {
+				const storeStr = window.localStorage.getItem(storeKey);
+				if (storeStr === null) {
+					loadMsg = `Warn157: localStorage key ${storeKey} is null`;
+					applyWarn = true;
+				} else {
+					loadParams(storeStr);
+				}
+			}
+		} else {
+			loadMsg = 'Warn239: No valid name for loading from localStorage!';
+			applyWarn = true;
+		}
+	}
+	// save parameters into localStorage
+	//$: console.log(`dbg888: ${locStorWname}`);
+	function saveInLocStor() {
+		if (locStorWname !== undefined && locStorWname !== '') {
+			const storeKey = `${pDef.partName}_${locStorWname}`;
+			const re2 = /\..*$/;
+			const lastModif = new Date().toISOString().replace(re2, '');
+			const storeAllStr = createParamFile(
+				lastModif,
+				pDef.partName,
+				sParams[pDef.partName],
+				inputComment
+			);
+			//console.log(`save in localStorage ${storeKey}`);
+			if (browser) {
+				window.localStorage.setItem(storeKey, storeAllStr);
+			}
+		} else {
+			console.log('Warn639: No valid name for writing to localStorage!');
+		}
+	}
+	// Save as URL
+	function generateUrl2(): string {
+		const url1 = generateUrl($page.url.href, sParams[pDef.partName], false);
+		return url1.toString();
+	}
+	function openModalUrl() {
+		pUrl = generateUrl2();
+		modalSaveUrl = true;
+	}
+	function saveAsUrl() {
+		//console.log(`dbg244: voila`);
+	}
+	// parameter picture
+	function checkPict(keyName: string): string {
+		let rSvgPath = `${base}/pgdsvg/default_param_blank.svg`;
+		// convention for the file-names of the parameter description
+		//paramSvg = `${base}/pgdsvg/${pDef.partName}_${keyName}.svg`;
+		if (Object.keys(pDef.paramSvg).includes(keyName)) {
+			rSvgPath = `${base}/pgdsvg/${pDef.paramSvg[keyName]}`;
+		}
+		return rSvgPath;
+	}
+	function paramPict(keyName: string) {
+		paramSvg = checkPict(keyName);
+	}
+	function showSvg() {
+		//console.log(`dbg231: svgPath: ${svgPath}`);
+		modalImg = true;
+	}
+	// hierarchical table
+	interface tHTableSection {
+		sectionName: string;
+		sectionID: string;
+		sectionVisible: boolean;
+		params: tParam[];
+	}
+	function makeHTable(iParams: tParam[]): tHTableSection[] {
+		const rHTable: tHTableSection[] = [];
+		const sectionMain: tHTableSection = {
+			sectionName: 'main',
+			sectionID: 'g0main',
+			sectionVisible: false,
+			params: []
+		};
+		let section = sectionMain;
+		let sectionID = 0;
+		for (const param of iParams) {
+			if (param.pType === PType.eSectionSeparator) {
+				rHTable.push(section);
+				sectionID += 1;
+				const sectionNew: tHTableSection = {
+					sectionName: param.name,
+					sectionID: `g${sectionID}${param.name}`,
+					sectionVisible: true,
+					params: []
+				};
+				section = sectionNew;
+			} else {
+				section.params.push(param);
+			}
+		}
+		rHTable.push(section);
+		return rHTable;
+	}
+	function makeHTableVis(iHTable: tHTableSection[]): tHTableVis {
+		const rVis: tHTableVis = {};
+		for (const section of iHTable) {
+			rVis[section.sectionID] = section.sectionVisible;
+		}
+		return rVis;
+	}
+	let htable: tHTableSection[] = $derived(makeHTable(pDef.params));
+	// actions
+	function sizeSmall() {
+		hideColumn = true;
+	}
+	function sizeBig() {
+		hideColumn = false;
+	}
+	let dColspanHide1: number = $derived(hideColumn ? 2 : 4);
+	let dColspanHide2: number = $derived(hideColumn ? 2 : 3);
+	let dCommentSize: number = $derived(hideColumn ? 50 : 70);
 </script>
 
 <section>
@@ -252,15 +277,15 @@ $: {
 			id="loadFParams"
 			type="file"
 			accept="text/plain, application/json"
-			on:change={loadParamFromFile}
+			onchange={loadParamFromFile}
 		/>
 		<button
-			on:click={() => {
+			onclick={() => {
 				modalLoadDefault = true;
 			}}>Set Params Default</button
 		>
 		<button
-			on:click={() => {
+			onclick={() => {
 				modalLoadLocal = true;
 			}}>Load Params from localStorage</button
 		>
@@ -276,69 +301,75 @@ $: {
 			rows="3"
 			cols="80"
 			readonly
-			wrap="off"
+			wrap="soft"
 			value={loadMsg}
 			class:colorWarn={applyWarn}
-		/>
+		></textarea>
 		<table>
 			<thead>
 				<tr>
 					<td>&#35;</td>
 					<td>Parameter name</td>
-					<td>Value</td>
-					<td>Unit</td>
-					<td>Default</td>
+					<td
+						>Value<span
+							><button onclick={sizeSmall}>&minus;</button><button onclick={sizeBig}
+								>+</button
+							></span
+						></td
+					>
+					<td class:hideColumn>Unit</td>
+					<td class:hideColumn>Default</td>
 					<td>Min</td>
 					<td>Max</td>
-					<td>Step</td>
+					<td class:hideColumn>Step</td>
 				</tr>
 			</thead>
 			{#each htable as sect, sidx}
-				<tr class="separator">
-					<td>{sidx + 1}</td>
-					<td colspan="4">{sect.sectionName}</td>
-					<td colspan="3">
-						<label>
-							<input type="checkbox" bind:checked={htableVis[sect.sectionID]} />
-							<span> </span></label
-						>
-					</td>
-				</tr>
+				<tbody>
+					<tr class="separator">
+						<td>{sidx + 1}</td>
+						<td colspan={dColspanHide1}>{sect.sectionName}</td>
+						<td colspan={dColspanHide2}>
+							<label>
+								<input type="checkbox" bind:checked={htableVis[sect.sectionID]} />
+								<span> </span></label
+							>
+						</td>
+					</tr>
+				</tbody>
 				<tbody class:collaps={htableVis[sect.sectionID]}>
 					{#each sect.params as param, pidx}
-						<tr class:changed={$storePV[pDef.partName][param.name] !== param.init}>
+						<tr class:changed={sParams[pDef.partName][param.name] !== param.init}>
 							<td>{sidx + 1}.{pidx + 1}</td>
 							<td
-								><button on:click={() => paramPict(param.name)}>{param.name}</button
+								><button onclick={() => paramPict(param.name)}>{param.name}</button
 								></td
 							>
 							<td>
 								{#if param.pType === PType.eNumber}
 									<input
 										type="number"
-										bind:value={$storePV[pDef.partName][param.name]}
+										bind:value={sParams[pDef.partName][param.name]}
 										min={param.min}
 										max={param.max}
 										step={param.step}
-										on:change={paramChange}
 										class="input-number"
 									/>
 									<input
 										type="range"
-										bind:value={$storePV[pDef.partName][param.name]}
+										bind:value={sParams[pDef.partName][param.name]}
 										min={param.min}
 										max={param.max}
 										step={param.step}
-										on:change={paramChange}
 									/>
 								{:else if param.pType === PType.eCheckbox}
-									<select bind:value={$storePV[pDef.partName][param.name]}>
+									<select bind:value={sParams[pDef.partName][param.name]}>
 										{#each ['Off', 'On'] as one, idx}
 											<option value={idx}>{one}</option>
 										{/each}
 									</select>
 								{:else if param.pType === PType.eDropdown}
-									<select bind:value={$storePV[pDef.partName][param.name]}>
+									<select bind:value={sParams[pDef.partName][param.name]}>
 										{#each param.dropdown as one, idx}
 											<option value={idx}>{one}</option>
 										{/each}
@@ -347,11 +378,11 @@ $: {
 									unknown
 								{/if}
 							</td>
-							<td>{param.unit}</td>
-							<td>{param.init}</td>
+							<td class:hideColumn>{param.unit}</td>
+							<td class:hideColumn>{param.init}</td>
 							<td>{param.min}</td>
 							<td>{param.max}</td>
-							<td>{param.step}</td>
+							<td class:hideColumn>{param.step}</td>
 						</tr>
 					{/each}
 				</tbody>
@@ -359,12 +390,18 @@ $: {
 		</table>
 		<div class="comment">
 			<label for="inComment">Comment:</label>
-			<input type="text" id="inComment" bind:value={inputComment} maxlength="150" size="70" />
+			<input
+				type="text"
+				id="inComment"
+				bind:value={inputComment}
+				maxlength="150"
+				size={dCommentSize}
+			/>
 		</div>
-		<button on:click={downloadParams2}>Save Parameters to File</button>
-		<button on:click={openModalUrl}>Save Parameters as URL</button>
+		<button onclick={downloadParams2}>Save Parameters to File</button>
+		<button onclick={openModalUrl}>Save Parameters as URL</button>
 		<button
-			on:click={() => {
+			onclick={() => {
 				modalSaveLocal = true;
 			}}>Save Parameters to localStorage</button
 		>
@@ -380,14 +417,14 @@ $: {
 		>
 	</main>
 	<ModalImg bind:modalOpen={modalImg} svgPath={paramSvg} />
-	<button on:click={showSvg} class="side-img">
+	<button onclick={showSvg} class="side-img">
 		<img src={paramSvg} alt={paramSvg} />
 	</button>
 	<div class="mini-canvas">
-		<SimpleDrawing pageName={pDef.partName} {fgeom} {selFace} zAdjust={cAdjustZero} {simTime} />
+		<SimpleDrawing {pFig} full={true} />
 	</div>
 	<div class="mini-canvas">
-		<SimpleDrawing pageName={pDef.partName} {fgeom} {selFace} {zAdjust} {simTime} />
+		<SimpleDrawing {pFig} full={false} />
 	</div>
 </section>
 
@@ -451,6 +488,20 @@ section > main > table > thead {
   background-color: #ddd;
 }
 
+section > main > table > thead > tr > td > span {
+  margin-left: 5rem;
+}
+
+section > main > table > thead > tr > td > span > button {
+  border: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  border-radius: 30%;
+  font-weight: 700;
+  color: Blue;
+  background-color: LightBlue;
+}
+
 section > main > table > tbody {
   background-color: #eee;
 }
@@ -463,7 +514,7 @@ section > main > table > tbody > tr.changed {
   background-color: #ded;
 }
 
-section > main > table > tr.separator {
+section > main > table > tbody > tr.separator {
   font-weight: 700;
   background-color: Tan;
 }
@@ -507,7 +558,6 @@ tr.separator > td > label > input[type=checkbox]:checked + span::after {
 }
 
 section > main > table > thead > tr > td,
-section > main > table > tr > td,
 section > main > table > tbody > tr > td {
   padding-left: 0.4rem;
   padding-right: 0.4rem;
@@ -527,6 +577,11 @@ section > main > table > tbody > tr > td > input.input-number {
   width: 5rem;
 }
 
+section > main > table > thead > tr > td.hideColumn,
+section > main > table > tbody > tr > td.hideColumn {
+  display: none;
+}
+
 section > main > div.comment {
   font-size: 0.8rem;
   margin-left: 0.5rem;