Merge pull request #149 from ndsev/search-interface

Add search history and UI changes

.github/workflows/build-release.yml

@@ -21,6 +21,9 @@ jobs:
           cache: "npm"
           cache-dependency-path: package-lock.json
 
+      - name: Install build dependencies
+        run: sudo apt-get install ninja-build
+
       - name: Install npm dependencies
         run: npm -g install --force --include=dev
 

CMakeLists.txt

@@ -24,23 +24,14 @@ FetchContent_Declare(mapget
   GIT_SHALLOW    ON)
 FetchContent_MakeAvailable(mapget)
 
-set(CESIUM_TESTS_ENABLED OFF)
-set(CESIUM_GLM_STRICT_ENABLED OFF)
-set(CESIUM_TRACING_ENABLED OFF)
-set(DRACO_JS_GLUE OFF CACHE BOOL "Disable JS glue for Draco" FORCE)
-FetchContent_Declare(
-  cesiumnative
-  GIT_REPOSITORY https://github.com/Klebert-Engineering/cesium-native.git
-  GIT_TAG "spdlog-upgrade"
-  GIT_SHALLOW ON)
-FetchContent_MakeAvailable(cesiumnative)
-
 FetchContent_Declare(yaml-cpp
   GIT_REPOSITORY "https://github.com/jbeder/yaml-cpp.git"
   GIT_TAG        "yaml-cpp-0.7.0"
   GIT_SHALLOW    ON)
 FetchContent_MakeAvailable(yaml-cpp)
 
+include(cmake/cesium.cmake)
+
 # Erdblick Core Library
 
 add_subdirectory(libs/core)

CMakePresets.json

@@ -0,0 +1,46 @@
+{
+    "version": 4,
+    "configurePresets": [
+        {
+            "name": "common",
+            "hidden": true,
+            "generator": "Ninja",
+            "binaryDir": "build",
+            "cacheVariables": {
+                "CMAKE_EXPORT_COMPILE_COMMANDS": "ON",
+                "BUILD_SHARED_LIBS": "OFF"
+            }
+        },
+        {
+            "name": "debug",
+            "inherits": "common",
+            "displayName": "Debug",
+            "cacheVariables": {
+                "CMAKE_BUILD_TYPE": "Debug"
+            }
+        },
+        {
+            "name": "release",
+            "inherits": "common",
+            "displayName": "Release",
+            "cacheVariables": {
+                "CMAKE_BUILD_TYPE": "Release"
+            }
+        }
+    ],
+    "buildPresets": [
+        {
+            "name": "debug",
+            "configurePreset": "debug",
+            "displayName": "Debug",
+            "environment": {
+                "NG_DEVELOP": "TRUE"
+            }
+        },
+        {
+            "name": "release",
+            "configurePreset": "release",
+            "displayName": "Release"
+        }
+    ]
+}

README.md

@@ -151,6 +151,18 @@ cities and roads. The label text is dynamically generated from the feature's nam
 attribute. The labels are styled with a white fill color, a black outline, and are
 scaled up by a factor of 1.2 for better visibility.
 
+### Style Options
+
+In addition to the `rules` section, a style sheet may have a top-level `options` key.
+Under this key, variables may be defined for the style sheet which can be controlled
+by the user. Each `option` entry may have the following fields:
+
+* `label`: UI label for the control to change the option value.
+* `id`: Simfil variable name, under which the current option value will be available in
+   different style rule expressions, e.g. `filter` or `color-expression` etc.
+* `type`: Data type for the option variable. Both the default and currently the only allowed value is `bool`, which will be shown to the user as a checkbox.
+* `default`: Default value for the option.
+
 ### Relation Styling
 
 In Erdblick, relation styling is used to visualize relationships between different features.

ci/10_linux_build.bash

@@ -7,11 +7,14 @@ source "$ci_dir/emsdk/emsdk_env.sh"
 cd "$ci_dir/.."
 
 export EMSCRIPTEN="$ci_dir/emsdk/upstream/emscripten"
-export PATH=$PATH:"$(pwd)/node_modules/.bin/"
+export PATH="$PATH:$(pwd)/node_modules/.bin/"
 
