@webviz/subsurface-viewer 0.0.1-alpha.1

package/src/components/settings/__snapshots__/LayerProperty.test.tsx.snap

@@ -0,0 +1,124 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Layer Property snapshot test 1`] = `
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  position: relative;
+  margin: 0;
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  font-family: Equinor;
+  font-size: 0.750rem;
+  font-weight: 500;
+  line-height: 1.333em;
+  text-align: left;
+  margin-left: 8px;
+  margin-right: 8px;
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+}
+
+.c2 {
+  margin: 0;
+}
+
+.c3 {
+  border: none;
+  border-radius: 0;
+  box-shadow: inset 0 -1px 0 0 var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  padding-left: 8px;
+  padding-top: 6px;
+  padding-right: 8px;
+  padding-bottom: 6px;
+  margin: 0;
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  font-family: Equinor;
+  font-size: 1.000rem;
+  font-weight: 400;
+  line-height: 1.500em;
+  -webkit-letter-spacing: 0.025em;
+  -moz-letter-spacing: 0.025em;
+  -ms-letter-spacing: 0.025em;
+  letter-spacing: 0.025em;
+  text-align: left;
+  padding-right: calc(8px *2 + 24px);
+  display: block;
+  margin: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E"), linear-gradient( to bottom, var(--eds_ui_background__light,rgba(247,247,247,1)) 0%, var(--eds_ui_background__light,rgba(247,247,247,1)) 100% );
+  background-repeat: no-repeat,repeat;
+  background-position: right 8px top 50%;
+  width: 100%;
+}
+
+.c3:active,
+.c3:focus {
+  box-shadow: none;
+  outline: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1));
+  outline-offset: 0px;
+}
+
+.c3:disabled {
+  color: var(--eds_interactive__disabled__text,rgba(190,190,190,1));
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E"), linear-gradient( to bottom, var(--eds_ui_background__light,rgba(247,247,247,1)) 0%, var(--eds_ui_background__light,rgba(247,247,247,1)) 100% );
+  cursor: not-allowed;
+  box-shadow: none;
+  outline: none;
+}
+
+.c3:disabled .arrow-icon {
+  fill: red;
+}
+
+.c3:disabled:focus,
+.c3:disabled:active {
+  outline: none;
+}
+
+.c0 {
+  min-width: 100px;
+  width: 100%;
+}
+
+<div
+  class="c0"
+>
+  <label
+    class="c1"
+    for="drawing-layer-mode-selector"
+  >
+    <span
+      class="c2"
+    >
+      Draw mode
+    </span>
+  </label>
+  <select
+    class="c3"
+    id="drawing-layer-mode-selector"
+  >
+    <option>
+      View
+    </option>
+    <option>
+      Edit
+    </option>
+    <option>
+      Create point
+    </option>
+    <option>
+      Create polyline
+    </option>
+    <option>
+      Create polygon
+    </option>
+  </select>
+</div>
+`;

package/src/components/settings/__snapshots__/LayerSettingsButton.test.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test layers settings button snapshot test 1`] = `
+<div
+  class="css-mk8rzy"
+>
+  <button
+    class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeMedium MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeMedium MuiFab-default LayerSettingsButton-root css-1fwudth-MuiButtonBase-root-MuiFab-root"
+    id="drawing-layer-button"
+    tabindex="0"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      fill="currentColor"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        class=""
+        clip-rule="evenodd"
+        d="M19.169 3c-.26 0-.51.1-.71.29l-8.96 8.96 2.75 2.75 8.96-8.96a.996.996 0 0 0 0-1.41l-1.34-1.34c-.2-.2-.45-.29-.7-.29zM7.499 16c.55 0 1 .45 1 1 0 1.1-.9 2-2 2-.17 0-.33-.02-.5-.05.31-.55.5-1.21.5-1.95 0-.55.45-1 1-1zm-3 1c0-1.66 1.34-3 3-3s3 1.34 3 3c0 2.21-1.79 4-4 4-1.51 0-3.08-.78-4-2 .84 0 2-.69 2-2z"
+        data-testid="eds-icon-path"
+        fill-rule="evenodd"
+        height="24"
+      />
+    </svg>
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+</div>
+`;

