ReconUI/index.html at main · AvoinGLAM/ReconUI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eka</title>
</head>
<body>
    <div class="container">
        <div class="section-2">
            <div id="controls" class="controls">
                <button id="prevButton" title="Previous">❮</button>
                <button id="nextButton" title="Next">❯</button>
                <div class="search-wrapper">
                    <input type="search" id="searchInput" placeholder="Search...">
                    <button id="searchButton" class="search-submit-btn">Search</button>
                </div>
                <button id="newItemButton">New item</button>
            </div>
            <div>
                <button id="settingsButton" title="Settings">Settings</button>
            </div>
        </div>

        <div class="content">
            <div class="left-pane">
                <div class="itemList" id="itemList">
                    <div class="introduction-help">
                        <h2>Introduction</h2>
                        <p>Welcome to <strong>Eka</strong> – the Wikidata reconciliation app!</p>
                        <p>Explore various ways to display Wikidata reconciliation candidates using rich data from different sources.</p>
                        <p>Currently, you can enter a search term and receive results from Wikidata's Action API via SPARQL. You can view each candidate in all Wikimedia projects and on the map. Other interfaces are not available for the time being.</p>
                        <p><strong>You cannot match data for real yet.</strong></p>
                        <p>Eka will work with a spreadsheet, read the items to be reconciled, and return the matched Wikidata item's QID. Different search scenarios can also be developed, for example based on coordinates, authority ids or images, or using AI to find probable matches – and combinations of these.</p>
                        <p>Give it a try and <a href="https://github.com/AvoinGLAM/ReconUI/issues" target="_blank">share your feedback</a>!</p>
                        <h3>Help</h3>
                        <p>To start searching, follow these steps:</p>
                        <ul>
                            <li>Type a search term in the input box above and hit "Submit" or press "Enter".</li>
                            <li>Select a candidate to explore it in the two frames.</li>
                        </ul>
                    </div>
                </div>
                <div class="load-more-container">
                    <button id="loadMoreButton">Load more</button>
                </div>
            </div>
            <div class="right-pane">
                <div class="component" id="leftcomponent">
                    <div class="component-header">
                        <div class="component-header-top">
                            <select id="viewTypeSelect">
                                <option value="viewWikimedia" selected>Wikimedia site</option>
                                <option value="viewWebData">Authority file via Wikidata</option>
                                <option value="viewWikidataUrls">Wikidata URLs</option>
                                <option value="viewWikidocumentaries">Wikidocumentaries</option>
                                <option value="viewWebPage">Web page from spreadsheet</option>
                                <option value="compareCoordinates">Compare coordinates</option>
                                <option value="compareProperties">Compare properties</option>
                            </select>
                        </div>
                        <div class="component-header-bottom">
                            <div class="row">
                                <select id="projectSelect" style="display: none;"></select>
                                <select id="languageSelect" style="display: none;"></select>
                                <select id="authoritySelect" style="display: none;"></select>
                            </div>
                            <div class="row">
                                <a id="projectUrl" href="#" target="_blank" style="display: none;">Simple text</a>
                            </div>
                        </div>
                    </div>
                    <div class="component-body">
                        <iframe id="projectIframe" style="width: 100%; height: 100%; border: none;"></iframe>
                    </div>
                </div>
                <div class="component" id="rightcomponent">
                    <div class="component-header">
                        <div class="component-header-top">
                            <select>
                                <option value="viewWebPage">View web page</option>
                                <option value="viewWikimedia">View Wikimedia site</option>
                                <option value="compareCoordinates" selected>Compare coordinates</option>
                                <option value="viewProperties">View properties</option>
                                <option value="reconciliationSettings">Reconciliation settings</option>
                                <option value="mentions">Mentions in Wikipedia articles</option>
                            </select>
                        </div>
                        <div class="component-header-bottom">
                            <div class="row"></div>
                        </div>
                    </div>
                    <div class="component-body">
                        <div id="map" style="width: 100%; height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="templates.js" defer></script>
    <script src="script.js" defer></script>
    <script>
  window.addEventListener('DOMContentLoaded', () => {
    // 1. Get the parameters from the URL
    const urlParams = new URLSearchParams(window.location.search);
    const searchTerm = urlParams.get('query');

    if (searchTerm) {
      console.log("Deep Dive for:", searchTerm);

      const inputField = document.getElementById('searchInput');
      const searchButton = document.getElementById('searchButton');

      if (inputField && searchButton) {
        // Use a slight timeout to ensure your search handlers in script.js are attached
        setTimeout(() => {
          inputField.value = searchTerm;
          searchButton.click();
        }, 300);
      }
    }
  });
</script>
</body>
</html>