-rm -rf build && mkdir build
-cd build
-mkdir deps
-mkdir assets
-emcmake cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=OFF ..
-cmake --build . -- -j
+rm -rf build
+mkdir -p build
+mkdir -p build/deps
+mkdir -p build/assets
+
+CMAKE_PRESET="${1:-release}"
+
+emcmake cmake --preset "$CMAKE_PRESET"
+cmake --build --preset "$CMAKE_PRESET" -- -j"$(nproc)"

ci/20_linux_rebuild.bash

@@ -6,7 +6,10 @@ ci_dir="$(realpath ${BASH_SOURCE[0]} | xargs -I{} dirname {})"
 source "$ci_dir/emsdk/emsdk_env.sh"
 
 export EMSCRIPTEN="$ci_dir/emsdk/upstream/emscripten"
-export PATH=$PATH:"$ci_dir/../node_modules/.bin/"
+export PATH="$PATH:$ci_dir/../node_modules/.bin/"
 
-cd "$ci_dir/../build"
-cmake --build . -- -j
+cd "$ci_dir/.."
+
+CMAKE_PRESET="${1:-release}"
+
+cmake --build --preset "$CMAKE_PRESET" -- -j"$(nproc)"

cmake/cesium.cmake

@@ -0,0 +1,86 @@
+include(FetchContent)
+include(ExternalProject)
+
+block()
+
+if (NOT CMAKE_BUILD_TYPE)
+  message(FATAL_ERROR "Setting CMAKE_BUILD_TYPE is required!")
+endif()
+
+# List of cesium libs we want to expose as CMake targets
+set(CESIUM_LIBS
+  CesiumUtility
+  Cesium3DTilesWriter
+  CesiumGeospatial
+  CesiumGltf
+  CesiumGltfWriter)
+
+# Use fetch content for cloning the repository durring
+# configure phase. We do not call `FetchContent_MakeAvailable`,
+# but instead use `ExternalProject_Add` to compile Cesium in
+# isolation.
+FetchContent_Declare(cesiumnative_src
+  GIT_REPOSITORY "https://github.com/Klebert-Engineering/cesium-native.git"
+  GIT_TAG "main"
+  GIT_SUBMODULES_RECURSE YES
+  GIT_PROGRESS YES)
+
+FetchContent_GetProperties(cesiumnative_src)
+if (NOT cesiumnative_src_POPULATED)
+  FetchContent_Populate(cesiumnative_src)
+endif()
+
+# Cesium sets CMAKE_{DEBUG,RELEASE}_POSTFIX manually
+set(CMAKE_DEBUG_POSTFIX "d")
+set(CMAKE_RELEASE_POSTFIX "")
+
+# CMake uses some pre-, post- and suffix variables to decorate
+# library names with. We have to take them into account.
+if (${CMAKE_BUILD_TYPE} STREQUAL "Debug")
+  set(LIB_SUFFIX "${CMAKE_DEBUG_POSTFIX}${CMAKE_STATIC_LIBRARY_SUFFIX}")
+else()
+  set(LIB_SUFFIX "${CMAKE_RELEASE_POSTFIX}${CMAKE_STATIC_LIBRARY_SUFFIX}")
+endif()
+
+# Ninja generators _require_ a known list of byproducts.
+set(CESIUM_BYPRODUCTS "")
+foreach (lib ${CESIUM_LIBS})
+  list(APPEND CESIUM_BYPRODUCTS "<BINARY_DIR>/${lib}/${CMAKE_STATIC_LIBRARY_PREFIX}${lib}${LIB_SUFFIX}")
+endforeach()
+message(STATUS "cesium byproducts: ${CESIUM_BYPRODUCTS}")
+
+ExternalProject_Add(cesiumnative
+  SOURCE_DIR ${cesiumnative_src_SOURCE_DIR}
+  CMAKE_ARGS
+    -DCMAKE_CXX_FLAGS=${CMAKE_CXX_FLAGS}
+    -DCESIUM_TESTS_ENABLED=OFF
+    -DCESIUM_GLM_STRICT_ENABLED=OFF
+    -DCESIUM_TRACING_ENABLED=OFF
+    -DDRACO_JS_GLUE=OFF
+    -DBUILD_SHARED_LIBS=OFF
+    -DCMAKE_TOOLCHAIN_FILE=${CMAKE_TOOLCHAIN_FILE}
+    -DCMAKE_BUILD_TYPE=${CMAKE_BUILD_TYPE}
+  BUILD_BYPRODUCTS
+    ${CESIUM_BYPRODUCTS}
+  INSTALL_COMMAND ""
+  STEP_TARGETS build
+  USES_TERMINAL_CONFIGURE TRUE
+  USES_TERMINAL_BUILD TRUE)
+
+function (add_cesium_lib TARGET)
+  ExternalProject_Get_Property(cesiumnative
+    SOURCE_DIR BINARY_DIR)
+  message(STATUS "Adding Cesium library: ${TARGET} (${BINARY_DIR}/${TARGET}/${CMAKE_STATIC_LIBRARY_PREFIX}${TARGET}${LIB_SUFFIX})")
+
+  add_library(${TARGET} STATIC IMPORTED)
+  set_target_properties(${TARGET} PROPERTIES
+    IMPORTED_LOCATION "${BINARY_DIR}/${TARGET}/${CMAKE_STATIC_LIBRARY_PREFIX}${TARGET}${LIB_SUFFIX}"
+    INTERFACE_INCLUDE_DIRECTORIES "${SOURCE_DIR}/${TARGET}/include")
+  add_dependencies(${TARGET} cesiumnative-build)
+endfunction()
+
+foreach (lib ${CESIUM_LIBS})
+  add_cesium_lib(${lib})
+endforeach()
+
+endblock()