package/src/components/settings/__snapshots__/LayersButton.test.tsx.snap

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test 'layers' button snapshot test 1`] = `
+@media (hover:hover) and (pointer:fine) {
+
+}
+
+<div
+  class="css-1c35s4m"
+  id="layers-button-view_1"
+>
+  <button
+    class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-default css-mm42gz-MuiButtonBase-root-MuiFab-root"
+    id="layers-selector-button"
+    tabindex="0"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      fill="currentColor"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        class=""
+        clip-rule="evenodd"
+        d="m12 16.465 7.36-5.73L21 9.465l-9-7-9 7 1.63 1.27 7.37 5.73zm-.01 2.54-7.37-5.73L3 14.535l9 7 9-7-1.63-1.27-7.38 5.74zm5.75-9.54L12 4.995l-5.74 4.47 5.74 4.47 5.74-4.47z"
+        data-testid="eds-icon-path"
+        fill-rule="evenodd"
+        height="24"
+      />
+    </svg>
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+</div>
+`;
+
+exports[`test 'layers' button test empty MapState/specbase 1`] = `
+@media (hover:hover) and (pointer:fine) {
+
+}
+
+<div
+  class="css-1c35s4m"
+  id="layers-button-view_1"
+>
+  <button
+    class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-default MuiFab-root MuiFab-circular MuiFab-sizeLarge MuiFab-default css-mm42gz-MuiButtonBase-root-MuiFab-root"
+    id="layers-selector-button"
+    tabindex="0"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      fill="currentColor"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        class=""
+        clip-rule="evenodd"
+        d="m12 16.465 7.36-5.73L21 9.465l-9-7-9 7 1.63 1.27 7.37 5.73zm-.01 2.54-7.37-5.73L3 14.535l9 7 9-7-1.63-1.27-7.38 5.74zm5.75-9.54L12 4.995l-5.74 4.47 5.74 4.47 5.74-4.47z"
+        data-testid="eds-icon-path"
+        fill-rule="evenodd"
+        height="24"
+      />
+    </svg>
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </button>
+</div>
+`;
+
+exports[`test 'layers' button test with no layers present 1`] = `null`;

package/src/components/settings/__snapshots__/NumericInput.test.tsx.snap

@@ -0,0 +1,123 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Numeric Input snapshot test 1`] = `
+.c2 {
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: var(--eds_ui_background__light,rgba(247,247,247,1));
+  padding-left: 8px;
+  padding-top: 6px;
+  padding-right: 8px;
+  padding-bottom: 6px;
+  margin: 0;
+  color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
+  font-family: Equinor;
+  font-size: 1.000rem;
+  font-weight: 400;
+  line-height: 1.500em;
+  -webkit-letter-spacing: 0.025em;
+  -moz-letter-spacing: 0.025em;
+  -ms-letter-spacing: 0.025em;
+  letter-spacing: 0.025em;
+  text-align: left;
+  border: none;
+  outline: 1px solid transparent;
+  outline-offset: 0px;
+  box-shadow: inset 0px -1px 0px 0px var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+}
+
+.c2:active,
+.c2:focus {
+  outline-offset: 0;
+  box-shadow: none;
+  outline: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1));
+  outline-offset: 0px;
+}
+
+.c2:disabled {
+  cursor: not-allowed;
+  box-shadow: none;
+  outline: none;
+}
+
+.c2:disabled:focus,
+.c2:disabled:active {
+  outline: none;
+}
+
+.c2::-webkit-input-placeholder {
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+}
+
+.c2::-moz-placeholder {
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+}
+
+.c2:-ms-input-placeholder {
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+}
+
+.c2::placeholder {
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+}
+
+.c2:disabled {
+  color: var(--eds_interactive__disabled__text,rgba(190,190,190,1));
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  position: relative;
+  margin: 0;
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  font-family: Equinor;
+  font-size: 0.750rem;
+  font-weight: 500;
+  line-height: 1.333em;
+  text-align: left;
+  margin-left: 8px;
+  margin-right: 8px;
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+}
+
+.c1 {
+  margin: 0;
+}
+
+<div
+  style="display: flex; justify-content: space-between;"
+>
+  <label
+    class="c0"
+    id="Trajectory thickness-input-label"
+    style="padding-top: 5px; padding-bottom: 5px; font-size: 15px;"
+  >
+    <span
+      class="c1"
+    >
+      Trajectory thickness
+    </span>
+  </label>
+  <input
+    class="c2"
+    id="Trajectory thickness-input"
+    min="0"
+    step="1"
+    style="font-size: 15px; text-align: right; width: 3rem;"
+    type="number"
+    value="15"
+  />
+</div>
+`;

package/src/components/settings/__snapshots__/SliderInput.test.tsx.snap

@@ -0,0 +1,244 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Slider Input snapshot test 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  position: relative;
+  margin: 0;
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  font-family: Equinor;
+  font-size: 0.750rem;
+  font-weight: 500;
+  line-height: 1.333em;
+  text-align: left;
+  margin-left: 8px;
+  margin-right: 8px;
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+}
+
+.c1 {
+  margin: 0;
+}
+
+.c4 {
+  --val: 5000;
+  --realWidth: calc(100% - 12px);
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  font-family: Equinor;
+  font-size: 0.625rem;
+  font-weight: 500;
+  line-height: 1.600em;
+  -webkit-letter-spacing: 0.069em;
+  -moz-letter-spacing: 0.069em;
+  -ms-letter-spacing: 0.069em;
+  letter-spacing: 0.069em;
+  text-transform: uppercase;
+  text-align: left;
+  background: var(--eds_ui_background__default,rgba(255,255,255,1));
+  padding: 0 5px;
+  top: 24px;
+  pointer-events: none;
+  margin-left: calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));
+  -webkit-transform: translate(calc(-1 * calc(var(--realWidth) / 2)));
+  -ms-transform: translate(calc(-1 * calc(var(--realWidth) / 2)));
+  transform: translate(calc(-1 * calc(var(--realWidth) / 2)));
+  grid-row: 2;
+  grid-column: 1 / -1;
+}
+
+.c3 {
+  width: 100%;
+  background: transparent;
+  background: none;
+  grid-column: 1 / -1;
+  grid-row: 2;
+  font: inherit;
+  margin: 0;
+  z-index: 2;
+  outline: none;
+}
+
+.c3::-webkit-slider-runnable-track,
+.c3::-webkit-slider-thumb,
+.c3 {
+  -webkit-appearance: none;
+}
+
+.c3::-moz-focus-outer {
+  border: 0;
+}
+
+.c3[data-focus-visible-added]:focus {
+  z-index: 2;
+}
+
+.c3[data-focus-visible-added]:focus::-webkit-slider-thumb {
+  outline: 1px dashed var(--eds_interactive__focus,rgba(0,112,121,1));
+  outline-offset: 2px;
+}
+
+.c3[data-focus-visible-added]:focus::-moz-range-thumb {
+  outline: 1px dashed var(--eds_interactive__focus,rgba(0,112,121,1));
+  outline-offset: 2px;
+}
+
+.c3:hover::-webkit-slider-thumb,
+.c3:active::-webkit-slider-thumb {
+  box-shadow: 0px 0px 0px 6px var(--eds_interactive_primary__hover_alt,rgba(222,237,238,1));
+  border-color: var(--eds_interactive_primary__hover,rgba(0,79,85,1));
+}
+
+.c3:hover::-moz-range-thumb,
+.c3:active::-moz-range-thumb {
+  box-shadow: 0px 0px 0px 6px var(--eds_interactive_primary__hover_alt,rgba(222,237,238,1));
+  border-color: var(--eds_interactive_primary__hover,rgba(0,79,85,1));
+}
+
+.c3:disabled::-webkit-slider-thumb {
+  background-color: var(--eds_interactive__disabled__fill,rgba(234,234,234,1));
+  border-color: var(--eds_ui_background__medium,rgba(220,220,220,1));
+}
+
+.c3:disabled::-moz-range-thumb {
+  background-color: var(--eds_interactive__disabled__fill,rgba(234,234,234,1));
+  border-color: var(--eds_ui_background__medium,rgba(220,220,220,1));
+}
+
+.c3:disabled:hover::-webkit-slider-thumb,
+.c3:disabled:active::-webkit-slider-thumb {
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.c3:disabled:hover::-moz-range-thumb,
+.c3:disabled:active::-moz-range-thumb {
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.c3:disabled:hover::-webkit-slider-runnable-track,
+.c3:disabled:active::-webkit-slider-runnable-track {
+  cursor: not-allowed;
+}
+
+.c3:disabled:hover::-moz-range-track,
+.c3:disabled:active::-moz-range-track {
+  cursor: not-allowed;
+}
+
+.c3:after {
+  right: 0;
+}
+
+.c3::-webkit-slider-thumb {
+  border: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1));
+  border-radius: 50%;
+  height: 12px;
+  width: 12px;
+  background: var(--eds_ui_background__default,rgba(255,255,255,1));
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+  margin-top: 6px;
+}
+
+.c3::-moz-range-thumb {
+  border: 2px solid var(--eds_interactive_primary__resting,rgba(0,112,121,1));
+  border-radius: 50%;
+  height: 12px;
+  width: 12px;
+  background: var(--eds_ui_background__default,rgba(255,255,255,1));
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+  height: 8px;
+  width: 8px;
+}
+
+.c3::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  background: none;
+}
+
+.c3::-moz-range-track {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  background: none;
+}
+
+.c2 {
+  --min: 0;
+  --max: 100;
+  --dif: calc(var(--max) - var(--min));
+  --value: 5000;
+  --realWidth: calc(100% - 12px);
+  display: grid;
+  grid-template-rows: max-content 24px;
+  grid-template-columns: 1fr 1fr;
+  width: 100%;
+  position: relative;
+  background-image: url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='var(--eds_ui_background__light, rgba(247, 247, 247, 1))' width='100%' height='4' rx='2' /></svg>");background-size:cover;background-repeat:no-repeat;} .c2::after{grid-column:1 / span 2;grid-row:2;height:4px;margin-bottom:9px;-webkit-align-self:end;-ms-flex-item-align:end;align-self:end;content:'';background:var(--eds_interactive_primary__resting,rgba(0,112,121,1));} .c2::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;} .c2:hover:not([disabled]){background-image:url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='var(--eds_ui_background__medium, rgba(220, 220, 220, 1))' width='100%' height='4' rx='2' /></svg>");
+}
+
+.c2:hover:not([disabled])::after {
+  background: var(--eds_interactive_primary__hover,rgba(0,79,85,1));
+}
+
+<div
+  style="display: flex; justify-content: space-between;"
+>
+  <label
+    class="c0"
+    id="Opacity-slider-label"
+    style="padding-top: 5px; font-size: 15px;"
+  >
+    <span
+      class="c1"
+    >
+      Opacity
+    </span>
+  </label>
+  <div
+    class="c2"
+    id="Opacity-slider"
+    max="100"
+    min="0"
+    style="padding-top: 5px; padding-right: 10px; padding-bottom: 25px; width: 3rem;"
+    value="5000"
+  >
+    <input
+      aria-labelledby="Opacity-slider-label"
+      class="c3"
+      id="Opacity-slider-label-thumb"
+      max="100"
+      min="0"
+      step="2"
+      type="range"
+      value="5000"
+    />
+    <output
+      class="c4"
+      for="Opacity-slider-label-thumb"
+      value="5000"
+    >
+      5000
+    </output>
+  </div>
+</div>
+`;