erdblick_app/app/app.module.ts

@@ -21,7 +21,7 @@ import {MessageService} from "primeng/api";
 import {InputNumberModule} from "primeng/inputnumber";
 import {FieldsetModule} from "primeng/fieldset";
 import {AlertDialogComponent, InfoMessageService} from "./info.service";
-import {SearchPanelComponent} from "./search.panel.component";
+import {EnterSelectDirective, SearchPanelComponent} from "./search.panel.component";
 import {JumpTargetService} from "./jump.service";
 import {MapService} from "./map.service";
 import {InputSwitchModule} from "primeng/inputswitch";
@@ -50,6 +50,8 @@ import {FeatureSearchService} from "./feature.search.service";
 import {ClipboardService} from "./clipboard.service";
 import {MultiSelectModule} from "primeng/multiselect";
 import {InputTextareaModule} from "primeng/inputtextarea";
+import {FloatLabelModule} from "primeng/floatlabel";
+import {TabViewModule} from "primeng/tabview";
 
 export function initializeServices(styleService: StyleService, mapService: MapService, coordService: CoordinatesService) {
     return async () => {
@@ -71,7 +73,8 @@ export function initializeServices(styleService: StyleService, mapService: MapSe
         ErdblickViewComponent,
         CoordinatesPanelComponent,
         FeatureSearchComponent,
-        AlertDialogComponent
+        AlertDialogComponent,
+        EnterSelectDirective
     ],
     imports: [
         BrowserModule,
@@ -102,7 +105,9 @@ export function initializeServices(styleService: StyleService, mapService: MapSe
         ColorPickerModule,
         ListboxModule,
         MultiSelectModule,
-        InputTextareaModule
+        InputTextareaModule,
+        FloatLabelModule,
+        TabViewModule
     ],
     providers: [
         {

erdblick_app/app/debugapi.component.ts

@@ -75,9 +75,10 @@ export class ErdblickDebugApi {
             id: "_builtin",
             modified: false,
             imported: false,
-            enabled: true,
-            data: "",
-            featureLayerStyle: style
+            params: {visible: true, options: {}, showOptions: true},
+            source: "",
+            featureLayerStyle: style,
+            options: []
         }, "_builtin", true);
     }
 }

erdblick_app/app/editor.component.ts

@@ -97,7 +97,7 @@ export class EditorComponent implements AfterViewInit, OnDestroy {
     @ViewChild('editor') private editorRef!: ElementRef;
 
     private editorView?: EditorView;
-    private styleData: string = "";
+    private styleSource: string = "";
 
     constructor(public styleService: StyleService,
                 public renderer: Renderer2) {}
@@ -118,13 +118,13 @@ export class EditorComponent implements AfterViewInit, OnDestroy {
     }
 
     createEditorState(styleId: string) {
-        if (this.styleService.styleData.has(styleId)) {
-            this.styleData = `${this.styleService.styleData.get(styleId)!.data}\n\n\n\n\n`;
+        if (this.styleService.styles.has(styleId)) {
+            this.styleSource = `${this.styleService.styles.get(styleId)!.source}\n\n\n\n\n`;
         } else {
-            this.styleData = "";
+            this.styleSource = "";
         }
         return EditorState.create({
-            doc: this.styleData,
+            doc: this.styleSource,
             extensions: [
                 basicSetup,
                 yaml(),

erdblick_app/app/feature.search.component.ts

@@ -10,7 +10,8 @@ import {InfoMessageService} from "./info.service";
 @Component({
     selector: "feature-search",
     template: `
-        <p-dialog class="search-menu-dialog" header="Search Loaded Features" [(visible)]="isPanelVisible" style="padding: 0 0.5em 0.5em 0.5em"
+        <p-dialog class="side-menu-dialog" header="Search Loaded Features" [(visible)]="isPanelVisible"
+                  style="padding: 0 0.5em 0.5em 0.5em"
                   [position]="'topleft'" [draggable]="false" [resizable]="false" (onHide)="searchService.clear()">
             <div class="feature-search-controls">
                 <div class="progress-bar-container">
@@ -20,7 +21,8 @@ import {InfoMessageService} from "./info.service";
                         </ng-template>
                     </p-progressBar>
                 </div>
-                <p-button (click)="pauseSearch()" [icon]="isSearchPaused ? 'pi pi-play-circle' : 'pi pi-pause-circle'" label="" 
+                <p-button (click)="pauseSearch()" [icon]="isSearchPaused ? 'pi pi-play-circle' : 'pi pi-pause-circle'"
+                          label=""
                           [disabled]="!canPauseStopSearch" tooltipPosition="bottom"
                           [pTooltip]="isSearchPaused ? 'Resume search' : 'Pause search'"></p-button>
                 <p-button (click)="stopSearch()" icon="pi pi-stop-circle" label="" [disabled]="!canPauseStopSearch"
@@ -47,7 +49,7 @@ import {InfoMessageService} from "./info.service";
             </p-accordion>
             <p-listbox class="results-listbox" [options]="placeholder" [(ngModel)]="selectedResult"
                        optionLabel="label" [virtualScroll]="true" [virtualScrollItemSize]="35"
-                       [multiple]="false" [metaKeySelection]="false" (onChange)="selectResult($event)" 
+                       [multiple]="false" [metaKeySelection]="false" (onChange)="selectResult($event)"
                        emptyMessage="No features matched." [scrollHeight]="'calc(100vh - 23em)'"
                        #listbox
             />

erdblick_app/app/inspection.panel.component.ts

@@ -17,7 +17,7 @@ interface Column {
     selector: 'inspection-panel',
     template: `
         <p-accordion *ngIf="inspectionService.featureTree.value.length && inspectionService.isInspectionPanelVisible"
-                     class="w-full inspect-panel" [activeIndex]="0">
+                     class="w-full inspect-panel" [activeIndex]="0" >
             <p-accordionTab>
                 <ng-template pTemplate="header">
                     <div class="flex align-items-center">

erdblick_app/app/inspection.service.ts

@@ -46,6 +46,7 @@ export class InspectionService {
                 public parametersService: ParametersService) {
 
         this.keyboardService.registerShortcut("Ctrl+j", this.zoomToFeature.bind(this));
+        this.keyboardService.registerShortcut("Ctrl+J", this.zoomToFeature.bind(this));
 
         this.mapService.selectionTopic.pipe(distinctUntilChanged()).subscribe(selectedFeature => {
             if (!selectedFeature) {

erdblick_app/app/jump.service.ts

@@ -9,6 +9,8 @@ import {FeatureSearchService} from "./feature.search.service";
 import {SidePanelService, SidePanelState} from "./sidepanel.service";
 
 export interface SearchTarget {
+    icon: string;
+    color: string;
     name: string;
     label: string;
     enabled: boolean;
@@ -90,6 +92,8 @@ export class JumpTargetService {
             label += `<br><span class="search-option-warning">${simfilError}</span>`;
         }
         return {
+            icon: "pi-bolt",
+            color: "blue",
             name: "Search Loaded Features",
             label: label,
             enabled: false,
@@ -113,6 +117,8 @@ export class JumpTargetService {
                     label += `<br><span class="search-option-warning">${fjt.error}</span>`;
                 }
                 return {
+                    icon: "pi-arrow-down-left-and-arrow-up-right-to-center",
+                    color: "orange",
                     name: `Jump to ${fjt.name}`,
                     label: label,
                     enabled: !fjt.error,